01 · Needs
客戶需求
- · 5 客群定位（寵物服務 / 寵物品牌 / 旅宿與生活 / 自然與永續 / 個人創作者）
- · 4 種客戶模型 pricing（超級 Starter / 設計 only / 成長型主推 / 進階電商）
- · AI Planner 降低客戶詢價門檻 — Round-3 人工審閱後寄正式報價
- · Mandy 油畫棒插畫整合（arch frame ≤ 20% 比例，不滿版）
- · forest green + cream + serif editorial 視覺基調
BRAND + WEBSITE + AI PLANNER · 設計工作室
MO Studio × Mandy Tsai（茉設計）
MO Studio × Mandy Tsai（茉設計）是 Mandy Tsai 與 so桑 共同創辦的設計工作室。動物友善為核心訴求，但接所有想做網站的中小品牌、創作者、商家。這個網站本身就是 mo studio 的「dogfood」— 用我們自己的工作流跑一遍，先驗證再賣給客戶。
Services · Brand v3 SSOT / Next.js 16 + Tailwind v4 / Mandy 36 張插畫整合 / AI 規劃系統 / Notion lead funnel
▸ 看上線版 mostudio.tw
02 · Problem
原本遇到的問題
mo studio 自家品牌經歷三個版本：v1 sharp 醫生口吻、v2 動物業 vertical 唯一、v3 擴大為 5 客群 + AI Planner + 4 客戶模型。每次 pivot 都是為了更貼近真實 lead 的樣子。最大的挑戰是：自家網站要同時是「作品集」「服務說明」「Lead 收集機器」「Demo 用客戶看」— 四個角色一個入口。
03 · Goals
網站目標
- · 動物核心比例 ≥ 50%（印章 BRANDS · NATURE · PETS · STORIES · DESIGN 差異化）
- · AI Planner 降詢價門檻 — 客戶填表 → 系統初步估 → mo studio 人工審閱 → 3-5 工作日寄正式版
- · Notion lead DB 統一管理 quote / contact 雙軌入口
- · Threads + IG + SEO 文章三軌引流 → /quote 轉換
04 · Approach
我們的做法
v3 stack：Next.js 16（App Router）+ React 19 + Tailwind v4 + Turbopack。Mandy 36 張插畫整合（hero arch / banner / icon / divider / footer-deco / case banner）。Notion lead DB 26 properties（含參考圖上傳 + 人工審閱 quote_status 流程）。R2 直傳 presigned URL 上傳客戶意示圖（24h lifecycle 自動清）。表單防呆三件套：hCaptcha + rate limit + honeypot。/contact 雙寫 WordPress + Notion（resilient）。
05 · Outcome
成果
✓ 13 routes 全綠（含 /quote 6-step form + /quote/result 人工審閱說明 + /work 案例 + /pricing 4 模型）
✓ Mandy 插畫 36 張整合進網站（72% 覆蓋率）
✓ Notion 網站詢問表單 DB 26 欄建好 + 雙軌寫入（/quote + /contact）
✓ AI Planner Round-3 人工審閱流程上線
⏳ Lead 數 / Demo 轉換率 / 客戶下單率 — 上線後追蹤
06 · Learning
學到的事
「自家網站要做給客戶當 demo 用 — Mandy + so桑 配合做 dogfood 才知道工作流的真實坑點（圖檔交付 / 文案 voice 對齊 / pricing 模型反覆 / Mandy v1.1 落地的三輪 sync）。「自己用得起來」是賣給客戶的前提。這個案例本身就是 mo studio 服務模式的活樣本。」