1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | qiaomu-design |
| 作者/维护者 | joeseesun（乔木，独立开发者，同时维护多个面向 Claude Code 的中文向设计类技能） |
| 来源链接 | https://github.com/joeseesun/qiaomu-design |
| 许可证 | MIT（仓库 LICENSE 文件确认） |
| GitHub Stars / Forks | 396 / 35（GitHub API 实测） |
| 最新版本 | v3.7（2026-07-10 发布，仓库 CHANGELOG.md 确认） |
| 安装方式 | npx skills add joeseesun/qiaomu-design，或手动 git clone（见第 10 章，两种方式有差异见第 11 章） |
项目自述名称为“偏执型设计顾问”，仓库名 qiaomu-design 为正式名称；仓库此前名为 qiaomu-design-advisor，GitHub 已自动跳转，历史星标与提交记录延续，非另起炉灶的新项目。
2. 功能介绍与亮点
- 风格试衣间：为每次设计需求生成 4 个互斥方向的真实迷你页面，通过本地 HTTP 服务渲染在浏览器中，用户点选或按键盘确认后连同三拨盘参数与调整意见一并写入
selection.json，技能读取后才继续生成，而不是直接吐出单一方案 - 三拨盘自适应：按任务类型自动调节冒险度、动效强度、信息密度——功能型页面收敛，开放命题放开
- 58 套真实网站设计参考库：Airbnb、Apple、Stripe、Linear、BMW 等 58 个品牌的 DESIGN.md（Google Stitch 格式），可直接“参考 XX 做”
- Emil 动效工艺套件：动效写作、动效审查、动效命名词典、Apple 流体交互规范四份参考文档
- IBM Carbon 决策体系：将官方 319 页文档索引整理为中文、品牌中立的组件选型与数据可视化规则，供参考而非照搬 IBM 视觉外观
- 工程验收清单：a11y、表单、焦点陷阱、危险操作防护等按
file:line格式逐条审查 - 中文排版规范：系统字体栈优先、装饰字体子集化、盘古之白、行高字重标点纪律
3. 适用场景
所属分类：前端与设计
面向用 Claude Code 搭建产品界面、但自身不具备专业设计训练、担心产出“一眼假 AI 生成”页面的独立开发者、小团队前端工程师与产品经理；尤其适合需要中文排版规范、或希望从真实品牌案例中借鉴设计语言的场景，如落地页、仪表盘、作品集、移动端页面等。
4. 跨 Agent 兼容性
- Claude Code：原生支持，SKILL.md 标准格式，全部文档以其为目标平台
- Codex：可运行，但官方文档明确提示 Codex 默认使用的 GPT 模型生成效果“容易保守、空洞、模板化”，建议切换到 GLM5.2 或 Claude 模型执行本技能以获得预期质量
- OpenClaw：未验证——文档未提及该平台
- Hermes Agent：未验证——文档未提及该平台
以上判断仅基于已抓取的仓库文档，未为兼容性单独发起搜索。
5. 推荐理由
多数“让 AI 做设计”的技能把配色 token 或组件库喂给模型，生成过程本身仍是黑盒——用户拿到一版效果，不满意就只能重新描述再赌一次。qiaomu-design 把“选择权”做成显式步骤：先渲染 4 个方向的真实预览页面，用户在本地浏览器里点选、调三个拨盘、写调整意见，确认后技能才继续生成，过程可见可控。它同时把 58 个真实网站的设计系统整理成可复用参考库，并把 IBM Carbon 的组件决策方法转写成中文规则，而非停留在“禁止紫渐变”一类表面禁令。从 2026-03 创建到 2026-07-10 的 v3.7，项目保持了持续密集的迭代节奏，多个版本更新直接源于作者自测发现的具体问题（如“404 页面创意满分但功能标识缺失”），这种“发现问题—写规则—验收门禁”的闭环在同类技能中较为少见。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 6 | GitHub 396 星、35 复刻（GitHub API 实测），已被多个第三方 Claude Code 技能目录站收录列出；尚未见到独立于作者自身站点之外的深度讨论或评测 |
| 可用性 | 8 | npx skills add 一条命令或手动 git clone 均可安装；SKILL.md 与 README 文档详尽，含中英双语说明与实测案例；提交历史显示近 9 天内仍有更新，维护活跃；扣分点：npx skills add 安装方式存在一个截至目前仍开放的已知 bug——只同步 SKILL.md，references/、scripts/ 等子目录被丢弃（见第 11 章） |
| 安全性 | 9 | 逐项检查：①代码执行仅限两个本地 Node.js 脚本（预览服务器与选择监听器），实测未见外部网络请求，仅在本机 127.0.0.1 上开启 HTTP 服务；②未发现联网外发数据行为；③不要求任何 API Key 或凭据；④SKILL.md 与脚本通读未发现可疑指令；⑤作者为持续活跃的独立开发者，同时维护多个已被第三方技能目录收录的设计类技能；⑥MIT 许可证明确；⑦最近一次提交为 2026-07-10，维护活跃 |
综合评分：7.7
7. 跟同类 Skills 相比的优势
| 项目 | 定位 | 与 qiaomu-design 的差异 |
|---|---|---|
| taste-skill（leonxlnx，65014★） | “给 AI 一双好品味”，用一套通用美学规则阻止生成千篇一律的界面 | 更侧重通用审美规则本身，不含针对具体品牌的真实设计系统库，也没有生成后的可视化方向选择环节；qiaomu-design 的 SKILL.md 明确将其“反模板拨盘”思路纳入了自身设计 |
| hue（dominikmartn） | 从一个品牌 URL、名称或截图学习并生成完整设计系统 | 长于“从单一品牌样本反推设计语言”，产出一套专属的品牌设计系统；qiaomu-design 走的是“内置 58 个真实网站参考库供直接借鉴”的路线，不需要用户先指定品牌来源 |
| Anthropic 官方 frontend-design（anthropics/skills 仓库内） | 官方脚手架技能，快速搭出结构完整的页面 | 负责“从无到有”的基础生成，不含品牌参考库或生成后的方向选择机制；qiaomu-design 的 SKILL.md 将其列为“美学胆量”方面的参考来源之一，定位更偏重后续的精细打磨与验收 |
8. 用户评价
该技能目前在第三方平台尚无独立于作者自身站点之外的具名用户评价；GitHub 仓库本身的 issue 讨论均由作者自行提交与关闭，尚未见外部用户参与。
9. 其他补充
作者 joeseesun 同时维护多个同类中文向 Claude Code 设计技能（如生成海报/封面设计的 qiaomu-mondo-poster-design），形成一个小型技能矩阵，可作为了解该作者其他产出的参考。
10. 安装使用方式
方式一（推荐，一条命令）：
npx skills add joeseesun/qiaomu-design方式二（手动安装，避免方式一的已知子目录丢失问题）：
git clone https://github.com/joeseesun/qiaomu-design.git
cp -r qiaomu-design ~/.claude/skills/qiaomu-design安装后需已配置 Claude Code；在会话中说“帮我设计一个产品落地页”“重新设计这个页面”等触发词即可使用，无需额外重启。
11. 注意事项
npx skills add安装方式存在一个已知问题：仅同步SKILL.md，references/、scripts/等子目录会被丢弃，导致 58 套设计参考库与本地预览服务无法一并安装；该问题截至目前仍是开放状态，建议改用手动 git clone 方式获取完整功能- 设计生成质量对底层模型较为敏感，官方建议使用 GLM5.2 或 Claude 模型执行；Codex 中的 GPT 模型效果据官方文档描述会明显打折
- 由单一开发者维护，暂无社区共建的 Discussions 区，遇到问题需自行提交 issue 等待响应
- OpenClaw、Hermes Agent 的兼容性尚未验证，仓库文档未提及