UI To Vue¶

将 UI 设计截图批量转换为 Vue 3 Composition API 组件代码。

适用场景¶

• 当用户提供设计截图或设计导出图片目录时。
• 当目标应用为 Vue 3 时。
• 当用户希望进行页面组件、共享组件和路由配置的初始转换时。
• 当用户指定 Vant、Element Plus 或 Ant Design Vue 作为组件库时。

不适用场景¶

• 当用户只提供一张截图并希望生成特定组件时。
• 当目标项目不是 Vue 时。
• 当设计需要详细的交互逻辑、数据流或可访问性审查时。
• 当截图中包含不能发送到外部模型 API 的私有客户数据时。

输入¶

使用按模块和页面状态对截图进行分组的目录作为输入。

支持的切图目录名：assets、icons、sprites、cut、images、cut-images。

转换模型¶

• 页面分组：将表示列表、详情、表单、加载或空状态的关联截图合并为一个页面组件。
• UI 库映射：尽可能将原生视觉元素映射到 Vant、Element Plus 或 Ant Design Vue 组件。
• 切图优先级：优先使用页面级资源，其次是模块级资源，最后是全局共享资源。
• 组件提取：当重复出现的 UI 区域出现两次或更多次时，提取为共享组件。

CLI 使用方法¶

不依赖全局二进制文件，使用 npx 运行转换器，使文档中记载的命令能够正常工作：

export DASHSCOPE_API_KEY=your_key
npx ui-to-vue-converter@1.0.2 --input ./screenshots --ui vant --output ./src

选项¶

安全与隐私¶

• 将设计截图视为可能发送到外部模型 API 的源素材。
• 未经许可，不要使用私有客户设计运行此流程。
• 在可复现的工作流中，应固定转换器版本，而不是使用 @latest。
• 在提交前审查生成的 Vue 代码。
• 不要提交 .ui-to-vue.config.json、API 密钥、生成的机密或客户截图。

输出审查检查清单¶

• [ ] 页面组件已生成在 views/ 或所选输出目录下。
• [ ] 重复的 UI 区域仅在复用明确时提取到 components/。
• [ ] 路由输出与目标项目的路由风格兼容。
• [ ] 生成的组件一致地使用了所要求的 UI 库。
• [ ] 生成的 CSS 单位与设计基线一致。
• [ ] 代码通过项目的格式化器、代码检查器、类型检查器和构建。
• [ ] 已在提交前审查占位文案、模拟数据和生成的资源。

故障排除¶

参考¶

• npm 包：ui-to-vue-converter