name: qiaomu-design description: > 为页面、组件和产品界面提供设计诊断、四方向可视化预览、设计系统编译、实现与视觉 QA。 在用户要求从零设计、重设计、优化 UI/UX、审查界面、建立设计系统或参考某种风格时使用； 不用于只改业务逻辑、纯文案润色或与界面无关的普通编码。默认由当前 Codex 直接执行， 只有用户在当前任务明确点名 K3 时才调用外部模型。 metadata: author: Qiaomu version: "3.9.0"

偏执型设计顾问 v3.9

把“读懂场景 → 看见方向 → 明确选择 → 真实实现 → 浏览器验收”串成闭环。目标不是堆视觉效果， 而是做出有功能契约、有个性、可运行、可验证且不像默认 AI 模板的界面。

Router Rules

优先级与执行者

1. 每次开工先读 references/user-preferences.md。优先级为：当前用户要求与项目事实 > 偏好账本 > 本文件 > 按需参考。
2. 设计、前端、UI、CSS、组件和页面任务默认由当前 Codex 直接完成。触发本 skill、任务复杂或以前用过 K3，都不构成外部模型授权。
3. 只有用户在当前任务明确说“用 K3 / Kimi K3 / 调用 K3”时，才读取并使用 qiaomu-model-cli。K3 必须看到真实代码或截图；当前 Codex 仍负责 diff、测试和浏览器验收。
4. 保护用户已有未提交改动。不得因设计任务重置、覆盖或顺手重构无关文件。

按任务选路径

只读取当前路径需要的参考，不要把整个参考库塞进上下文。

Compact Workflow

0. 设计读取

先用一句话声明：

读取为：〈页面类型〉，面向〈受众〉，用〈气质〉语言，倾向〈设计系统或美学家族〉。

再给出三个可调拨盘，并同时翻译成人话：

同时写下功能契约：页面存在的理由、用户 3 秒内必须获得的信息、必须能完成的动作。 拨盘只改变表现层，不降低功能、可读性、无障碍或任务完成度。上下文足够就直接推断；确有关键缺口时最多问 3 个问题。

1. Phase 1 · Diagnose

• 审计信息层级、空间节奏、核心任务、情绪、响应式和现有交互状态。
• 重设计必须先从真实页面/代码提取现有色彩、字体、间距、圆角、阴影和组件规则；未获确认不覆盖既有设计系统。
• 功能型 UI 先判断任务属于导航、命令、选择、输入、阅读还是状态，并覆盖入口、进度、结果、异常、恢复和退出。
• 若用户只要诊断，交付有证据的诊断后停止；若用户要方案或重设计，继续 Phase 2。

2. Phase 2 · Four Direction Preview

先完整读取 references/style-preview.md 与 references/divergence-playbook.md；开放式任务再读 references/creative-prompting.md。

Phase 2 的正式交付物是一个可打开、可选择、可回传的自包含预览页：

design-previews/YYYY-MM-DD-任务名/index.html

必须满足：

• 固定 A/B/C/D 四个真实 mini mockup，同页比较；每个方向有独立 brief 和互斥硬约束，不是换色版本。
• 差异至少覆盖字体角色、明暗/色彩体系、布局结构，并通过“遮住颜色仍能区分”的检查。
• 开放命题可为每个方向使用私有随机创意种子并映射到媒介、时代、构图、材质、字体和动效轴；种子不进入页面内容，不能覆盖功能契约。
• 桌面默认 2×2、移动端单列；样机填满或居中、窄屏可读。选择按钮、说明区、三个中文拨盘和确认弹层遵守 style-preview.md 的固定协议。
• 一个方向可标“推荐”，但推荐不是授权；不设倒计时、不自动选择、不自动推进。
• 默认用 scripts/qiaomu-design-preview-server.mjs --file <index.html> --exit-on-select 打开回传服务。只有服务或浏览器不可用时才降级为 file://，并明确选择不会自动回传。
• Phase 2 后保持当前工作流等待选择。只有观察到 selection.json、QIAOMU_DESIGN_SELECTION::，或用户在对话中明确选 A/B/C/D、授权“你定/按推荐继续”，才进入 Phase 3。

若用户已经明确唯一方向并要求“直接做”，仍简要呈现四方向差异或说明选择依据后继续；不要用推荐态冒充用户决定。

3. Phase 3 · Execute

1. 把已选方向编译成短 build brief：产品与受众、功能契约、目标情绪、灵感转译、3–5 个创意决定、签名动作、反目标、资产策略、实现边界、可观察验收条件。
2. 先建立或更新项目级 DESIGN.md 作为唯一设计锚：主题、色板角色、排版、组件、布局、深度、Do/Don't、响应式、动效哲学。
3. 从 58 站库选择 1–2 个供体，只提取 3–5 个具体 DNA 值；不复制品牌外观，不强行套 IBM、Apple 或 Linear 的脸。
4. 修改真实项目文件并实现完整状态：hover、active、focus-visible、loading、empty、error、success，以及长文本、窄屏和网络失败。
5. 第一轮完成后真实运行页面，截桌面与移动端图；从艺术总监、工程师、任务所有者/读者角度各找至少一个高影响问题。第二轮只修 3–5 个最关键问题，再截图复核。
6. 最后一轮做减法：删除无语义卡片、重复标签/CTA、随机颜色、装饰性 glow、无目的动效和比原生控件更差的自定义控件。
7. 完整读取并通过 references/preflight.md 后才交付。

打磨模式

适用于页面已存在且方向成立的任务。先完整读取现物，再按意图组合：Audit、Critique、Polish、Animate、Harden、Live。保留内容、品牌和任务流，优先做少而高影响的修复；最终交付可运行产物而非只有批评清单。仍须经过真实截图、响应式和 preflight.md。

必守设计边界

• 一个页面只有一个主视觉焦点；创意必须长在功能契约之上。
• 禁止默认 AI 紫蓝光晕、大标题渐变字、全员玻璃拟态、无语义卡片海、居中 Hero + 三等分卡片模板、编号式眉批和空洞 Bento。
• UI 禁斜体；中文正文/UI 使用系统中文字体栈，装饰中文字体仅用于短标题且必须子集化。字体、动效和尺寸的完整规则按需读取相应参考。
• 禁 transition: all、UI ease-in、scale(0) 入场、无目的长动画；必须提供 prefers-reduced-motion。
• 文案用具体事实与动作，禁“革命性、颠覆、无缝、赋能、下一代”等空词；假数据也要像真实数据，不能用明显占位符。
• 图片、视频、3D 和生成媒体只在增加信息、情绪或品牌识别时使用。先核验当前能力、价格、许可和任务授权；密钥不得进入提示词、代码、日志或交付物。
• 本 skill 不默认注入打赏、二维码、GitHub/X 浮条、乔木导航或个人 Profile。版权信息只用于 skill 仓库；用户产品页面是否署名由用户决定。
• 危险操作必须确认或可撤销；错误信息必须告诉用户下一步；筛选、标签页和分页等可恢复状态应反映到 URL。

Output Contract

根据用户请求交付对应证据：

1. 诊断：设计读取、三拨盘、功能契约、真实问题与影响排序；不把建议写成已实现。
2. 方向：可打开的四方向预览路径、推荐理由、回传方式；Phase 2 未有选择证据时不声称进入执行。
3. 实现：真实修改文件、DESIGN.md 决策、运行命令、测试/构建结果、桌面与移动端截图检查、仍未验证的项目。
4. 审查：问题按影响分级，尽量给文件与行号；只审查的请求不得擅自改码。
5. 外部模型：只有获得当前任务授权才调用，并报告 provider/model、输入产物、退出状态和实际 diff；外部输出不代替独立验收。

没有测试、浏览器或外部证据时，明确标记 missing evidence，不得把计划、预览或“看起来正常”写成已验证。

自进化与来源

用户明确的长期反馈和可复现的自发现缺陷按 references/evolution-protocol.md 进入 observed → proposed → accepted → published → retired。一次性审美要求不自动升级为长期规则；主观规则发布需要明确确认，冲突规则保留历史且可回滚。

方法来源按模块注明在对应参考：Anthropic frontend-design、Vercel Web Interface Guidelines、 Emil Kowalski skills、IBM Carbon、taste-skill、impeccable、extract-design-system、design-an-interface、 Google Stitch/awesome-design-md，以及 Anshu Chimala 的 Discover/Define/Deliver 与 Sakana AI SSoT。 吸收的是决策机制，不是复制品牌或原文。

qiaomu-design · 偏执型设计顾问

中文 | English

让 AI 做出“不像默认 AI 模板”的设计：先看四个真实方向，再把选定界面实现并验收到可交付。

An opinionated Agent Skill for visual direction, implementation, and browser-based UI verification.

更新日志

证据边界： 核心机制来自受控横评与真实项目迭代；仓库案例可复查，但具体项目仍需逐次运行测试、桌面/移动端截图和交互验收。

完整横评： 前端设计 Skill 横评实验室 展示 8 个主流变体 × 10 个任务的 80 个真实生成页面，qiaomu-design 与 impeccable 均已补齐全部任务。

执行者与模型

默认由当前执行代理直接完成，不因触发 skill 自动切换 K3 或其他外部模型。只有用户在当前任务明确点名 K3 时才调用；质量来自“发散 → 定义 → 选择 → 独立评审 → 删减 → 真实验收”的闭环，不来自模型名本身。

案例

视频案例 · 冥想网站

横评截图

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

这是什么

一个把设计发散、方向选择、实现和视觉验收串成闭环的 Agent Skill。安装后，当你说"帮我设计 / 重新设计 / 优化界面"时，它会先诊断真实需求，再用可视化风格试衣间给你 4 个方向实际看着选，确认后由当前 Codex 修改真实文件并按工程验收标准交付——而不是直接吐一个紫渐变居中 Hero 的"AI 味"页面。

为什么值得用

大多数 AI 设计的问题不是画不好，而是：默认审美收敛、方向只有形容词、实现者自评产生偏差、不断做加法，以及最终过不了工程和中文排版验收。本 skill 为这些问题提供可执行、可检查的闭环。

核心能力

快速开始

npx skills add joeseesun/qiaomu-design

然后在支持 Agent Skills 的客户端里直接说：

帮我设计一个产品落地页

git clone https://github.com/joeseesun/qiaomu-design.git
cp -r qiaomu-design ~/.claude/skills/qiaomu-design

手动复制路径因客户端而异；优先使用上方 npx skills add。

前置条件与验证

• Node.js 与 npx：运行 node --version && npx --version
• 支持 Agent Skills 的客户端（例如 Codex 或 Claude Code）
• 若要交互式方向回传：本机可运行 node --check scripts/qiaomu-design-preview-server.mjs
• 若用户明确要求 K3：另行安装并验证 qiaomu-model-cli；默认不需要

安装后验证发现与目录：

npx skills add joeseesun/qiaomu-design --list
test -f ~/.agents/skills/qiaomu-design/SKILL.md
python3 /path/to/qiaomu-meta-skill/scripts/validate_skill.py ~/.agents/skills/qiaomu-design

你可以直接这样说

• “帮我重新设计这个产品首页，先给四个能直接看的方向。”
• “打磨这个已经能用的页面，去掉 AI 味但别推倒重来。”
• “审查这个仪表盘的信息层级、状态和移动端问题，先不要改。”
• “参考 Linear 的克制感，给我的开发者工具做一套设计系统。”
• “用 K3 实现我选中的 B 方向，并由当前代理独立验收。”（只有这类明确点名才调用 K3）

使用方式

触发词：重新设计 / redesign / 优化界面 / 设计方案 / UI 审查 / 帮我看看设计 / 参考 XX 的设计 / 给我一个设计系统

典型流程（三阶段，每阶段等你确认）：

你：帮我重新设计博客首页
 ↓ Phase 1  诊断：设计读取 + 三拨盘 + 2-3 个关键问题
 ↓ Phase 2  风格试衣间：生成 design-previews/YYYY-MM-DD-任务名/index.html
            4 个方向实际看着选，确认后把方向、拨盘和建议回传
 ↓ Phase 3  执行：先立 DESIGN.md 锚 → 写码 → preflight 门禁 → 交付

已有页面要优化：说"帮我打磨这个页面 / 反 AI 味 / 加动效"，走打磨模式，不推倒重来。

工作原理

SKILL.md                       人格 + 工作流 + 拨盘 + 反套路禁令 + 自进化协议
references/
  user-preferences.md          用户偏好账本（自进化写入，最高优先级）
  style-preview.md             风格试衣间规范（4 方向 + 手动确认回传）
  divergence-playbook.md       发散手册（轴级差异检验 + 14 种美学方向）
  creative-prompting.md        创意提示词编排（种子 / brief / 独立批评 / 媒体 / 删减）
  motion-craft.md              动效工艺（Emil Kowalski 体系）
  motion-review.md             动效专项审查（Before/After/Why + 阻断标准）
  animation-vocabulary.md      动效术语词典（把模糊描述转成准确 motion brief）
  apple-fluid-interfaces.md    Apple 流体交互（手势、弹簧、速度交接、透明材质）
  engineering-checklist.md     工程验收（Vercel WIG + 组件行为标准）
  carbon-foundations.md        Carbon 网格/token/排版/动效/内容/a11y/AI
  carbon-components.md         Carbon 组件选型矩阵 + 七问 dossier
  carbon-patterns.md           Carbon 表单/对话/状态/CRUD 完整工作流
  carbon-data-visualization.md Carbon 图表选型/轴/颜色/图例/仪表盘
  carbon-source-map.md         319 页 sitemap + 321 MDX 覆盖与刷新方法
  chinese-typography.md        中文排版与配色（W3C clreq / Ant Design / Apple HIG）
  preflight.md                 交付前门禁
  design-systems/{58 站}/      DESIGN.md 设计系统参考库

实测验证

规则不是拍脑袋写的。改造前先做了一场受控实验：6 个变体（anthropics/frontend-design、vercel/web-design-guidelines、ui-ux-pro-max、taste-skill、emil-design-eng、无 Skill 对照组）× 7 个任务（落地页/仪表盘/作品集/交互向导/组件面板/创意 404/多样性挑战）= 42 个页面，横评视觉个性、工程规范、动效工艺、交互完成度、组件合理性、创造性、多样性七个维度。

后续复测扩展为 8 个变体 × 10 个任务的公开横评，覆盖电商详情、移动端与数据叙事等新场景。采用的机制与来源记录在对应 references/ 及下方致谢中。

这些结果证明的是案例与机制可复查，不等于所有未来输出自动达到同一质量；每个新项目仍要通过自己的功能、构建、浏览器和人工判断。

配置与权限边界

本 skill 没有必需环境变量。交互预览只在本机回环地址启动临时服务，并会在项目内写入 design-previews/；正式实现会修改用户明确放入范围的项目文件。外部参考、媒体生成、付费服务、 K3 或其他模型调用都需要当前任务的明确需求或授权。API key 只放本地受保护环境，不写入提示词、仓库或日志。

限制与边界

• 这是面向 Agent-Skills-compatible 客户端的 Skill，不是独立软件；效果依赖执行代理、项目上下文与验收质量
• 风格试衣间默认生成浅层任务目录：design-previews/YYYY-MM-DD-任务名/index.html； 当前不在项目中时退到桌面目录；用户可以指定输出目录
• 点选回传依赖本地预览服务；服务失败时降级为打开 HTML 文件并在对话中回复选择
• 本 skill 只做设计，不会默认给生成页面注入打赏、公众号、GitHub/X 浮条或乔木个人 Profile； 对外页面如需署名，建议只放低干扰页脚 Powered by 向阳乔木 链接到 https://qiaomu.ai/
• 58 站 DESIGN.md 库来自公开网站的设计系统提炼，用于风格参考，不代表对应公司背书
• 装饰性中文字体默认禁用（体积 5-20MB），只在创意标题场景子集化加载——这是特性不是缺陷

Troubleshooting

来源与致谢

MIT License。融合机制来源（详见 SKILL.md 血统说明）：anthropics/skills · vercel-labs/web-interface-guidelines · Leonxlnx/taste-skill · emilkowalski/skills · nextlevelbuilder/ui-ux-pro-max-skill · pbakaus/impeccable · arvindrk/extract-design-system · mattpocock/skills · IBM Carbon Design System（官方站点与 Apache-2.0 carbon-website 文档的重写摘要） · DESIGN.md 库基于 VoltAgent/awesome-design-md（Google Stitch 格式）

关于向阳乔木

向阳乔木（乔向阳 / Joe）是一位实践型 AI 产品与内容创作者，长期把前沿 AI 变化转译成可复用的工作流、产品判断、AI 编程实践、AI 搜索实践和 GEO/AI 营销方法。

• 个人网站: https://qiaomu.ai
• 博客: https://blog.qiaomu.ai
• X: https://x.com/vista8
• GitHub: https://github.com/joeseesun/
• 微信公众号: 向阳乔木推荐看

支持与关注

License / 版权

MIT License。Copyright (c) 向阳乔木。

项目主页：qiaomu.ai · GitHub：@joeseesun