用途
该技能用于初始化基于 Element Plus 规范的设计系统，具体目标是在 .pen 文件中设置全局调色板，并创建初始的组件库框架。
使用约束：仅在用户明确提到 "Pencil" 和 "Element"（或 "Element Plus"）时，或在编排 Pencil 设计系统初始化任务时使用本技能。
主要能力
该技能输出一个 PENCIL_PLAN。之后由 Agent 按顺序调用 Pencil MCP 工具：open_document、set_variables、batch_design，并可选调用 get_screenshot。
第一步：初始化变量（set_variables）
使用 mcp__pencil__set_variables 注册 Element Plus 设计令牌，并遵循 .pen 文件 schema。
主色 / 语义：
- el-color-primary: #409eff
- el-color-success: #67c23a
- el-color-warning: #e6a23c
- el-color-danger: #f56c6c
- el-color-info: #909399
文本与边框：
- el-text-color-primary: #303133
- el-text-color-regular: #606266
- el-text-color-secondary: #909399
- el-border-color: #dcdfe6
- el-border-radius-base: 4px
字体：
- el-font-size-base: 14px
如需要更多令牌，请从 Element Plus 主题文档中补充。
第二步：创建组件概览结构（batch_design）
使用 mcp__pencil__batch_design 创建 "Components Overview" 框架，并按 Element Plus 文档划分区块：
基础（Basic）：Button、Link、Icon
布局（Layout）：Container、Grid、Divider
表单（Form）：Radio、Checkbox、Input、InputNumber、Select、Cascader、Switch、Slider、TimePicker、DatePicker、DateTimePicker、Form、Upload、Rate
数据（Data）：Table、Tag、Progress、Tree、Pagination、Avatar、Skeleton、Empty
导航（Navigation）：Menu、Tabs、Breadcrumb、PageHeader、Dropdown、Steps
反馈（Feedback）：Alert、Loading、Message、MessageBox、Notification、Dialog、Drawer、Popover、Tooltip
请使用自动布局（Auto Layout）组织框架。每次 batch_design 调用最多保持 25 个操作。
使用方式
用户明确提到 "Pencil" 与 "Element"（或 "Element Plus"）时触发。技能输出 PENCIL_PLAN，Agent 依次调用 open_document、set_variables、batch_design，可选 get_screenshot。变量注册建议使用 set_variables 时 replace: false，除非明确要求完全重置。
适用场景
需要基于 Element Plus 规范初始化新的设计系统、设置全局调色板并在 .pen 文件中创建初始组件库框架时。
最佳实践
- 对照 Element Plus 主题文档核实令牌值。
- 除请求完全重置外，使用 set_variables 时 replace: false。
- 组件概览框架使用自动布局（Auto Layout）。
关键词
pencil, element, element plus, design system, init, variables, components
参考资料
- references/contract.md – 设计令牌与组件命名。
- references/official.md – 官方文档链接。
- references/examples.md – 示例 PENCIL_PLAN。
- references/components.md – 组件规范。
限制
本技能仅用于初始化工作，收费、价格、平台等其它信息暂未提供。