Claude Code 的 5 个 Skill 正在重新定义设计工作流。从建立设计系统、评审方案，到生成高质量前端代码、像素级视觉走查，再到贯穿全程的设计知识库，它们组成了一条完整的流水线。本文通过真实案例拆解每个 Skill 的原理与用法，带你体验 AI 如何将设计效率提升到新高度。

大家用过Claude Code、codeX、trae、codebuddy等工具生方案的都应该知道Skill的重要性。

之前评价“还挺好用”，用上后的评价就变成“这玩意以后会不会真的改变设计的工作方式了”。

01 5个 Skill 组成完整工作流

先简单认识下这5个Skill是如何组成完整的工作流都是什么：

1. design-consultation 建立设计系统 → 从零搭建完整设计系统，生成了 DESIGN.md 设计系统，定义一个项目的设计基础。

2. plan-design-review 评审设计方案→ 动手之前先审方案，多维度打分，告诉你如何改到满分。

3. frontend-design 生成高质量的页面 → 基于设计系统生成前端界面内置设计质量标准。

4. design-review 像素级视觉走查 → 检查视觉一致性、间距、层级等问题，像设计师一样审稿。

5. design-review 设计知识库→ 贯穿全程的的设计知识库，在上述4个流程中任何问题都可以调用。

下面先通过一个案例看看这5个Skill生成的思考过程和方案效果吧～绝对让你震撼！！！

02 先来看看工作效果

告诉我的 Claude Code 我想做一个旅行游记的页面，于是他的工作流就是这么开始的：

1.design-consultation

→ 先生成了 DESIGN.md 设计系统（焦糖色系 + Playfair Display + Noto Sans SC）

2.plan-design-review

→ 评审了信息架构、交互状态、AI味等7个维度，从5/10提升到8/10

3.frontend-design

→ 生成了完整的游记页面（不对称交织排版 + 滚动叙事 + 互动栏）

4.design-review

→ 发现4个问题并全部修复（间距/无障碍/动效降级/刘海屏适配）

怎么样，这一套下来感觉已经完全可以替代你的思考并为你工作了～

设计系统的搭建、方案的评审、代码的生成、问题的检查，这些事情以前每件都要花好几个小时，现在有了这些Skill，每件可能只需要几分钟。

03 详细了解5个 Skill 的原理

看完案例，再来系统看看5个UI设计，它们到底是什么，有什么特点，怎么用，以及它们之间是怎么配合的。

先说第一个最基础的一个，也是所有后续工作的起点。

1.design-consultation

这个Skill干的事特别简单直接，就是帮你从零搭一套完整的设计系统。

搭建一个DESIGN.md的文件，这个文件里包含：品牌色、字体、间距、圆角、阴影，所有你能想到的视觉规范，它全给你定义好了。而且不是那种泛泛而谈的主色用蓝色，而是精确到色值、精确到字号、精确到像素间距的完整规范。

有了这个文件之后，后续所有的Skill都会读取它，保证出来的东西风格统一。

现在有了这个Skill，你只需要告诉它你的项目是做什么的，目标用户是谁，想要什么风格的感觉，它就能帮你生成一套像模像样的设计系统。

用法：在Claude Code里输入/design-consultation，然后回答它关于你项目的几个问题就行了。

这是第一步，打地基。没有这一步，后面的Skill就像是在沙子上盖楼。

2.plan-design-review

我第一次用的时候还觉得有点多余，方案都定了还要审什么？但用了一次之后，我是真的觉得这个环节太重要了。

它的作用是在你真正动手写代码之前，先对你的设计方案做一次全面的评审。

评审的维度包括配色、层级、间距、交互，每个维度都会给你打分，0到10分。然后告诉你每个维度怎么改能到10分。

它就像一个特别严格但又有耐心的设计总监，不是在挑你毛病，而是在告诉你怎么做得更好。

用法：输入/plan-design-review，然后告诉它你要做什么页面，大致的设计思路是什么。它会给你一份详细的评审报告。

这一步看起来多花了几分钟，但省下来的是后面返工的时间。

3.frontend-design

这个Skill是我用下来感觉最核心的一个。

它的作用是根据你的设计系统，生成真正能用的前端界面代码。不是那种只能看截图的假页面，而是可以直接跑的HTML、CSS、JavaScript代码。

最让我意外的是，它生成的界面真的不太像AI出的东西。

frontend-design因为有前面design-consultation生成的DESIGN.md做底子，出来的东西风格是统一的、有辨识度的。

字体层级做得很有讲究，大标题、小标题、正文、辅助文字之间的粗细和大小关系很清晰。留白的节奏也有呼吸感，不是那种密密麻麻塞满内容的感觉。

用法：输入/frontend-design，然后描述你要做什么页面；描述得越具体，出来的东西越接近你要的。

4.design-review

这个Skill干的事是像素级的视觉走查。

什么叫像素级？就是它真的会检查你2px的圆角偏差，会告诉你某个按钮的对比度不达标，会发现你两个模块之间的间距差了4px。

我第一次看到它的走查报告的时候，有点被吓到了。它列了差不多十几条问题，每一条都带截图标注，告诉你具体哪个元素、什么问题、建议改成什么值。

用法：在你已经生成的页面上输入/design-review，它会自动扫描整个页面，然后给你一份详细的走查报告。你确认之后，它还能帮你直接修复这些问题。

这一步就像是一个保险，确保你最终交付的东西是经得起推敲的。

你可能注意到了，这四个Skill不是随便用的，它们有一个非常清晰的递进关系。

design-consultation打地基，建立设计系统。

plan-design-review审方案，在动手之前把方向校准。

frontend-design出界面，把方案变成真正的代码。

design-review查问题，确保最终交付的品质。

从建系统到审方案到出界面再到查问题，一环扣一环，每一环的输出都是下一环的输入。而在这条流水线之外，还有一个贯穿全程的超级Skill。

5.ui-ux-pro-max

这个Skill不太一样，它不是用来执行某个具体步骤的，而是一个巨大的设计知识库。

里面有什么呢？50多种设计风格、161套配色方案、57组字体搭配、99条UX设计指南，覆盖了React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter等10个技术栈。

你在用其他四个Skill的任何阶段，都可以随时调用它。

比如你在用design-consultation的时候不确定选什么风格，问它。

你在用frontend-design的时候不知道用什么图表类型，问它。

你在用design-review的时候对某个设计决策不确定，还是问它。

它就像一个随叫随到的设计百科全书。

这5个Skill给我的感觉，在帮你把那些机械的、重复的、需要耐心的工作加速完成。

04 如何安装

直接告诉claude code 帮你安装即可用啦～

1. design-consultation

2. plan-design-review

https://github.com/garrytan/gstack

3. frontend-design

https://github.com/anthropics/claude-code （内置，不用装）

4. design-review

https://github.com/garrytan/gstack

5. ui-ux-pro-max

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill