铅笔设计技能（pencil-design-skill）

铅笔设计技能 设计生产级UI，并在Pencil中生成干净的代码。有两种模式： 模式A — 直接文件写入：通过write_to_file / replace_in_file写入.pen JSON文件。在写入任何.pen文件之前，必须阅读references/pen-format.md。 模式B — 基于MCP工具：当Pencil MCP连接时，使用pencil_batch_design、pencil_batch_get等。请参阅下面的MCP工具。 何时使用 创建/编辑.pen文件（UI屏幕、组件、设计系统） 将Pencil设计转换为React/Vue/Svelte + Tailwind v4 + shadcn/ui代码 同步Pencil变量和代码之间的设计令牌（@theme块） 关键规则（必须遵循） 在写入任何.pen文件之前，必须阅读pen-format.md（模式A）—— 包含所有节点类型、变量、布局规则、默认模板。 确认样式 — 如果用户没有指定样式，使用ask_followup_question询问，参考styles/style-picker.md。 绝不能默默地默认为Shadcn Dark。 强制文件拆分 — 在设计之前，计算请求的画板数量： ≤ 3：继续 4：询问用户（保持一起还是拆分） ≥ 5：必须询问用户拆分策略（1/文件、3/文件或4/文件）。请参阅文件拆分政策。 始终使用变量 — 绝不能硬编码颜色/半径/字体。 使用"$--background"，而不是"#09090b"。 如果变量不存在，创建它。 布局完整性是最高优先级 — 适用于所有输出（PPT幻灯片、网页、移动设备、组件）。 内容不得超出其父级或画板。 不得有重叠。 不得有歪斜/不对齐的元素。 请参阅references/layout-integrity.md + references/overflow-prevention.md。 总结：每个顶级画板必须使用"layout": "vertical"或"horizontal"（而不是"none"），当它包含流动内容时。 仅当使用"none"进行故意的绝对定位装饰（封面/英雄幻灯片）时，每个子级必须保持在画板矩形内。 每个文本节点在自动布局父级中： "width": "fill_container" + "textGrowth": "fixed-width"。 每个子框架，其内容可能会增长： "width": "fill_container"和/或"height": "fit_content"。 绝不能固定宽度大于父级的内部宽度（父级宽度 - 水平填充）。 画板具有固定宽度 + 固定高度；头部 + 身体（fill_container）+ 页脚的总和必须等于画板高度。 正文区域内容不得超过其计算高度。 水平卡片行：使用gap + 宽度： "fill_container"在每个卡片上。 绝不能手动选择不均匀的固定像素宽度。 按钮/徽章：使用"fit_content"（填充[v，h]）+ "justifyContent": "center" + "alignItems": "center"。 绝不能固定宽度小于标签。 绝不能手动计算内容块在自动布局父级中的x/y。 默认UI语言是简体中文 — 所有用户面向的文本在.pen文件中使用简体中文，除非用户明确要求使用其他语言。 技术术语/品牌名称可以保持英文。 多画板布局 — 当一个文件中存在≥ 2个画板时，默认方向是水平（画板横向排列，x递增，100 px间距）。 每个顶级框架需要x和y。 默认（水平）：y = 0对于所有；x = 0，W + 100，2（W + 100），… 示例：1440×900：x = 0，1540，3080，4620。 垂直（仅当用户明确要求）：x = 0对于所有；y = 0，H + 100，2（H + 100），… 示例：1440×900：y = 0，1000，2000，3000。 对于PPT（1280×720）：y = 0，820，1640，2460。 始终在设计之前询问用户（同时使用英文和中文），除非他们已经指定了方向： 您的请求包含N个画板。排列方向： 水平（默认）/横向排列（默认） 垂直/竖向排列 图标字体家族 — 始终使用"iconFontFamily": "lucide"。 不使用其他字体家族。 重用资产 — 在生成图像/徽标之前，搜索现有的节点（模式B使用pencil_batch_get）。 复制和调整大小，而不是重新生成。 请参阅mcp/image-reuse.md。 在模式B中，逐节构建 — 每个部分后截图 + 布局检查，解决问题后再继续。 请参阅mcp/screenshot-qa.md。 强制的预完成布局审计 — 在声明任何.pen任务完成之前，运行布局完整性检查清单。 在模式B中：pencil_snapshot_layout带有problemsOnly：true对于每个画板必须返回空。 在模式A中：手动验证每个画板与检查清单。 代码生成需要前端设计技能（如果可用） — 加载它以获取美学方向。 文件拆分政策 单个.pen文件绝不能包含超过4个画板（会导致性能问题）。 当≥ 4个画板被请求时，询问用户（同时使用英文和中文）： 您的请求包含N个画板。请选择拆分策略： 每个画板一个文件/每个文件最多3个画板 每个文件最多4个画板 不拆分（不推荐） 命名：feature-01.pen，feature-02.pen，… 或按逻辑组（feature-onboarding.pen）。 快速模板 单个画板（Shadcn Dark默认） { "version": "2.8", "children": [ { "type": "frame", "id": "scrn1", "name": "页面", "theme": { "Mode": "Dark" }, "clip": true,