{"id":51274411,"url":"https://github.com/chenboxun87/sketch-to-vue","last_synced_at":"2026-07-09T17:00:48.560Z","repository":{"id":367519182,"uuid":"1281126487","full_name":"chenboxun87/sketch-to-vue","owner":"chenboxun87","description":"Sketch MeaXure / MasterGo → pixel-perfect Vue 2/3 | Design-to-Code AI Skill for Claude \u0026 Cursor | Dashboard / Cockpit / Big-Screen","archived":false,"fork":false,"pushed_at":"2026-06-26T10:20:24.000Z","size":682,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-26T11:10:32.926Z","etag":null,"topics":["ai-skill","big-screen","d2c","dashboard","design-to-code","echarts","mastergo","meaxure","react","sketch-to-vue","uniapp","vue","vue2","vue3","wechat-miniprogram"],"latest_commit_sha":null,"homepage":"https://github.com/chenboxun87/sketch-to-vue","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chenboxun87.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-26T08:44:20.000Z","updated_at":"2026-06-26T10:20:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/chenboxun87/sketch-to-vue","commit_stats":null,"previous_names":["chenboxun87/sketch-to-vue"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/chenboxun87/sketch-to-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenboxun87%2Fsketch-to-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenboxun87%2Fsketch-to-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenboxun87%2Fsketch-to-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenboxun87%2Fsketch-to-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenboxun87","download_url":"https://codeload.github.com/chenboxun87/sketch-to-vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenboxun87%2Fsketch-to-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35306717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-09T02:00:07.329Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-skill","big-screen","d2c","dashboard","design-to-code","echarts","mastergo","meaxure","react","sketch-to-vue","uniapp","vue","vue2","vue3","wechat-miniprogram"],"created_at":"2026-06-29T20:00:35.390Z","updated_at":"2026-07-09T17:00:48.550Z","avatar_url":"https://github.com/chenboxun87.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["Scaffold"],"readme":"\u003cdiv align=\"center\"\u003e\n\n![sketch-to-vue banner](docs/images/banner.svg)\n\n[![License: CC BY-NC-ND 4.0](https://img.shields.io/badge/License-CC%20BY--NC--ND%204.0-blue.svg)](LICENSE)\n[![Vue 2 \u0026 3](https://img.shields.io/badge/Vue-2%20%7C%203-42b883?logo=vue.js\u0026logoColor=white)](https://vuejs.org/)\n[![React 18](https://img.shields.io/badge/React-18-61dafb?logo=react\u0026logoColor=white)](https://react.dev/)\n[![UniApp](https://img.shields.io/badge/UniApp-H5%20%2F%20Mini%20Program-2b9939)](https://uniapp.dcloud.net.cn/)\n[![Works with Claude](https://img.shields.io/badge/Works%20with-Claude%20Code-5a5aff?logo=anthropic\u0026logoColor=white)](https://claude.ai/code)\n[![Works with Cursor](https://img.shields.io/badge/Works%20with-Cursor-000000?logo=cursor\u0026logoColor=white)](https://cursor.sh/)\n[![Node 18+](https://img.shields.io/badge/Node.js-18%2B-339933?logo=node.js\u0026logoColor=white)](https://nodejs.org/)\n[![30+ Scripts](https://img.shields.io/badge/Scripts-30%2B-e3b341)](scripts/)\n[![Tests](https://img.shields.io/badge/Tests-Passing-3fb950)](scripts/test-all.mjs)\n\n**将 Sketch MeaXure / MasterGo 设计稿，转换为像素级对齐的前端页面——不猜测、不幻觉、图表可绑数据。**  \n*The only AI Skill that converts design tool exports into truly runnable Vue / React / UniApp components.*\n\n\u003e Supports **Vue 2 · Vue 3 · React 18 · UniApp** — one skill, four framework targets.  \n\u003e MasterGo export packages and MasterGo MCP (online DSL) also supported.  \n\u003e Specialized for **Dashboard · Cockpit · Big-Screen · Mini Program** pages with ECharts integrations.\n\n[**English**](#english-readme) · [**中文说明**](#中文说明完整版) · [安装](#安装) · [快速开始](#快速开始) · [脚本手册](#脚本手册) · [FAQ](#faq)\n\n\u003c/div\u003e\n\n---\n\n## 工作原理\n\n![工作流程](docs/images/workflow.svg)\n\n---\n\n## 与其他工具的对比\n\n![工具对比](docs/images/compare.svg)\n\n---\n\n## 中文说明（完整版）\n\n### 这是什么？\n\n`sketch-to-vue` 是一套运行在 **Claude Code** 或 **Cursor** 中的 AI Skill（AI 助手技能包），专为解决\"前端开发还原设计稿\"这个经典难题——尤其是大屏、驾驶舱、数据看板类页面。\n\n你只需要把设计工具的导出物（Sketch MeaXure 标注 HTML，或 MasterGo 导出包）给 AI，AI 会自动调用本 Skill 里的 30+ 个脚本，输出**可直接运行的组件**——支持 Vue 2 / Vue 3 / React 18 / UniApp 四种目标框架。\n\n### 解决了什么痛点？\n\n做过大屏页面还原的开发者都懂这些苦：\n\n| 痛点 | 根本原因 | sketch-to-vue 的解法 |\n|---|---|---|\n| 图片全是 404 | 路径靠猜，文件名不匹配 | 从 `objectID` + `exportable.path` 确定性解析，零猜测 |\n| 图表变成截图/色块 | 工具不理解\"这是一个柱状图\" | Scene Graph 识别图表特征区域，自动生成可绑数据的 ECharts 组件 |\n| 图层顺序全乱 | 200+ 图层，z-order 无法人工维护 | 有向无环图（DAG）精确还原任意嵌套深度的层叠顺序 |\n| 大屏缩放/宿主嵌入踩坑 | 全屏驾驶舱 vs 嵌入侧边栏，逻辑完全不同 | 宿主布局决策脚本 + letterbox/CONTENT_SHIFT 精确公式 |\n| 字体颜色边框丢失 | 标注导出丢弃了部分 CSS 信息 | 全量 CSS 提取 + 渐变边框合成 + 椭圆/阴影自动处理 |\n| AI 自由发挥乱加内容 | LLM 有幻觉倾向 | 4 条铁律 + 消费侧审计门禁，每个元素都有原始数据支撑 |\n\n### 支持哪些输出框架？\n\n| target 参数 | 输出产物 | 适用场景 |\n|---|---|---|\n| `vue2`（默认） | `Index.vue`（Options API）+ scoped CSS | Vue 2 PC 中后台、大屏驾驶舱 |\n| `vue3` | `Index.vue`（Composition API）+ ECharts composable | Vue 3 新项目 |\n| `react` | `Index.jsx` + `index.module.css` + `chartOptions.js` | React 18 PC / C端 |\n| `uniapp` | `index.vue`（UniApp 规范）+ `pages.json.snippet` | H5 / 微信小程序 / App 三端 |\n\n\u003e **告诉 AI 目标框架**：`转成 React`、`生成 UniApp 版本`、`target: uniapp`……  \n\u003e AI 自动路由到对应 emitter，核心提取与场景图阶段完全复用，只有出码层切换。\n\n### 支持哪些设计工具？\n\n| 轨道 | 输入格式 | 适用场景 |\n|---|---|---|\n| **A · Sketch MeaXure** | `index.html` + `assets/`（标注导出）| 使用 MeaXure 插件导出的 Sketch 标注稿 |\n| **B · MasterGo 导出包** | `FILE_DATA.json` + `data/exports/`（离线导出）| MasterGo 右键\"导出\"的离线包 |\n| **C · MasterGo MCP** | `mastergo.com` 链接 / fileId | 需要实时读取 DSL，需要 MasterGo Token |\n\n### 安装\n\n\u003e **前置要求**：Node.js 18+，Python 3.9+（仅 C 轨道），Claude Code 或 Cursor\n\n```bash\n# Claude Code 全局安装\ngit clone https://github.com/chenboxun87/sketch-to-vue.git ~/.claude/skills/sketch-to-vue\n\n# Cursor 全局安装（Windows，创建 Junction 指向同一目录）\nNew-Item -ItemType Junction -Path \"$env:USERPROFILE\\.cursor\\skills\\sketch-to-vue\" `\n  -Target \"$env:USERPROFILE\\.claude\\skills\\sketch-to-vue\"\n\n# 安装脚本依赖（Node.js）\ncd ~/.claude/skills/sketch-to-vue/scripts \u0026\u0026 npm install\n```\n\n自定义路径：\n```bash\ngit clone https://github.com/chenboxun87/sketch-to-vue.git /自定义路径\nexport DESIGN_TO_VUE_SKILL_ROOT=/自定义路径\n```\n\n\u003e 详细安装与双端同步说明 → [`sync/INSTALL.md`](sync/INSTALL.md)\n\n### 快速开始\n\n#### 在 Cursor 中\n\n1. 打开 Cursor → 新建 Agent 对话\n2. 输入任意触发词：`切图`、`MeaXure`、`MasterGo`、`大屏还原`、`驾驶舱`、`sketch-to-vue`、`设计稿转Vue`\n3. AI 自动加载 Skill，按提示填写「**项目变量映射表**」（设计稿路径、Vue 版本、路由路径等）\n\n#### 在 Claude Code 中\n\n```bash\n# 在你的 Vue 项目根目录\n/use-skill sketch-to-vue\n\n# 或直接描述需求\n# 示例：\"把 D:/docs/myDesign 目录里的 MeaXure 标注导出物转成 Vue3 大屏驾驶舱页面\"\n```\n\n### A 轨道标准流程（Sketch MeaXure）\n\n```\n设计目录结构：\nyour-design/\n├── index.html       ← 含 \"let data = {\" 的图层标注数据\n├── assets/          ← 切图 PNG/SVG\n└── preview/         ← （可选）预览图\n```\n\n```bash\n# Step 1：全量提取（产出 scene-graph、图层栈、字体清单等）\nnode scripts/extract-all-elements.mjs  index.html  assets/  ./out\n\n# Step 2：宿主布局决策（大屏必做，写 Index.vue 前）\nnode scripts/decide-host-layout.mjs  ./out  --arch layerStack\n\n# Step 3：告诉 AI 基于 ./out 生成 Vue 组件，AI 自动执行后续步骤\n\n# Step 4（交付前）：资产消费自检\nnode scripts/audit-asset-consumption.mjs  --scene ./out/scene-graph.json  --assets assets/\n\n# Step 5（交付前）：渲染计划门禁\nnode scripts/verify-board-render-plan.mjs  ./out\n```\n\n### 核心能力详解\n\n#### 1. 确定性资产解析\n所有图片路径均来自 MeaXure 标注数据中的 `objectID` + `exportable.path`，**不靠文件大小、颜色、人眼猜测**。哪怕设计师命名文件很随意，也能准确定位到正确图片。\n\n#### 2. Scene Graph（有向图）\n不同于简单的图层列表，Scene Graph 是一个**有向无环图（DAG）**，记录了：\n- 父子嵌套关系（哪些图层是同一个\"组\"里的）\n- 语义边（哪些图层组合在一起构成一个\"图表\"或\"KPI 卡片\"）\n- Disposition 分类（每个节点应该被渲染为切片/向量/ECharts/纯文本/排除）\n\n无论图层嵌套多深，都能被精确挖出并正确分类。\n\n#### 3. ECharts 自动识别\n通过分析图层的空间关系、颜色渐变规律、尺寸分布，自动识别：\n- 柱状图（均等矩形阵列）\n- 折线图区域\n- 饼图 / 环形图\n- 雷达图\n并生成**可绑 mock 数据的 ECharts 配置**，而不是截图。\n\n#### 4. 消费侧全量审计\n`audit-asset-consumption.mjs` 在交付前扫描六类问题：\n- `missing-asset`：404 缺失图片\n- `shared-file`：命名碰撞\n- `aspect-distort`：图片拉伸（并给出 `object-fit` 修复建议）\n- `empty-vector`：空盒子\n- `text-fragment-overlap`：文字双渲染\n- `unused-asset`：冗余未使用资产\n\n#### 5. 大屏布局四模式\n针对大屏/驾驶舱特有的布局挑战，提供四种经过验证的缩放策略：\n- 宽度铺满 + 纵向滚动\n- Letterbox 整页适配（等比缩放，上下留黑边）\n- 嵌入 BasicLayout（计算 CONTENT_SHIFT）\n- 全屏独立路由\n\n### 目录结构\n\n```\nsketch-to-vue/\n├── SKILL.md                    ← AI 主入口（Cursor/Claude Code 自动加载）\n├── SECURITY.md                 ← 安全说明（网络边界 / Token 处理）\n├── scripts/                    ← 30+ 脚本\n│   ├── extract-all-elements.mjs   全量元素提取 + Scene Graph\n│   ├── extract-chart-features.mjs ECharts 图表区域识别\n│   ├── audit-asset-consumption.mjs 消费侧六类问题审计\n│   ├── gen-vue-from-scene-graph.mjs 确定性 Vue 代码生成\n│   ├── decide-host-layout.mjs  宿主布局决策门禁\n│   ├── verify-board-render-plan.mjs 交付前渲染计划门禁\n│   └── test-all.mjs            全量回归测试入口\n├── references/                 ← 24 份分阶段规则文档（约 8000 行）\n│   ├── reading-guide.md        阶段导航（每阶段必读文件 + 行号）\n│   ├── hard-won-rules.md       55+ 条踩坑规则（大屏必读）\n│   ├── meaxure-track.md        A 轨道完整流程\n│   └── ...\n├── templates/                  ← Vue / ECharts 可复用模板\n│   ├── vue/                    MeaXure 全屏页面模板\n│   ├── echarts/                图表主题 + 系列配置模板\n│   └── shared/                 boardRender / textStyle / vectorStyle\n├── docs/images/                ← 本 README 使用的图示\n└── sync/                       ← 双端同步脚本（Claude ↔ Cursor）\n```\n\n### 常见问题\n\n**Q：不需要 MasterGo 账号也能用吗？**  \nA：A 轨道和 B 轨道完全离线，只需要设计导出文件。C 轨道需要 MasterGo Token。\n\n**Q：Vue 2 还是 Vue 3？**  \nA：自动从 `package.json` 检测。也可以直接告诉 AI \"用 Vue 3\"。\n\n**Q：支持 Figma 吗？**  \nA：暂不支持，Figma 导出格式不同。Track D（Figma）在 Roadmap 中。\n\n**Q：公司内部商业项目能用吗？**  \nA：内部非商业使用 + 署名即可。不可对外销售/收费。详见 [LICENSE](LICENSE)。\n\n**Q：AI 跳过了一些图层，为什么？**  \nA：先跑 `audit-asset-consumption.mjs`，它会列出每个被过滤/排除元素的具体原因（图表区内/幽灵图层/重复等）。\n\n---\n\n## English README\n\n### What is sketch-to-vue?\n\n**sketch-to-vue** is an AI Skill for Claude Code \u0026 Cursor that converts Sketch MeaXure annotation exports (and MasterGo packages) into pixel-perfect Vue 2/3 components — deterministically, with no visual guessing.\n\n**Best for:** Dashboard · Cockpit · Big-Screen pages with complex layering, ECharts integrations, and strict pixel-alignment requirements.\n\n### Install\n\n```bash\ngit clone https://github.com/chenboxun87/sketch-to-vue.git ~/.claude/skills/sketch-to-vue\ncd ~/.claude/skills/sketch-to-vue/scripts \u0026\u0026 npm install\n```\n\nCustom path: `export DESIGN_TO_VUE_SKILL_ROOT=/any/path`\n\n### Quick Start\n\nTrigger in Cursor or Claude Code with: `MeaXure` · `Sketch` · `MasterGo` · `big-screen` · `cockpit` · `sketch-to-vue`\n\n### 3 Input Tracks\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eTrack A · Sketch MeaXure\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nnode scripts/extract-all-elements.mjs  index.html  assets/  ./out\nnode scripts/decide-host-layout.mjs    ./out  --arch layerStack\n# Then tell AI: \"Generate Vue component from ./out\"\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eTrack B · MasterGo Export Package\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nnode scripts/extract-mastergo-all.mjs \\\n  --dir \"./export\" --design-root \"./\" --frame \"MainFrame\" --out \"./pilot/data\"\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eTrack C · MasterGo MCP (online)\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nexport MASTERGO_TOKEN=your_token_here\npython scripts/mastergo_get_dsl.py --file-id \"abc123\" --layer-id \"xyz456\"\n```\n\u003c/details\u003e\n\n### Key Scripts\n\n| Script | Purpose |\n|---|---|\n| `extract-all-elements.mjs` | Full element extraction + Scene Graph DAG |\n| `extract-chart-features.mjs` | Auto-detect ECharts zones |\n| `audit-asset-consumption.mjs` | 6-type consumption audit (missing/wrong/duplicate) |\n| `gen-vue-from-scene-graph.mjs` | Deterministic Vue codegen from scene graph |\n| `decide-host-layout.mjs` | Host layout decision gate |\n| `verify-board-render-plan.mjs` | Pre-delivery render plan gate |\n| `test-all.mjs` | Full regression suite (~30s) |\n\n### Roadmap\n\n- [ ] Track D: Figma export support\n- [ ] Auto-generate ECharts mock data from design annotations\n- [ ] VS Code extension\n- [ ] Web UI for designers\n\n### Contributing\n\n```bash\ncd scripts \u0026\u0026 node test-all.mjs   # must all pass before PR\n```\n\n---\n\n## 脚本手册\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eA 轨道 — 完整命令列表\u003c/b\u003e\u003c/summary\u003e\n\n```bash\n# 数据提取\nnode scripts/extract-meaxure.mjs          index.html layers.json\nnode scripts/extract-all-elements.mjs     index.html assetsDir outDir\npython scripts/extract-meaxure-data.py    index.html [artboardIndex]\n\n# 多画板\nnode scripts/merge-artboards.mjs          \u003cdataDir\u003e\nnode scripts/measure-artboard-coverage.mjs \u003cdataDir\u003e [W] [H]\nnode scripts/detect-artboard-merge.mjs    \u003cdataDir\u003e\n\n# 图表识别\nnode scripts/extract-chart-features.mjs  \u003cdataDir\u003e \u003cpanels.json\u003e\n\n# 场景图\nnode scripts/audit-scene-graph.mjs       \u003coutDir\u003e/scene-graph.json\nnode scripts/gen-vue-from-scene-graph.mjs \u003coutDir\u003e/scene-graph.json \u003czones\u003e \u003coutDir\u003e\n\n# 资产审计（交付前必跑）\nnode scripts/audit-asset-consumption.mjs \\\n  --scene \u003coutDir\u003e/scene-graph.json --assets \u003cassetsDir\u003e\n\n# 渲染计划门禁\nnode scripts/verify-board-render-plan.mjs \u003coutDir\u003e\n\n# KPI 活体覆盖层\nnode scripts/gen-kpi-overlays.mjs \\\n  --elements \u003coutDir\u003e/_all_elements.json \\\n  --board board@2x.png --out kpiOverlays.json\n\n# 静态 HTML 基线\nnode scripts/emit-html.mjs  layers.json  assetsDir  outDir\n\n# 锚区计算\nnode scripts/meaxure-anchor-regions.mjs \\\n  --html index.html --rules anchorMeasureRules.json --out anchorRegions.json\n\n# 字体审计\nnode scripts/audit-project-fonts.mjs  \u003coutDir\u003e\n\n# 对称 KPI 漏导检测\nnode scripts/detect-symmetric-module-gaps.mjs \u003coutDir\u003e/_all_elements.json\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eB 轨道 — 完整命令列表\u003c/b\u003e\u003c/summary\u003e\n\n```bash\nnode scripts/extract-mastergo-all.mjs \\\n  --dir \"\u003cexport\u003e\" --design-root \"./\" --frame \"\u003cframe\u003e\" --out \"\u003cpilot\u003e/data\"\nnode scripts/extract-mastergo-css.mjs \\\n  --dir \"\u003cexport\u003e\" --frame \"\u003cframe\u003e\" [--vue] [--out file.json]\nnode scripts/emit-mastergo-html.mjs \\\n  \"\u003cpilot\u003e/data\" \"\u003cexport\u003e/data/exports\" \"\u003cpilot\u003e/emit-baseline\"\nnode scripts/verify-mg-g9.mjs  \"\u003cpilot\u003e/emit-baseline\"  \"\u003cpilot\u003e/data\"\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eC 轨道 — 完整命令列表\u003c/b\u003e\u003c/summary\u003e\n\n```bash\npython scripts/mastergo_analyze.py    \"https://mastergo.com/goto/xxx\"\npython scripts/mastergo_get_dsl.py    --file-id \"\u003cid\u003e\" --layer-id \"\u003cid\u003e\"\npython scripts/mastergo_fetch_docs.py --from-dsl\nnode   scripts/fetch-mg-dsl.mjs       --file-id \"\u003cid\u003e\" --layer-id \"\u003cid\u003e\" --out path.json\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003e回归测试\u003c/b\u003e\u003c/summary\u003e\n\n```bash\ncd scripts \u0026\u0026 node test-all.mjs   # 全部通过才可提交\n```\n\u003c/details\u003e\n\n---\n\n\n---\n\n## 同一个设计稿 · 三种框架输出对比\n\n\u003e 以一个 KPI 数字卡片为例，展示 sketch-to-vue 对不同目标框架的输出效果。\n\n### 输入：Scene Graph 片段\n\n```json\n{\n  \"id\": \"kpi-001\",\n  \"kind\": \"live-text-static\",\n  \"name\": \"今日用电量\",\n  \"attrs\": {\n    \"content\": \"12,345\",\n    \"fontSize\": 36,\n    \"fontWeight\": \"bold\",\n    \"color\": \"#FFFFFF\",\n    \"left\": 40, \"top\": 80, \"width\": 200, \"height\": 50\n  }\n}\n```\n\n---\n\n### Vue 2 / Vue 3 输出\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"kpi-001\" style=\"position:absolute;left:40px;top:80px;width:200px;height:50px;\"\u003e\n    \u003cspan class=\"kpi-label\"\u003e今日用电量\u003c/span\u003e\n    \u003cspan class=\"kpi-value\"\u003e12,345\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.kpi-001 { display: flex; flex-direction: column; }\n.kpi-value { font-size: 36px; font-weight: bold; color: #FFFFFF; }\n\u003c/style\u003e\n```\n\n---\n\n### React 18 输出（JSX + CSS Modules）\n\n```jsx\n// KpiCard.jsx\nimport styles from './KpiCard.module.css'\n\nexport default function KpiCard() {\n  return (\n    \u003cdiv className={styles.kpi001}\u003e\n      \u003cdiv style={{fontSize:'36px',fontWeight:'bold',color:'#FFFFFF'}}\u003e\n        {\"12,345\"}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n```css\n/* KpiCard.module.css */\n.kpi001 {\n  position: absolute;\n  left: 40px; top: 80px;\n  width: 200px; height: 50px;\n}\n```\n\n---\n\n### UniApp 输出（H5 + 微信小程序双端）\n\n```vue\n\u003ctemplate\u003e\n  \u003cview class=\"kpi001\"\u003e\n    \u003ctext class=\"kpi-value\"\u003e{{ kpiValue }}\u003c/text\u003e\n  \u003c/view\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return { kpiValue: '12,345' }   // TODO: 替换为真实 API 数据\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.kpi001 { position: absolute; left: 80rpx; top: 160rpx; width: 400rpx; height: 100rpx; }\n.kpi-value { font-size: 72rpx; font-weight: bold; color: #FFFFFF; }\n\u003c/style\u003e\n```\n\n\u003e UniApp 自动将 `px` 换算为 `rpx`（750rpx 基准），一份代码跑 H5 / 微信小程序 / App。\n\n---\n## FAQ\n\n**Q: 不用 MasterGo / 只用 Sketch，可以吗？**  \nA: 完全可以，A 轨道（Sketch MeaXure）是最完整的轨道，离线运行，无任何账号要求。\n\n**Q: 支持 Vue 2 和 Vue 3 两个版本？**  \nA: 是的，自动从 `package.json` 检测。两个版本有各自独立的模板集。显式指定则说\"用 Vue 3\"即可。\n\n**Q: 大屏页面不同分辨率怎么处理？**  \nA: 内置四种缩放模式（letterbox/铺满/嵌入/全屏），`decide-host-layout.mjs` 自动给出推荐方案。\n\n**Q: 能处理 200 层以上的复杂设计稿吗？**  \nA: 可以，这正是 Scene Graph 存在的意义。已验证处理过 300+ 图层的驾驶舱页面。\n\n**Q: 图表部分还需要手动写 ECharts 吗？**  \nA: 大部分情况 AI 会自动生成带 mock 数据的 ECharts 配置，你只需要替换成真实 API 数据。\n\n---\n\n## License\n\nCopyright (c) 2026 **[chenboxun87](https://github.com/chenboxun87)**  \nLicensed under [CC BY-NC-ND 4.0](LICENSE) — 详见 [LICENSE](LICENSE) 文件\n\n✅ 个人学习 \u0026 非商业项目免费使用（需署名）  \n❌ 禁止商业用途 · 禁止发布衍生版本 · 禁止去署名冒名转发\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**如果这个项目对你有帮助，欢迎点 ⭐ Star 支持！**  \nStar 是对作者最直接的鼓励，也帮助更多开发者发现这个工具。\n\n[⭐ 点击 Star](https://github.com/chenboxun87/sketch-to-vue) · [🐛 提 Issue](https://github.com/chenboxun87/sketch-to-vue/issues) · [💡 功能建议](https://github.com/chenboxun87/sketch-to-vue/issues/new)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenboxun87%2Fsketch-to-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenboxun87%2Fsketch-to-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenboxun87%2Fsketch-to-vue/lists"}