ui-to-vue

UI 设计图转 Vue 组件工具

English | 中文

一键将UI设计图（蓝湖、Figma等截图）批量转换为Vue 3组件，支持多UI库，自动抽离公共组件，可作为Claude Code/OpenClaw/Trace技能使用。

功能特性

• ✅ 批量扫描设计图目录，自动识别页面和页面的不同状态
• ✅ 智能目录结构识别 — 自动探测模块/页面层级
• ✅ 支持选择UI库：移动端Vant、PC端Element Plus、Ant Design Vue
• ✅ 自动识别并抽离公共组件，减少重复代码
• ✅ 支持设计切图/素材，生成更精准的UI还原
• ✅ 生成符合规范的Vue 3 Composition API代码
• ✅ 支持 Preset 预设配置，可按项目自定义输出规范
• ✅ 多 API Provider 支持 — Anthropic、DashScope、OpenAI 等
• ✅ 路由自动注入 — 自动追加到项目路由文件
• ✅ CSS 语法错误自动修复
• ✅ 设计稿尺寸自动识别（@1x/@2x/@3x）
• ✅ 冗余导入自动清理
• ✅ 生成代码自动格式化

快速开始

方式一：从GitHub克隆

# 克隆项目
git clone https://github.com/EricLeeN1/ui2VueConverter.git
cd ui2VueConverter

# 安装依赖
npm install

# 配置API密钥
export DASHSCOPE_API_KEY=your_api_key

# 生成代码
node src/cli.js --input ./screenshots --ui vant --output ./src

方式二：全局安装

npm install -g ui-to-vue-converter

# 配置API密钥
export DASHSCOPE_API_KEY=your_api_key

# 生成代码
ui-to-vue --input ./screenshots --ui vant --output ./src

参数说明

• --input: 设计图目录路径，默认./screenshots
• --ui: UI库选择，支持vant/element-plus/antd-vue，默认vant
• --output: 输出目录，默认./src
• --config: 配置文件路径，默认./.ui-to-vue.config.json
• --preset: 配置预设，默认default
• --inject-router: 自动注入路由到项目路由文件，如 src/router/index.ts

Preset 预设配置

工具支持通过 .ui-to-vue.config.json 配置文件自定义项目规范，无需修改工具源码。

配置文件示例

{
  "preset": "default",
  "useTypeScript": true,
  "styleLang": "scss",
  "useUnoCSS": false,
  "designWidth": 375,
  "projectStandardWidth": 750,
  "rootValue": 75,
  "layoutComponent": "BasePages",
  "componentImportMode": "auto",
  "fileNaming": "kebab",
  "outputStructure": "flat",
  "provider": "anthropic",
  "url": "https://coding.dashscope.aliyuncs.com/apps/anthropic/v1/messages",
  "apiKey": "your_api_key",
  "model": "qwen3.6-plus",
  "toast": "custom",
  "customToastCall": "toast.show(\"{message}\")",
  "confirm": "custom",
  "customConfirmCall": "dialog.confirm(\"{title}\", \"{message}\")",
  "customImports": [
    "import toast from '@/utils/toast'",
    "import dialog from '@/utils/dialog'"
  ],
  "customPromptRules": [
    "项目使用 TypeScript，`<script setup lang=\"ts\">`",
    "样式使用 SCSS（`<style scoped lang=\"scss\">`），不使用 UnoCSS 原子类",
    "所有尺寸使用 px 单位，设计稿基准 750px",
    "布局统一使用 BasePages 组件包裹"
  ],
  "nameMap": {
    "示例页面": "example-page",
    "待处理": "pending"
  }
}

配置项说明

配置项	类型	说明
useTypeScript	boolean	是否生成 TypeScript 代码
styleLang	string	样式语言：css/scss/less
useUnoCSS	boolean	是否使用 UnoCSS 原子类
designWidth	number	设计稿基准宽度（如 375/750）
projectStandardWidth	number	项目设计标准宽度（如 750px），用于尺寸转换
rootValue	number	postcss-pxtorem 的 rootValue
layoutComponent	string	布局组件名，如 BasePages
fileNaming	string	文件名风格：pascal 或 kebab
outputStructure	string	输出结构：nested 或 flat
provider	string	API Provider：anthropic/dashscope/openai
url	string	自定义 API 地址
apiKey	string	API 密钥
model	string	模型名称
toast	string	toast 类型：van/el/antd/custom/none
confirm	string	confirm 类型：van/el/antd/custom/none
customImports	string[]	额外导入的模块
customPromptRules	string[]	自定义 AI Prompt 规则
nameMap	object	中文目录名映射为英文

nameMap 名称映射

当设计图目录使用中文命名时，可通过 nameMap 自动映射为英文文件名：

{
  "nameMap": {
    "示例页面": "example-page",
    "待处理": "pending",
    "已处理": "processed"
  }
}

路径模式说明

所有路径参数同时支持相对路径和绝对路径：

• 相对路径：相对于执行命令时的当前工作目录（CWD）
• 绝对路径：直接使用传入的完整路径，不做转换

示例

# 相对路径（推荐，在项目根目录执行）
ui-to-vue --input ./designs --output ./src

# 绝对路径
ui-to-vue --input /Users/your-username/common-designs --output /Users/your-username/project/src

🖼️ 设计切图/素材支持

为了提高生成代码的UI还原度，本工具支持识别设计切图（图标、按钮、标签等独立元素），并将切图素材传给AI模型分析，使生成的代码更精准地还原图标样式、颜色和尺寸。

为什么需要切图？

有切图	无切图
图标/按钮样式准确	可能使用默认组件图标
颜色值更精确	颜色可能不够准确
间距/尺寸更准确	尺寸可能偏差
自定义元素还原度高	自定义元素可能被误解

切图目录结构

工具支持三级切图目录，优先级从高到低：

层级	目录结构	适用场景
页面级	模块/页面类型/切图/	仅某个页面使用的切图
模块级	模块/切图/	该模块所有页面共用的切图
全局级	切图/	所有模块共用的切图