用途:在 Pencil 中构建和维护设计系统,提供设计令牌、组件层级、变量管理、可复用组件、变体与主题的实践模式。
主要能力:
- 设计令牌:颜色、字体(字号/字重)、间距、圆角、阴影,以变量定义保持一致性。
- 组件层级:Primitives → Atoms → Molecules → Organisms → Templates。
- 变量管理:用 mcp__pencil__get_variables(filePath) 查询变量与主题;用 mcp__pencil__set_variables(filePath, variables, replace?) 设置变量。
- 变量引用:节点属性中使用 var(colors/primary/500)、var(spacing/4)、var(radii/md) 等。
- 可复用组件:以 reusable: true 注册组件,用 type: "ref" 创建实例,通过 U(实例+"/label", {...}) 修改实例内部。
- 变体:按状态定义独立组件,如 Button/Primary、Button/Secondary、Button/Ghost。
- 常见组件模式:Button、Input Field、Card,含 iconSlot、mediaSlot、actionsSlot 等 placeholder 插槽。
- 主题:定义 themeAxes(如 mode: light/dark),颜色按 mode:light、mode:dark 取值,引用变量时自动应用当前主题。
使用方式:通过 Pencil 的 MCP 工具读写变量,在节点定义中引用变量并注册可复用组件;具体调用示例见资料中的 get_variables、set_variables 及 I()、U() 用法。
适用场景:需要统一设计令牌、搭建组件库、支持明暗主题与组件变体的界面设计工作。
限制:资料未提供安装命令、收费、平台支持范围及具体版本要求;部分示例(如 neutral/200、neutral/400、neutral/600)未在变量结构示例中完整列出,实际使用时需自行确认变量是否存在。