让你的界面不再有AI味的Skill

这是什么​

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

横评截图​

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

​

​

​

​

50%

​

​

​

​

50%

​

​

​

​

​

​

​

​

50%

​

​

​

​

​

​

50%

​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

为什么值得用​

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

核心能力​

​

#ZAvaVkwLlNkF text { white-space: pre; }#ZAvaVkwLlNkF .fb0 { stroke: var(--N900-FG, 0.15); }#ZAvaVkwLlNkF .fb0 {stroke: rgba(31,35,41, 0.15)}#ZAvaVkwLlNkF .fx0 { stroke-miterlimit: 10; }#ZAvaVkwLlNkF .fx0 {stroke-miterlimit: 10}#ZAvaVkwLlNkF .fa1 { fill: rgb(187, 191, 196); }#ZAvaVkwLlNkF .fa1 {fill: rgb(187, 191, 196)}#ZAvaVkwLlNkF .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ZAvaVkwLlNkF .fx1 {font-style: normal}#ZAvaVkwLlNkF .fx2 { text-anchor: middle; }#ZAvaVkwLlNkF .fx2 {text-anchor: middle}#ZAvaVkwLlNkF .fx3 { dominant-baseline: central; }#ZAvaVkwLlNkF .fx3 {dominant-baseline: central}#ZAvaVkwLlNkF .fx4 { stroke: none; }#ZAvaVkwLlNkF .fx4 {stroke: none}#ZAvaVkwLlNkF .fc0 { fill: var(--text-caption); }#ZAvaVkwLlNkF .fc0 {fill: #646a73}#ZAvaVkwLlNkF .fa2 { fill: var(--text-link-disabled); }#ZAvaVkwLlNkF .fa2 {fill: rgb(187, 191, 196)}#ZAvaVkwLlNkF .fx5 { font: 400 13px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#ZAvaVkwLlNkF .fx5 {font-style: normal}#ZAvaVkwLlNkF .fx6 { text-anchor: start; }#ZAvaVkwLlNkF .fx6 {text-anchor: start}#ZAvaVkwLlNkF .fx7 { dominant-baseline: alphabetic; }#ZAvaVkwLlNkF .fx7 {dominant-baseline: alphabetic}#ZAvaVkwLlNkF .fc1 { fill: rgb(0, 0, 0); }#ZAvaVkwLlNkF .fc1 {fill: rgb(0, 0, 0)}#ZAvaVkwLlNkF .fx8 { font: 400 13px LarkHackSafariFont, LarkEmojiFont, ui-monospace, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Noto Sans", Tahoma, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", STHeiti, SimHei, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", system-ui; }#ZAvaVkwLlNkF .fx8 {font-style: normal}#ZAvaVkwLlNkF .fb1 { fill: var(--N900-FG, 0.15); }#ZAvaVkwLlNkF .fb1 {fill: rgba(31,35,41, 0.15)}#ZAvaVkwLlNkF .fb2 { fill: rgb(209, 217, 224); }#ZAvaVkwLlNkF .fb2 {fill: rgb(209, 217, 224)}#ZAvaVkwLlNkF .fa3 { fill: var(--bg-body); }#ZAvaVkwLlNkF .fa3 {fill: #fff}AB1234567891011121314能力执行者显式路由创意提示词编排风格试衣间设计读取 + 三拨盘AI 反套路禁令中文排版规范Emil 动效工艺套件工程验收清单Carbon 决策体系58 站设计系统库打磨模式交付门禁自进化机制你得到什么默认当前 Codex 直接实现；只有用户在当前任务点名 K3 才调用，并保留隔离、diff 审查和独立验收用独立创意种子、雄心命题、用户反应 brief、新上下文截图批评和删减通道，把 Discover → Define → Deliver 变成可执行流程4 个互斥方向的真实迷你 mockup，生成在 ，点选/键盘进入确认弹层，带拨盘与建议一起回传按任务类型自适应冒险度/动效/密度：功能页收敛、开放命题放开禁 AI 紫渐变、禁 Inter、禁斜体、禁居中套路、禁 AI 文案词——从源头消灭"AI 味"系统字体栈优先、装饰中文字体子集化、盘古之白、行高/字重/标点纪律 + + + ：写动效、审动效、命名动效、做流体手势Vercel 规范：a11y、表单、焦点陷阱、危险操作防护， 格式审查基于官方 319 页索引，整合基础 token、组件选型、完整工作流、数据可视化与无障碍；借方法，不复制 IBM 外观Stripe/Linear/Apple 等真实网站 DESIGN.md（Google Stitch 格式），可直接"参考 XX 做"已有页面不推倒重来：Audit/Critique/Polish/Animate/Harden/Live 六动作preflight 强制检查清单，任何一条不过就不交付用户反馈自动抽象成规则写入偏好账本，越用越贴合你design-previews/YYYY-MM-DD-任务名/index.htmlemil-design-engreview-animationsanimation-vocabularyapple-designfile:line

​

快速开始​

​

代码块​

Plain Text

npx skills add joeseesun/qiaomu-design​

​

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

​

代码块​

Plain Text

帮我设计一个产品落地页​

​

手动安装：​

​

代码块​

Plain Text

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；默认不需要​

安装后验证发现与目录：​

​

代码块​

Plain Text

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 的设计 / 给我一个设计系统​

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

​

代码块​

Plain Text

你：帮我重新设计博客首页​

​

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

工作原理​

​

代码块​

Plain Text

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）​

​

实测验证​

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

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

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