ui-to-vue

这个技能能帮你做什么

如果你手头有 UI 设计截图，这个技能能帮你快速转成可用的前端代码：

• 设计图转代码 —— 把设计团队的截图批量转换成 Vue 3 组件代码，不用从零手写
• 自动组件映射 —— 把设计里的按钮、输入框、表格等自动映射成 Vant、Element Plus 或 Ant Design Vue 组件
• 智能提取公共模块 —— 自动发现多个页面中重复出现的部分（如顶部导航、底部菜单），提取成可复用的组件
• 页面状态识别 —— 识别出列表页、详情页、表单页、空状态等不同页面类型，分别生成合适的代码结构
• 自动路由配置 —— 根据页面层级关系，自动生成对应的路由配置

什么时候用

• 设计稿交付后 —— UI 设计师提供了页面截图，需要快速实现成 Vue 页面
• 重构旧项目 —— 原有项目需要改版，用新设计图替换旧页面
• 批量生成页面 —— 项目有很多页面结构相似，希望统一生成基础代码
• 快速原型开发 —— 需要快速验证设计方案，先用工具生成初版代码

主要覆盖哪些场景

1. 移动端 H5 页面 —— 使用 Vant 组件库，适合手机端项目
2. PC 管理后台 —— 使用 Element Plus 或 Ant Design Vue，适合桌面端管理后台
3. 页面组件生成 —— 单个页面或多个页面的组件代码
4. 公共组件提取 —— 自动发现重复的 UI 区域，提取为共享组件
5. 路由配置生成 —— 根据页面层级生成对应的路由规则

怎么用

1. 准备截图 —— 把设计截图按页面和模块整理好，放到一个文件夹里
2. 选择 UI 库 —— 根据项目类型选择 Vant（移动端）、Element Plus 或 Ant Design Vue（PC端）
3. 运行转换 —— 执行命令行工具，指定输入文件夹和输出目录
4. 检查代码 —— 生成的代码需要人工审查，调整细节后再提交

使用示例：

# 设置 API Key（必需）
export DASHSCOPE_API_KEY=你的密钥

# 运行转换（以 Vant 移动端为例）
npx ui-to-vue-converter@1.0.2 --input ./截图文件夹 --ui vant --output ./src

# 桌面端管理后台示例
npx ui-to-vue-converter@1.0.2 --input ./设计图 --ui element-plus --output ./src

核心原则

• 批量处理 —— 一次性处理多个页面，比逐个手写效率更高
• 优先复用 —— 自动提取重复模块，减少代码冗余
• 组件化思维 —— 生成的代码天然支持组件化，方便后续维护
• 人工审查 —— 工具生成的代码需要人工检查，不能直接用于生产环境

适用场景

适合的情况：

• 有大量设计截图需要转成 Vue 页面
• 项目使用 Vue 3 + Vant/Element Plus/Ant Design Vue
• 需要快速生成页面初版代码
• 设计规范统一、组件可复用的项目

不适合的情况：

• 只有一张截图，需要精细定制（不如手写）
• 项目不是 Vue 技术栈
• 设计包含复杂交互逻辑、数据流，需要大量自定义开发
• 截图中包含敏感客户数据，不方便上传到外部服务

注意事项

• 隐私保护 —— 设计截图会上传到 AI 服务处理，不要上传包含客户隐私信息的截图
• 版本固定 —— 使用固定版本号（如 @1.0.2），避免自动升级带来的不兼容
• API 密钥管理 —— 通过环境变量设置密钥，不要提交到代码仓库
• 代码审查 —— 生成后的代码必须经过审查和测试才能提交
• 布局校准 —— 如果生成的布局尺寸不对，检查截图导出宽度是否与目标组件库基线一致