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

推荐语

将 Ant Design 规范转化为 AI 设计助手，让 B 端产品与开发团队高效协同，快速产出符合规范的设计方案。

核心内容：
1. 构建高质量知识库：系统整理 Ant Design 的 Token、组件与页面模式
2. 生成与迭代 AI Skill：利用 Claude 生成可维护、易迭代的设计助手文件
3. 业务验证与优化：通过典型场景 Demo 验证效果，持续反向优化 Skill

杨芳贤

53AI创始人/腾讯云(TVP)最具价值专家

最近收到不少小伙伴私信，能不能做一个 B 端设计的 AI Skill，尤其是产品和开发同学，希望日常遇到原型demo的项目可直接调用。

国内做 B 端的前端团队有很多在用 Ant Design 这套，设计和开发能说同一种语言，还原成本少很多——所以我照着这个方向做了一个，主路径和上次分享的微信小程序设计 Skill 类似，整个过程拆开来给大家看一遍，资源分享见文末~

01

第一步：整理知识库

Skill 的质量取决于喂进去的内容。

我先用 AI 把所有 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。

PS：还是之前说的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 圆点，颜色不是唯一信息传达方式，色盲用户靠文字也能区分。

问：18 个字段的新增表单怎么组织？

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

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

写在最后

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

这个方法不只适用于 Ant Design——任何你有积累的设计规范、组件库、业务模式，都可以用同样的方式沉淀成 Skill。积累越深，用起来越顺手。