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

【免费下载链接】garden-skillsConardLi's 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 个生产级技能，全貌如下：

下面不按技能逐个报功能，而是按你实际会用到的三个场景来讲。

场景一：要出视觉——网页和图都能直接交付

问题：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-skillsConardLi's open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skills