The Future of Product Management

AI PM
× Vibe Coding

當 AI 產品經理遇上直覺式編程
Where product intuition meets creative code
✦ ASTRO ✦ P5.JS ✦ THREE.JS
↓ SCROLL TO EXPLORE
01 — Manifesto
AI PM 的 Vibe Coding 宣言
Why AI Product Managers Should Embrace Creative Coding
在 AI 時代，產品經理不再只是寫 PRD。透過 Vibe Coding，PM 能直接將想法化為可互動的原型，用程式碼思考產品。
001

用原型取代文件

Prototype over Documentation

一個可互動的 demo 勝過千頁 PRD。AI 讓 PM 能在幾分鐘內將想法變成可體驗的原型。

002

數據即直覺

Data as Intuition

用生成式視覺化理解數據，讓數字說故事。p5.js 讓抽象的指標變成可感知的體驗。

003

體驗先行設計

Experience-First Design

Three.js 讓 PM 能快速建構沉浸式體驗，在開發前就驗證 3D、動態互動的可行性。

004

AI 加速迭代

AI-Accelerated Iteration

Vibe Coding = 用自然語言描述需求，AI 即時生成程式碼。PM 的迭代週期從天縮短為分鐘。

02 — Data Visualization
產品數據的生成式視覺化
Generative Visualizations for Product Metrics
傳統圖表太無聊？用 p5.js 把用戶行為、轉換漏斗、留存曲線變成動態藝術。每一幀都是數據的詩。
轉換漏斗流場 Conversion Funnel Flow
p5.js
用戶關係網絡 User Network Graph
p5.js
即時活躍脈搏 Real-time Activity Pulse
p5.js
03 — Workflow
AI PM 的 Vibe Coding 工作流
The AI PM Vibe Coding Workflow
從想法到上線，四步完成。不需要等待工程排期，PM 自己就能驗證想法。
💡

描述想法

Describe Idea

用自然語言描述你想要的產品體驗

→
🤖

AI 生成

AI Generates

Claude / GPT 即時產生前端程式碼

→
🎨

即時調整

Live Tuning

互動式微調視覺與體驗細節

→
🚀

部署上線

Ship It

一鍵部署到 Zeabur，分享給團隊

04 — 3D Playground
產品思維的 3D 視覺化
3D Visualization of Product Thinking
移動滑鼠探索這個互動場景——每個節點代表一個產品功能，連線代表功能間的依賴關係。這就是 PM 的系統思維。
"The best product managers don't just describe the future — they build it."
— The AI PM Manifesto, 2025
05 — Tech Stack
技術堆疊
Built with Modern Tools

⚡ Astro

Island Architecture
零 JS 預設，極速載入

🎨 p5.js

Creative Coding
數據化為生成式藝術

🧊 Three.js

WebGL 3D Engine
沉浸式互動體驗

🐰 Bun

Ultra-fast Runtime
超高速開發體驗

🤖 Vibe Coding

AI-Assisted Dev
自然語言驅動開發