设计师的 Claude Code 缺它不行：用 φ=1.618 重新定义 UI 的黄金比例 Skill

有没有设计师跟我一样，看 Claude 吐出来的 UI 就头皮发麻——Inter 字体、紫蓝渐变、等高三列卡片，一股 AI 工业废料味。

直到我挖到 Claude Design Skill (Golden Ratio) 这个冷门新货——GitHub 只有 1 star，但思路把我整破防了：把整套设计规则建立在黄金比例 φ=1.618上，从间距、字号、行高、栅格到配色明度曲线，全部按 phi 推导。

这玩意儿到底在做什么？

它不是普通的”换个字体、避坑紫色渐变”的劝退清单，而是直接给你 4 个 slash 命令：

• /design — 输一句”暗色登录页”，直接给你在 Excalidraw 里画出 phi 间距的线框图，加 –mockup 出全色高保真
• /design-palette ocean blue — 输入任意主色，自动生成 Material Design 3 的 OKLCH 调色板，亮度曲线是 phi^(-0.35) 衰减
• /design-review src/app/page.tsx — 审计你现有代码的间距/字体/对比度，打分 0-100 + 给出 Excalidraw 标注图
• /design-tokens all — 一次性吐出间距、字号、颜色三张速查表

为什么是 OKLCH，不是 HSL？

大多数工具给你 HSL 调色板，但那玩意儿亮度不线性——同样 L=50% 的两种颜色，肉眼感知差异巨大。OKLCH 是感知均匀色彩空间，配出来的调色板看起来才真的”和谐”。而且它的明度曲线用 phi 推导，做出来的渐变自带节奏感。

它对设计师最大的杀伤力

直接调用 /design-review 扫一遍你已有的代码——会告诉你”这个 button 的内边距 16px 不对，应该是 16.18px”、”这个标题字重应该再压一档”。最后给你一张 Excalidraw 标注图，团队对齐设计语言的成本骤降。

复杂场景（3+ 屏的用户旅程）会自动交给内置的 design-architect agent——先画流程图，再逐屏设计，最后用相机平移把整条路径串起来演示。

安装（30 秒搞定）

需要 Claude Code + 自带 Excalidraw MCP server：

git clone https://github.com/BFondue/claude-design-skill-golden-ratio.git /tmp/cds && cp -r /tmp/cds/{commands,agents,docs} .claude/ && rm -rf /tmp/cds

然后重启 Claude Code，斜杠菜单里就出现 /design /design-palette /design-review /design-tokens 四个命令。

GitHub 链接：https://github.com/BFondue/claude-design-skill-golden-ratio

GitHub: https://github.com/BFondue/claude-design-skill-golden-ratio