尧图网页设计 
一张图看懂Garden Skills最适合新手的项目介绍【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skillsGarden Skills是由 ConardLi 维护的开源AI Agent Skills 集合面向 Claude Code、Cursor、Codex 等支持SKILL.md格式的 AI 编程助手。它把网页设计、AI 绘图、视频演示、精美文章、知识库检索等 5 大专业能力打包成技能卡片一条命令即可安装使用——不需要你编写复杂的 Prompt。先搞懂Skill 到底是什么把 Skill 理解为你递给 AI 的职业手册卡一个自包含的文件夹核心是一份SKILL.md描述什么时候用 怎么用Agent 会根据描述自主决定是否激活这个技能。skill-name/ ├── SKILL.md ← 必需什么时候用 怎么用 ├── README.md ← 给人看的文档 ├── references/ ← 可选Agent 按需加载的扩展文档 ├── scripts/ ← 可选确定性的可执行代码 └── assets/ ← 可选模板、字体、图标等素材对新手来说这意味着你只用说需求AI 会自动翻出对应技能按专业流程干活并会在关键节点停下来让你确认不会静默乱来。一张图看懂Garden Skills 的 5 个技能skills/ —— 5 个开箱即用的 AI 技能 ├── web-video-presentation 文章/口播稿 → 16:9 网页视频演示23 套主题 ├── web-design-engineer 网页设计/前端25 套大师风格配方 ├── ️ gpt-image-2 AI 图像生成与编辑18 大类 80 提示词模板 ├── beautiful-article 任意素材 → 精美单文件 HTML 文章11 套主题 └── kb-retriever 本地知识库检索问答MD / PDF / Excel技能一句话介绍最适合场景 web-video-presentation把文章变成点击驱动的 16:9 网页演示可合成口播音频录屏教程、B 站 / YouTube 内容、产品 demo web-design-engineer把能用的页面升级为精致、克制的设计落地页、仪表盘、UI 样机、数据可视化️ gpt-image-2图像生成/编辑自动适配你的环境出图海报、UI 样机、信息图、学术图、漫画 beautiful-article把 URL/PDF/DOCX 编辑成比原文更易读的精美文章长文、briefing、教程、复盘归档 kb-retriever分层索引 渐进检索答案带来源可溯源从本地knowledge/目录查资料、问问题 web-video-presentation文章变视频固定 1920×1080 舞台按视口缩放每次点击推进口播稿的一个节拍每屏独占整屏进度条悬浮才出现——录屏画面干净稳定。内置 23 套设计签名各异的 主题支持可插拔 TTS 合成口播音频。详见 skills/web-video-presentation/README.zh-CN.md。 web-design-engineer设计水准拉满它把 Agent 当作设计工程师来约束先理解产品上下文再声明设计系统尽早展示 v0 再完整构建验证。内置 6 学派设计方向顾问和 25 套风格配方Linear、Aesop、Pentagram、Bloomberg、瑞士国际主义等每套都带可直接套用的配色、字体与反 AI 俗套清单。️ gpt-image-2三种模式自适应每次任务先自动探测运行模式Mode A本地直接出图、Mode B委托宿主 Agent 的图像工具、Mode C退化为纯提示词顾问——所以无论你的环境有没有图像能力都能用。模板按 18 大类分层组织在 skills/gpt-image-2/references/覆盖海报、UI 样机、信息图、学术图、分镜等场景。 beautiful-article素材变精美文章走source → plan → 双确认 → 生成 → 终审 → 修复的小型流程并在 3 个硬 checkpoint 停下来让你逐项确认文章类型 / 主题 / 版式 / 封面 / 交付格式。提供 10 种文章类型和 11 套主题 authoring profile最终产出可离线打开、便于分享的自包含 HTML 文件可选 PDF。 kb-retriever把 AI 接进你的知识库核心原则是谨慎、渐进、可溯源先通过分层data_structure.md索引导航缩小范围再组合关键词检索 局部窗口读取最多 5 轮迭代答案必带来源。遇到 PDF / Excel 会强制先学习再处理处理规范见 skills/kb-retriever/references/pdf_reading.md。新手最快上手一条命令安装最快、跨 Agent 通用的方式是skillsCLI它会自动识别你正在用的 Agent 并把 Skill 放到正确目录# 一次装上全部 5 个 Skill npx skills add ConardLi/garden-skills # 只装某一个例如网页设计 npx skills add ConardLi/garden-skills -s web-design-engineer仓库共提供 5 种安装方式可按需选择完整命令见 README.zh-CN.md 的安装章节方式适合场景能钉版本A.skillsCLInpx任意 Agent一行命令✅B. Claude Code 插件市场Claude Code 用户按包订阅✅C. Releases 钉版本 .zipCI / 内网 / 可复现安装✅✅D. 手动拷贝本地魔改、二次开发❌E. Git Submodule嵌入大项目随上游升级✅支持哪些 AI 助手SKILL.md格式本身是可移植的——只要 Agent 支持 Skill 体系把文件夹放进它扫描的目录即可。已验证兼容✅Claude Code.claude/skills/或插件市场✅Claude.ai网页端✅Cursor.agents/skills/✅Codex CLI、Gemini CLI、OpenCode效果眼见为实看看 Demo 对比web-design-engineer的效果可以直接在仓库里对比——同一个需求无技能和带技能两份产出并排放在一起基础版demo/web-design-demo/demo1.html带技能版demo/web-design-demo/demo1-with-skill.html另外仓库还内置了两个完整示例站点视频演示站、GPT Image 2 案例站源码分别在 website/web-design-website/ 和 website/gpt-image2-website/。新手 3 个常见疑问Q1需要会编程吗不需要。你用自然语言提需求即可技能负责按专业流程执行并在关键 checkpoint 停下来等你确认。Q2需要提前配 API Key 吗web-video-presentation、web-design-engineer、beautiful-article、kb-retriever主要依赖本地运行gpt-image-2在本地出图模式Mode A下才需要OPENAI_API_KEY没有也能走 Mode B / C。Q3怎么更新npx skills update全部升级npx skills list查看已安装内容。总结Garden Skills 的本质是把 5 类高频创作任务的最佳实践沉淀成 AI 能直接执行的技能。对新手建议路径是用npx skills add ConardLi/garden-skills一条命令装好先玩web-design-engineer门槛最低、效果最直观按需解锁其余技能深入细节再看各 Skill 的 SKILL.md 与中文文档项目采用 MIT 协议开源欢迎阅读 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），仅供参考 一张图看懂Garden Skills：最适合新手的项目介绍
一张图看懂Garden Skills最适合新手的项目介绍【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址: https://gitcode.com/GitHub_Trending/we/garden-skillsGarden Skills是由 ConardLi 维护的开源AI Agent Skills 集合面向 Claude Code、Cursor、Codex 等支持SKILL.md格式的 AI 编程助手。它把网页设计、AI 绘图、视频演示、精美文章、知识库检索等 5 大专业能力打包成技能卡片一条命令即可安装使用——不需要你编写复杂的 Prompt。先搞懂Skill 到底是什么把 Skill 理解为你递给 AI 的职业手册卡一个自包含的文件夹核心是一份SKILL.md描述什么时候用 怎么用Agent 会根据描述自主决定是否激活这个技能。skill-name/ ├── SKILL.md ← 必需什么时候用 怎么用 ├── README.md ← 给人看的文档 ├── references/ ← 可选Agent 按需加载的扩展文档 ├── scripts/ ← 可选确定性的可执行代码 └── assets/ ← 可选模板、字体、图标等素材对新手来说这意味着你只用说需求AI 会自动翻出对应技能按专业流程干活并会在关键节点停下来让你确认不会静默乱来。一张图看懂Garden Skills 的 5 个技能skills/ —— 5 个开箱即用的 AI 技能 ├── web-video-presentation 文章/口播稿 → 16:9 网页视频演示23 套主题 ├── web-design-engineer 网页设计/前端25 套大师风格配方 ├── ️ gpt-image-2 AI 图像生成与编辑18 大类 80 提示词模板 ├── beautiful-article 任意素材 → 精美单文件 HTML 文章11 套主题 └── kb-retriever 本地知识库检索问答MD / PDF / Excel技能一句话介绍最适合场景 web-video-presentation把文章变成点击驱动的 16:9 网页演示可合成口播音频录屏教程、B 站 / YouTube 内容、产品 demo web-design-engineer把能用的页面升级为精致、克制的设计落地页、仪表盘、UI 样机、数据可视化️ gpt-image-2图像生成/编辑自动适配你的环境出图海报、UI 样机、信息图、学术图、漫画 beautiful-article把 URL/PDF/DOCX 编辑成比原文更易读的精美文章长文、briefing、教程、复盘归档 kb-retriever分层索引 渐进检索答案带来源可溯源从本地knowledge/目录查资料、问问题 web-video-presentation文章变视频固定 1920×1080 舞台按视口缩放每次点击推进口播稿的一个节拍每屏独占整屏进度条悬浮才出现——录屏画面干净稳定。内置 23 套设计签名各异的 主题支持可插拔 TTS 合成口播音频。详见 skills/web-video-presentation/README.zh-CN.md。 web-design-engineer设计水准拉满它把 Agent 当作设计工程师来约束先理解产品上下文再声明设计系统尽早展示 v0 再完整构建验证。内置 6 学派设计方向顾问和 25 套风格配方Linear、Aesop、Pentagram、Bloomberg、瑞士国际主义等每套都带可直接套用的配色、字体与反 AI 俗套清单。️ gpt-image-2三种模式自适应每次任务先自动探测运行模式Mode A本地直接出图、Mode B委托宿主 Agent 的图像工具、Mode C退化为纯提示词顾问——所以无论你的环境有没有图像能力都能用。模板按 18 大类分层组织在 skills/gpt-image-2/references/覆盖海报、UI 样机、信息图、学术图、分镜等场景。 beautiful-article素材变精美文章走source → plan → 双确认 → 生成 → 终审 → 修复的小型流程并在 3 个硬 checkpoint 停下来让你逐项确认文章类型 / 主题 / 版式 / 封面 / 交付格式。提供 10 种文章类型和 11 套主题 authoring profile最终产出可离线打开、便于分享的自包含 HTML 文件可选 PDF。 kb-retriever把 AI 接进你的知识库核心原则是谨慎、渐进、可溯源先通过分层data_structure.md索引导航缩小范围再组合关键词检索 局部窗口读取最多 5 轮迭代答案必带来源。遇到 PDF / Excel 会强制先学习再处理处理规范见 skills/kb-retriever/references/pdf_reading.md。新手最快上手一条命令安装最快、跨 Agent 通用的方式是skillsCLI它会自动识别你正在用的 Agent 并把 Skill 放到正确目录# 一次装上全部 5 个 Skill npx skills add ConardLi/garden-skills # 只装某一个例如网页设计 npx skills add ConardLi/garden-skills -s web-design-engineer仓库共提供 5 种安装方式可按需选择完整命令见 README.zh-CN.md 的安装章节方式适合场景能钉版本A.skillsCLInpx任意 Agent一行命令✅B. Claude Code 插件市场Claude Code 用户按包订阅✅C. Releases 钉版本 .zipCI / 内网 / 可复现安装✅✅D. 手动拷贝本地魔改、二次开发❌E. Git Submodule嵌入大项目随上游升级✅支持哪些 AI 助手SKILL.md格式本身是可移植的——只要 Agent 支持 Skill 体系把文件夹放进它扫描的目录即可。已验证兼容✅Claude Code.claude/skills/或插件市场✅Claude.ai网页端✅Cursor.agents/skills/✅Codex CLI、Gemini CLI、OpenCode效果眼见为实看看 Demo 对比web-design-engineer的效果可以直接在仓库里对比——同一个需求无技能和带技能两份产出并排放在一起基础版demo/web-design-demo/demo1.html带技能版demo/web-design-demo/demo1-with-skill.html另外仓库还内置了两个完整示例站点视频演示站、GPT Image 2 案例站源码分别在 website/web-design-website/ 和 website/gpt-image2-website/。新手 3 个常见疑问Q1需要会编程吗不需要。你用自然语言提需求即可技能负责按专业流程执行并在关键 checkpoint 停下来等你确认。Q2需要提前配 API Key 吗web-video-presentation、web-design-engineer、beautiful-article、kb-retriever主要依赖本地运行gpt-image-2在本地出图模式Mode A下才需要OPENAI_API_KEY没有也能走 Mode B / C。Q3怎么更新npx skills update全部升级npx skills list查看已安装内容。总结Garden Skills 的本质是把 5 类高频创作任务的最佳实践沉淀成 AI 能直接执行的技能。对新手建议路径是用npx skills add ConardLi/garden-skills一条命令装好先玩web-design-engineer门槛最低、效果最直观按需解锁其余技能深入细节再看各 Skill 的 SKILL.md 与中文文档项目采用 MIT 协议开源欢迎阅读 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），仅供参考