用途
本技能用于在 Pencil 的 .pen 文件中初始化 Ant Design（antd）设计令牌，并创建 antd 组件的总览框架。它面向需要在 Pencil 中搭建 Ant Design 设计系统的场景。
触发条件
仅在以下情况使用：
- 用户明确同时提到“Pencil”和“Ant Design”（或“antd”）；
- 用户希望在 Pencil 的 .pen 文件中初始化 Ant Design 令牌（颜色、字体、圆角）；
- 用户需要 Pencil 中 antd 组件的组件总览框架；
- 用户提到“Pencil”并同时提到“Ant Design”“antd”或 antd 专有组件（Button、Table、Modal、Form）；
- 编排技能（pencil-ui-designer）路由了 antd 初始化请求。
主要能力
该技能输出一个 PENCIL_PLAN，由 Agent 按顺序调用 Pencil MCP 工具：open_document、set_variables、batch_design，并可选调用 get_screenshot。
第一步：初始化变量（set_variables）
使用 mcp__pencil__set_variables 注册 Ant Design 设计令牌，遵循 .pen 文件 schema。
主要/语义色：
- ant-primary: #1677ff
- ant-primary-hover: #4096ff
- ant-success: #52c41a
- ant-warning: #faad14
- ant-error: #ff4d4f
- ant-info: #1677ff
中性/文本：
- ant-text: #000000e0
- ant-text-secondary: #00000073
- ant-border: #d9d9d9
- ant-bg: #ffffff
字体与圆角：
- ant-font-size-base: 14px
- ant-border-radius: 6px
如需更多令牌，可从 Ant Design 令牌文档补充。
第二步：创建组件总览结构（batch_design）
使用 mcp__pencil__batch_design 创建“Components Overview”框架，并按 Ant Design 文档划分区块：
- 通用（General）：Button、Icon、Typography
- 布局（Layout）：Grid、Divider、Space
- 导航（Navigation）：Affix、Breadcrumb、Dropdown、Menu、Pagination、Steps、Tabs
- 数据录入（Data Entry）：AutoComplete、Cascader、Checkbox、DatePicker、Form、Input、InputNumber、Radio、Rate、Select、Slider、Switch、TimePicker、Transfer、Upload
- 数据展示（Data Display）：Avatar、Badge、Calendar、Card、Carousel、Collapse、Descriptions、Empty、Image、List、Popover、Statistic、Table、Tabs、Tag、Timeline、Tooltip、Tree
- 反馈（Feedback）：Alert、Drawer、Message、Modal、Notification、Progress、Result、Skeleton、Spin
使用 Auto Layout 组织框架。每次 batch_design 调用最多 25 个操作。
使用方式
示例：初始化 Ant Design 变量
{
"name": "set_variables",
"arguments": {
"filePath": "designs/app.pen",
"replace": false,
"variables": {
"ant-primary": "#1677ff",
"ant-success": "#52c41a",
"ant-warning": "#faad14",
"ant-error": "#ff4d4f",
"ant-text": "#000000e0",
"ant-border": "#d9d9d9",
"ant-font-size-base": "14px",
"ant-border-radius": "6px"
}
}
}
最佳实践
- 对照 Ant Design 令牌文档核验令牌值。
- 除非请求完全重置，否则使用 set_variables 时设置 replace: false。
- 组件总览框架使用 Auto Layout。
- 每次 batch_design 调用最多 25 个操作；如有需要，按分类拆分。
关键词
pencil、antd、ant design、design system、init、variables、components
参考资料
- references/contract.md – 设计令牌与组件命名。
- references/official.md – 官方文档链接。
- references/examples.md – 示例 PENCIL_PLAN。
- references/components.md – 组件规范。
限制
本技能仅在用户明确同时提到“Pencil”和“Ant Design”（或“antd”），或由编排技能路由 antd 初始化请求时使用。关于收费、价格、平台支持范围等信息，资料中暂未提供。