夜雨聆风被设计逼疯过的后端，现在被 UI 夸间距系统规范
有段时间我特别怕接到一句话，「这个页面能不能改一下，视觉上好看点」。
那会儿我还是个纯后端出身的开发， Java 写了十来年，系统设计、数据库调优、接口联调，这些东西脑子里一套一套的。但你要我打开 Figma ，我的头会先大一圈，然后本能地找理由，「我搞逻辑的，设计那块不是我的事」。
问题是「不是我的事」这句话在实际项目里根本站不住脚。
你跟客户沟通，你要出原型。你做独立产品，你要出界面。你写前端代码，你要跟 UI 走查。逃不掉的，就像你学了 SQL 之后迟早要面对那张让你优化到极限的慢查询表。
当时的处理方式是什么，其实也简单，极其原始。
Axure 画框线图。 A4 纸上画草图，对，手绘那种，然后拍照发给对方，说「大概是这个结构」。前端的样式基本靠 Bootstrap 往上套，能用就行，好不好看那是另一回事。
这个状态持续了好几年。
直到某一天我开始意识到一件事，设计能力不是天赋，是工具 × 审美训练出来的。而审美，是可以后天建立的。
我开始刷 Behance ，去 Dribbble 上看那些完整的 UI 作品，把 Pinterest 当成视觉词典。不是说看一遍就会了，是反复看，看多了之后你的眼睛开始知道「这个间距不对」「这个颜色组合太脏」。这个过程比我想象的快，大概半年你就能感觉出自己的审美在涨。
然后 AI 设计工具的浪潮来了。
来得很猛，而且来了一堆。
多到什么程度，我数了一下我现在在用或者研究过的就有，frontend-design、ui-ux-pro-max、huashu-design、pencil-design、figma-mcp，加上 Claude Design 、 Open Design 、 Codex 本月刚推的 Product Design 插件、 v0 、 Lovable 、 Bolt ，十来个往上，而且每隔一段时间还有新的冒出来。
看到这你可能跟我当初一样纳闷，都已经这么多了，怎么还在造新的？
这个问题很关键，我后来想清楚了，每一个工具解决的是不同阶段的问题，没有哪一个能覆盖全场景，所以「继续造」这件事本身就是必然的。
就像你不会用锤子去拧螺丝，哪怕它们都叫「工具」。
那我就把这一套从头捋一遍。
先从底层的 Skill 层说起，这是装进 Claude Code 或者 Codex 里跑的技能包，你可以理解成给 AI 装上了一块专用芯片，让它懂设计这件事。
frontend-design 是安装量最大的那个， 533K 以上，功能直白，帮你生成前端组件代码，带样式，带布局，帮你把「这个按钮居中对齐」这种基础诉求直接变成代码 。它解决的问题是，你脑子里有个模糊的视觉想法，但你不会用 CSS 实现。
ui-ux-pro-max 进了一层， 161 种配色方案加 57 种字体组合，还有一套基于优先级的 UX 规则检测系统，可以帮你抓出对比度不够、触摸目标太小、缺少加载状态这类常见失误 。它更像是一个懂规范的设计顾问，你说「这个界面感觉哪里不对」，它帮你说清楚是哪里不对，而且给出具体改法。这个 skill 在 GitHub 上已经累积到将近 90K star ，说明不少人踩过跟我一样的坑 。
huashu-design 的来历有意思，它是 Claude Design 在四月发布之后大约一周，中文推社区里花叔大神跑出来的开源仿制品 。原版 Claude Design 的设计语言能力太让人眼红，但订阅门槛和使用限制摆在那儿，huashu-design 走的是 HTML 原生方向，带 20 条设计哲学和动效导出，装进 Claude Code 就能跑，没有平台绑定 。
pencil-design 这个要稍微说清楚一点，它连接的是 Pencil 这个 MCP 设计画布，官方定位是「在你的代码里做设计，不需要设计交接」，直接在 IDE 里开一个设计画布，生成的是跟你代码库绑定的 .pen 格式文件 。对我来说情绪价值很高，因为我以前真的在纸上画那种框线图，现在直接在代码编辑器旁边开个画布，感觉像是完成了某种仪式上的告别。
这四个是 Skill 层，本地安装，跑在你的 AI 编辑器里，核心能力是「帮你出设计相关的代码和判断」，没有平台绑定，按需装，按需卸。
往上走一层是 MCP 层，figma-mcp 是目前最值得讲的一个。
它是 Figma 在去年发布的官方 MCP Server ，连接的核心逻辑是，设计师在 Figma 里出的稿，通过三个工具，分别用来读取代码上下文、读取视觉图像、读取设计变量，你的 AI 编辑器直接把这些信息接过来，生成匹配设计稿的代码 。
你不需要盯着标注手动量间距，不需要跟设计师拉锯说「这个 padding 到底是 12 还是 16 」， AI 直接读图，直接给代码。
这解决了一个工作流上真实存在的撕裂点。以前设计稿和代码实现之间有一道翻译成本，工程师看稿，估距离，写代码，走查，修改，循环往复。figma-mcp 把翻译这一步压缩到接近零 。
当然它也有局限，设计稿的命名规范、组件结构如果一团乱麻，出来的代码也会跟着乱，「 Frame 1337 」这种图层名进去， AI 完全不知道这是什么，垃圾进垃圾出，这个定律在这里同样有效。
然后是独立产品这个层级， Claude Design 是今年四月随 Opus 4.7 同步推出的独立设计工具，两个是并列发布的关系，不是从属 。
它不是一个 Skill ，是 Anthropic 单独做的设计产品，定位是「用自然语言生成网站、落地页和演示文稿，支持品牌系统自动应用和多源导入」。它跟普通的「让 AI 帮你写界面」有质的区别。普通的路子是你描述， AI 猜，猜对了继续，猜错了再描述。 Claude Design 更像是你跟一个真正懂设计系统的人协作，它有设计师的思维路径，不只是代码生成器。
五月份 Anthropic 还把 Claude Design 的套餐上限翻了倍，说明用的人多，反馈不差 。
Open Design 是与 Claude Design 几乎同期冒出来的另一个开源替代，比 huashu-design 分量更重，是一个本地运行的完整工具，带自己的界面，内置 31 个 skills 加 72 个设计系统模板，安装之后在本地跑一个 dev server ，你通过浏览器访问它，当然也有本地客户端工具 。这个和 huashu-design 不是同一类东西，一个是装进 AI 编辑器的 Skill ，一个是独立运行的本地应用，选的时候要分清。
最近最值得说的一个动向，是 Codex 在本月初（ 6 月 2 日）刚刚发布的角色专属插件体系，其中 Product Design Plugin 直接面向产品和设计团队，核心能力是从早期想法快速生成可评审的原型，支持从真实 URL 读取你现有产品的交互流程，还集成了 Figma 和 Canva 。
之所以单独拿出来说，是因为它本质上是 Codex 从纯代码工具向产品设计领域延伸的一次正式表态。这件事发生在 Claude Design 发布后不到两个月，节奏摆在那儿，没有人打算让设计这个场景空着。
这也是为什么工具列表还在增加。每一家在争的是设计工作流的某个节点，没有一个能全覆盖，所以不会停。
最后一层是快速生成类， v0 、 Lovable 、 Bolt ，这三个我觉得要放在一起说，因为它们解决的问题高度相似，但路径不一样。
v0 是 Vercel 出的，输入自然语言，输出 React 组件，设计质量这些年提升明显，对于需要快速验证一个交互想法的场景，效率极高。你花五分钟跑出来的原型，够不够在一次产品会议上撑过去，通常是够的。
Lovable 更偏向全站生成，你描述你要做一个什么产品，它帮你从零搭出来，带数据库设计，带前端页面，带基础逻辑，对于想验证 MVP 想法的独立开发者，这是目前我见过的速度最快的路子。
Bolt 介于两者之间，组件级到页面级的生成都能做，支持的技术栈更多，如果你的项目不是 React 系的， Bolt 的覆盖面更宽。
这三个工具有一个共同的软肋，生成质量对提示词高度敏感，描述模糊，出来的东西就是一个视觉上能看但逻辑上存疑的壳子。它们更适合启动阶段，不太适合精细打磨。
那这一堆工具怎么选，我自己有一套判断路径。
如果你现在的诉求是「手头有工程，需要生成设计质量高的组件代码」， Skill 层先装 frontend-design 加 ui-ux-pro-max，这是基础组合，成本低，马上能用。
如果你跟设计师协作，有 Figma 稿，figma-mcp 必装，它解决的是翻译成本，装了之后你会想问自己为什么没早点装。
如果你在做一个新产品，从零开始，用 Lovable 或者 v0 先出一个能看的东西，然后再把 Claude Design 拉进来做设计系统的规范化，这个顺序是合理的。
如果你想在 IDE 里打通设计和代码的边界，不想在 Figma 和编辑器之间反复切换，pencil-design 加 Pencil 这套值得试一次，它的逻辑是让设计文件跟代码库住在一起。
如果你的项目已经有一定规模，想把设计系统整体提升， Claude Design 值得投入时间认真用， Open Design 可以先拿来摸清楚这套思路再做决定。
它们不是竞争关系，是流水线上不同位置的工位。
我感觉自己现在强大的可怕，有了 AI 加持之后，前后端全栈，甚至是 UI/UX 以前想都不敢想的事情都能自己去搞定了，一个人就是一个团队。
那套被 UI 夸间距系统规范的那次，我也没告诉她这套间距是 ui-ux-pro-max 给的建议，加上我自己调整的结果。
这件事让我想起《庄子》里一个做车轮的老头，叫轮扁。
他跟齐桓公说，斫轮这件事，慢了轮子松，快了轮子滑，不快不慢那个劲儿，得之于手而应于心，口不能言，我教不了我儿子，我儿子也学不了我，所以我七十岁了还在亲手做轮子。
这话放在今天设计工具这件事上，反过来也成立。
工具是可以被文字描述、被列表写清楚的，但「用哪个工具在哪个位置出手」那个判断，是你自己得攒出来的。十来个工具摆在面前，真正让你的界面被人夸一句「间距系统挺规范」的，不是工具，是你装了多少东西在眼睛里。
Behance 上刷过的那些作品， Pinterest 上扫过的配色，都算数。
为方便大家持续交流、互相答疑，我开通了专属交流社群。想要长期交流、获取更多更新内容、日常互动讨论的朋友，可长按下方二维码添加微信，方便随时交流。
