qiaomu-design · 偏执型设计顾问

让 AI 做出“不像 AI 做的”设计，融合五大顶级设计 Skill 的实测精华。本 Skill 是一个 Claude Code Agent Skill，安装后，当你要求“帮我设计 / 重新设计 / 优化界面”时，它会先诊断真实需求，再用可视化风格试衣间提供 4 个方向供你选择，确认后按工程验收标准交付，而非直接生成模板化的“AI 味”页面。

适用场景

• 使用 Claude Code 的开发者或设计师，需要生成高质量、非模板化的 UI 界面。
• 包括但不限于：产品落地页、仪表盘、作品集、交互向导、组件面板、创意 404 页面、电商详情页、移动端应用、数据叙事页面等。
• 已有页面需要优化、打磨、去“AI 味”或添加动效。

效果预览

视频案例 · 冥想网站

横评截图

以下 10 张截图来自 qiaomu-design 在横评实验中的真实生成页面。点击截图可打开线上可交互原始文件。

落地页 · AI 会议笔记	仪表盘 · 电商运营

作品集 · 独立设计师	交互向导 · 机票预订

设置中心 · 危险操作组件	创意 404 · 星空航行

多样性挑战 · 三向播放器	电商详情 · 手冲咖啡器

移动端 · 冥想助眠 App	数据叙事 · 精品咖啡十年

核心能力

• 风格试衣间：生成 4 个互斥方向的真实迷你 mockup 文件（design-previews/YYYY-MM-DD-任务名/index.html），通过点击或键盘选择后确认，方向、拨盘和建议一起回传。
• 设计读取 + 三拨盘：按任务类型自适应调整冒险度（VARIANCE）、动效（MOTION）、密度（DENSITY）——功能页面收敛，开放命题放开。
• AI 反套路禁令：禁止 AI 紫渐变、Inter 字体、斜体、居中 Hero 套路、AI 文案词，从源头消除“AI 味”。
• 中文排版规范：系统字体栈优先，装饰中文字体子集化，遵循盘古之白、行高、字重、标点纪律。
• Emil 动效工艺套件：包含 emil-design-eng、review-animations、animation-vocabulary、apple-design，覆盖动效编写、审查、命名和流体手势。
• 工程验收清单：基于 Vercel 规范，涵盖 a11y、表单、焦点陷阱、危险操作防护，以 file:line 格式审查。
• Carbon 决策体系：基于官方 319 页索引，整合基础 token、组件选型、完整工作流、数据可视化与无障碍。
• 58 站设计系统库：包含 Stripe、Linear、Apple 等真实网站的设计系统文档（DESIGN.md，Google Stitch 格式），可直接用于“参考 XX 做”。
• 打磨模式：已有页面不推倒重来，提供 Audit、Critique、Polish、Animate、Harden、Live 六种动作。
• 交付门禁：preflight 强制检查清单，任何一条不通过则不交付。
• 自进化机制：用户反馈自动抽象成规则写入偏好账本，越用越贴合你的偏好。

工作方式

典型流程分为三个阶段，每阶段等待你确认：

1. 诊断：设计读取 + 三拨盘 + 2–3 个关键问题。
2. 风格试衣间：生成 design-previews/YYYY-MM-DD-任务名/index.html，提供 4 个方向供你实际查看选择；确认后将方向、拨盘和建议回传给工作流。
3. 执行：先建立 DESIGN.md 设计锚点，再编写代码，通过 preflight 门禁后交付。

对于已有页面，你可直接说“帮我打磨这个页面 / 反 AI 味 / 加动效”，进入打磨模式，不会推倒重来。

你需要提供

• 设计任务描述，例如“帮我设计一个产品落地页”、“重新设计博客首页”。
• 如已有页面，提供页面描述或相关文件。
• 可选：指定输出目录（默认生成在 design-previews/YYYY-MM-DD-任务名/，当前不在项目时退到桌面目录）。

你会获得

• 4 个方向的设计预览 HTML 文件，可本地打开查看真实效果。
• 最终交付的完整页面代码（HTML/CSS/JS），经过工程验收清单检查。
• 如果是打磨模式，得到针对性的优化建议和修改后的页面。

使用示例

在 Claude Code 中直接说出以下触发词：

• “帮我设计一个产品落地页”
• “重新设计博客首页”
• “优化界面”
• “设计方案”
• “UI 审查”
• “帮我看看设计”
• “参考 XX 的设计”
• “给我一个设计系统”
• “帮我打磨这个页面”
• “反 AI 味”
• “加动效”

注意事项

• 前置条件：需要安装并运行 Claude Code。
• 推荐模型：强烈建议使用 GLM 5.2 / GLM 5.2 或 Claude 模型执行本 Skill。近期实测中，Codex 中的 GPT 模型设计效果不理想，容易保守、空洞、模板化。
• 风格试衣间目录：默认生成在 design-previews/YYYY-MM-DD-任务名/index.html；当前不在项目中时退到桌面目录。你可以指定输出目录。
• 点选回传依赖：风格试衣间依赖本地预览服务；如果服务无法启动，降级为打开 HTML 文件并在对话中回复选择。
• 装饰中文字体：默认禁用（体积 5–20 MB），只在创意标题场景子集化加载。这是特性，不是缺陷。
• 本 Skill 只做设计：不会默认给生成页面注入打赏、公众号、GitHub/X 浮条或个人 Profile。对外页面如需署名，建议只放低干扰页脚 Powered by 向阳乔木 并链接到 https://qiaomu.ai/。
• DESIGN.md 库：58 站设计系统库来自公开网站的设计系统提炼，用于风格参考，不代表对应公司背书。
• 效果依赖：本 Skill 是 Claude Code 的 Agent Skill，不是独立软件；效果依赖模型能力。

实测验证

每条核心规则均来自多轮主流设计 Skill 横评实验，并经浏览器实测交互验证。最初实验覆盖 6 个变体 × 7 个任务 × 42 个生成页面，后续扩展为 8 个变体 × 10 个任务的公开横评，覆盖落地页、仪表盘、作品集、交互向导、组件面板、创意 404、多样性挑战、电商详情、移动端与数据叙事等场景。每个维度胜者的核心机制被移植进本 Skill。