Claude Code 配色总是差点意思？这个技能让它配色排版都专业起来

用 AI 画界面，最怕的不是它画不出来——是它画出来的东西「总差那么点意思」。颜色搭配奇怪、间距对不齐、字体大小全靠感觉。

问题不在 AI 不够聪明，而在于它没有设计基础。Visual Design Foundations 就是来解决这个的——一个把专业设计体系「喂给」Claude 的技能。

四个维度，把设计变成可执行代码

这个技能没有教你「什么是好看的颜色」，而是直接给你四套可以跑的设计系统：

• Modular Typography Scale：模块化字体体系，12px 到 48px 都有标注好的 CSS 变量，行高按场景分类（标题 1.1–1.3、正文 1.5–1.7、UI 标签 1.2–1.4）——直接复制进 CSS 就能用
• 8-point Grid Spacing：业界标准的 8px 网格系统，从 4px 到 64px 全部定义好间距值
• Semantic Color Tokens：品牌色 + 语义色（success/warning/error/info）+ 灰阶，完整的颜色语义体系
• WCAG 对比度计算：正文 4.5:1、UI 元素 3:1，附有精确的亮度计算代码

不只是原则，是可复用的代码片段

技能里直接给你写好的 CSS 变量块，复制到项目里就能用。不需要设计师再手把手告诉你「这个间距用 24px，那个用 16px」——规则已经在代码里了。

建设计系统、做风格指南、对现有产品做可访问性审计，这些原来要设计师反复沟通的工作，现在 AI 照着技能里的规则就能给你出一套。

适合谁用

• 被 AI 生成界面「丑哭了」的工程师
• 需要快速搭建设计体系的创业团队
• 想让 AI 产出更专业的设计师

仓库 39.8k 星，口碑稳定。装上之后你会发现：AI 画的图，开始像那么回事了。

GitHub 仓库

GitHub: https://github.com/wshobson/agents/tree/main/plugins/ui-design/skills/visual-design-foundations