截圖驅動開發法

概述

以視覺截圖（而非文字描述或線框稿）作為設計到開發的交付物，利用多模態 AI 模型直接讀圖來建構頁面。由 Paperclip AI 虛擬公司的三次流程迭代中發展出的方法論。

流程

1. PM 用 agent-browser 截取參考網站每個區塊
   （語意化命名：home-hero.png、home-features.png）
   ↓
2. 設計師只產出 Design System
   （色票、字型、間距 token — 不做線框稿、不寫程式碼）
   ↓
3. 前端工程師直接看截圖 + Design System 建構頁面
   （截圖 = source of truth）
   ↓
4. QA 截圖比對 + 六維評分
   （平均 >= 3.5 且無低於 2 分即通過）

為什麼有效

• 截圖比文字精準：「左側 60% 放圖片」的文字描述無法傳達間距、比例、留白的視覺細節
• 利用多模態能力：Claude 等模型可直接讀圖，省去文字描述的轉譯損失
• 消除中間環節：去掉線框稿，減少一次資訊轉譯（參考網站 → 線框稿 → 程式碼 變為 參考網站 → 截圖 → 程式碼）

迭代歷程

版本	流程	問題
v1	PM 研究 → 設計師線框稿 → 工程師建構	瀑布式太慢，大量等待
v2	敏捷式逐頁推進	文字線框稿精準度不夠
v3	截圖 + Design System → 直接建構	目前最佳方案

適用場景

• 參考既有網站進行模板開發
• 多模態 AI 模型可用的開發環境
• 設計到開發的交付流程

關聯概念

• [[AI Agent 協作]] — 此方法論在 agent 協作中被驗證
• [[AI 幻覺防治]] — 截圖作為 ground truth 減少歧義
• [[品質量化]] — 六維評分是品質驗收機制
• [[敏捷開發]] — 逐頁平行推進的敏捷節奏