背景

上周有个朋友问我：「我想做一个个人主页，找人开发太贵，自己写代码又不会，有没有快一点的办法？」

我想了想，决定用这个场景做个完整记录。从需求分析到实际上线，整个流程花了大约 4 个小时。

工具选择

为什么是这三个工具

Figma AI 负责出图。它的小组件生成能力被低估了，直接输入描述就能出 UI 稿，比 Midjourney 更适合做界面设计。

Cursor 负责写代码。它不只是代码补全工具，更重要的是它能理解你的设计稿，然后生成对应的 HTML/CSS。实际上你可以直接截图设计稿发给它。

Vercel 负责部署。免费额度够用，绑定域名也简单，CI/CD 自动跑，push 到 main 就自动上线。

第一步：Figma AI 出图

打开 Figma，在新文件里点击「AI」按钮，输入：

个人主页，包含 Hero 区域、关于我、作品集、联系方式四个板块。简约风格，深色背景，橙色强调色。

大约 30 秒，AI 生成了一套完整的 UI 稿。颜色和布局基本可用，但字体和间距需要手动调整。

调整耗时：约 20 分钟。

第二步：Cursor 生成代码

这一步是整个流程的核心。

把 Figma 里的设计截图截下来，然后在 Cursor 里输入：

根据这个截图生成一个单页面 HTML，包含响应式布局，风格简约，使用深色背景和橙色强调色。

Cursor 返回了一段完整的 HTML + CSS 代码。我检查了一下，没有明显问题。

第一次尝试的准确率：大约 70%。剩下的 30% 需要手动微调。

第三步：部署到 Vercel

代码调整完成后，我把它上传到 GitHub，然后连接 Vercel。

以下是需要执行的命令：

vercel --prod

部署完成后，Vercel 会给你一个 *.vercel.app 的域名。解析自己的域名大约需要 10 分钟。

实际耗时

| 步骤 | 耗时 |
| :--- | ---: |
| Figma AI 出图 | 40 分钟 |
| Cursor 生成代码 | 60 分钟 |
| 手动微调 | 30 分钟 |
| Vercel 部署 | 20 分钟 |
| 合计 | 2.5 小时 |

结论

三个工具配合起来，一个完全不会写代码的人，在 4 小时内是可以做出一个能上线的落地页的。

关键在于不要追求完美，先跑通流程，再优化细节。

如果你也在考虑用 AI 工具提升效率，这个流程值得一试。