文章目录
-
- 准备工作：下载与安装
- 第一阶段：在 Figma 中规范化设计（代码友好型）
- 第二阶段：在 CodeBuddy 中导入设计稿
- 第三阶段：生成与调优代码
在使用 AI 将 Figma 设计稿转化为前端代码时，核心在于
「规范的源文件」 与
「正确的工具入口」。以下是使用
CodeBuddy 自动还原 UI 的完整实操步骤。
准备工作：下载与安装
| CodeBuddy | www.codebuddy.ai | 进入官网首页后点击下载，按系统选择 Windows / macOS 版本；使用文档见 codebuddy.ai/docs/zh |
| Figma 桌面版 | www.figma.com/downloads | 支持 macOS、Windows（含 Windows Arm）；也可直接使用网页版 www.figma.com |
两个工具都请从官方域名下载，不要使用第三方软件站或网盘转存的安装包。
第一阶段：在 Figma 中规范化设计（代码友好型）
如果 Figma 图层杂乱无章，AI 生成的代码将是满屏的绝对定位。请务必按以下标准设计：
可以使用左侧的 agent 对话快速设计
如图：
第二阶段：在 CodeBuddy 中导入设计稿
这是最关键的一步，严禁使用外部浏览器，必须走 CodeBuddy 的内置通道。
- 注：若此前授权过但未成功，请先退出 Figma 账号重新登录。
- 注：若弹出 Upgrade to work in Dev Mode 提示，直接点 Not now 关闭即可，免费版不影响。
如图所示：
第三阶段：生成与调优代码
请根据导入的 Figma 设计稿，使用 React 和 Tailwind CSS 生成前端登录页面，要求还原颜色、字号和间距。
我当前写入的是：
在html中还原这个设计稿，先不使用框架。
生成结果：
🚀 感谢阅读！想了解更多？
📖 我的博客网站 | 记录思考，分享干货 🏡 我的个人主页 | 关于我、开源项目
