pencil-design-from-stitch-html

用途

本技能（pencil-design-from-stitch-html）用于把 Stitch 屏幕（HTML 或 Stitch URL/项目 ID、屏幕 ID）转换为 Pencil 的 .pen 设计稿，要求与页面布局和样式达到精确的视觉对应。它属于 pencil-skills：Stitch 相关技能负责 PRD 到原型，本技能负责原型到 .pen 设计稿的转换。

主要能力

• 解析 Stitch 导出的基于 Tailwind 的 HTML，提取 DOM 树与每个节点的 class 列表，保留 header、main、section、form、input、button、label 等语义。
• 定义 HTML 元素到 Pencil 节点的映射规则（frame、text、ref、icon_font）以及对应的 batch_design 操作。
• 定义 Tailwind 到 .pen 的样式映射：背景、颜色、尺寸、外边距、内边距、阴影、圆角、排版（fill、padding、gap、stroke、cornerRadius、fontSize、fontWeight、textColor）。
• 定义严格的执行顺序与批次拆分：父节点必须先于子节点创建，每个 batch_design 调用最多 25 个操作。
• 支持可选目标框架：uView 2、uView Pro、Bootstrap、Element Plus、Layui、Vant；指定后使用对应框架的样式文档与设计系统引用。

使用方式

前置条件：

• 当用户提供 Stitch URL 或 projectId/screenId 时，需要 Stitch MCP Server。
• 需要 Pencil MCP（batch_design、batch_get、open_document、find_empty_space_on_canvas、get_screenshot）。
• 需要 Stitch projectId 和 screenId（来自 URL 或 list_projects / list_screens），或用户粘贴的 HTML。
• 可选：已有包含设计系统的 .pen 文件（pencil-ui-design-system-*）；否则使用基础节点（frame、text、icon_font）。

执行步骤：

1. 若输入为 Stitch URL/ID：解析 projectId/screenId，调用 get_screen 获取 htmlCode.downloadUrl、screenshot.downloadUrl、width、height、title；下载 HTML 保存到临时文件。若获取失败，请用户粘贴 HTML。
2. 解析 HTML：构建 DOM 树与每个节点的 class 列表，识别语义区域（header、main、sections、forms）。
3. 规划批次：按执行顺序阶段生成 N 个 batch_design 载荷（filePath + operations 字符串），每批使用唯一绑定名，后续批次通过绑定名引用前一批创建的父节点。
4. 运行 Pencil：open_document → find_empty_space_on_canvas（如需要）→ 按顺序逐批 batch_design → get_screenshot(root) 验证。
5. 验证：将截图与 Stitch 截图对比，记录布局或样式差异以便下一轮迭代。

执行顺序与批次拆分（严格顺序，父节点先于子节点，每批最多 25 个操作）：

• 阶段 0：画布准备（可选），调用 find_empty_space_on_canvas 获取位置，不执行 batch_design。
• 阶段 1（Batch 1）：在 document 下创建 root frame（垂直布局，宽度取自屏幕如 390，高度固定如 844 或 884，避免 root 使用 fit_content 而子节点使用 fill_container 时画布空白；填充为页面背景）；在 root 下创建 header frame（水平布局，高度 56 或 64，宽度 fill_container，内边距，填充 #fff，可选底部描边）；在 root 下创建 main frame（垂直布局，宽度 fill_container，高度 fit_content(800)，内边距 16，间距 16，placeholder true）。绑定名：root、header、main。
• 阶段 2（Batch 2）：在 header 下填充返回图标（icon_font arrow_back）、标题文本、可选右侧操作区。绑定名：backIcon、titleText、headerRight。
• 阶段 3（Batch 3，如有）：在 root 下创建标签栏 tabsWrap（水平，高度 48）及 tab1/tab1Text、tab2/tab2Text、tab3/tab3Text。超过 3 个标签可拆分为 Batch 3a/3b，保持总数不超过 25。
• 阶段 4–5（Batch 4 + 5）：Batch 4 在 main 下创建 card1（垂直，fill_container，内边距 24，间距 16，填充 #fff，圆角 12，描边 1px）、card1Header、card1Title、可选 card1Right、card1Body（垂直，placeholder true）。Batch 5 在 card1Body 下为每个表单行创建 row frame、label 文本、input frame（或 ref）；超过约 8 行拆分为 Batch 5a、5b。
• 阶段 6–7（Batch 6 + 7）：同样模式创建 card2、card2Header、card2Title、card2Body 及其子节点；后续分区重复（Batch 8、9……）。
• 阶段 N：在 main 下插入页脚 frame 或最终分隔线，保持不超过 25 个操作。

批次大小与命名规则：每个 batch_design 最多 25 个操作；大分区体拆分（如 15 个表单行拆为前 7 后 8）；绑定名每批唯一且具描述性（card1、card1Body、inputRow1、labelName）；下一批通过上一批的绑定名引用父节点；对将在下一批接收大量子节点的 frame 使用 placeholder: true。

最小页面示例（header + 1 卡片 + 2 行）：Batch 1（3 个操作）root、header、main；Batch 2（2 个操作）backIcon、titleText；Batch 3（6 个操作）card1、card1Header、card1Title、card1Body；Batch 4（5 个操作）row1、label1、input1、row2、label2、input2。共 4 批、16 个操作，顺序固定为 1→2→3→4。

适用场景

• 需要把 Stitch 屏幕（HTML 或 URL/ID）转换为与页面布局和样式精确对应的 Pencil .pen 设计稿。
• 希望按目标框架（uView 2、uView Pro、Bootstrap、Element Plus、Layui、Vant）生成带设计系统引用的 .pen，以便与 stitch-*-components 技能对齐。
• 未指定目标框架时，使用基础节点获得最大布局与样式保真度，不依赖设计系统。

限制

• 每个 batch_design 调用最多 25 个操作，超出需拆分。
• 父节点必须先于子节点创建，绑定名每批唯一，不能跨批复用同一名称表示不同节点。
• 输入为 Stitch URL/ID 时需要 Stitch MCP Server；HTML 获取失败时需用户粘贴 HTML。
• 未指定目标框架时使用基础节点，不提供设计系统引用。
• 关于收费、价格、平台支持范围等事实，资料暂未提供。