### 本期简介

你有没有一个 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

如果只推荐一本书给开发者和创作者，我几乎不会犹豫，答案是 Refactoring UI。

不是因为它教你“什么风格好看”，而是因为它直接告诉你：什么地方一定是错的。

很多人卡在 UI 上，并不是审美差，而是不知道问题出在哪。界面看着别扭，却只能凭感觉反复修改。

这一期里，我聊的是《Refactoring UI》如何用大量前后对照，把 UI 从“玄学”拉回到可判断、可修正的层面。

如果你做产品、写代码、独立开发，或者经常需要在没有设计师的情况下做界面，这一期会非常实用。

• 为什么我会把《Refactoring UI》推荐给开发者和创作者

• UI 为什么是产品设计里最容易被误解的一块

• “界面不对劲，但说不出来”的根源是什么

• 《Refactoring UI》的核心方法：错误示例 vs 正确示例

• 为什么它更像一次 UI 的 code review

• 为什么我不建议从头到尾把这本书当小说读

• 这本书真正的价值在于反复翻和对照

• 当你带着书里的例子去看熟悉产品时，会发生什么

• 高级感背后，其实是非常朴素的原则

• 颜色、字体、间距和留白的真实作用

• UI 的基本功，为什么比风格更重要

• 从单个页面，转向系统性的思考

• 设计原则看起来简单，但执行并不容易

• 从功能出发，而不是从布局出发

• 限制选择，而不是不断增加选项

• 这些“默认决定”，为什么不是设计选择

• UI 改进为什么几乎每天都能用得上

• 把 60 分的界面，稳定拉到 80 分

• 最后的判断：少犯错，本身就是专业度

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

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

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

这一期内容看起来很杂，但其实围绕着一个共同的问题展开：**我们正在做的事情，究竟是不是值得的？**

我从马伯庸的小说《长安的荔枝》聊起。表面是盛唐故事，读到最后却发现，它像极了现代职场和项目里的我们——被推着走、无法拒绝、必须交付，却越来越空。

接着我分享了一些更贴近生活的片段：在新西兰海边看到女儿发现海星的那一刻、对投资中“第二层次思维”的重新理解、开始认真减脂和管理身体的过程。这些看似分散的经历，其实都在提醒我，什么才是“真正的收获”，什么只是成本。

最后，我也聊到几个偏策略和方法层面的启发：不怕竞争的根本在于不公平优势、为什么高转化落地页的关键是让用户先迈出一步、以及 YouTube 标题和缩略图该如何协同工作。

如果你也正处在一个需要重新校准方向的阶段，希望这一期能陪你慢下来，想清楚自己正在送的那一筐“荔枝”，值不值得。

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

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

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

我一直对日本理财书有点偏见：细节很多，但系统感不足。

为什么你攒不下钱 在某种程度上，甚至验证了这个成见。

它没有讲投资方法，也没有给出财富增长的路径，而是从房间、冰箱、钱包、收据这些生活细节，一路讲到钱。

但正是这种看起来“很生活化”的视角，让我意识到一个更尴尬的事实：很多人攒不下钱，不是不会投资，而是生活本身就在持续漏水。

这一期，我聊的是这本书如何把“存不下钱”从自责里解放出来，并逼你正面面对一个问题：你的生活结构，配得上你想要的财务目标吗？

• 我对日本理财书的偏见，以及这本书如何验证又反转它

• 这本书为什么没有宏大框架，却依然有效

• 一个不舒服的事实：攒不下钱的人，往往连生活都管理不好

• “房间整洁”和“能否存钱”之间的真实因果链

• 冰箱为什么是现金流黑洞

• “总有一天会用到”如何变成无限延期的财务漏洞

• 性价比陷阱：省小钱，付出长期隐性成本

• 这本书真正讨论的核心：欲望管理，而不是数字计算

• Wants 和 Needs 的区分，为什么是认知训练

• 整理收纳在理财中的真实作用

• 钱包、收据、账本这些“小技巧”在指向什么

• 两条可执行原则：先整理生活，再谈理财

• 把目标从“存钱”转为“最低生活底线”

• 为什么我认为这本书“看一看就好”

• 它更像一本生活层面的风控手册

• 在谈投资之前，先问：生活结构是否匹配目标

• AI 在基础理财与自我管理中的辅助价值

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

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

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

这一期是一组近况与思考的合集，但背后有一条非常清晰的主线：**不要只输出表达，要留下作品，并且和真实世界保持摩擦。**

我会从“为什么创作者一定要有自己的作品”聊起，分享我对纯自媒体状态的一些警惕，以及为什么哪怕粗糙、被质疑，也一定要创造能独立存在的东西。

中间会聊到几个非常具体的现实片段：

比如 JAM 官网如何在两天内上线、每天 100 个俯卧撑带来的身体变化、以及独立工作时容易陷入“闭门造车”的危险。

最后，我也分享了一些让我最近很受启发的内容，包括一篇关于「如何让界面清晰、愉悦、不打扰」的设计文章，以及 Vinh Giang 关于口语训练的三个极其实用的练习。

这不是一期“结论型”的节目，而更像一次阶段性的记录：关于创作、身体、家庭、产品，以及如何把自己重新拉回真实世界。

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

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

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

很长一段时间里，我都把饮食控制理解成一件体力活：多动一点，少吃一点，忍住。

但现实是，我经常在固定的时间点突然饿、状态下滑、情绪波动，然后又开始自责。

读完 控糖革命，并真正开始在生活中实践之后，我才意识到：问题并不在意志力，而在血糖波动。

这一期里，我聊的是这本书如何把我从“我是不是不够自律”的循环里，拉回到更清晰的生理因果关系上。

如果你也长期处在“吃得不算多，却总是状态反复”的困扰里，这一期也许能帮你换一种理解身体的方式。

• 为什么我以前把饮食控制误解成“体力劳动”

• 下午突然想吃、晚上莫名其妙饿的真实原因

• 《控糖革命》的关键判断：血糖波动，而不是意志力

• 血糖剧烈波动带来的连锁反应：饥饿、情绪、注意力

• 从自责转向生理因果的“对上号时刻”

• 代糖并不是中立选项

• 控糖的真正目标：减少波动，而不是简单少吃糖

• 进食顺序的重要性：纤维 → 蛋白质与脂肪 → 淀粉和糖

• 为什么早餐空腹吃糖会制造一天中最大的波动

• 行为变化反而变得温和：不靠压抑

• 饭后轻度活动带来的直接影响

• 体重变化之外，更重要的认知变化

• 饥饿不一定是情绪问题，而是信号问题

• 这本书适合谁，不适合谁

• 最后的结论：理解身体，让自律不再成为主角

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

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

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