我的 UI 很好看，怎么做到的？
公众号名称：三元同学
作者名称：三元同学
发布时间：2026-05-27 10:09
最近好几个人都问了我同一个问题：“你做的 UI 很好看，怎么做到的？“还有人私聊说觉得我做的 UI 极度舒适。（产品部署工作收尾了后续再让大家体验下）
说实话我挺意外的，因为我不是设计师出身，也没有找设计师。所有的 UI 全部是我跟 Claude Code 一起搞出来的。
但这里面有个很关键的东西，不是说你打开 Claude Code 说一句”帮我做个好看的页面”就完事了。如果你真这么干，大概率出来的东西是那种一眼就能看出”AI 做的”——星星 icon、圆角卡片嵌套、Inter 字体、深色模式加霓虹发光。这类东西社区里有个专门的词叫 AI Slop，就是看上去精致但没有灵魂的 AI 模板风，一眼 AI 做的。
我的做法其实更像是”管理”，而不是”使用”。
核心思路：把 AI 当设计团队管
我之前分享过一个观点：跟 Agent 协作，本质上是一个管理问题。感兴趣可以翻翻我之前这篇文章。Agent 越用越翻车，怎么破局？答案藏在经典管理学里
你不是一个写代码的人在用工具，你是一个项目负责人在带一个 AI 团队。
放到 UI 这件事上也是一样的。一个好的设计不是一步到位的，而是经过”初稿—审查—打磨—适配”多轮迭代出来的。
我的工作流大概是这样的：
用 /frontend-design 起稿，让 AI 先给出一个有设计感的初版。然后用 Impeccable 这个 Skill 套件里的 /critique 做专业审查，站在设计师的角度找出问题。再用 /polish 和 /optimize 打磨细节和性能。最后用 /adapt 做不同屏幕的适配。
每一步都不复杂，但组合起来，再加上人的判断力在里面穿针引线，效果就出来了。
第一步：用 /frontend-design 打破 AI Slop
/frontend-design 是 Claude Code 官方出的一个 Skill，Impeccable 也有一个增强版，核心做的一件事就是——强制 AI 做出有辨识度的设计，而不是千篇一律的模板。
它在生成 UI 之前会先想几个问题：这个界面是给谁用的？应该走什么风格？什么东西能让用户记住它？
然后它会从字体、配色、布局、动效这些维度去做有意识的选择，而不是默认用那套”安全但无聊”的组合。
给你举个例子。它明确禁止了一系列 AI 味重的设计模式：不要用 Inter / Roboto 这种烂大街的字体，不要用紫色到蓝色的渐变，不要到处嵌套圆角卡片，不要动不动就上深色模式加发光效果。
我一般会给一个比较明确的方向，跟它讨论个几轮，把风格基调定好，然后做一个初版出来。出来的初版通常已经比”裸奔”直接让 AI 做好很多了。
但初版也就是初版，离能用还有距离。
第二步：用 /critique 做专业审查
这一步我觉得是整个流程里最有价值的。
Impeccable 是一个专门做 UI 设计质量管理的 Skill 套件，里面有 20 多个命令。其中 /critique 做的事情是——站在专业设计师的角度，对你的 UI 做多维度评分和反馈。
它会从排版、配色、间距、对比度、一致性、可访问性这些角度去审查，然后告诉你哪里有问题、为什么有问题、建议怎么改。
这就像你花钱请了一个资深设计师来 review 你的页面，但成本是零。
我自己的体验是，/critique 经常能发现我肉眼看不出来的问题。比如某个按钮的文字对比度不够、某两个组件之间的间距不统一、字体层级不清晰——这些东西单独看都不明显，但加在一起就是那种”总觉得哪里不对但说不上来”的感觉。
/critique 帮你把这种感觉变成了具体的、可执行的修改建议。
我一般会先看一遍它给的反馈，然后挑出我认同的部分让 AI 去改。不是所有建议都要采纳——这就是人介入的价值所在。设计最终是一个审美判断，AI 可以给你专业的分析，但取舍还是你来做。
第三步：/polish 和 /optimize 打磨
审查完之后，用 /polish 做细节打磨。它会把你的 UI 跟设计系统对齐——间距、字号、颜色值这些容易出现不一致的地方，它会帮你统一掉。
然后用 /optimize 做性能优化。加载速度、渲染性能、动画流畅度、图片大小这些，它会帮你检查并给出优化方案。
这两步对最终质感的影响很大。好的设计和普通设计之间的差距，其实往往就在这些细节里。
第四步：/adapt 做响应式适配
最后一步是用 /adapt 做不同屏幕的适配。手机、平板、桌面，不同断点下的布局、字体大小、间距都需要调整。
这一步如果手动做是相当繁琐的，但交给 AI 来做效率非常高。你只需要在几个关键断点上检查一下效果，看到不对的地方指出来就行。
人在这个流程里扮演什么角色
说了这么多工具，但我想强调一点：工具只是工具，Harness 也只是 Harness，真正决定产出质量的是人怎么来用，人的判断力仍然还是最大的杠杆。
我在每一步之间都会花时间去看、去想、去判断。哪些反馈要采纳，哪些可以忽略，整体方向对不对，某个设计选择是不是符合产品的调性——这些是 AI 做不了的。
我见过不少人的做法是一口气让 AI 生成完整页面，然后直接用。这种方式做得快，但质量一般都不咋地。
我的做法更像是迭代式的：生成一版，review，给反馈，再改，再 review。每一轮人都会介入，给方向、做取舍、把关 UI 的质量。
这也是为什么同样的工具，不同人用出来的效果差很远。区别不在工具上，在于你有没有设计判断力，以及你愿不愿意花时间去打磨。
我的一些实战经验
分享几个我踩过的坑和一些建议：
一开始不要给太细的要求。 先给一个大方向让 AI 自由发挥，出来的东西往往比你事无巨细地描述一遍要好。因为你描述的时候会不自觉地往比较”安全”的方向走，而 AI 在有创意自由的时候反而能给出意想不到的好东西。
不要一次改太多。 每次只让 AI 改一两个具体的点，改完看效果，再决定下一步。一次改十个地方，改完你都不知道哪个改坏了。
多用截图反馈。 让 AI 在浏览器里打开页面看看实际效果，然后基于实际渲染的结果来调整。代码层面看着没问题的东西，渲染出来可能完全不是你想要的。
审美是可以训练的。 多看好的设计——比如到 Dribbble、Land-book 多去逛一逛，看多了你自然知道什么是好的。这个判断力是最核心的能力，需要逐步的积累和培养。
最后说一句
有人可能觉得这是个小事，UI 交给 Claude、GPT 基本都能糊的还不错了。
但做了产品之后我有个强烈的感受，用户对界面的第一印象会直接影响他对产品的信任度。同样的功能，一个看起来精致专业的界面和一个看起来糙的界面，用户的使用意愿差很多。
而且现在 AI 把实现门槛降到这么低了，我觉得没有理由不把 UI 质量做的更好一些。
关键不是你会不会设计，而是你愿不愿意多花点时间在打磨上。工具已经就位了，你用上了吗？
我是三元同学，希望这篇文章能够给你带来启发，欢迎点赞、收藏、转发一键三连，我们下一篇再见👋🏻
Original 三元同学 三元同学
内容效果不满意？点此反馈