你可以在一个下午内使用 Claude 从 Figma 设计快速转换为一个上线的网站 — 无需任何编码经验。工作流程很简单：在 Figma 中设计，将设计导出或描述给 Claude，生成代码，在 Vercel 或 Netlify 上部署。如果你使用免费版本，整个过程完全免费。
人们在 X 上发布"2 小时内制作 $5,000 的网站"的视频，但大多数都跳过了实际步骤。本指南填补了这个空白。每个提示都包含在内，每个决策点都有解释，权衡也是坦诚的。
为什么现在可行（一年前不行）
一年前，用 AI 将设计转换为代码意味着粘贴截图，然后得到需要数小时清理的粗糙版本。今天，Claude 的 100 万令牌上下文窗口意味着你可以将整个设计系统 — 颜色、排版、间距、组件细节 — 输入其中，第一遍就能得到与你的设计紧密匹配的生产级代码。
关键洞察：你得到的质量几乎完全取决于你对设计的描述有多好。模糊的描述产生模糊的网站。具体、结构化的描述产生具体、精致的网站。
你需要什么
三个工具，都有免费版本：
Figma — 用于你的设计。免费版本足够了。如果你没有设计，从 Figma Community 获取免费模板并自定义。
Claude — 用于代码生成。免费版本提供 Sonnet，可以很好地处理这个任务。Pro 版本（$20/月）提供 Opus 4.7，用于更复杂的网站。
Vercel 或 Netlify — 用于部署。两者都有免费版本。连接你的 GitHub 仓库，推送代码，网站上线。
步骤 1：准备你的 Figma 设计
在使用 Claude 之前，将你的 Figma 文件整理好。这个步骤决定了后续所有工作的质量。
你的设计应该有清晰定义的页面（首页、关于、联系等）、一致的间距和对齐、可见的调色板（记下确切的十六进制值）、已识别的字体，以及如果可能的话，桌面和移动的响应式断点。
不要担心像素完美性。Claude 在处理实现细节方面表现很好。重要的是你的设计清楚地传达了结构、层次和视觉风格。
专业提示：有意义地命名你的 Figma 图层。"Hero Section"、"Feature Cards"、"Pricing Table" 在编写提示时比 "Frame 247" 更有用。
步骤 2：导出你的设计信息
Claude 不能直接读取 Figma 文件，所以你需要将你的设计转换为 Claude 可以使用的信息。你有三种方法，从最简单到最精确：
方案 A：截图 + 描述。将设计中的每个页面拍摄全页截图。将它们上传到 Claude，并附上关于布局、颜色和交互的书面描述。这是最快的方法，效果出奇地好。
方案 B：Figma Dev Mode 导出。如果你有 Figma 的付费计划，使用 Dev Mode 导出 CSS 值、间距令牌和组件规范。将这些与截图一起提供给 Claude，以获得更精确的输出。
方案 C：书面设计规范。详细写出每个部分 — 标题、hero、功能、推荐、页脚 — 包括颜色、字体、大小和布局。这需要更长时间，但让你对输出有最多的控制。如果你在没有 Figma 设计的情况下构建，这是你的途径。
步骤 3：编写你的初始提示
这是大多数人出错的地方。他们写"根据这个截图为我构建一个网站"，然后得到通用输出。这是一直能产生高质量结果的提示结构：
构建一个[页数]-页面网站，具有以下规范：
设计系统：
- 主要颜色：[十六进制]
- 辅助颜色：[十六进制]
- 背景：[十六进制]
- 文本：[十六进制]
- 字体：标题使用 [字体名称]，正文使用 [字体名称]
- 边框半径：[数值]
- 间距比例：[数值]
第 1 页 — 首页：
- Hero 部分：[准确描述 — 标题文本、副标题、CTA 按钮文本、背景处理]
- 功能部分：[数量] 卡片，每个包含 [图标/图像、标题、描述]
- 推荐：[布局描述]
- CTA 部分：[描述]
- 页脚：[链接和布局]
第 2 页 — 关于：
[相同的细节级别]
技术：
- 使用 Next.js 和 Tailwind CSS
- 移动端响应式
- 部分间的流畅滚动
- 所有图像作为占位符 div，带背景颜色（我之后会添加真实图像）你对用户看到的内容描述得越具体，输出就越好。不要描述代码 — 描述体验。如果你在发送前需要帮助完善这个提示，我们的免费提示优化器可以帮助为更好的结果进行结构化。
步骤 4：审查和迭代
Claude 的第一个输出通常捕获 60-80% 的你的设计。剩余的 20-40% 来自迭代。这是大多数"氛围编码"教程结束的地方，但这也是真正质量出现的地方。
通过检查三件事来审查输出：布局与你的设计匹配吗？颜色和排版感觉对吗？在移动设备上看起来不错吗？
然后用具体反馈进行迭代。不要说"改进它"。而是说：
- "Hero 部分需要更多垂直填充 — 添加 120px 上下边距"
- "功能卡片在桌面上应该是 3 列网格，在移动设备上应该是单列"
- "CTA 按钮应该有悬停效果 — 背景暗化 10% 并稍微放大"
- "页脚链接应该排列在 4 列中：Product、Company、Resources、Legal"
每一轮反馈应该解决 3-5 个具体问题。三轮通常能让你达到 95% 的设计。
从中获得价值？我们每周发布一篇关于 AI 工作流、工具和实用指南的深度文章。加入最先获得的读者 →
步骤 5：添加真实内容和图像
将占位符文本替换为你的实际副本。将占位符图像 div 替换为真实图像。如果你需要帮助编写网站文案，Claude 在这方面表现出色 — 为它提供你的品牌描述，并要求匹配你语调的首页文案。
对于图像，使用来自 Unsplash 或 Pexels 的免费库存，或使用 AI 图像工具生成自定义图像。将图像文件放入你的项目的 /public 文件夹中并更新 src 属性。
步骤 6：一键部署
如果你使用了 Next.js（推荐），在 Vercel 上部署需要 60 秒：
- 将你的代码推送到 GitHub 仓库
- 转到 vercel.com 并用 GitHub 登录
- 点击"Import Project"并选择你的仓库
- Vercel 自动检测 Next.js 并配置一切
- 点击"Deploy"
你的网站上线并带有一个 .vercel.app URL。如果你有自定义域，在 Vercel 的设置中连接它。
Netlify 的工作方式几乎相同 — 从 GitHub 导入，自动检测框架，部署。两个平台都自动处理 SSL、CDN 和持续部署。每次你推送到 GitHub 时，你的网站都会更新。
不确定使用哪个部署平台？我们写了一个完整的比较：在氛围编码后部署在哪里？
容易让人犯的常见错误
1. 只给 Claude 一个截图，没有书面上下文。截图有帮助，但 Claude 需要颜色、字体、间距和布局的书面描述来产生准确的代码。截图是参考 — 文本是指令。
2. 试图在一个提示中构建所有内容。一个有动画、表单和 CMS 的 6 页网站对于一次通过来说太多了。逐页、逐部分构建。从首页开始，把它做对，然后转到下一页。
3. 跳过移动端响应式。如果你在提示中不提及移动设备，Claude 会构建仅限桌面的布局。总是在你的技术要求中包括"移动端响应式"，并在 375px 宽度测试输出。
4. 不测试交互。点击每个按钮，填写每个表单，滚动每个页面。AI 生成的代码看起来通常是对的，但有损坏的链接、非功能性表单或缺失的悬停状态。部署前先测试。
5. 部署前追求完美。在 90% 时发布并迭代。你的第一次部署不需要完美 — 它需要上线。你可以在几秒内推送更新。
为客户构建？在交付前阅读我们的指南每个氛围编码器都会犯的 5 个安全错误。
底线
Figma-to-Claude-to-deploy 工作流是在不自己编写代码的情况下将设计转换为工作网站的最快方式。质量取决于你的提示的具体性，而不是编码技能。三轮迭代通常能让你从初稿达到生产就绪。
从一个简单的项目开始 — 作品集或落地页 — 并完整地完成一个周期。第二次会快两倍，因为你会知道如何准确地结构化你的提示。
不确定哪个 AI 工具最适合你的工作流？进行我们的 60 秒模型选择测试来找出，或查看完整的AI 模型状态比较。
这是我们每周做的事情。一篇关于 AI 工具、工作流和诚实想法的深度文章 — 没有炒作，没有填充。加入我们 →
披露：本文中的某些链接是联盟链接。我们只推荐我们亲身测试和定期使用的工具。查看我们的完整披露政策。