让 AI 会设计、会画图、会写文章：garden-skills 6 个生产级 Skills 完整上手指南

让 AI 会设计、会画图、会写文章garden-skills 6 个生产级 Skills 完整上手指南【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills你有没有过这种经历让 AI 写个落地页页面确实能用但一放出去就透着股 AI 味让它生成海报提示词全靠玄学多一个词少一个词结果天差地别想把一堆笔记整理成能分享的文章最后还是自己打开编辑器从头排版。garden-skills 就是冲着这些痛点来的它把网页设计、AI 生图、文章写作、视频演示、动效短片、本地知识库检索这六件事做成了可以直接安装进 Claude Code、Cursor、Codex 等 AI 助手的 Skills——MIT 协议开源装完即用不用写一行配置。项目速览60 秒看清这个技能文件夹能干什么一个 Skill 就是一个自包含的文件夹核心是一份SKILL.md告诉 AI 何时启用、按什么流程干活再配上按需加载的references/参考手册和确定性的scripts/脚本。AI 助手扫描到你的工作区里有这些文件夹会读取开头的描述自动判断这项技能该不该上场。garden-skills 目前收录 6 个生产级技能全貌如下技能一句话能力入口web-design-engineer产出有设计判断的前端页面与原型skills/web-design-engineer/gpt-image-2结构化模板驱动 AI 生图 / 改图skills/gpt-image-2/beautiful-article任意素材 → 可分享的单文件 HTML 文章skills/beautiful-article/web-video-presentation口播稿 / 长文 → 1920×1080 网页演示skills/web-video-presentation/motion-showreel代码逐帧渲染的 MP4 动效短片skills/motion-showreel/kb-retriever本地知识库分层检索答案带来源skills/kb-retriever/下面不按技能逐个报功能而是按你实际会用到的三个场景来讲。场景一要出视觉——网页和图都能直接交付问题AI 做前端最大的尴尬是能用但土做图最大的尴尬是提示词靠感觉。怎么做到web-design-engineer把 Agent 当成设计工程师来约束。它内置25 套锚定风格配方Linear、Aesop、MUJI、Stripe Press、Bloomberg、包豪斯等每套都写死了配色、字体、招牌手法和反模式清单全部收录在 references/style-recipes/INDEX.md。你说一句按 Linear 风格做个落地页它就去读对应配方先校准视觉变化度、动效强度、信息密度、素材依赖、品牌保真度 5 个设计维度再动手构建最后自查验收。仓库里的 demo/web-design-demo/ 放着同一需求无技能 vs 有技能的两版页面可以直接对比。生图这边gpt-image-2把海报、UI 样机、产品图、信息图、学术插图、技术架构图、漫画分镜等18 大类场景沉淀成了 80 个结构化提示词模板目录见 skills/gpt-image-2/references/。它每次任务先做环境探测然后在三档模式里挑当前最优解配好 API Key 就本地直出并存档宿主自带画图工具就退化为提示词工程师委托宿主出图什么画图工具都没有就纯写高质量 prompt。效果页面从看起来是 AI 做的变成看起来是团队做的生图从抽卡变成流水线。场景二要让内容流转——素材变文章文章变视频 ✍️问题内容创作者最费时间的两件事——把杂料整理成读得下去的文章再把文章变成能发的视频。怎么做到beautiful-article丢给它 URL、PDF、DOCX、截图甚至粘贴的笔记它会走完解析素材 → 编辑规划 → 双确认 → 生成 → 终审修复的完整编辑流程中间在 3 个硬 checkpoint 停下来等你确认文章类型、主题、版式绝不静默替你做决定。内置 10 种文章类型长文、教程、简报、评测、视觉随笔……和 11 套编辑主题tufte、press、bayer、vignelli等产出单文件 HTML可离线打开、方便分享还能可选导出 PDF。web-video-presentation有口播稿或长文它可以生成点击/键盘驱动的 16:9 网页演示固定 1920×1080 舞台保证录屏画面稳定内置 23 套主题蓝图、瑞士风、终端绿、粉笔花园……TTS 可插拔——内置 MiniMax 和 OpenAI 两个 provider合成口播音频后直接录屏B 站 / YouTube 教程、产品发布会 demo 一次搞定。motion-showreel如果你要的不是录屏而是真正的 MP4 动效短片用它。它用render(t)逐帧渲染页面画面和声音共用一张时间表内置 43 种风格水墨、国潮、软萌 3D、像素游戏……口播用你的原稿 TTS成品同时给 MP4 和可编辑源码。效果一篇口播稿的完整内容管线——文章、网页演示、动效视频——全部由同一个 AI 助手按各自的专业流程交付。场景三要查资料——本地知识库不炸上下文 问题让 AI 直接读你本地的知识库轻则 token 爆炸重则它蛮力硬啃 PDF、Excel 读出错误答案。怎么做到kb-retriever的检索哲学是谨慎、渐进、可溯源。它不整文件塞进上下文而是先通过分层data_structure.md索引导航知识库、缩小候选范围再进入内容检索对 PDF 和 Excel 强制执行先学习再处理必须先读内置的 references/ 参考文档检索阶段组合关键词、局部窗口读取、同义词扩展和多轮迭代且最多 5 轮——探索过程有边界。每个答案都会标注来源。效果哪怕knowledge/目录里 Markdown、PDF、Excel 混排了一堆回答依然带出处、token 消耗稳定。上手指南3 条命令装进你的工作流 最快的方式是用社区标准的skillsCLI它会自动识别你正在用的 AI 助手并把技能放到正确的目录# 一次装齐全部技能 npx skills add ConardLi/garden-skills # 只装某一个 npx skills add ConardLi/garden-skills -s web-design-engineer想顺便研究或魔改技能源码就 clone 后手动拷贝到项目里git clone https://gitcode.com/GitHub_Trending/we/garden-skills然后把skills/技能名拷进.claude/skills/Cursor 等通用 Agent 放.agents/skills/。CI 或生产环境想要版本永不漂移还可以从 Releases 下载带 SHA-256 校验的钉版本.zip版本管理细节见 安装章节。装好后 AI 助手下次扫描工作区时会自动发现技能无需额外配置。最后说点什么装一个试试然后给它提个建议这个项目值得留意的地方不在于又一批提示词打包而在于每个技能都有manifest、版本号和配套的 scripts/release/ 发布打包脚本跨 Claude Code / Cursor / Codex / Gemini CLI 等主流助手均已适配中文文档齐全README.zh-CN.md。设计师的风格配方、写作者的文章类型、检索的分层规则原本是个人经验里的手感现在它们被拆成了可安装、可钉版本、可校验的文件夹——你不需要成为资深设计师或提示词高手助手装上之后就能按专业流程交付。今晚就可以做一件具体的事装一个web-design-engineer让 AI 按你喜欢的风格做一个页面对比一下它裸奔时的水平。用顺手之后如果你有自己攒下的手艺维护者指南 CONTRIBUTING.zh-CN.md 也欢迎你把新技能提进来。【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考