AI 生成界面丑？因为你少了这一步——Visual Design Foundations

你有没有这种感觉——AI 生成的界面看多了，一个比一个丑，紫 gradient、glassmorphism、千篇一律的 feature card……说白了，就是没有设计根基。

今天挖到一个很”硬核”的 Skill，叫 Visual Design Foundations，作者是 W. Shobson，专门教 AI 怎么打好设计基本功再动手。

它解决什么问题？

这个 Skill 不帮你生成代码，它在生成代码之前先把设计系统的基础打好——字体的字号阶、8pt 间距网格、语义化颜色 token、图标系统，全部用数学比例说清楚，不让你拍脑袋。

说白了，它是设计规范的”地基”，让你的 AI 生成器不再随机出配色和间距。

核心模块有哪些？

Typography Scale — 用比例（modular scale）生成字号体系，不是随便写 14px、16px、20px，而是 xs → sm → base → lg → xl → 2xl → 3xl → 4xl → 5xl 严格按比例递进。行高也按角色分类：标题 1.1–1.3、正文 1.5–1.7、UI 标签 1.2–1.4，不是一刀切。

Spacing System — 基于业界标准的 8pt 网格，space-1 = 4px，space-2 = 8px，space-4 = 16px……所有间距都是 4 的倍数，视觉上天然和谐。

Color System — 语义化颜色 token，primary/success/warning/error/info 分离品牌色和功能色，还带 WCAG 对比度检查。不是选个 HEX 就完事，而是告诉你这个颜色在什么背景下能过 AA 标准。

Iconography — 图标系统的选型和尺寸规范，确保图标和文字在同一视觉重量上。

为什么对 AI 很重要？

大多数 AI 生成界面丑，是因为它没有”先做设计决策再生成代码”的概念。接到任务直接开干，出来的就是大杂烩。

这个 Skill 强制 AI 在动手前先确立：用什么字体、间距多少、颜色怎么配、图标多大——全部白盒化记录下来，再往后走。

你拿到的不再是”试试这个颜色”，而是一套可以审查、可以调整、可以复用的设计体系。

怎么安装？

npx skills add https://github.com/wshobson/agents --skill visual-design-foundations

装完在 Claude Code 里直接触发，或者手动调用 /visual-design-foundations。

适合谁用？

• 正在建设计系统，但没有设计基础的开发者
• 想让 AI 生成的界面有”章法”而不是随机发挥
• 需要建立 Design Token 规范再对接开发的设计师

4K+ GitHub stars、11K+ 安装量，评分 74/100，品质有保证。设计基本功这东西，越早建立越好。

GitHub：wshobson/agents

GitHub: https://github.com/wshobson/agents