3分钟装好就能用：qiaomu-design新手完全教程，让AI帮你设计一张专业落地页

qiaomu-design 是一款面向 Claude Code、Codex 等客户端的开源 AI 设计 Skill：安装后说一句"帮我设计一个产品落地页"，它会先给你 4 个可视化设计方向挑，再实现并通过工程验收，交付一张不"AI 味"的专业落地页。本教程带你在 3 分钟内完成安装，并跑通第一次落地页设计任务。

什么是 qiaomu-design：为什么 AI 设计需要它？

用 AI 生成界面，最常见的问题不是"画不好"，而是千篇一律：紫色渐变、居中 Hero、Inter 字体、"颠覆式/无缝衔接"这类文案。qiaomu-design 从源头反套路：

• 风格试衣间：不给形容词，而是生成 4 个真实可看的迷你设计方向（独立字体、色彩、布局），实际看着选，不是换色版本
• AI 反套路禁令：禁 AI 紫渐变、禁 Inter、禁斜体、禁居中套路、禁 AI 文案词
• 58 站设计系统库：内置 Stripe、Linear、Apple 等 58 个真实网站的 DESIGN.md，直接"参考 XX 做"
• 中文排版规范 + 交付门禁：任何一条检查不过就不交付，交付的是可运行页面

3 分钟安装教程：一条命令装好 qiaomu-design

前置条件（1 分钟确认）

条件	说明
Node.js	运行 node --version && npx --version 验证
支持 Agent Skills 的客户端	如 Claude Code、Codex

最快安装方式（30 秒）

npx skills add joeseesun/qiaomu-design

安装后验证 Skill 已被客户端发现：

npx skills add joeseesun/qiaomu-design --list

手动安装方式

如果 npx 方式在你的网络环境下不可用，也可以手动克隆仓库后复制到技能目录：

git clone https://gitcode.com/gh_mirrors/qi/qiaomu-design
cp -r qiaomu-design ~/.claude/skills/qiaomu-design

核心定义都在根目录的 SKILL.md 里，安装目录中必须存在这个文件才算安装成功。

第一次使用：3 个阶段设计一张专业落地页

安装完成后，在客户端里直接说人话即可触发，常见触发词：重新设计 / 优化界面 / 帮我设计 / 参考 XX 的设计。比如：

"帮我设计一个产品落地页，先给四个能直接看的方向。"

之后它会按三阶段推进，每阶段都等你确认：

Phase 1 · 诊断：先声明设计读取（页面类型、受众、气质），给出视觉冒险度、动效强度、信息密度三个"拨盘"，必要时最多问你 3 个关键问题。

Phase 2 · 风格试衣间：生成预览页 design-previews/YYYY-MM-DD-任务名/index.html，同页展示 A/B/C/D 四个真实 mini mockup，点选或键盘选择后回传，规范见 references/style-preview.md。

Phase 3 · 执行与交付：把选中方向编译成 build brief，先立 DESIGN.md 设计锚，再改真实文件，实现 hover / loading / 空态 / 错误态等完整状态，最后通过 references/preflight.md 门禁才交付。

进阶用法：让 58 站设计系统库为你所用

装好之后，最值的玩法是"点名参考"。58 个真实网站的设计系统整理在 references/design-systems-catalog.md 索引中，每个站点一份 DESIGN.md，例如：

"参考 Linear 的克制感，给我的开发者工具做一套设计系统。"

它只会提取 3–5 个具体的 DNA 值（色彩、排版、间距），不复制品牌外观。以 Linear 为例，对应参考文件是 references/design-systems/linear.app/DESIGN.md。

几个新手可以直接照抄的提示语：

• "打磨这个已经能用的页面，去掉 AI 味但别推倒重来。"（打磨模式，不推倒重建）
• "审查这个仪表盘的信息层级和移动端问题，先不要改。"（只诊断不动文件）
• "帮我设计移动端冥想 App 首页，风格安静一点。"

中文界面会自动套用 references/chinese-typography.md 的排版规范：系统中文字体栈优先、盘古之白、行高与标点纪律，正文不加载动辄 5–20MB 的装饰字体。

新手常见问题

问题	解决办法
提示 No valid skills found	运行 npx skills add ... --list，确认安装目录根级存在 SKILL.md
预览页能打开但选择没有回传	用 scripts/qiaomu-design-preview-server.mjs 重启本地回传服务，或在对话中直接回复 A/B/C/D
中文字体加载慢、排版跳动	正文改用系统中文字体栈，装饰标题只加载实际字符子集
想看完整能力清单	阅读 README.md 与 CHANGELOG.md

装好 qiaomu-design 后，你获得的不是又一个"帮我写个页面"的提示词，而是一位会先看方向、再动手实现、最后亲自验收的偏执型设计顾问。去试试吧，第一张专业落地页也许只需要一次对话。