Pencil MCP 工业级 UI 设计 Skills 本 Skills 提供了一套工业级标准的 UI 设计规范，用于 Pencil MCP 设计工作。 快速开始 1. 初始化设计系统变量 在开始设计前，先设置设计系统变量： 2. 创建可复用组件 使用 创建组件，通过 复用： --- 设计系统规范 颜色系统 (Color Tokens) | 变量名 | Light Mode | Dark Mode | 用途 | |--------|------------|-----------|------| | | | | 页面背景 | | | | | 主文本 | | | | | 卡片背景 | | | | | 卡片文本 | | | | | 次要背景 | | | | | 次要文本 | | | | | 边框 | | | | | 主按钮 | | | | | 主按钮文本 | | | | | 次按钮 | | | | | 强调色 | | | | | 危险操作 | | | | | Focus ring | 字体层级 (Typography Scale) | 层级 | 大小 | 字重 | 行高 | 用途 | |------|------|------|------|------| | Display | 36px | 700 | 1.2 | 大标题 | | H1 | 24px | 600 | 1.3 | 页…