让AI生成的UI告别”AI味”——这个Design Skill有点东西

你有没有这种感觉——看到某个 App 或网页，第一眼就觉得「这是 AI 做的」？

紫配白、圆角-3xl、满屏渐变、按钮上还带个 emoji 欢迎语……这种「AI 味」正在蔓延，用户已经开始免疫疲劳了。

最近挖到一个挺实在的 Skill——design-excellence，专门教 AI「怎么做才不像 AI 做的」。

它解决什么问题

用 AI 生成 UI 已经不是什么难事了，但问题在于——生成出来的东西高度同质化。大家都在抄同一套模板：紫色系配色、夸张的圆角、花里胡哨的动画。

这个 Skill 的核心理念很简单：如果用户能看出来是 AI 做的，那我们失败了。好设计是「隐身」的。

核心设计原则

这个 Skill 从四个维度拆解怎么做出「人味儿」：

• 色彩克制：只用一个强调色，背景用白或近白，坚决不用渐变。给出了完整的色值体系，直接照搬就行。
• 字体排版：用系统字体栈，不用全站 Inter。严格控制字重层级，最多三层，正文左对齐，不用纯黑。
• 间距规范：基于 Tailwind 的 4/6/8/12 间距体系，卡片内边距、组件间距都有明确规则。
• 动效分寸：150-300ms 的微妙过渡，不用弹跳效果，loading 用骨架屏而不是转圈圈。

还附带一份 21 条设计审查清单，做完 UI 之后逐条过一遍，哪里有问题一目了然。

使用方式

装上之后，直接对它说：

• 「帮我 review 一下这个页面的设计」
• 「这个配色方案有没有 AI 味」
• 「生成一个符合 design-excellence 规范的卡片组件」

它就会按照那套体系给你输出建议或代码。

适合谁用

前端开发者、用 AI 辅助做 UI 的设计师、或者任何想让 AI 生成的东西看起来更专业的人。

78 stars，评分 A 8.3，覆盖 Claude/Cursor/Gemini 等所有主流 AI Coding 工具。支持 OpenClaw。

在满屏「AI 味」的设计里，它是一股难得的清流。

GitHub：https://github.com/wasintoh/toh-framework

GitHub: https://github.com/wasintoh/toh-framework