技能介绍
乔木设计（qiaomu-design）是一个「偏执型 AI 设计顾问」：让 AI 做出"不像 AI 做的"设计，融合五大顶级设计 Skill 的实测精华。
它由乔木制作——一位拥有 180+ repos 的产品经理。本 Skill 是一个 Claude Code Agent Skill，安装后，当你要求"帮我设计 / 重新设计 / 优化界面"时，它会先诊断真实需求，再用可视化风格试衣间提供 4 个方向供你选择，确认后按工程验收标准交付，而非直接生成模板化的"AI 味"页面。
它的定位是：交付符合工程验收标准、拒绝模板化的定制化 UI 设计。
每条核心规则均来自多轮主流设计 Skill 横评实验，并经浏览器实测交互验证。最初实验覆盖 6 个变体 × 7 个任务 × 42 个生成页面，后续扩展为 8 个变体 × 10 个任务的公开横评，覆盖落地页、仪表盘、作品集、交互向导、组件面板、创意 404、多样性挑战、电商详情、移动端与数据叙事等场景。每个维度胜者的核心机制被移植进本 Skill。
适用场景
- 使用 Claude Code 的开发者或设计师，需要生成高质量、非模板化的 UI 界面。
- 包括但不限于：产品落地页、仪表盘、作品集、交互向导、组件面板、创意 404 页面、电商详情页、移动端应用、数据叙事页面等。
- 已有页面需要优化、打磨、去"AI 味"或添加动效。
核心能力
- 风格试衣间：生成 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 强制检查清单，任何一条不通过则不交付。
- 自进化机制：用户反馈自动抽象成规则写入偏好账本，越用越贴合你的偏好。
- 点选回传依赖：风格试衣间依赖本地预览服务；如果服务无法启动，降级为打开 HTML 文件并在对话中回复选择。
- 装饰中文字体默认禁用：体积 5–20 MB，只在创意标题场景子集化加载。这是特性，不是缺陷。
- 本 Skill 只做设计：不会默认给生成页面注入打赏、公众号、GitHub/X 浮条或个人 Profile。对外页面如需署名，建议只放低干扰页脚
Powered by 向阳乔木并链接到https://qiaomu.ai/。 - 58 站设计系统库的来源：来自公开网站的设计系统提炼，用于风格参考，不代表对应公司背书。
- 效果依赖模型能力：本 Skill 是 Claude Code 的 Agent Skill，不是独立软件。
效果预览
视频案例 · 冥想网站：
横评截图案例（来自 qiaomu-design 在横评实验中的真实生成页面，覆盖以下 10 类场景）：
- 落地页 · AI 会议笔记
- 仪表盘 · 电商运营
- 作品集 · 独立设计师
- 交互向导 · 机票预订
- 设置中心 · 危险操作组件
- 创意 404 · 星空航行
- 多样性挑战 · 三向播放器
- 电商详情 · 手冲咖啡器
- 移动端 · 冥想助眠 App
- 数据叙事 · 精品咖啡十年
工作方式
典型流程分为三个阶段，每阶段等待你确认：
- 诊断：设计读取 + 三拨盘 + 2–3 个关键问题。
- 风格试衣间：生成
design-previews/YYYY-MM-DD-任务名/index.html，提供 4 个方向供你实际查看选择；确认后将方向、拨盘和建议回传给工作流。 - 执行：先建立 DESIGN.md 设计锚点，再编写代码，通过 preflight 门禁后交付。
对于已有页面，你可直接说"帮我打磨这个页面 / 反 AI 味 / 加动效"，进入打磨模式，不会推倒重来。
你需要提供
- 设计任务描述，例如"帮我设计一个产品落地页"、"重新设计博客首页"。
- 如已有页面，提供页面描述或相关文件。
- 可选：指定输出目录（默认生成在
design-previews/YYYY-MM-DD-任务名/，当前不在项目时退到桌面目录）。 - 前置条件：需要安装并运行 Claude Code。推荐使用 GLM 5.2 / GLM 5.2 或 Claude 模型执行本 Skill；近期实测中，Codex 中的 GPT 模型设计效果不理想，容易保守、空洞、模板化。
你会获得
- 4 个方向的设计预览 HTML 文件，可本地打开查看真实效果。
- 最终交付的完整页面代码（HTML/CSS/JS），经过工程验收清单检查。
- 如果是打磨模式，得到针对性的优化建议和修改后的页面。
使用示例
在 Claude Code 中直接说出以下触发词：
- "帮我设计一个产品落地页"
- "重新设计博客首页"
- "优化界面"
- "设计方案"
- "UI 审查"
- "帮我看看设计"
- "参考 XX 的设计"
- "给我一个设计系统"
- "帮我打磨这个页面"
- "反 AI 味"
- "加动效"
安装到 Cola：安装到 Cola
