狗熊有话说 / BearTalk

### 本期简介

你有没有一个 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 本人的分形设计合伙人落地页（本期案例）

Support this podcast at — https://redcircle.com/beartalk/donations

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

本期 Bear 用自己的 FDP（兼职设计合伙人）落地页作为真实案例，完整演示了一套「Stitch 开始，Figma 收尾」的 AI 辅助设计工作流。如果你还没有把 AI 工具融入设计流程，这期值得一听。

🔑 核心观点

最难的不是设计，是开始。 空白页是所有设计师的公敌，AI 工具的价值在于帮你跨过这道坎。
Stitch 不是一键出图的魔法，而是信息与灵感的收集器。 Bear 强调，他用 Stitch 的方式是多次迭代，而不是指望一次 prompt 出完美结果。
Stitch → Figma 是接力，不是替代。 AI 负责快速起草线框与变体，Figma 负责精修落地。

🛠 工作流步骤拆解

内容先行：用任意 LLM（Claude / Gemini / ChatGPT）整理好落地页的文案结构，包括 Hero 标题、社会证明、价格、CTA 等。
用 Stitch 生成线框：把内容丢给 Stitch，要求忽略颜色和字体，只生成结构线框，快速验证信息层级是否合理。
多端预览：Stitch 支持移动端、平板预览及扫码查看实机效果，线框阶段就能发现布局问题。
生成风格变体：在线框基础上，附上字体和色彩规范，让 Stitch 生成多个视觉方向，用于收集灵感（Bear 从中发现了”可接单状态标签”这个细节，并用到了最终稿里）。
导入 Figma： - 旧方法：导出 ZIP 文件 → 用 HTML to Design 插件导入 Figma（每月 10 次免费） - 新方法：Stitch 直接「Copy to Figma」→ 在 Figma 中 Command + V 粘贴，省去一步
Figma 内精修：从 Lo-fi 线框推进到 Hi-fi 高保真设计，完成最终落地页。

Support this podcast at — https://redcircle.com/beartalk/donations

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

本期 Bear 用自己的 FDP（兼职设计合伙人）落地页作为真实案例，完整演示了一套「Stitch 开始，Figma 收尾」的 AI 辅助设计工作流。如果你还没有把 AI 工具融入设计流程，这期值得一听。

🔑 核心观点

最难的不是设计，是开始。 空白页是所有设计师的公敌，AI 工具的价值在于帮你跨过这道坎。
Stitch 不是一键出图的魔法，而是信息与灵感的收集器。 Bear 强调，他用 Stitch 的方式是多次迭代，而不是指望一次 prompt 出完美结果。
Stitch → Figma 是接力，不是替代。 AI 负责快速起草线框与变体，Figma 负责精修落地。

🛠 工作流步骤拆解

内容先行：用任意 LLM（Claude / Gemini / ChatGPT）整理好落地页的文案结构，包括 Hero 标题、社会证明、价格、CTA 等。
用 Stitch 生成线框：把内容丢给 Stitch，要求忽略颜色和字体，只生成结构线框，快速验证信息层级是否合理。
多端预览：Stitch 支持移动端、平板预览及扫码查看实机效果，线框阶段就能发现布局问题。
生成风格变体：在线框基础上，附上字体和色彩规范，让 Stitch 生成多个视觉方向，用于收集灵感（Bear 从中发现了”可接单状态标签”这个细节，并用到了最终稿里）。
导入 Figma： - 旧方法：导出 ZIP 文件 → 用 HTML to Design 插件导入 Figma（每月 10 次免费） - 新方法：Stitch 直接「Copy to Figma」→ 在 Figma 中 Command + V 粘贴，省去一步
Figma 内精修：从 Lo-fi 线框推进到 Hi-fi 高保真设计，完成最终落地页。

Support this podcast at — https://redcircle.com/beartalk/donations

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

本期 Bear 用自己的 FDP（兼职设计合伙人）落地页作为真实案例，完整演示了一套「Stitch 开始，Figma 收尾」的 AI 辅助设计工作流。如果你还没有把 AI 工具融入设计流程，这期值得一听。

🔑 核心观点

最难的不是设计，是开始。 空白页是所有设计师的公敌，AI 工具的价值在于帮你跨过这道坎。
Stitch 不是一键出图的魔法，而是信息与灵感的收集器。 Bear 强调，他用 Stitch 的方式是多次迭代，而不是指望一次 prompt 出完美结果。
Stitch → Figma 是接力，不是替代。 AI 负责快速起草线框与变体，Figma 负责精修落地。

🛠 工作流步骤拆解

内容先行：用任意 LLM（Claude / Gemini / ChatGPT）整理好落地页的文案结构，包括 Hero 标题、社会证明、价格、CTA 等。
用 Stitch 生成线框：把内容丢给 Stitch，要求忽略颜色和字体，只生成结构线框，快速验证信息层级是否合理。
多端预览：Stitch 支持移动端、平板预览及扫码查看实机效果，线框阶段就能发现布局问题。
生成风格变体：在线框基础上，附上字体和色彩规范，让 Stitch 生成多个视觉方向，用于收集灵感（Bear 从中发现了”可接单状态标签”这个细节，并用到了最终稿里）。
导入 Figma： - 旧方法：导出 ZIP 文件 → 用 HTML to Design 插件导入 Figma（每月 10 次免费） - 新方法：Stitch 直接「Copy to Figma」→ 在 Figma 中 Command + V 粘贴，省去一步
Figma 内精修：从 Lo-fi 线框推进到 Hi-fi 高保真设计，完成最终落地页。

Support this podcast at — https://redcircle.com/beartalk/donations

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy

在这一期 Bear Talk 里，我和 ADPList 联合创始人兼 CEO Felix Lee 聊了很多很关键的话题，包括一个简单的 Google Sheet 是怎么一步步变成全球导师平台的，为什么设计师需要开始用“做生意的人”的视角思考问题，以及 Cursor、Claude Code 这类 AI 工具正在怎样改变设计和做产品的流程。

如果你是设计师、产品人、创业者，或者内容创作者，想在 AI 时代保持清醒和实用，这期对谈会帮你建立一套更清楚的判断框架，知道该学什么、该忽略什么，也知道怎么更稳地开始动手做。

我们聊了这些内容：

Felix 怎么看搬去旧金山这件事，以及为什么“未来密度高的圈子”对创业者很重要

为什么大部分 FOMO 都是噪音，以及怎样用长期视角做判断

ADPList 早期的故事，从疫情期间的一张 Google Sheet 到全球平台

为什么“免费产品”到后面会越来越贵，以及设计师常常忽略的商业问题

为什么设计和商业能力不该被拆开看

Felix 给设计师的 AI 优先工作流，包括 PRD、流程图到 MVP 搭建

Cursor、Claude Code、FigJam、Figma、Whimsical、Vercel 这些工具，怎样放进现在的产品工作流里

为什么很多设计师还停留在假设阶段，没有进入快速实验阶段

在行业变化很快的时候，怎么保持务实，也照顾好自己的状态

这一期特别适合你，如果你是：

正在转自由职业或 Fractional 模式的产品设计师

正在做 MVP 的创业者

正在学习 AI 工作流的设计师

想避开追热点、把注意力放在有效信号上的科技从业者

如果你喜欢这一期，也欢迎去频道里看看更多关于设计、科技、效率和 AI 的内容。

Support this podcast at — https://redcircle.com/beartalk/donations

Advertising Inquiries: https://redcircle.com/brands

Privacy & Opt-Out: https://redcircle.com/privacy