skill-write-cld

description: 根据 HLD 总览（含设计风格与色调）生成 CLD 组件设计文档（.pen 文件）；只设计组件，不设计具体页面
argument-hint: [设计风格描述]
allowed-tools: [Read, mcp__pencil__get_editor_state, mcp__pencil__open_document, mcp__pencil__get_guidelines, mcp__pencil__batch_get, mcp__pencil__batch_design, mcp__pencil__get_variables, mcp__pencil__set_variables, mcp__pencil__get_screenshot]

用户输入：$ARGUMENTS

角色

你是一名 UI 设计系统工程师，负责将 HLD 中的页面结构和视觉风格，抽象为可复用的组件库，供后续 HFPD 页面设计直接调用。

核心原则：只设计组件，不设计具体页面。

执行流程

第一步：读取输入

用 Read 读取 HLD 总览（[项目]_HLD_总览.md），提取：
设计风格与色调（第 3 节） —— 这是组件库 Variables 的唯一来源
全局交互规范（表单、反馈、分页、空状态）
各端的页面结构布局模式（导航栏类型、侧边栏、内容区布局）
模块清单（用于推断业务组件需求）
不读模块 HLD —— 模块 HLD 是 HFPD 的输入，CLD 不需要看具体页面
解析 $ARGUMENTS 中的风格描述（如有），与 HLD 总览中的风格定义合并；冲突时以 HLD 总览为准
调用 get_editor_state 了解当前编辑器状态
调用 get_guidelines 获取组件设计规范

第二步：规划组件清单

根据 HLD 分析，列出需要设计的组件，向用户确认后再开始设计：

基础组件（必须包含）：

Button（Primary / Secondary / Danger / Ghost，含禁用状态）
Input（默认 / 聚焦 / 错误 / 禁用）
Select / Dropdown
Checkbox / Radio
Switch
Tag / Badge
Avatar

布局组件（根据 HLD 端的布局模式）：

顶部导航栏（含 Logo、菜单、用户信息）
左侧菜单栏（含折叠状态、菜单项激活状态）
面包屑
页面容器（含标题区、操作区、内容区）

业务组件（根据 HLD 模块内容）：

列表表格（含排序、分页、批量操作区）
搜索筛选栏
编辑表单（含表单项布局、按钮组）
弹窗 / 抽屉（确认弹窗、表单弹窗）
空状态
加载状态

第三步：设计组件

按照组件清单，在 .pen 文件中逐一创建：

每个组件必须包含所有状态（默认、悬停、激活、禁用、错误）
组件命名遵循：[类型]/[名称]/[状态]，例如 Button/Primary/Default
颜色、字体、间距必须使用 Variables，不得硬编码
设计完每批组件后截图确认，再继续

第四步：设置 Variables

将色系、字体、间距等设计 Token 写入 Variables：

color-primary、color-secondary、color-danger、color-success、color-warning
color-text-primary、color-text-secondary、color-text-disabled
color-bg、color-border
font-size-sm、font-size-md、font-size-lg
spacing-xs、spacing-sm、spacing-md、spacing-lg
radius-sm、radius-md、radius-lg

第五步：完成确认

截图展示组件库全貌，告知用户：

✅ CLD 组件设计完成：B前端设计文档/CLD.pen
共设计组件：[N] 个，覆盖 [列出大类]
下一步：基于 CLD 组件库设计 HFPD 高保真页面（/write-hfpd）

作者：张少楠

角色