pencil-ui-design

Pencil UI Design Skill 为 Pencil MCP 生态系统提供了一套完整的框架，用于建立一致且高质量的用户界面。此技能专为需要将抽象设计需求转化为可编程 UI 实现的工程师与设计师所设计。通过利用集中式的设计 Token 与模块化组件库，用户能实现快速、可重复且可扩展的设计成果，同时符合工业级标准。

• 标准化的设计系统 Token，涵盖全局颜色、字体层级、4px 网格间距系统以及基于海拔高度的阴影定义。

• 包含多种可立即使用的 UI 组件库，如 Primary/Secondary 按钮、卡片、输入框、头像与徽章，并定义了精确的布局、内距与圆角属性。

• 整合支持 Material Symbols Rounded 图标集，确保设计成果的视觉一致性。

• 先进的工作流程自动化能力，允许进行批量更新、组件参照 (ref) 以及属性覆盖，以在复杂文档中维持视觉和谐。

• 内置布局健全性检查、截图生成与设计属性验证工具，确保最终产出符合设计规范。

• 此技能需要运行中的 Pencil MCP 服务环境，以通过 .pen 文件格式执行设计操作。

• 用户在开始布局前应使用 mcp_pencil_set_variables 初始化设计系统变量，以确保 Token 正确传播。

• 输入通过定义组件 Frame 属性的结构化 JSON 对象处理；输出则包含渲染在 Pencil 文档模型中的设计节点。

• 通过使用 reusable: true 标志来提升模块化程度，借此利用批量设计 API 在多个实例中进行高效更新。

• 请确保严格遵守 4px 网格与推荐的 Inter/Noto Sans SC 字体堆叠，以维护工业级 UI 标准的完整性。