AI 生成的 UI 为什么总是”模板味”？这个开源 Skill 给了答案

说真的，现在让 AI 帮你做个界面，大部分时候出来的都是”模板感”十足的东西——暖色配冷框架、圆润字体套在通用布局上，一眼就能认出是 AI 做的。

问题不在 AI 不努力，而在于：prompt 里的意图是文字，代码生成却从”见过的模式库”里抽取。这个gap，就是默认值赢的地方。

今天挖到一个让我眼前一亮的开源项目——Design Skill OS，作者 frhscopex，GitHub 星标虽然只有十几个，但这个项目的思考深度秒杀一堆千星玩具。

它是干嘛的

简单说：它是一套给 AI 用的设计推理引擎，不是简单的样式库或组件合集。

作者从 10 本设计经典里提炼出了 161 条推理规则，包括：
– 格式塔主权：强迫 AI 用接近性、相似性、闭合原则组织信息
– 色彩掌控：实现 60-30-10 配色法则，基于行业心理学创建和谐色板
– 黄金比例排版：用黄金分割计算行高、行距和字体搭配
– 尼尔森可用性法则：10 条核心可用性规则嵌入每次界面布局
– 红队审核协议：这个最狠——AI 不仅生成界面，还要自我审核，检查无障碍合规（WCAG 2.1 AA）、色彩对比度、是否在追逐”AI 趋势”（比如千篇一律的渐变紫色）

每次设计输出都会跑一遍「启发式检查 → 无障碍审核 → 反套路过滤」的三层审核关卡。检测到”懒癌设计”就直接打回重做。

跟别的设计 Skill 比强在哪

我之前推荐过 Canvas Design、frontend-design 这类工具，它们更多是「执行层」的——告诉你怎么写代码、怎么配色。

Design Skill OS 是思维层的——它先改变 AI 怎么做决策，然后才到代码实现层。

打个比方：
– 别的 Skill 教你「怎么把字写漂亮」
– Design Skill OS 教你「写之前先想清楚写给谁、目的是什么、什么感觉是对的」

它会问：这个界面的用户是谁？他们 5 分钟前在干嘛？5 分钟后要干嘛？——这种 intent-first 的设计方法论，才是真正区分「好看但不对」和「精准解决问题」的关键。

怎么安装

支持 Claude Code、Cursor、Windsurf、GitHub Copilot 等主流编码 Agent：

npm install -g design-skill-os

# 初始化，注入"设计大脑"
design-skill init --ai claude        # Claude Code
design-skill init --ai cursor        # Cursor
design-skill init --ai windsurf      # Windsurf
design-skill init --ai all           # 全局

安装后，直接用自然语言描述你的需求就行，比如：

“用 Design Skill OS 的规则，帮我做一个奢侈品手表 Landing Page。记得做红队审核，检查色彩盲和叙事弧线。”

AI 会自动跑完：品牌人格分析 → 格式塔布局策略 → 高保真代码生成 → 红队自审修改。

我的感觉

十几个星，但内容质量吊打很多万星项目。

它解决的不是「AI 不会写代码」的问题，而是「AI 不知道怎么想设计」这个问题。如果你经常被 AI 生成的 UI 气到，觉得怎么调都不对——大概率不是 prompt 不够长，而是 AI 缺一套设计决策框架。

这个 Skill，可能正是你在找的那块拼图。

GitHub：https://github.com/frhscopex/design-skill-os

GitHub: https://github.com/frhscopex/design-skill-os