2026/05/20· 19 分鐘閱讀

Claude.ai/design 到 Claude Code：把 AI 設計初稿變成網站正式首頁的實作全記錄

這次我重新設計了 aivideo.tw 的首頁。我沒有先找設計師畫稿，也沒有自己慢慢切版，而是用一套 AI 工作流（Claude.ai/design + ChatGPT + Claude Code）完成第一版上線。本篇記錄了如何把 AI 生成的設計初稿，變成真正能放上網站首頁的正式版本的完整流程與關鍵學習。

aivideo.tw OPC 建造實錄 #001 2026.05.20

前言：從設計初稿到正式首頁

這次我重新設計了 aivideo.tw 的首頁。

我沒有先找設計師畫稿，也沒有自己慢慢切版，而是用一套 AI 工作流完成第一版上線：

```text
Claude.ai/design 產生設計初稿
↓
ChatGPT 把設計交接文字改成更精準的執行指令
↓
Claude Code 依照指令修改網站
↓
我逐輪確認、修正文案、調整品牌方向
```

這篇不是單純展示一個首頁成果，而是記錄一次完整的 AI 建站流程：

如何把 AI 生成的設計初稿，變成真正能放上網站首頁的正式版本。

背景：為什麼要改首頁

aivideo.tw 原本的首頁是比較硬派的視覺風格：黑白邊框、格線卡片、方正排版。

功能正常，但有一個問題：品牌感不夠明確。

它比較像一個課程網站模板，而不是一個有世界觀的 AI Video OPC 入口。

我希望首頁能更像一個「影片事業入口」：

黑色主視覺
大型首屏畫面
有電影感的字體
強烈的紅色跑馬燈
像作品牆一樣的內容格子
更清楚傳達「AI 影片事業」的定位

這次首頁的核心不是展示工具，而是傳達一句話：

你說故事，AI 幫你完成製作。建立不被演算法控制的影片事業。

工具與分工

這個分工很重要。

Claude.ai/design 負責「先把畫面做出來」。 ChatGPT 負責「把模糊需求變成清楚任務」。 Claude Code 負責「把設計放進網站」。主理人負責「決定什麼該留下，什麼該改掉」。

第一步：用 Claude.ai/design 產生首頁設計稿

我先在 Claude.ai/design 描述首頁方向：

```text
幫我設計 aivideo.tw 首頁。
品牌定位是 AI Video OPC，一人影片公司。
風格要有電影感，不要一般 SaaS landing page。
主軸是：你說故事，AI 幫你完成製作。建立不被演算法控制的影片事業。

視覺方向：
黑底、大型 16:9 首屏畫面、editorial serif 字體、vermillion 紅色走馬燈、作品格子牆、同心方框 lockup。
```

Claude.ai/design 很快產生了一份完整首頁 mock。

第一版包含：

大型暗色首屏
有電影感的標題字
紅色走馬燈
作品格子牆
同心方框標誌
紅色頁尾

這一步大約花了 3 分鐘。

設計稿不是最終版，但它已經給出非常清楚的視覺方向。

第二步：不要直接把原始交接指令丟給 Claude Code

Claude.ai/design 有一個功能叫：

```text
Handoff to Claude Code
```

它會產生一段交接文字，大意是：

請讀取這份設計檔，閱讀 README，並實作設計中相關的部分。

這段文字適合當作「設計交接」，但還不夠適合直接拿去改真實網站。

原因是它不知道我的網站實際狀況。

它不知道：

我要改的是網站首頁，不是單獨新增一個 HTML 檔案
網站已經有原本的導覽列、頁尾、電子報區塊
有些頁面不能被影響
有些文案只是設計稿的示意，不應該直接上線
最後要能部署，不只是畫面看起來像

所以我沒有直接貼給 Claude Code。

我先把它貼給 ChatGPT，請 ChatGPT 幫我改成更適合執行的版本。

第三步：用 ChatGPT 把設計交接文字改成「首頁實作指令」

我給 ChatGPT 的需求很明確：

請把 Claude.ai/design 的交接指令，改成適合 Claude Code 執行的網站首頁改版指令。

我特別補充幾個重點：

目標是改網站首頁 /，不是新增孤立檔案。
要先讀專案說明文件。
要保留設計風格，但不要亂改其他頁面。
要把設計稿中的假文案換成符合 aivideo.tw 的真實定位。
完成後要確認網站能正常上線。

ChatGPT 整理後，指令的核心變成：

```text
請先閱讀本專案說明文件，理解網站架構與限制。

目標：
將這份設計實作為 aivideo.tw 的正式首頁，也就是網站根路由 /。

請不要建立孤立的 aivideo.html。
請把設計整合到真正的首頁。

請保留以下設計重點：

黑色電影感首頁
大型首屏畫面
紅色走馬燈
作品格子牆
紅色頁尾
同心方框 aivideo.tw lockup

請不要修改無關頁面，也不要破壞登入、後台、課程、結帳等既有功能。

完成後請確認網站可以正常啟動與部署。
```

這一步的價值是：

把「設計交接」改成「產品實作」。

這是整個流程最重要的中間層。

第四步：第一個問題：Claude Code 讀不到設計分享連結

我把指令交給 Claude Code 後，遇到第一個問題。

Claude.ai/design 的分享連結在 Claude Code 裡無法直接讀取，回傳 404。

原因大概是這類連結需要登入狀態，Claude Code 無法直接取得授權。

解法很簡單：

回到 Claude.ai/design
打開設計稿
手動下載 HTML 檔案
上傳給 Claude Code 作為參考檔

所以這次實際採用的方式是：

不讓 Claude Code 抓設計連結，而是直接給它設計 HTML 檔案。

這比用連結更穩定。

第五步：Claude Code 讀設計稿並改出第一版首頁

Claude Code 讀完設計稿後，也閱讀了網站原本的首頁、品牌設定、導覽列、頁尾與整體樣式。

接著它做了三件事：

1. 把設計稿轉成正式首頁

它沒有只是把 HTML 檔案丟進網站，而是把設計稿重新整理成網站首頁會使用的結構。

這點很重要。

真正的首頁必須接到網站原本的系統裡，而不是另外多一個看得到但不會被使用的檔案。

2. 把首頁樣式隔離起來

為了避免新首頁影響其他頁面，Claude Code 把這次首頁的視覺樣式集中管理，並用統一命名隔離。

這代表首頁可以大幅改版，但其他頁面仍維持原本狀態。

這是這次很重要的工程安全做法。

3. 把品牌色改成紅色

首頁主色改成設計稿中的 vermillion red：

```text
#ef2b1d
```

這個紅色後來成為新首頁最主要的視覺記憶點。

第一版實作約花 12 分鐘。

完成後網站可以正常建置，沒有出現明顯錯誤。

第六步：真正花時間的是迭代修正

第一版首頁完成後，畫面方向已經對了，但還不能直接算正式完成。

因為 AI 設計稿一定會有 placeholder。

實際上線前，我們做了 11 輪調整。

這些修正不是 AI 失敗，而是很正常的產品化過程。

設計稿負責產生方向，正式首頁要負責品牌、文案與使用者理解。

兩者不是同一件事。

最終首頁架構

最後首頁變成這樣：

```text
首頁
├── 導覽列：全站共用，乾淨白底
├── Hero：暗紅漸層、大標題、兩個方形 CTA
├── 紅色走馬燈：傳達品牌主張
├── 作品格子牆：連到 BUILD / SELL / Blog / About
├── Newsletter：沿用原本訂閱區塊
└── Footer：紅底、同心方框 lockup
```

這個結構比原本首頁更清楚：

第一眼建立品牌感
第二段傳達主張
中段引導使用者理解網站入口
最後收回電子報與頁尾品牌識別

關於底部 `aivideo.tw`：它不是圖片

很多人可能會以為底部紅色頁尾裡的 aivideo.tw 是圖片 logo。

其實不是。

它是文字加上 SVG 方框組成的。

aivideo 是文字
.tw 是上標文字
外圍同心方框是 SVG 線條

字體使用的是比較有 editorial 感的 serif 字體。

這樣做的好處是：

可以自由改大小
可以自由改顏色
不需要另外輸出圖片
未來品牌還在調整時，更容易迭代

對早期品牌來說，這比一開始就做死成圖片 logo 更彈性。

時間紀錄

| 項目 | 時間 |
| :--- | :---: |
| Claude.ai/design 生成設計稿 | 約 3 分鐘 |
| ChatGPT 改寫執行指令 | 約 5 分鐘 |
| Claude Code 第一版實作 | 約 12 分鐘 |
| 11 輪迭代微調 | 約 40 分鐘 |
| 從設計到上線 | 約 55–60 分鐘 |

整體不到一小時，就完成了從設計初稿到正式首頁的第一版。

如果用傳統流程，這通常會需要：

```text
設計師畫稿 → 工程師切版 → PM 驗收 → 修改 → 部署
```

這次用 AI 工作流，把它壓縮成一個主理人可以自己掌控的流程。

這次真正有效的 Claude Code 指令結構

這是整理後最實用的版本。

不需要太多技術語言，重點是把任務說清楚：

```text
請先閱讀本專案說明文件，理解網站目前的結構與限制。

我已上傳 Claude.ai/design 匯出的首頁 HTML 設計稿。

目標：
請參考這份設計稿，將它實作為 aivideo.tw 的正式首頁 /。

重要：
不要建立孤立的 HTML 檔案。
不要只把設計稿複製進網站。
請把它整合成真正會出現在首頁的版本。

請保留以下設計重點：

黑色電影感主視覺
大型首屏畫面
紅色走馬燈
作品格子牆
紅色頁尾
同心方框 aivideo.tw lockup
AI Video OPC 的品牌方向

請注意：

不要修改無關頁面
不要破壞登入、後台、課程、結帳等既有功能
不要新增不必要的複雜設計
設計稿中的文案若只是示意，請改成符合 aivideo.tw 定位的文案

首頁核心主張：
你說故事，AI 幫你完成製作。建立不被演算法控制的影片事業。

完成後請確認：

首頁可以正常顯示
手機與桌機都能看
網站可以正常啟動與部署
沒有影響其他頁面
```

這段指令的重點不是很技術，而是很清楚：

不要只完成設計檔，要完成真正首頁。

三個關鍵學習

1. AI 設計稿不能直接等於正式網站

Claude.ai/design 很適合快速產生方向。

但它產出的文字、區塊與敘事，通常還是 placeholder。

它能幫你回答：

這個品牌大概可以長什麼樣子？

但它不能完全替你回答：

這個品牌到底要說什麼？

後者還是主理人的責任。

2. 中間需要一層「指令轉譯」

Claude.ai/design 給的是設計交接語言。

Claude Code 需要的是執行語言。

中間如果沒有整理，很容易發生：

```text
設計檔做好了，但網站首頁沒變。
```

所以我現在會固定多做一步：

```text
Claude.ai/design 的交接文字 → 交給 ChatGPT → 改成可執行的首頁實作指令
```

這一步看起來多花 5 分鐘，但會省掉很多後續錯誤。

3. 樣式隔離很重要

首頁可以有強烈的新風格，但不能因此影響其他頁面。

這次最重要的做法是：

把新首頁樣式集中管理，不讓它污染其他區塊。

這讓我可以放心測試新的視覺方向，同時保留其他頁面的穩定性。

對一人網站來說，這很重要。

你不需要一次重做整站，只要先重做首頁，確認方向有效，再慢慢延伸到其他頁面。

這套流程可以重複使用

以後每次要用 AI 重設首頁，可以照這個流程：

```text

用 Claude.ai/design 產生首頁設計初稿
使用 Handoff to Claude Code 取得設計交接文字
把交接文字貼給 ChatGPT
請 ChatGPT 改成適合專案的執行指令
如果設計連結讀不到，就下載 HTML 後上傳
把整理後的指令交給 Claude Code
讓 Claude Code 實作第一版
主理人逐輪檢查品牌、文案、畫面
確認首頁能正常顯示與部署
```

這套流程的核心分工是：

```text
Claude.ai/design 負責設計方向
ChatGPT 負責任務整理
Claude Code 負責實作
主理人負責判斷
```

下一步

這次首頁已經完成第一版上線，接下來還要繼續替換真實內容：

[ ] Hero 換成真實影片截圖
[ ] 作品格子牆換成真實課程封面圖
[ ] 補上主理人 Yunnico 的 About 頁面
[ ] 上架 L1 第一堂免費課
[ ] 把這套流程整理成 AI 建站工作流教材

結語

這次最大的收穫不是「AI 可以幫我做首頁」。

真正的收穫是：

AI 可以讓一個主理人，用很短時間完成設計、實作、部署與迭代的第一輪閉環。

但前提是：你不能只是把任務丟給 AI。

你要知道：

邊是設計方向
哪些是正式文案
哪些不能亂改
哪些要上線前確認
哪些只是 placeholder

對一人公司來說，這是一個很重要的能力：

```text
想法 → 設計 → 指令 → 實作 → 上線
```

可以在一天內完成。

甚至，只要方向夠清楚，一小時內就能完成第一版。

這就是 AI Video OPC 的真正價值：不是只使用 AI 工具，而是建立一套能持續把想法變成資產的工作流。

這份記錄是 aivideo.tw Building in Public 系列的一部分。如果你也想建立一個不被演算法控制的 AI 影片事業，可以從 /build 開始。

下一步

想把影片變成你的事業？

從 AI 創作力到第一筆收入，aivideo.tw 的升級路徑從這裡開始。

BUILD L1 — 做出第一支 AI 影片 →