AI 做界面总是”差点意思”？这个 3.7k 星 Skill 套装让 AI 真正懂设计

做设计的时候，有没有这种感觉——AI 生成的东西看起来都对，但就是少了点”灵魂”？界面粗糙、配色奇怪、字体间距感人……

问题不在 AI 不会设计，而在它缺一套完整的设计常识。现在有个开源 Skill 合集，专门教 AI 做出专业级界面，GitHub 3,757 颗星，口碑相当硬。

🎨 这个 Skill 解决什么问题

它把设计能力拆成了 8 个独立模块，装上之后你的 AI 就像请了一个全栈设计顾问：

• better-ui — 边框、阴影、动效、微交互，这些”高级感”细节全靠它
• better-typography — 字体选择、行高、间距、换行，治文字乱糟糟
• better-colors — 用 OKLCH 色彩空间生成配色，告别土味渐变
• better-accessibility — 焦点状态、键盘操作、ARIA、无障碍，阅读障碍友好
• better-layout — 分组、对齐、阅读顺序、响应式断点，页面不再乱跑
• better-writing — 按钮文案、错误提示、空状态提示，UX 文案教科书
• better-interface — 以上全部协调起来做跨学科评审
• interface-review — 对你的代码变更或 PR 做设计 review

⚡ 怎么装

一行命令搞定：

npx skills add jakubkrehel/skills

Claude Code 用户走插件市场：

/plugin marketplace add jakubkrehel/skills
/plugin install interfaces@interfaces

支持 Claude Code、Codex、Opencode 等主流 AI 编程工具。可以全部装，也可以挑其中几个按需取用。

💡 我的感受

最实用的就是 better-colors 和 better-ui 这两个组合。以前让 AI 配色，十次有九次是渐变紫蓝——用 OKLCH 之后出来的配色高级很多，而且自动满足对比度要求。better-typography 对中文排版尤其有用，AI 以前完全不懂中文的行间距和字偶间距，现在能给出合理建议了。

总体来说，这是一个真正能提升 AI 设计输出质量的 Skill 合集。不是那种给你一堆空洞理论的项目，而是每个模块都能直接作用在你的代码上。设计师和产品经理也适合看——它本质上是一套可执行的设计规范。

👉 GitHub 仓库（3,757 ⭐）

GitHub: https://github.com/jakubkrehel/skills