Sketch2Vue: 智能 Sketch 转 Vue 代码工具

🚀 将 Sketch 设计稿转换为 Vue 代码，支持实时预览与可视化编辑 🚀 Convert Sketch designs into Vue code with live preview and visual editing inside VS Code

拒绝绝对定位，一键生成像人写的一样的 Vue 3 + Flexbox 代码。

Sketch2Vue 不仅仅是一个简单的代码转换器。它内置了 智能布局引擎，能够分析设计稿的几何关系，自动推导出行（Row）和列（Column）结构，生成可维护、语义化的前端代码。

✨ 核心功能 | Core Features

🧩 Sketch 文件解析 | Sketch File Parsing

直接导入 .sketch 文件，本地解析，保护设计隐私
自动解析页面与图层结构
提取设计数据用于代码生成

Import .sketch files directly, local parsing ensures design privacy
Parse pages and layer structures automatically
Extract design data for code generation

🌳 图层树 | Layer Tree

以树形结构展示 Sketch 图层
支持快速定位与选择
与预览区域联动高亮

Display Sketch layers in a tree structure
Quickly locate and select layers
Sync selection with preview

🧠 智能 Flex 算法 | Smart Flex Algorithm

严格分行策略: 自动识别垂直和水平布局
自动成组: 将同一行的元素自动包裹，告别混乱的 DOM 结构
智能对齐: 自动计算 justify-content、align-items 和 margin-left: auto（右对齐）

Strict row/column detection: Automatically identify vertical and horizontal layouts
Auto-grouping:** Wrap elements in the same row automatically for clean DOM structure
Smart alignment: Auto-calculate justify-content, align-items, and margin-left: auto for right alignment

🧹 代码洁癖支持 | Clean Code Generation

生产环境标准: 自动过滤 opacity: 1、z-index: 0 等冗余样式
原子类提取: 自动提取 flex, items-center 等通用样式，代码更精简
Vue 3 风格: 默认生成 <script setup> 风格代码

Production-ready: Automatically filter redundant styles like opacity: 1, z-index: 0
Atomic class extraction: Extract common styles like flex, items-center for cleaner code
Vue 3 style: Generate <script setup> syntax by default

📱 移动端适配 | Mobile Adaptation

支持设计稿尺寸自动折算（如 750px 转 375px 逻辑像素）
响应式预览，支持容器尺寸调整

Auto-convert design dimensions (e.g., 750px to 375px logical pixels)
Responsive preview with resizable container

👁 实时预览 | Live Preview

渲染选中页面或图层
自动缩放适配容器
支持响应式变化
点击预览元素即可选中对应图层

Render selected page or layer
Auto-scale to fit container
Responsive preview resizing
Click elements in preview to select corresponding layers

🎯 图层编辑 | Layer Editing

在预览中点击即可选中图层
高亮当前节点
支持实时修改样式与属性

Click elements in preview to select layers
Highlight selected nodes
Edit properties in real time

🧾 Vue 代码生成 | Vue Code Generation

自动生成 Vue 模板和样式
结构化布局（基于 Flex）
一键复制代码
双重预览: 同时提供“界面渲染预览”和“源码预览”双视图

Generate Vue templates and styles automatically
Structured layout (Flex-based)
One-click copy
Dual preview: Both "rendered preview" and "source code preview" side by side

🚀 使用方式 | Usage

1️⃣ 打开命令面板 | Open Command Palette

Mac：⌘+⇧+P
Windows：Ctrl+⇧+P

2️⃣ 执行插件命令 | Run Extension Command

输入并执行以下命令：

SketchToVue.start

3️⃣ 选择 Sketch 文件 | Select Sketch File

选择 .sketch 文件
插件会自动开始解析

Choose a .sketch file
The extension will start parsing automatically

4️⃣ 预览与生成代码 | Preview & Generate Code

在图层树中浏览图层
点击进行预览
在右侧查看生成的 Vue 代码
一键复制

Browse layers in the tree
Click to preview
View generated Vue code in the preview panel
Copy directly from Code Preview

⚙️ 环境要求 | Requirements

VS Code 1.80+
Sketch .sketch 文件 | Sketch .sketch files

📌 已知问题 | Known Issues

复杂 Sketch 功能（如 Symbol）支持有限
大文件解析可能较慢

Complex Sketch features (like Symbols) may not be fully supported
Large files may take time to parse

🗺 发展计划 | Roadmap

提升解析性能
优化布局生成算法
支持图片资源导出
支持多框架（Vue / React / 小程序）
自定义代码模板
支持 Figma 文件导入

Improve parsing performance
Optimize layout generation algorithm
Support asset export
Multi-framework support (Vue / React / Mini Programs)
Custom code templates
Support Figma file import

💡 关于项目 | About

Sketch2Vue 致力于打通设计与开发之间的流程，让设计师和开发者协作更高效。

If you find it useful, please give it a ⭐ 如果觉得有帮助，欢迎点个 ⭐ 支持！

📄 许可证 | License

This software and associated documentation files (the "Software") are protected by copyright law and other intellectual property laws. Unauthorized copying, distribution, modification, merging, publishing, selling, or using this Software, via any medium, is strictly prohibited without prior written permission from the copyright holder.

🤝 参与贡献 | Contributing

欢迎提交 Issue 或 PR！ Contributions are welcome!

Sketch2Vue

fishbird