在網頁設計專案裡，設計師與工程師不是接力，而是合奏。先對齊「完成」的樣子，再談美感與技術。怪獸工坊把流程拆成八隻怪獸，逐格升級。

• 先定義任務，再決定要不要動、怎麼動
• 以系統思維取代單頁美術
• 每一步都留有量測與回饋的鉤子

共語字典（Mini Glossary）

• 元件 Component＝設計稿上的模組 ↔️ React/Vue Component
• 樣式 Token＝色彩/字級/間距 ↔️ CSS Variable/Tailwind Config
• 互動稿＝行為曲線/狀態 ↔️ Storybook Controls

Kickoff 三問

• 誰的任務？使用者要完成什麼（例：預約、比較、下載）
• 什麼限制？瀏覽器/裝置/後端 API/時程
• 何為完成？可計量的終局（例：Lighthouse≥90、樣式一致率≥95%）

產出物

• 站點地圖與 IA、低保真 Wireframe（真實文案，拒絕 lorem）
• 事件命名草案（GA4/埋點），避免最後才補
• 工具清單：Figma/Framer、Storybook、Linear/Jira、Git Flow

Token → 元件 → 模版

• 色彩/字體/間距/陰影 Token 化（命名一律語意型）
• 元件狀態齊全：hover/focus/disabled/error/success
• 模版組合：列表、詳情、表單、比較、FAQ、Pillar Page

互動預覽

在 Figma 註明動效曲線、時長（150–250ms）、進出場方向；提供 prefers-reduced-motion 降噪版本。

交接清單（設計 → 工程）

• 色票（HEX/RGBA/HSL）、字級階層、間距系統
• 尺寸單位（rem/%）與行距規則
• 圖片切法：格式（WebP/AVIF）、srcset/sizes
• 可存取性：對比≥4.5:1、焦點樣式、Alt 文

共同舞台

• Storybook：元件、狀態、變體、互動
• Chromatic/Visual Regression：視覺回歸保護網
• Git Branch Flow：main/develop/feature/* 清楚分支

效能基本功

• 首屏優先、第三方腳本同意後載入
• 圖片延遲載入、字體子集合、font-display:swap
• Core Web Vitals：LCP/CLS/INP 以 RUM 觀測

完成標準（Definition of Done）

• 樣式一致率 ≥ 95%，像素級差異有理由
• Lighthouse：可用性/最佳化 ≥ 90
• 響應式：主要斷點無重大崩壞

缺陷回報格式

• Screenshot + URL + Device + 重現步驟
• 期望 vs 實際（附對應設計規格連結）

節奏建議

• 每週 30 分同步會：新稿簡報 × 實作狀態 × 阻塞排除
• 兩週一次小迭代：標題/CTA/首屏敘事
• 單季一次重構：互鏈、模組更新、指標復盤

為什麼協作會強化網頁設計的成效？

• 語意化結構一致 → 搜尋更容易理解主題權威
• 效能穩定 → 更好的 LCP/INP，提升滯留與 CTR
• 敘事模組化 → 文章與服務不斷裂，CTA 更自然

量測面板（RUM/GA4）

• 內容層：曝光、CTR、捲動深度、段落停留
• 互動層：CTA 點擊率、表單啟動率、微轉換
• 生意層：有效線索、SQL、成交週期縮短

三步行動清單（本週就做）

• 建立 1 頁詞彙對照表與交接清單，放進 repo
• 開 Storybook，先拆 5 個常用元件（Button/Card/Form/TOC/FAQ）
• 設定 RUM 監控與事件命名，兩週後做第一次復盤