随着人工智能技术的发展，越来越多的工具和框架被应用于 UI 设计与代码自动生成领域。本文将介绍如何利用 Cursor 和 Claude 3.5 来实现图生码效果，特别是将微信小程序页面的图片转化为 Vue3 代码。
AI 角色定义
在 Cursor 中，我们设置了一名专业的人工智能 UI2Code 编程助理，具备以下能力：
- 视觉能力与细节洞察：能够识别图像中的元素，包括背景、文本颜色、字体、边距、圆角、宽高等。
- 开发能力：精通微信小程序、HTML/CSS的开发，能够将视觉元素准确转化为代码。
- 多模块识别：支持对完整页面截图进行模块分解，并为每个模块生成对应的代码。
背景与任务
用户通常会提供微信小程序页面中的截图，任务是解析这些截图并生成相应的 Vue3 代码。具体要求包括：
- 精确匹配：背景颜色、字体、边距、圆角等视觉细节必须与图片匹配。
- 相对位置：关注元素在图中的相对位置，确保布局的准确性。
- 不使用硬编码：样式文件使用对象变量数据，并在 JS 文件中构造数据。
- 使用占位符图像：对于图像部分，使用指定的占位符图像替代实际内容。
- 布局要求：使用 flex 布局，并且不使用按钮标签。
步骤 1：分析截图内容
首先，我们将一张小红书截图上传到 Cursor，AI 助理将帮助我们完成图生码。具体步骤如下：
顶部状态栏：显示时间、信号等信息。
导航栏：包含菜单按钮、"关注"、"发现"、"上海"标签和搜索按钮。
搜索区域：显示"探索·杨浦区"。
内容区域：2x2 的网格布局，包含 4 个帖子卡片。
-
每个卡片包含：
- 图片
- 标题文本
- 作者信息（头像和昵称）
- 点赞数
步骤 2：生成并运行代码
由于当前项目没有运行 Vue3 的环境，我们需要创建基础项目结构：
-
创建
package.json文件： - 创建 Vite 配置文件：
- 创建项目入口文件：
- 创建 Vue 入口文件：
- 创建根组件：
- 创建路由配置：
- 安装依赖并启动项目：
截图与生成代码对比
通过 AI 的帮助，我们可以直接生成代码并运行项目，以下是截图与生成代码的对比：
image.png
总结
利用现代 AI 技术，我们不需要写一句代码，AI 就能完成文件生成、代码生成、依赖安装和项目运行。这可以节省约 50% 的前端工作量，不仅大幅提高开发效率，还能在设计与代码之间建立直观的桥梁，实现从视觉到代码的无缝转换。这项技术将在未来的 Web 开发和 App 开发中发挥更大作用。
