把 Ant Design 规范做成 AI 设计 Skill，B 端设计提效的一次完整实践

把 Ant Design 规范做成一个随时能调的 AI 设计助手，这事儿其实不少团队都在琢磨。但真正落地之后，产品和开发之间的沟通成本才能降下来。这次我把整个流程拆开梳理了一遍，主路径和之前分享的微信小程序设计 Skill 差不多，核心就三个动作：建知识库、生成 Skill、验证迭代。方法本身是可复用的，资源分享见文末。

01

第一步：整理知识库

Skill 的质量，说到底全靠喂进去的内容撑场子。

先把所有 Ant Design 相关资料系统整理了一遍——Token 体系、视觉规范、组件用法、高频页面模式。注意，不是照搬官网文档，而是结合实际项目沉淀下来的版本。比如组件在复杂业务里的实际表现、页面布局的常见约束等等，这些内容整理完导成一份 PDF，作为后续生成 Skill 的原料。

素材越扎实，Skill 给出的答案越能直接上手用。这一步真不能省，省了你后面补的坑可能更大。

02

第二步：用 Claude 生成 Skill

把整理好的 PDF 上传给 Claude，指令非常直接：

基于这份 Ant Design 设计规范文档，生成一个可安装的 Skill 文件。文档里缺失的部分自行补充，确保覆盖组件选型、Token 用法、页面结构三个核心场景。

第一次生成的版本通常是冗余的——规范、资源、示例全都混在一处，不好维护，也不好迭代。

所以生成完后，得重新整理结构，让AI把文件拆分清楚：

• 主 Skill 文件
  （antd-design.skill）：核心规范与调用逻辑

• 资源文件
  （antd_content.txt）：原始规范内容，方便后续更新替换

• Demo 文件
  （antd-design-demo.html）：验证用的页面示例

• 源文件目录
  （antd-design/）：组件、Token、页面模式的分类素材

结构拆清楚之后，哪部分规范更新了，只需要替换对应的资源文件重新生成主 Skill，不用从头来过。这才是整套流程的关键所在，让 Skill 可以持续迭代，而不是一次性的重体力劳动。

03

第三步：跑 Demo 验证

Skill 生成完不能直接发出去，得先验证。

让它跑一个 B 端 Demo，覆盖数据看板、用户管理列表、表单页三个典型场景，对照规范逐页检查 Token 用法和组件状态。跑通没有明显偏差，才打包成最终的 antd-design.skill。

Skill 本身是需要迭代的，仔细看生成的页面，还是会有一些细节问题。需要用 demo 反复验证，然后反向去优化 Skill。

04

装上之后，我们来看看业务验证效果

举一个真实场景：订单管理页面。

需求很常见——列表展示订单状态，支持筛选和批量操作，点击进详情可以查看流转记录和操作日志。听起来不复杂，但真正开始画的时候问题一个接一个：

订单状态有六种，Tag 颜色怎么定才符合规范？筛选条件有八个，是全部平铺还是折叠？批量操作按钮放顶部还是跟着勾选浮出？详情里的审批流转记录用 Timeline 还是 Steps？操作日志字段多，Descriptions 怎么分组？

以前这些问题要么翻文档、要么靠经验、要么和前端来回拉锯。现在直接问 Skill，每个问题两分钟内有答案，答案带 Token 名称、组件嵌套方式、边界情况处理，可以直接写进标注。一个页面下来，少来回了三四次。

下面是提示词：

你是一名资深 B 端产品设计师，正在使用 Ant Design 组件库设计一个订单管理页面。页面包含以下模块：顶部筛选区：订单编号、状态、时间范围、客户名称，共 8 个筛选条件订单列表：展示订单号、客户、金额、状态、创建时间、操作列，支持批量操作订单详情（侧滑 Drawer）：基本信息、商品明细、审批流转记录、操作日志请严格按照 Ant Design 规范输出完整可运行的 HTML 页面，要求：使用语义色 Token，不自定义色值订单状态用 Tag 组件，覆盖待付款/待发货/已发货/已完成/已取消/售后中六种状态审批流转记录用 Timeline 组件筛选条件超过 4 个默认折叠，展开显示全部批量操作跟随勾选浮出，未勾选时隐藏页面整体配色和间距符合 Ant Design 5.x 规范

生成效果预览：

再看几个具体问题的回答——

用 Timeline。节点通过/拒绝/进行中/等待，分别对应 colorSuccess（绿）/ colorError（红）/ colorPrimary（蓝）/ 默认灰，用 color 属性控制，不要自己写色值。每个节点嵌套 Descriptions size="small" 展示操作人、时间、意见。超过 10 条加折叠，默认展示最近 3 条。

用 Tag 走语义色：正常 color="success"，禁用 color="error"，待审核 color="warning"，不要自定义色值。每个 Tag 加同色系 6px 圆点，颜色不是唯一信息传达方式，色盲用户靠文字也能区分。

按信息归属拆 3 个 Card 分组，标签宽度固定 84px 右对齐，输入框按语义定宽。底部操作区 sticky，按钮顺序：取消 → 保存草稿 → 提交，提交中进入 loading 防重复提交。

普通问 AI 只能给你组件名。这个 Skill 告诉你用哪个 Token、怎么嵌套、超长时的兜底方案，答案有依据，可以直接写进标注。

写在最后

AI 真正的价值，不是帮你少画几张图，而是把散在文档里、存在经验里的判断依据，变成随时可调用的东西。

这个方法不只适用于 Ant Design——任何你有积累的设计规范、组件库、业务模式，都可以用同样的方式沉淀成 Skill。积累越深，用起来越顺手。就像之前做微信小程序的 Skill 一样，同一个思路换一套素材，成果完全是另一回事。