拆解 Antdesign Skill 和阿里云 Vibe design分享，让你的设计工作流进入 AI 时代（一）

文章概述

Ant Design Skill 是 Ant Design 官方设计团队写给 AI Agent 的一套企业级中后台设计与实现指南。以前这些经验主要装在设计师、产品经理和前端工程师脑子里，现在它们被拆成了 AI 能按步骤读取、照着执行的文件。

先纠正两个很容易出现的误会：它不是“Ant Design 怀旧服”，也不只是一个装满 TSX 的代码仓库。更准确地说，它像一份写给 AI 的“岗位手册 + 样板间 + 验收清单”，里面包括：

AI 的入口指令与决策流程；
中后台布局和业务组件规范；
React + TypeScript 代码模板；
Design Token 与全局样式；
禁止项和验收清单；
Design Skill 构建方法论。

它主要解决的是：AI 拿到业务需求后，怎样别乱画、别乱拼，做出符合 Ant Design 规范的企业级中后台界面。

至于“已成交客户能不能删除”“谁可以审批”“失败后怎么补偿”，它不知道，也不该装作知道。这些业务逻辑还得由 PRD、业务规格、现有代码或用户亲口告诉它。Skill 会装修房子，但不会替业主决定谁能拿钥匙。

结合源码、模板实景预览和 D20 Vibe Designing Playbook 来看，这套 Skill 已经很会“照规矩干活”，但还不太会在信息不够时停下来追问，也缺少版本兼容验证、规则自动检查、独立 Evaluator 和失败回流。后面会具体说，不急着先给它发满分奖状。

总而言之，Ant Design 负责提供设计系统和组件，Ant Design Skill 负责告诉 AI 如何在企业级中后台场景中正确选择、组合和实现这些能力。

专业词汇介绍

Ant Design 是什么

Ant Design 是一套面向企业级产品的设计系统和前端组件库。说人话：它是一盒标准化的“界面乐高”，里面有按钮、输入框、表格、菜单、弹窗，也告诉你这些零件怎么拼才不像临时工棚。

Skill 是什么

这里的 Skill 不是游戏技能，也不是点一下就放大招的按钮。它是一组交给 AI 阅读的工作说明和配套材料，告诉 AI：什么时候出场、先看哪份文件、该抄哪个模板、哪些坑不许踩，做完以后又该怎么自查。

可以把 Skill 类比成企业给新员工准备的“岗位手册 + 操作流程 + 标准模板”。

AI Agent 是什么

普通聊天机器人主要负责“陪你聊”；AI Agent 则会真的下场干活：读项目、改代码、跑程序、看结果。本报告后面说的“AI”，主要就是这种会动手的 Agent，不是只在聊天框里点头的那种。

TSX 模板是什么

TSX 是 React 项目中的一种代码文件格式。非技术读者不需要掌握其语法，只需知道：

TSX 模板就是已经搭好结构的页面半成品——不是最终交付，但也绝不是一张空白画布。

例如，仓库中的批量操作表格模板已经把表格、按钮和日期选择器摆好了。AI 不必面对空文件深吸一口气，只需把示例字段换成真实业务字段，再接上真实数据。查看批量操作表格源码

源码开头可以看到它已经把标准零件引入页面：

import { ProTable } from '@ant-design/pro-components';
import { Button, DatePicker, Table } from 'antd';

这里的 import 可以理解为“去零件柜里把这几样东西拿过来”，不是某种神秘咒语。

Design Token 是什么

Design Token 是给颜色、间距、圆角和阴影等设计值起的统一名称。例如：

--color-primary: #1677ff;
--border-radius-lg: 8px;
--padding: 16px;

这样，每个页面就不用举行一次“今天到底用哪种蓝”的内部会议。以后品牌主色变化，改统一定义即可，不必满项目追着色值跑。查看全局样式源码

Layout、路由和组件是什么

React：用于构建可交互网页界面的开发框架。
TypeScript：一种能够明确标注数据类型的编程语言，有助于提前发现字段和参数错误。
CSS：控制页面颜色、尺寸、间距和排版的样式语言。
ProComponents：在 Ant Design 基础组件之上封装的中后台高级组件，例如 ProTable 和 ProForm。
Layout（布局外壳）：后台最外层的固定框架，例如左侧菜单、顶部栏和中间内容区。
路由：页面地址与具体页面的对应关系，例如访问 /customers 时显示客户列表。
组件：组成界面的可复用零件，例如按钮、表格、表单和弹窗。
接口（API）：前端页面与后台数据系统沟通的通道，例如“查询客户列表”或“提交审批”。
工作区：AI 当前能够读取和修改的项目文件目录。
DOM 结构：页面元素的组织层级，可以理解为页面零件的装配关系。
className：代码中给页面元素添加的样式名称，改错后可能导致统一样式失效。
Hex 色值：以 # 开头的颜色编号，例如 #1677ff 代表一种蓝色。
any类型：TypeScript 中表示“不检查具体数据类型”的宽泛写法，滥用会削弱代码检查能力。
Tooltip：鼠标停留在内容上时出现的小提示框。
硬编码：把颜色或尺寸直接、重复地写在许多页面里，导致以后难以统一修改。

AntDesign 关系说明

可以将整个体系理解为：

Ant Design
├── 给人阅读的设计规范与组件文档
├── 给应用运行的 React 组件库
└── 给 AI Agent 执行的 Ant Design Skill
    ├── 决策规则
    ├── 详细规范
    ├── TSX 模板
    ├── Design Token
    └── 验收清单

传统 Ant Design 文档主要服务于人，默认读者会自己判断：

设计师理解设计原则；
前端工程师查看组件 API；
产品和研发团队自行判断页面结构与组件组合。

Ant Design Skill 做的事，是把其中一部分经验翻译成 AI 更容易执行的形式：

什么时候使用某种布局；
什么条件下选择某种组件；
应当先读取哪个规范文件；
有模板时必须从哪个模板开始；
哪些结构和视觉写法禁止出现；
生成后需要检查什么。

所以，“以前主要给人看，现在多了一套给 AI 执行的表达方式”，这个理解基本对；但叫它“Ant Design 旧版模板库”就像把驾校教练说成旧车仓库——都和车有关，但显然不是一回事。

Skill 优劣势

适合的产品

这套 Skill 的舒适区是功能复杂、信息密度较高的企业级中后台，包括：

ERP、CRM；
企业管理系统；
运营后台；
运维控制台；
工单和审批系统；
数据看板；
以表格、列表、表单和详情页为核心的生产力工具。

它不太适合营销官网、内容网站、移动端 App 或高度品牌化的创意页面。让它做 CRM 是专业对口；让它做时装品牌首页，就多少有点让财务总监去拍 Vogue。

目标技术栈

仓库当前定义的主要技术栈为：

React 19；
TypeScript 5.x；
Ant Design 6.x；
@ant-design/pro-components 2.7.x；
@ant-design/icons 6.x；
@ant-design/charts 2.x（按需使用）。

这也再次说明：它不是从仓库深处考古出来的旧版遗留模板。

源码依据：SKILL.md 明确说明输出物是 React 19、TypeScript 5.x 的 .tsx 组件，并列出了 Ant Design 6.x 和 ProComponents 2.7.x 等依赖。查看技术栈声明

最小源码片段：

React 19 + TypeScript 5.x
antd ^6.0.0
@ant-design/pro-components ^2.7.0

白话解释：这三行限定了页面开发框架、代码语言和主要组件版本。旧项目接入前得先对一下版本，别把“能复制”误认为“复制过去就一定能跑”。

项目结构

ant-design-skill/SKILL.md：AI 的带班主管

SKILL.md 是整个 Skill 的入口，主要包含：

Skill 名称与触发描述；
支持的产品和组件场景；
Skill、模板与官方文档之间的优先级；
按任务类型分段读取文件的指引；
技术栈和运行环境；
布局与组件选择规则；
完整实施流程；
输出规则；
Design Token 接入步骤；
自测与验收清单。

它相当于一份给 AI 的标准作业程序：先干什么、后干什么、遇到哪类活去哪个货架拿工具，都写在这里。

源码中直接规定“有代码模板时必须模板起步”，说明模板不是可有可无的参考，而是已覆盖场景的默认实施起点。查看模板优先级规则

最小源码片段：

2. **有代码模板时必须模板起步**

白话解释：仓库里已经有同类页面，就先站在成熟模板的肩膀上。不要每次都从一个空白 div 开始追寻自我。

references/：规矩都放在这个抽屉里

该目录是设计规则库，主要包括：

文件	内容
layout.md	页面结构、标题区、面包屑、侧边导航、顶部导航、混合导航
components_Form.md	基础表单、分步表单、嵌入表单、筛选表单、登录表单
components_Table.md	基础表格、排序筛选、嵌套、批量操作、拖拽、工具栏
components_List.md	基础、编辑、工具栏、展开、选择、查询、竖排及卡片列表
components_DescriptionList.md	基础、可编辑及分组卡片描述列表
components_Chart.md	图表、指标卡及相关视觉和交互规则
global-style.css	颜色、字体、间距、圆角、阴影、层级等全局 Token 和样式

这些规则并不只会说“请保持美观”这种正确但没用的话，而是具体到：

筛选项数量与筛选组件的选择关系；
页面卡片内外的间距来源；
表格操作列宽度和横向滚动条件；
页面标题与面包屑的职责边界；
分步表单的结构和步骤条实现方式；
图表 Tooltip 的浮层层级；
页面级卡片的圆角、背景和投影。

这里的“浮层层级”决定 Tooltip 会不会辛辛苦苦弹出来，结果被导航或弹窗压在下面，表演了个寂寞。

scripts/：已经搭好的页面样板间

这里的 scripts 才是大家第一眼最容易认成“模板库”的部分。它确实是一组标准页面与组件模板；只是别忘了，模板只是整套 Skill 的一部分。TSX 是包含 React JSX 语法的 TypeScript 文件，扩展名为 .tsx。

模板主要分为：

scripts/
├── layout/             导航布局
├── form/               表单
├── table/              表格
├── list/               列表
├── description-list/   详情和描述列表
└── charts/             图表和指标卡

当前仓库包含的典型模板有：

侧边导航、顶部导航和混合导航；
基础表单、横向与竖向分步表单、嵌入表单、筛选表单和登录表单；
基础表格、筛选排序表格、嵌套表格、批量操作表格、拖拽表格和工具栏表格；
基础、编辑、工具栏、展开、选择、查询、竖排和卡片列表；
基础、可编辑和分组卡片描述列表；
基础图表、基础指标卡、同级指标卡、总分指标卡、嵌套指标卡和页签联动指标卡。

模板的作用不是替你把业务变出来，而是先把经过验证的基本结构钉住。AI 接下来要替换：

业务字段；
数据和文案；
表单校验；
表格列；
图表配置；
查询、提交和操作逻辑；
项目内的路由及接口连接。

仓库总索引明确列出了布局、表单、表格、列表、描述列表和图表模板及各自适用场景。查看模板索引

源码目录片段：

scripts/
├── layout/
├── form/
├── table/
├── list/
├── description-list/
└── charts/

白话解释：一个目录管一类常见后台页面。AI 先判断今天做表格还是表单，再去对应货架拿模板，不至于进超市以后凭感觉乱逛。

global-style.css：负责让页面别各长各的

该文件通过 Design Token 和公共样式统一：

主色与语义色；
页面背景与文本颜色；
字体和字号；
页面及组件间距；
圆角；
阴影；
导航尺寸；
卡片、列表、表格和表单的公共样式；
z-index 和浮层层级。

它给不同页面铺了一条共同的视觉基线，减少 AI 在每个页面里现场发挥：这个蓝再深一点，那个圆角再大一点，最后同一个系统像拼了三家外包。

源码中的 :root 区域集中定义了颜色、阴影、圆角和间距，并通过变量在后续样式中重复使用。查看 Token 定义

源码片段：

--color-primary: #1677ff;
--shadow: 0 1px 2px 0 rgba(...);
--border-radius-lg: 8px;
--padding: 16px;

白话解释：这四项分别集中控制主色、投影、圆角和常用留白。rgba(...) 在报告中省略了阴影的完整数值，原值可通过上方源码链接查看。

《Design Skill 构建指南》：不只给鱼，也顺手讲了怎么织网

仓库还提供一份构建指南，帮助团队理解如何将自身设计系统整理为：

SKILL.md + references + templates + Design Token + 验收规则

所以，这个仓库一边提供可直接使用的 Ant Design Skill，一边也在示范：如果你们公司有自己的设计系统，可以怎样把它整理成 AI 能执行的 Skill。