UNIT 09 Phase 3 · W10 // 建置路線決定

從設計到網頁的
AI 橋樑：工具選型與架構

期中交出了設計稿，期末要交一個真的能上線的網站。這一週只做一件事：看懂網頁怎麼運作、認識兩個工具、決定你們的建置路線，並寫出一頁建置計畫。學完你會知道：該用 Claude、Figma Make，還是兩個一起用，以及為什麼。

最新更新 2026 年 10 月 JinJin Wang 3 條路線 A／B／C 6 個互動練習
開始閱讀 直接選路線 一頁建置計畫
// The Bridge

橋樑是什麼：從 Figma 稿走到公開網址的五個站

傳統做法是設計師標註規格、工程師手寫程式。現在多了一座 AI 橋：你把設計意圖講清楚，AI 把它變成網頁。橋蓋得好不好，取決於你交給它的東西，以及你怎麼驗收。點每一站，看輸入、輸出與重點。

1-1

傳統流程 vs AI 橋樑流程

比較傳統：標註與交接AI 橋樑：指令與驗收
誰寫程式工程師手寫 HTML／CSS／JSAI 生成，你負責檢查與下補救指令
設計意圖怎麼傳Spec 標註、會議、文件設計稿結構＋截圖＋規格卡＋Prompt
還原誤差常有，需反覆修正設計稿越結構化，誤差越小
你要新學的能力寫 Spec、溝通把需求講清楚、驗收、判斷（不必寫程式）
風險時程延宕、成本高AI 會錯、會編造、有額度限制——必須驗收
1-2

Phase 3 的路線圖：這一週在哪裡

W10・本單元決定路線

看懂網頁、選工具、寫一頁建置計畫。

W11–12Figma Make

AI 靈感、元件生成與精稿轉 Make。

W13–15Claude

用指令逐步做出網站。

W16–17檢核

實作衝刺與期末檢核。

// How the web works

你一定要知道：網頁到底是什麼、怎麼到達別人的螢幕

你不必會寫程式，但要看得懂 AI 交給你的東西是什麼，才知道怎麼驗收、怎麼下指令。這一章用三個互動，讓你搞懂三層結構、檔案如何變成網址、哪些功能這學期做得到。

2-1

網站解剖器：HTML、CSS、JavaScript 各負責什麼

按下面三個按鈕，一層一層疊上去，看同一張卡片怎麼從「樸素」變成「好看」再變成「能操作」。最後一層，記得點點看按鈕。

anatomy一張卡片的三層
對你的意義

顏色不對、字太小 → 是 CSS 的問題，跟 AI 說「顏色」「字級」。按鈕沒反應、篩選壞掉 → 是 JS 的問題，跟 AI 說「點擊後應該…」。標題層級不對、缺內容 → 是 HTML。描述問題時指出是哪一層，AI 修得最準。

2-2

從檔案到網址：網站是怎麼「上線」的

2-3

這學期做得到什麼：靜態網站＋前端互動

類型特徵例子本課程
靜態網站＋前端互動內容寫在檔案裡；互動靠 JavaScript 在瀏覽器完成行程篩選、地圖標記、表單驗證、輪播、展開收合✓ 期末範圍
動態網站（需要後端）要有伺服器與資料庫：登入、會員、真實訂單、後台管理真的送出預約、金流、會員中心✗ 不在範圍（用「前端示範」呈現即可）

預約表單「送出」只要做到驗證與成功回饋的前端示範，不需要真的把資料存起來。

2-4

名詞小卡：14 個一定會遇到的詞

// Tools & Routes

工具與路線選型：Figma Make、Claude，還是兩個一起？

這學期只用兩個工具：Figma Make 與 Claude。沒有「最好的工具」，只有「最適合你們專題的組合」。先認識它們，再用選型器算出建議路線。

3-1

兩個工具各自擅長什麼

Figma Make 路線 A

做什麼
在 Figma 裡用 Prompt（可附加設計稿）生成可運作的網頁，直接預覽，並能發佈成公開網址（學長姐的期中作品多以此發佈）。
擅長
保留 Figma 的設計樣貌、快速看到可互動的成果、一鍵發佈、不需另外開發環境。
要小心
頁面多、邏輯複雜時不易掌控；細節修改要靠 Prompt 反覆調整；有使用額度；需確認你的帳號能使用。

Claude 對話＋Artifacts 路線 B

做什麼
用對話（附上設計稿截圖與規格卡）逐頁生成 HTML／CSS／JS，旁邊的預覽區直接顯示並可操作，你可存成檔案再發佈。
擅長
結構與邏輯可控、能一頁一頁生成並修正、能解釋程式在做什麼、對話紀錄就是「AI 協作紀錄」。
要小心
需要你自己整理檔案與部署；對話太長會忘記前面的規則（要摘要後開新對話）；沒有直接讀 Figma 時，要靠截圖與規格卡。
提醒

AI 工具的介面、功能與額度更新很快。本頁描述的是常見能力，實際以你帳號與當週介面為準；不確定的功能，到官方文件或工具介面確認，不要憑印象。

3-2

路線選型器：你們的專題適合哪一條？

拖動五個條件，右邊會即時算出 A、B、C 三條路線的適合度。這是討論的起點，不是判決；如果前兩名只差一點，建議先做 MVP。

route-selector五個條件 → 建議路線
3-3

三條路線怎麼走

ROUTE A

Figma Make 為主

  1. 附加期中精稿，生成首頁
  2. 用 Prompt 補互動與狀態
  3. 檢查手機版，修正跑版
  4. 用 Figma Make 發佈網址
適合：視覺導向、頁數少（1–4 頁）、想最大程度保留精稿樣子。
注意：複雜邏輯可能卡關，先確認互動需求夠簡單。
ROUTE B

Claude 為主

  1. 貼專案設定與規格卡，確認 Claude 複述正確
  2. 底座 → 首頁 → 互動 → 其他頁
  3. 每步驗收、下補救指令
  4. 存成檔案，部署到託管平台
適合：功能導向、頁數多、有篩選／表單／資料列表。
注意：沒有人看得懂程式時，要靠驗收清單；過長的對話要摘要。
ROUTE C · 建議

混合：Make 起稿 → Claude 精修

  1. Figma Make 快速做出互動原型
  2. 把成果交給 Claude 整理結構、補齊頁面
  3. 統一檢查 RWD 與無障礙
  4. 決定最終在哪裡發佈
適合：視覺與功能都要、想兼顧還原度與可控性。
注意：要記錄兩邊各負責哪些頁面，避免版本混亂。
3-4

這學期「不會用到」的：知道就好

Framer（視覺派 No-code）

擅長動態與視覺，但本學期不要求。想延伸學習：web09 Framer AI（延伸講義）。

v0 ＋ Next.js（工程師派）

需要終端機與開發環境，超出本學期範圍。想延伸：web10 v0（延伸講義）。

// AI-ready design

設計稿準備度：AI 讀得懂你的 Figma 嗎？

不管選哪條路線，AI 還原的品質都取決於你的設計稿有沒有結構。勾選你們的檔案已經做到的項目，看分數與「沒做會怎樣」。分數低不用慌，這就是 W10 要補的功課。

怎麼補

Auto Layout 見 補充講義 UNIT 13；變數與設計規格卡見 UNIT 04；規格卡可用 UNIT 10 STEP 0 組好。

// Build plan

建置計畫：把決定寫成一頁

路線決定了，就寫成一頁計畫書。調整下面的選項，預覽的計畫書會跟著改，並且自動組成一段指令，貼給 Claude 就能請它幫你檢查缺漏與風險。目前選型器建議：—

5-1

與 AI 一起工作的四個習慣

事實要驗證VERIFY

AI 會編造功能與數字。不確定就標「待確認」，自己查官方文件。

版本要備份BACKUP

每完成一步就存檔並命名版本（v1、v2），改壞了才退得回去。

圖片要有來源LICENSE

不要使用未授權圖片；標示來源；公開網站不放個資。

額度與長度LIMIT

對話太長會忘規則；用摘要開新對話。額度用完先停手，不要硬衝。

// Workshop & Homework

W10 工作坊與本週作業

本週有兩件事：依評審回饋修正期中提案，並選定建置路線、繳交一頁建置計畫（對應作業區 W10）。

6-1

工作坊三步驟（課堂 1–2 小時）

1
全組一起評估15 MIN

用 3-2 選型器討論五個條件，截圖保存結果；有分歧就寫下理由。

2
檢查設計稿20 MIN

用第 4 章打分，列出最需補強的 3 項，分配給組員。

3
寫建置計畫＋老師諮詢30 MIN

第 5 章工作台輸出計畫；每組 5–10 分鐘與老師確認路線與 MVP。

雙高需求怎麼辦

視覺與功能都很高時，不要硬選：先劃定 MVP（1 個 P0 頁面＋1 個核心互動），用最快的路線做出來，再決定要不要換路線。今天的決定會影響之後八週。

6-2

環境準備檢查（依路線勾選）

準備完成
0 / 9
共同全組
A路線 A（含 C）：Figma Make
B路線 B（含 C）：Claude
6-3

本週作業與繳交

項目內容繳交格式
作業 01　修正期中提案依評審與老師回饋修正建議書、簡報與 Figma（列出「修了什麼」即可）修正版 PDF＋一段修正說明
作業 02　一頁建置計畫路線與理由（附選型器截圖）、頁面與負責人、互動清單、發佈方式、風險與備案、W10–W18 里程碑PDF 或截圖，上傳 Moodle
作業 03　環境測試依你們的路線，完成 6-2 的環境檢查，附一張測試成果截圖截圖（Make 預覽／Claude 預覽／無痕視窗開啟）