garden-skills:给AI助手装上网页设计、文章编排与资料检索工作流

项目简介

让AI做一个作品集首页，页面虽然能打开，却总是相似的渐变背景、大圆角卡片；把一堆资料交给它，又担心它直接开始写，没先确认读者和重点。对于已经使用AI助手的人，麻烦往往不是“它不会生成”，而是每次都要重新交代工作方法，还得等成品出来后才能纠偏。

garden-skills提供的是一组可加载的技能包：把做事步骤、参考资料和必要的辅助文件放在一起，让支持这类技能的AI助手按任务调用。它不是另一款独立聊天软件，更像给现有助手配上不同岗位的工作手册。项目说明⁠^[1]

例如，你想给独立摄影师做作品集首页。网页设计技能不是只接收“高级一点”的要求，而是先弄清访客是谁、有什么参考、照片如何成为视觉重点，再说明配色、字体和留白，等待确认后才继续做初稿。你可以在投入完整制作之前，先判断方向是否合适。网页设计指南⁠^[3]

核心特性

一、做网页：先确认方向，再补齐细节。

web-design-engineer适合展示页、交互原型和数据看板等有视觉界面的任务。它把“好看一点”拆成能讨论的选择：颜色是否符合品牌、文字是否拥挤、动效是否必要，而不是直接套用一套通用外观。修改已有网站时，也会先区分是在原有基础上扩展、保留风格重做，还是整体换方向。

流程中还安排了早期初稿：先摆出主要结构、关键布局和素材占位，让你尽早发现“照片太小”“信息顺序不对”等问题。需要注意，真正执行浏览器中的响应式、交互和运行检查，要由用户明确提出；普通自查不能当作已经完成这些验收。设计流程⁠^[4]

二、做文章：把散落材料整理成可阅读的成品。

beautiful-article面向另一类任务：手里已有网页、PDF、Word文档、截图或零散笔记，希望把它们整理为讲解文章、简报或教程。它关注的不只是把文字放进页面，也包括内容组织、阅读节奏和版式选择。

这个技能设置了需要用户确认的编辑节点，文章类型、主题、布局、配图策略和交付形式都属于可控制的选择。交付物可以是自包含的HTML文件，也可选择PDF。对需要把资料发给同事或读者的人来说，价值在于把“整理内容”和“设计阅读体验”放进同一条流程，而不是生成一篇文字后再从头排版。文章技能介绍⁠^[5]

三、查资料：先缩小范围，再带着出处回答。

kb-retriever用于从本地知识目录里找答案，材料可以包括Markdown、文本、PDF和Excel。它不是把整个文件夹一次塞给AI，而是先沿分层索引寻找相关区域，再搜索关键词、读取附近内容，并在回答中提供来源。

例如，面对一套按主题整理的内部文档，你可以围绕一个具体问题找依据，而不必先把所有文件拼成一份长材料。它更适合有目录和索引的资料库；采用前应考虑是否愿意维护这套结构，而不是把它理解为“丢进任意文件夹就完成知识管理”。检索技能介绍⁠^[6]

快速开始

这里仅选Claude Code插件市场这一条路径，只安装网页设计技能。前提是你已有能够正常使用的Claude Code环境；以下步骤不是宿主软件的安装教程，也不需要先安装整套技能。

1. 在Claude Code交互会话中添加插件市场。

输入下面这一行，让Claude Code接入项目提供的插件集合。它是会话内的插件命令，不是在普通系统终端里直接运行的程序。

/plugin marketplace add ConardLi/garden-skills

2. 安装网页设计插件包。

仍在同一类交互会话中输入：

/plugin install web-design-skills@garden-skills

这个插件包包含web-design-engineer。两步分别对应“添加插件来源”和“安装所需技能”，不要把安装完成理解为网站已经生成或服务已经启动。安装说明⁠^[7]

3. 发起一个只做到设计确认的小任务。

安装后，向助手描述视觉网页任务，指南说明它会据此自动选用技能。第一次不必做完整网站，可以这样提出需求：

为独立摄影师设计一个作品集首页，面向想预约拍摄的访客，突出照片。先说明页面的信息顺序、配色、字体和留白方案，等我确认后再写代码。

这只是一个需求示例，不依赖特定照片或现有代码。你要检查的首次结果，是助手是否给出明确的设计选择，并停下来等待确认；如果只是重复“简洁、高级”，就继续要求把选择说具体。技能原文要求在写代码前声明设计系统，并设置确认节点。首次确认流程⁠^[8]

到这里完成的是一次设计方案沟通，不是网页部署。确认方向后再进入初稿制作，可以把首次尝试控制在较小范围内。

为什么火了

它的吸引点，在于把“怎么与AI合作”变成了可以查看、复用和修改的文件。相比不断给同一个助手补充零散要求，技能包把工作顺序、确认节点和参考材料放到了一起；用户更容易知道下一步该判断什么，也更容易发现助手跳过了哪一步。

另一个值得关注的地方，是它针对网页、文章、资料检索这类具体交付物分别组织方法，而不是用一份万能提示词包办所有任务。尤其是“先展示方向，再继续制作”的安排，切中了生成式工具常见的返工问题：做得快固然重要，尽早发现做偏了同样重要。这些特点构成了它在榜单上受到关注时，值得读者进一步了解的理由。工作流说明⁠^[9]

适合谁

已经用AI做页面的人，可以用网页设计技能规范需求沟通和初稿确认，尤其适合有品牌参考、愿意参与方向判断的使用者。它主要处理视觉前端，不是后端接口或数据处理脚本的通用方案。适用范围⁠^[10]

需要把现有材料做成文章的人，可以关注文章编排技能，但仍要参与内容取舍和版式确认；如果只想获得一句摘要，这套完整流程未必必要。

经常从本地文档找依据的人，可以考虑检索技能，前提是材料能够整理成可导航的知识目录。选择时先确定自己真正需要哪种交付物，再装对应技能，比一次装满后期待助手自动解决所有问题更实际。

引用链接