Claude 写 UI 永远那个味儿？这个 Skill 把它教回设计师

你有没有发现，Claude 写出来的页面总是那个味儿？居中深色 hero、青紫渐变、玻璃拟态、卡片网格、Inter 字体、16px… 同一张脸，换个 logo 就上线。

如果你已经审美疲劳到想自己画 wireframe，那今天这个 skill 必须装 ——ryanthedev 的 design-for-ai。一句话：它把一本设计书压成了 Claude 真正读得懂的参考体系。

它解决的是什么问题

所有 LLM 都掉进同一个坑：默认风格收敛。Cyan-on-dark、紫色 glow、玻璃效果、Bounce 缓动、一样的卡片布局。这不是 prompt 问题，是模型没有设计词汇表。

design-for-ai 直接把 《Design for Hackers》（David Kadavy 的设计圣经）拆成 8 个领域、几十份 doctrine 文档，Claude 在执行 mock / build 时按需加载：

• usability：Nielsen 十大启发式 + Fitts / Hick / Miller 法则
• data-viz：Tufte 数据墨水比、Cairo 反图表说谎、KPI 仪表盘布局
• composition：proportional systems + 视觉锚点
• type / color：从比例构建字阶，从色轮推导配色，不是”vibes”
• deceptive-patterns：暗模式审查 + 监管风险
• behavioral：Cialdini / Fogg 模型 / 习惯回路
• journey：JTBD + 用户路径 + IA
• ai-native：Agent UX / 生成式 UI 的早期原则

最狠的是「composition dealer」

作者把这点写在了 README 第一段：“The composition dealer exists to stop the model from choosing”。模型选择 = 收敛 = 同质化。所以这个 dealer 系统让你 pin 一个或多个设计维度（比如 --pin family=neo-brutalist、--pin hue=teal），把剩下的交给 dealer 随机发牌。

想要 brutalist + teal？想要 editorial + 暖橙？一次性把方向锁死，模型就再也不会给你那个”AI 紫”了。

实战工作流

完整 4 步走：

• /design-for-ai:research — 抓 brief + 审美信号（你喜欢什么字体、绝不肯用什么色）
• /design-for-ai:plan — 输出分阶段计划 + done-when 验收标准
• /design-for-ai:mock — 渲染低保真原型，等你 sign-off
• /design-for-ai:build — BUILD → REVIEW → commit，每个阶段都有 evidence 报告

最后还会跑 scripts/detect.mjs 做”AI-tell 检测”，专挑那些一眼 AI 的痕迹。

适合谁装

• 用 Claude Code / Cursor 做产品 UI 的独立开发者
• 设计团队里想用 AI 但受不了 AI 味的设计师
• 经常给客户做 landing page 的 freelancer —— 风格差异就是溢价

怎么装

一行命令：npx skills add ryanthedev/design-for-ai

支持 Claude Code / Cursor / Codex / Windsurf 等 70+ Agent。开源 MIT，4 大模块 + 8 领域 doctrine。repo 252 ⭐ / 34 fork，最近 7 月还在更新。

如果你已经受够了那个”AI 紫 + 玻璃拟态”的 Claude 默认脸，从今天开始用 design-for-ai 把它教回一个有审美的设计师。

GitHub: https://github.com/ryanthedev/design-for-ai

GitHub: https://github.com/ryanthedev/design-for-ai