# Pixso To Miniprogram > Converts Pixso design稿 to WeChat Mini Program code (WXML+WXSS+JS). Invoke when user needs to implement a page from Pixso design稿 with precise 1:1 visual replication. - Skill: `kukucaicndy/pixso-to-miniprogram` (Agent Skill) - Install (CLI): `npx skillmds@latest add kukucaicndy/pixso-to-miniprogram` - Raw SKILL.md: https://api.skillmd.com/api/skills/kukucaicndy/pixso-to-miniprogram/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: kukucaicndy (https://skillmd.com/u/kukucaicndy) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/kukucaicndy/pixso-to-miniprogram --- # Pixso → 微信小程序标准工作流 ## 前置条件 - Pixso 桌面端已打开目标设计稿 - 已选中需要转换的页面/组件（item-id 自动获取） ## 核心工具 | 工具 | 调用方式 | 输出 | 用途 | |------|---------|------|------| | `design_to_code` | `mcp_Pixso_MCP_design_to_code()` | HTML manifest (含临时 URL) | **首选**：阅读布局结构、提取文本内容、反查 CSS 样式 | | `get_node_dsl` | `mcp_Pixso_MCP_get_node_dsl()` | JSON 图层树 | **辅助**：查精确色值、字号、阴影参数（DSL 层级混乱，不适合看布局） | | `get_screenshot` | `mcp_Pixso_MCP_get_screenshot()` | PNG 预览 | **验证**：开发完成后对照设计稿确认视觉效果 | ## 流程总览 ``` ① 获取数据 → ② 提取信息 → ③ 一阶段WXML → ④ 二阶段WXSS → ⑤ 对接组件 → ⑥ 走查验证 d2c+dsl grep+top 对照body 从CSS反查 TabBar/交互三步核对同时调用归属关系图只关心结构精确还原属性绑定事件逐区域+逐样式 +截图对照 ``` --- ## ① 获取设计稿数据 **同时调用两个工具，然后立即下载 HTML：** ```bash # Step 1: 调用两个 MCP 工具 mcp_Pixso_MCP_design_to_code() → 返回 manifest，提取 pageEntries[0].url mcp_Pixso_MCP_get_node_dsl() → 返回图层 JSON（参考用） # Step 2: 立即下载 HTML（URL 是临时的，会随时失效） # 方式A（推荐）: Playwright HTTP GET mcp_Playwright_playwright_get(url="{manifest.pageEntries[0].url}") # 方式B: PowerShell powershell -Command "Invoke-WebRequest -Uri '{url}' -OutFile 'pages/{page}/design-code.html'" ``` **保存文件布局：** ``` pages/{page}/ ├── design-code.html # 完整 HTML（CSS在前，body在后） ├── design-dsl.json # 精简的 DSL 数据摘要 ├── {page}.wxml / .wxss / .js / .json ``` --- ## ② 提取关键信息（防止遗漏） ### ⚠️ 必须执行的两步提取 > **经验教训**：不执行这两步是绝大多数遗漏和偏差的根源。 **第一步 — 提取所有文本（防止遗漏元素）：** ```bash grep -n 'class="paragraph-\|class="text-' pages/{page}/design-code.html ``` 建立清单逐项核对：`✅ 已实现 | ❌ 遗漏` **第二步 — 提取每个区域的归属关系（防止放错位置）：** ``` 用 top 值画归属图（HTML 中每个 position:absolute 的容器都有 top 值）： top:0~44 → 状态栏 top:44~97 → 导航栏 top:97+ → 页面内容区（注意：已超出 header） ``` **关键判断**：如果一个容器的 `top > header高度`，那它不在 header 里！ --- ## ③ 一阶段：WXML 布局骨架 > **目标**：只确认"有哪些元素、在哪里、文字对不对"，不关心颜色/间距。 ### 操作 1. 打开 `design-code.html` 的 `…` 部分，逐段对照编写 WXML 2. 按 `top` 值从小到大顺序处理每个 `frame-content-` 容器 3. 每个容器只关注： - 文本内容（第②步的 grep 清单） - 嵌套层次（外层 view 对应外层 div） - 是否有条件渲染（如"查看原因"仅在审核未通过时显示） 4. 完成后对照清单逐项确认，全部 ✅ 才进入下一阶段 ### 常用结构速查 | HTML 标签 | → WXML | 注意 | |-----------|--------|------| | `

` | `` | 容器 | | `

` / ``（纯文本） | `` | emoji 直接放 text 内 | | `