---
aliases: null
area: tech-engineering
author: null
category: ai-ml
date: 2025-11-22
insight: null
layout: post.njk
project: []
published: null
source: https://www.youtube.com/watch?v=8uSUci1dZHM
speaker: 用AI發電
status: inbox
summary: 在 AI 编程工具爆发的当下，我们是否正在见证一种新型创造者的诞生？本期 Office Hour 不仅是对 Gemini 3.0、AntiGravity 等前沿工具的硬核测评，更是一场关于“心法”的深度对话。从 Min 对 AI 模型梯队的犀利点评，到设计师 Yueyue 将 INFJ 的细腻情感注入代码的实战演练，再到 Adam 对 SAP 垂直领域的精准切入。我们看到，技术不再是冰冷的壁垒，而是放大创意的杠杆。本手册将带你从“工具使用者”进化为“产品打造者”。
tags:
- ai
- coding
- development
- prompt-engineering
- claude
- chatgpt
- gemini
- react
- design-pattern
- productivity
- workflow
- tools
title: 20251122_Office Hour 带上你的 Bug，Vibe Coding 大神现场一对一“问诊”
---

### 第一部分：核心理念 — 从“指令投喂”到“系统构建”

1\. 像搭乐高一样构建代码：原子化设计工作流

- **核心理念:** 面对复杂的全栈开发，不要试图一次生成所有代码。应采用“原子化”思维，先搭建最小单元（原子组件），再组装成模块（分子），最后形成页面（有机体）。这种自下而上的构建方式能确保系统的极度稳定性。 *(Yueyue, 00:38:05)*
- **实战案例:** Yueyue 在开发 **Amethyst**（一个为 INFJ 打造的精神栖息地 App）时，并非直接生成整个页面。她先在 Figma 中定义好视觉规范，然后建立 Component 文件夹，让 AI 先完美复刻 Button、Card 等基础组件的 Hover 状态和交互逻辑。当原子组件稳定后，再拼装成任务列表和复盘页面。 *(Yueyue, 00:41:28)*
- **落地方法:**
	1. **视觉先行：** 在 Figma 中通过 Dev Mode 获取组件的详细属性（颜色、圆角、阴影）。
	2. **原子喂养：** 将 Figma 的组件数据投喂给 AI，指令其生成独立的 React 组件代码，并明确交互逻辑（如 hover 效果）。
	3. **逐层组装：** 像堆乐高一样，用已验证的原子组件搭建复杂页面，避免“改了这里坏了那里”的蝴蝶效应。 *(Yueyue, 00:42:00)*

  

2\. AI 的“情商”与效能：选择你的结对编程伙伴

- **核心理念:** AI 不仅仅是代码生成器，更是情绪价值提供者。不同的模型有不同的“人格”，选择适合自己心流的模型能显著提升开发体验。 *(Yueyue, 00:52:19)*
- **实战案例:** Yueyue 将 **Claude** (Transcript中误识别为Cloud Code) 比作“活泼开朗的课代表”，它会给予鼓励（"You are absolutely right"），提供极高的情绪价值，适合探讨思路；而 **Codex** 则像“高冷学霸”，回答言简意赅、冰冷直接，适合纯粹的代码执行。 *(Yueyue, 00:52:19)*
- **落地方法:**
	- **创意发散阶段：** 使用 **Claude** 或 **ChatGPT Plus**，利用其对话能力和上下文理解力进行头脑风暴和需求梳理。
	- **代码执行阶段：** 如果追求效率和精准度，可以使用 **Codex** 或 **Gemini 3** 的编程能力。
	- **遇到瓶颈时：** 当一个 AI 陷入死循环（"脑子转不动了"），果断切换到另一个模型（如从 Claude 切到 Codex），打破上下文的僵局。 *(Yueyue, 00:55:40; Min, 00:55:49)*

---

  

### 第二部分：工具与武器库 — 20 美元预算的最佳投资

本期对当前主流 AI 编程工具进行了深度横评，以下是基于实战体验的推荐梯队：

  

> **重要提示：** 如果你的预算有限（仅 $20/月），首选 **ChatGPT Plus**；如果你追求极致的前端还原，**Gemini 3** 是目前的版本答案。 *(Mike, 00:11:14)*

---

  

### 第三部分：高级战术与避坑指南

  

1\. 从 Web 到 Native App 的三条路径

当你的 Web App（如 React 项目）想要进军 App Store 时，Min 提供了三条清晰的路径：

- **路径 A（极速版）：CapacitorJS**
	- **原理：** 给 Web App 套一个壳。
	- **优点：** 极快，AI 非常熟悉此技术栈，几乎不用重写代码。
	- **缺点：** 体验有损失，缺乏原生应用的质感。 *(Min, 00:56:53)*
- **路径 B（折中版）：Expo + React Native + NativeWind**
	- **原理：** 使用 React 语法写原生应用，也是 BlueSky、Tesla 等大厂的选择。
	- **优点：** 一套代码运行在 iOS/Android/Web，体验优于套壳。
	- **建议：** 社群正在策划相关课程，适合追求一定体验的开发者。 *(Min, 00:58:00)*
- **路径 C（原生版）：Swift/Kotlin**
	- **原理：** 让 AI 阅读 Web 版代码或通过 Playwright 抓取流程，重新生成原生代码。
	- **优点：** 极致的性能和原生体验（如 iOS 的高斯模糊效果）。
	- **缺点：** 开发成本最高，且受限于平台 UI 规范。 *(Min, 00:59:01)*

  

2\. 极简用户测试法 (User Testing)

不要等到产品完美才开始测试。

- **观察法：** 不要只发链接，最好通过屏幕共享或坐在用户旁边，观察他们的操作。不要引导，看他们在哪里卡住（例如：找不到添加任务的按钮）。 *(Flash, 01:06:05)*
- **异步法：** 如果无法实时观察，可以使用 **Statsig** 或 **Posthog** 等工具的 Session Replay 功能，后台录制用户的操作轨迹，分析行为漏斗。 *(Min, 01:09:29)*
- **早测试：** 甚至不需要代码，拿手绘的原型图就可以开始测试用户需求，尽早 "Narrow down" 目标。 *(Flash, 01:12:19)*

  

3\. 精准控制 AI 的 Prompt 技巧

- **Markdown 投喂法：** 在开启新对话前，先上传一个包含项目当前状态、任务清单（To-do List）的 Markdown 文件。给 AI 建立充足的“上下文”，防止它胡乱发挥。 *(Min, 00:45:01)*
- **角色与任务明确：** 像 Yueyue 那样，明确告诉 AI：“读取 Markdown 文档 -> 连接 Figma 链接 -> 确保 [Localhost](http://localhost/) 能显示 Homepage 内容”。指令越具体，输出越精准。 *(Yueyue, 00:44:19)*

---

  

### 第四部分：资源与链接库 (来自聊天室)

**🔧 核心工具与模型**

- **Google Gemini Image Generation:** [https://gemini.google/jp/overview/image-generation/](https://gemini.google/jp/overview/image-generation/)
- **Google AntiGravity (Editor):** [https://antigravity.google](https://antigravity.google/)
- **AI 模型竞技场排名:** [https://artificialanalysis.ai/](https://artificialanalysis.ai/)
- **Mobbin (UI 设计参考):** [www.mobbin.com](http://www.mobbin.com/)
- **Langfuse (LLM 工程平台):** [https://langfuse.com/](https://langfuse.com/)
- **Vercel AI SDK:** [https://ai-sdk.dev/docs/agents/overview](https://ai-sdk.dev/docs/agents/overview)

**📱 App 开发与转制**

- **CapacitorJS (Web 转 App):** [https://capacitorjs.com/](https://capacitorjs.com/)

**📊 用户测试与数据分析**

- **Statsig (Session Replay):** [https://www.statsig.com/session-replay](https://www.statsig.com/session-replay)
- **Posthog (Session Replay):** [https://posthog.com/session-replay](https://posthog.com/session-replay)
- **书籍推荐:** 《Don't Make Me Think》 (Flash 推荐) - [Amazon Link](https://www.google.com/search?q=https://www.amazon.com/-/zh_TW/Dont-Make-Think-Revisited-Usability/dp/0321965515/&authuser=1)

**🚀 社群成员项目**

- **SmartSAP Simulator (Adam):** [https://smartcoreaa.gumroad.com/l/lmblee](https://smartcoreaa.gumroad.com/l/lmblee) (SAP 顾问项目 Sass)

---

  

### 行动清单 (To-Do List)

1. **\[尝试\]** 体验 Google 的 **AntiGravity** 或 **Gemini 3**，特别是尝试用截图生成 UI 代码的功能。
2. **\[优化\]** 检查你的 Prompt 习惯：是否在每次对话前提供了足够的 Context（如 Markdown 文档）？
3. **\[测试\]** 如果你有正在开发的产品，哪怕是半成品，找 3-5 个朋友进行一次“观察式”用户测试，记录他们“卡住”的瞬间。
4. **\[思考\]** 你的产品是否可以通过 **CapacitorJS** 快速打包上架，验证移动端市场？