### 本期简介

你有没有一个 Figma 落地页，设计早就做完了，却一直没上线？拦住你的往往不是设计本身，而是环境配置、响应式适配、部署和域名这些"技术活"。

这期节目里，Bear 完整拆解了自己用 **Claude Code** 将 Figma 静态设计稿发布为真实网站的全过程——零编程经验，半天完成，全程自然语言操作。适用于落地页、作品集、案例研究等静态网站场景。

---

### 核心流程拆解

**第一步：用 Plan Mode 规划全局**

在 Claude Code 中按 `Shift + Tab × 2` 进入 Plan Mode，先让 AI 制定完整方案，不急着执行。框架、步骤、依赖项一次看清楚，满意再开始。

**第二步：连接 Figma MCP，提取设计 Token**

把 Figma 设计链接丢给 Claude，让它连接 MCP 自动识别颜色、字体、间距等设计 Token，以及各个页面区块的结构。

**第三步：搭建本地环境并还原设计**

框架选用 **Next.js + Tailwind CSS**，大约 20 分钟，Claude 就能把 90% 的设计稿还原成本地可运行的网站。

**第四步：做响应式，但别全靠 AI**

移动端适配时，如果 AI 在同一个问题上反复循环（比如 Hero 图片裁剪方式），不要硬耗 Token——**手动去 Figma 做好裁好的图，直接替换**，效率更高。这是本期最重要的一个教训。

**第五步：截图 + 粘贴调整细节**

发现哪里和设计稿不对，直接截图 `Ctrl+V` 粘到 Claude，描述问题，它会自动对照原始设计修复。加箭头标注效果更好，就像和坐在旁边的开发一起协作。

**第六步：上传 GitHub，部署到 Vercel，连接域名**

一切搞定后，让 Claude 把代码推到 GitHub，连接 Vercel 托管，再绑定自己的域名。还顺带生成了 README 和博客草稿。

---

### 三条关键收获

1. **控制范围**：你在发布落地页，不是在造产品，保持克制

2. **先规划，再迭代**：Plan Mode 先行，配合小步视觉检查

3. **知道边界**：AI 在主观视觉判断上容易卡壳，这时候人工介入反而更快

---

### 提到的工具与资源

- 🔗 [Claude Code](https://claude.ai) — Anthropic 出品的 AI 终端工具，支持自然语言开发

- 🎨 **Figma** — 设计稿来源及手动裁图备用工具

- ⚡ **Next.js + Tailwind CSS** — 本次项目技术栈

- 🚀 **Vercel** — 网站托管平台

- 🌐 **bareliew.com** — Bear 本人的分形设计合伙人落地页（本期案例）

#548 别等工程师了，自己用 Claude 发布网站

狗熊有话说 / BearTalk