區塊先生 🐡 ⚠️ (rock #58)(@mrblock):這個專案（Anatomy Atelier）是典型的「Vibe Coding」成功案例：幾乎全程靠 AI 工具串起來，人只負責方向、提示詞設計和迭代決策。整個流程可分成 6 個清晰階段： 1. 靈感與目標設定 作者長期想做「真正有用」的東西，靈感來自 @DilumSanjaya 的 3D 動植物細胞專案。目標很明確：做出可互動的 3D 人體解剖學習工具，讓學習像藝術創作一樣有趣。 2. 視覺設計起點（GPT Image 2.0） 先用 GPT Image 2.0 生成「一張主設計圖」（整個 App 的 UI 風格、配色、佈局）。 接著以這張圖為風格基準，逐一生成 9 個主要器官的高品質 2D 圖像（心臟、腦、肺、肝、腎、腸、胰、眼、皮膚等）。 這一步決定了整個 App 的美學一致性。 3. 2D → 3D 模型轉換（TripoAI） 把每張器官圖像丟進 TripoAI，直接生成對應的 3D mesh。 這是目前最省事的圖片轉 3D 路徑，不需要手動建模。 4. 核心開發（Codex + Three.js + GPT-5.6 Sol） 作者寫了一個「Master Prompt」，把： • 設計圖 • 所有 3D 模型 • 功能需求（旋轉、縮放、剖面、熱點、右側資訊卡、顯微視圖、比較、動畫等） 全部丟給 Codex。 Codex 幾乎從頭寫出整個 Three.js 前端，並自動生成： • 解剖位置插圖 • 可點擊的 hotspot 標記與說明文字 • 臨床筆記、功能動畫等內容 5. 效能優化迭代（最關鍵的一步） 第一版直接爆炸：每個模型 120–150 MB，總計約 900 MB，只有 16 fps。 作者繼續用 Codex 反覆迭代，最終： • 模型壓縮到每個 2–5.5 MB（使用 Draco + Basis） • 總資產只剩 28.6 MB • 改成「按需載入」（on-demand loading） 這一步把「能跑」變成「真正能上線給人用」。 6. 結果與開源 完成後上線 https://t.co/zUVLFfgwts，並開源到 GitHub（thebuggeddev/anatomy）。 整套流程證明：現在只要有清晰的設計意圖 + 正確的工具鏈，一個人就能在短時間內做出高品質的互動教育產品。核心啟示：不是一次生成就完美，而是「設計 → 生成 → 轉換 → 組裝 → 優化」的閉環迭代。AI 負責重活，人負責品味與方向。

2026.08.04 04:51

這個專案（Anatomy Atelier）是典型的「Vibe Coding」成功案例：幾乎全程靠 AI 工具串起來，人只負責方向、提示詞設計和迭代決策。整個流程可分成 6 個清晰階段： 1. 靈感與目標設定 作者長期想做「真正有用」的東西，靈感來自 @DilumSanjaya 的 3D 動植物細胞專案。目標很明確：做出可互動的 3D 人體解剖學習工具，讓學習像藝術創作一樣有趣。 2. 視覺設計起點（GPT Image 2.0） 先用 GPT Image 2.0 生成「一張主設計圖」（整個 App 的 UI 風格、配色、佈局）。 接著以這張圖為風格基準，逐一生成 9 個主要器官的高品質 2D 圖像（心臟、腦、肺、肝、腎、腸、胰、眼、皮膚等）。 這一步決定了整個 App 的美學一致性。 3. 2D → 3D 模型轉換（TripoAI） 把每張器官圖像丟進 TripoAI，直接生成對應的 3D mesh。 這是目前最省事的圖片轉 3D 路徑，不需要手動建模。 4. 核心開發（Codex + Three.js + GPT-5.6 Sol） 作者寫了一個「Master Prompt」，把： • 設計圖 • 所有 3D 模型 • 功能需求（旋轉、縮放、剖面、熱點、右側資訊卡、顯微視圖、比較、動畫等） 全部丟給 Codex。 Codex 幾乎從頭寫出整個 Three.js 前端，並自動生成： • 解剖位置插圖 • 可點擊的 hotspot 標記與說明文字 • 臨床筆記、功能動畫等內容 5. 效能優化迭代（最關鍵的一步） 第一版直接爆炸：每個模型 120–150 MB，總計約 900 MB，只有 16 fps。 作者繼續用 Codex 反覆迭代，最終： • 模型壓縮到每個 2–5.5 MB（使用 Draco + Basis） • 總資產只剩 28.6 MB • 改成「按需載入」（on-demand loading） 這一步把「能跑」變成「真正能上線給人用」。 6. 結果與開源 完成後上線 GitHub（thebuggeddev/anatomy）。 整套流程證明：現在只要有清晰的設計意圖 + 正確的工具鏈，一個人就能在短時間內做出高品質的互動教育產品。核心啟示：不是一次生成就完美，而是「設計 → 生成 → 轉換 → 組裝 → 優化」的閉環迭代。AI 負責重活，人負責品味與方向。

The Bugged Dev@thebuggeddev

2026.08.02 11:57

Only if education could be this interactive ❤️‍🔥 I've had a looong wish to build something genuinely useful through vibe coding, and I finally did it. A 3D human anatomy application built with @threejs using GPT 5.6 Sol. It all started with a single design image that I created using GPT Image 2.0. I then used it to generate every 3D organ image, one by one. Next, I converted each of those images into 3D models using @tripoai (and no, they didn't sponsor this 😄). After that, I opened Codex, wrote a master prompt based on the design, and gave it the prompt, the design image, and all the 3D models. Codex built the first version beautifully, but there was one big problem. Every single 3D model was nearly 120-150 MB. That obviously wasn't practical for the web and was giving a performance of 16fps. After a few iterations, Codex optimized each model down to roughly 2–5.5 MB while preserving the visual quality, reducing the total asset size from ~900 MB to just 28.6 MB. And each model loads on demand. Along the way, Codex also generated those anatomical illustrations showing where each organ sits in the human body, and even created the interactive hotspot markers that explain different parts of every organ. It handled all of that. The process wasn't exactly one shot, but it also wasn't difficult. You just have to do it step by step. It genuinely felt like building something that could make learning anatomy much more engaging. The inspiration came from @DilumSanjaya's 3D animal plant cell project. I remember seeing it and thinking, "I want to build something like this one day." And I did it :D Live: Code:

커뮤니티로 전달