Day 19：取出 Stitch 成果，將生成的 Tailwind CSS 移植到本地

2026 iThome 鐵人賽

DAY 19

Build on Google AI

18th鐵人賽

21 瀏覽

Day 18 用兩份 prompt 把 analyzeCodeFlow 的輸出「畫」了出來，但畫面還鎖在 Stitch 的畫布裡，點不到、改不了，也接不上任何東西。今天把它搬回自己的電腦，讓 DevPulse 儀表板在本機瀏覽器裡開起來。

今天做三件事：

1. 從 Stitch 取出程式碼，存成 devpulse/web/index.html
2. 在本機打開，並列出它偷偷依賴的外部資源（Tailwind CDN、字體、圖片）
3. 認識「移植」的兩條路：沿用 CDN，或改成自己建置 CSS（今天走前者，後者記下來）

今天開始動 devpulse/，但只新增一個 web/ 資料夾，不碰 Day 15～17 的後端。路徑請依你的倉庫調整。

一、Stitch 匯出的到底是什麼

Stitch 的程式碼匯出是一份靜態 HTML，樣式用 Tailwind CSS 寫，並且靠 CDN 載入 Tailwind。也就是說，匯出檔不是一個「專案」，只是一個能直接打開的網頁檔。

Stitch 還有其他匯出管道，今天先整理一下，免得走錯路：

Stitch 的介面更新很快，按鈕位置與名稱以你畫面上看到的為準。【若與實際不同，請修正上表】

第 5 步是為了之後能對照：本機改了什麼、Stitch 原本長什麼樣，一個 diff 就看得出來。

兩種開法都試一次：

# 方法 A：直接雙擊 index.html

# 方法 B：起一個本機伺服器（需要 Node，Genkit 那幾天已經裝好了）
npx serve devpulse/web

方法 B 的預設網址以終端機輸出為準（通常是 http://localhost:3000）。為什麼要兩種都試？因為之後前端要向本機後端發請求，用 http://localhost 開頁面會比 file:// 單純，現在先養成習慣。

打開之後，先別急著改，先列出這份 HTML 依賴了哪些外部資源：

grep -n "https://" devpulse/web/index.html

（沒有 grep 的話，用編輯器搜尋 https:// 也行。）

你會找到什麼	為什麼要管
`<script src="...tailwind...">`	樣式靠它在瀏覽器即時產生，離線或被擋，整頁會變成沒有樣式。網址裡的版本也要看（例如 `@4`），版本決定設定怎麼寫
`<link href="https://fonts.googleapis.com/...">`	字體與圖示來源，沒載入時字體會退回預設
指向外部的圖片網址	不保證長期有效。DevPulse 是程式碼審查工具，本來就不需要照片，破圖就換成色塊或直接刪掉
內聯的 `<script>` 或 `<style>` 設定	主色、字體等主題設定通常放這裡，想換青綠色就改這裡

「把 Tailwind CSS 移植到本地」其實有兩種意思：

	路線 A：沿用 CDN	路線 B：自己建置 CSS
做法	`index.html` 原封不動	用 Tailwind CLI 把用到的樣式編成一個 `output.css`
好處	零設定，今天就能看到畫面	不依賴 CDN，離線也能開，可以上線
代價	Tailwind 官方說 Play CDN 只適合開發，不適合正式環境	多一個建置步驟；Stitch 的設定若是舊寫法要改寫

今天走路線 A。 理由很實際：DevPulse 目前只是跑在自己電腦上的工具，先確保畫面完整，比先把建置流程弄好更重要。路線 B 先記在這裡，等哪天真的要部署再回來。

# 在 devpulse/ 安裝（位置依你的專案結構決定）
npm install tailwindcss @tailwindcss/cli

建立 src/input.css：

@import "tailwindcss";

編譯成靜態 CSS：

npx @tailwindcss/cli -i ./src/input.css -o ./web/dist/output.css --watch

最後把 index.html 裡的 Tailwind <script> 換成：

<link rel="stylesheet" href="./dist/output.css">

內聯設定裡的主色、字體要搬進 input.css 的 @theme { ... }。實際指令請以 Tailwind 官方的 CLI 文件為準。

Day 18 說過，統計數字和問題清單都是假資料，Day 29 才會換成 analyzeCodeFlow 的真實輸出。今天不改邏輯，只做一件小事：在 HTML 裡找出假資料的位置，並加上註解。

<!-- TODO(Day 29): 換成 analyzeCodeFlow 的輸出 -->

先標好，之後接資料時就不用重新翻一次 HTML。