Claude Code + Skill 做 UI 的实战工作流
让 AI 生成一个 UI 页面，现在已经不难了。难的是------让 AI 生成的页面不"一眼 AI"。
什么是"一眼 AI"？你大概率见过：
Inter 字体，白色或深色背景，紫色到蓝色的渐变，圆角卡片一个叠一个，霓虹发光边框，布局对称到呆板。
社区管这叫 AI Slop：精致但没有灵魂，像流水线下来的模板。
要打破这个局面，靠一句提示词是不够的。你需要一套工作流------每个环节用对应的 Skill 工具解决一个具体问题。下面从实战角度拆解四个 Skill 工具，每个工具专攻一个环节。
先装好工具
这篇文章要用到两套 Skill：
| 工具 | 来源 | 包含命令 |
|---|---|---|
/frontend-design |
Anthropic 官方 | /frontend-design |
| Impeccable 套件 | pbakaus/impeccable | /critique, /polish, /optimize, /adapt 等 23 个命令 |
安装 /frontend-design（Anthropic 官方）：
/plugin marketplace add anthropics/skills
/plugin install frontend-design@anthropics-claude-code-skills或者在项目目录下手动创建 .claude/skills/frontend-design/SKILL.md，将官方 skill 内容放进去。
安装 Impeccable 套件：
npx skills add pbakaus/impeccable这个命令会自动检测你用的是 Claude Code 还是其他工具，把文件放到正确的位置。安装后就能直接用 /critique、/polish、/optimize、/adapt 这些命令。
如果你习惯手动操作，也可以从 impeccable.style 下载后复制到 .claude/skills/ 目录下。
出稿用 /frontend-design：解决"默认模板"问题
问题： 直接让 AI 生成界面，它总是走最安全的路线------那套"AI 默认皮肤"。换个产品换个 Logo 照样能用，毫无辨识度。
工具： /frontend-design 是一个出稿 Skill，它在生成 UI 之前强制 AI 先做一轮设计决策：给谁用、什么风格、用户会记住什么。
操作方式：
/frontend-design 做一个项目管理仪表盘，用户是技术负责人，风格简洁专业它做了什么？
它在提示词层面嵌入了两条关键约束：
- 正面引导：要求 AI 先思考产品定位、目标用户、风格方向，再动手
- 负面清单：明确禁止一批 AI 模板元素------Inter / Roboto 字体、紫蓝渐变、深色模式加发光、圆角卡片嵌套
负面清单这个东西挺有意思。它不像传统设计规范告诉你"该怎么做"，而是直接把 AI 最顺手的那条偷懒路径堵死了。AI 只能去找别的方案，出来的东西自然不一样。
效果对比：
直接出稿 → Inter 字体 + 白色卡片 + 蓝色主色调 + 圆角 12px → 能用，但放哪个产品都行
/frontend-design → 冷灰中性色 + 非 Inter 字体 + 克制留白 → 有辨识度，不撞脸需要注意的点：
方向给个大概就行，别写得太细。你写得太具体，AI 反而放不开。先让它出一版，再基于实际结果调整，效率最高。
审查用 /critique：解决"看不出问题"的问题
问题： UI 做完了，你自己看着觉得还行。但总感觉"哪里不对"，又说不上来。排版、间距、颜色、对比度------这些单个看都没毛病，凑在一起就是不舒服。
工具： /critique 扮演一个专业设计师的角色，给你的页面做多维度量化审查。
操作方式：
/critique 审查这个页面的设计质量，给出评分和改进建议输出示例：
审查结果是一份结构化报告，每个维度带评分和具体问题：
| 维度 | 评分 | 典型问题 |
|---|---|---|
| 排版 | 7/10 | 标题层级拉不开，H2 和 H3 只差 4px |
| 间距 | 6/10 | 同类卡片内边距不统一（24px vs 20px） |
| 对比度 | 5/10 | 状态标签文字对比度 3.2:1，不达标 |
| 一致性 | 7/10 | 主按钮和次按钮圆角不一致（8px vs 6px） |
它的核心价值在于：把"感觉不对"翻译成"具体哪不对、差多少、怎么改"。间距差了 4px 这种事，肉眼很难发现，但机器一眼就能扫出来。
怎么用：
不是每条建议都要改。先扫一遍报告，把明显的问题挑出来修掉。剩下的那些------比如某个颜色你觉得可以但报告说不行------保留你自己的判断。改完再跑一轮，看评分有没有涨。
这个"人审报告、决定改什么"的步骤，是整个流程里最关键的动作。
打磨用 /polish + /optimize：解决"差一口气"的问题
问题： 审查修完大问题，页面已经能看了。但总感觉"差一口气"------说不上来，就是不够精致。其实问题出在一致性上：三个蓝色、两种圆角、好几套字号间距，你不在意的时候没事，一旦注意到就觉得散了。
工具： /polish 和 /optimize 分工明确------一个管视觉一致性，一个管性能。
操作方式：
/polish 检查这个页面的设计一致性/polish 做了什么：
它把你的页面用到的设计 token 扫一遍，找出不一致的地方：
主按钮蓝色： #3B82F6
链接文字蓝色： #2563EB ← 都是蓝色但不同值
标签边框蓝色： #60A5FA ← 第三个蓝色然后建议统一到同一个色值上，全局替换。同理处理字号、间距、圆角。改完页面看起来更"整"，但具体哪变了你说不上来------这就是一致性带来的效果。
操作方式：
/optimize 优化这个页面的加载性能和渲染性能/optimize 做了什么：
它检查性能层面的问题，常见发现：
- 大图没压缩（一张 800KB 的 PNG 头像，展示只有 48×48px）
- 动画用了会触发重排的属性（比如过渡
height而不是transform: opacity） - CSS 有未使用的样式
这两个工具解决的是同一个问题：看起来差不多，用起来差很多。
适配用 /adapt：解决"换个屏幕就崩"的问题
问题： 在笔记本上做完的页面，拿到手机上打开------文字叠在一起、按钮点不到、布局全乱。手动适配又繁琐，要调整布局排列、字体大小、间距、导航方式。
工具： /adapt 自动处理多屏适配。
操作方式：
/adapt 适配到桌面、平板、手机三种屏幕实际效果：
桌面端（1440px）：三列卡片 + 侧边导航
平板端（768px）： 两列 + 导航折叠为汉堡菜单
手机端（375px）： 全部堆叠 + 字号调小 + 间距压缩你只需要在每个断点上检查一遍，发现不对的地方指出来让它再调就行。不需要从头手写媒体查询。
四把工具的关系
这四个工具不是互相替代的，它们是管道关系：
/frontend-design → /critique → /polish + /optimize → /adapt
↑ ↑ ↑ ↑
解决"没风格" 解决"看不出" 解决"不精致" 解决"适配崩"每个工具解决一个特定环节的问题。跳过任何一步，最终质量都会有缺口。
一个常见误区
有人觉得：我把这四个工具按顺序跑一遍，是不是就完事了？
不是。工具只负责"出活"，每个环节出完活，都需要人来看一眼：
- /frontend-design 出的方向对不对？风格符合产品调性吗？
- /critique 的建议全盘接受？还是保留你自己的判断？
- /polish 改完看着舒服了没？/optimize 改完速度有提升吗？
- /adapt 在每个断点上都正常吗？
工具解决"怎么做"，人决定"做到什么程度"。 这个分工搞清楚，流程才能转起来。
写在最后
UI 这件事，现在已经不是"会不会设计"的问题了------工具已经把门槛压得很低。剩下的问题是"愿不愿意多走几步"。
出稿 → 审查 → 打磨 → 适配。多走这几步，效果差一截。你可以试试。