Claude Code 做網站，真正的難點不是「叫 AI 寫前端」，而是把模糊的好看，變成它能執行、你能驗收的規格。一篇在 X 流傳的動畫網站實作分享，作者自述約兩小時做出第一版視覺原型，並用高額 agency 報價作為對比。它很適合提供靈感，但不是工期或商業價值的證明；從原型到可正式上線，還隔著內容、授權、手機版、無障礙、效能、測試與部署。
這篇把那個流程重新做成新手能重複使用的版本：先整理參考圖，再用官方 Frontend Design 外掛建立設計規格，只做一個有記憶點的招牌動效，最後讓瀏覽器、build 與真人判斷共同驗收。你不必先會手寫 React，但仍要負責看懂變更範圍、測試結果與上線風險；「AI 幫你寫 code」不等於「你沒有技術責任」。
高質感網站 ＝ 好參考 × 明確規格 × 可驗證迭代
這裡用乘法，是因為任何一項接近零，成果都會一起塌掉：只有參考圖會變成模仿；只有規格會變成紙上設計；只會生成、不驗收，則只是一次性的漂亮截圖。
Claude Code 做網站前，先定義這篇會交付什麼
完成本文後，你應該得到的是一個可以在本機啟動、具備桌機與手機版、包含一個手電筒 Hero 動效，並通過基本工程驗收的網站原型。它不是「價值一萬美元」的保證，也不自動包含品牌策略、專業攝影、法務審查、後端表單、分析同意、SEO 維護或長期保固。
- 你要準備：Pro、Max、Team、Enterprise 或 Console 帳號（Claude.ai Free 不含 Claude Code）、Node.js、Git、1～3 張合法可用的參考圖，以及真實文案與作品素材。
- 本文示範：Next.js＋CSS；Motion 是選配，不是做動畫的必要條件。
- 你要保留：每一輪修改前的 Git commit；不要把 API key、客戶機密或未授權素材放進前端專案或對話。
- 你要判斷：AI 的設計建議是否服務受眾與主要任務，而不是只看畫面是否「很炫」。
如果你還不熟 coding agent，可以先讀 AlphaLab 的Claude Code vs Codex 比較與AI Agent Harness 白話解釋。本文專注在「參考圖 → 規格 → 前端 → 驗收」這條實作線，不再重複介紹 Agent 基礎觀念。
第一步：安裝 Claude Code，建立可回復的專案
macOS、Linux 或 WSL 可依Claude Code 官方安裝文件使用原生安裝器，完成後確認版本與環境：
curl -fsSL https://claude.ai/install.sh | bash
claude --version
claude doctor若從空白開始，本文用 Next.js 建立範例。Next.js 官方文件目前要求 Node.js 20.9 以上，預設專案包含 TypeScript、Tailwind CSS、ESLint、App Router 與 Turbopack；如果你已有 React／Astro／Vue 專案，就不要為了跟教學一致而重建。本文改用 Node 隨附的 npm，避免再增加一個 package manager 前置條件。
node --version
npx create-next-app@latest portfolio --yes
cd portfolio
claude第一次使用時，在 Claude Code 內完成 /login。接著另開一個 terminal、進入同一個專案並啟動網站；第一個 terminal 保留給 Claude Code：
cd portfolio
npm run dev先確認瀏覽器能打開本機網站，再建立第一個 commit。這個動作不是形式：當 Agent 大改版面、依賴或路由時，Git 會提供清楚、可操作的復原點。
第二步：裝官方 Frontend Design；第三方工具先別急
2026 年 7 月 27 日查核時，目前官方安裝主線是 Claude Code 啟動時會自動提供的 claude-plugins-official marketplace，直接安裝 Anthropic Verified 的 Frontend Design plugin：
/plugin install frontend-design@claude-plugins-official
/reload-plugins若找不到 marketplace，再執行：
/plugin marketplace add anthropics/claude-plugins-official
/plugin marketplace update claude-plugins-official
/plugin install frontend-design@claude-plugins-official
/reload-plugins它的角色是設計規則書：要求 Agent 先定義受眾、任務、色彩 token、字體角色、版面與一個 signature moment，再寫 code、截圖、自我挑錯。它不是背景常駐的設計引擎；截至本文查核日，公開 SKILL.md 未列字體封鎖，plugin manifest 也未包含自動安裝 Motion／GSAP 的 hook 或 command。若不要 Agent 另外新增依賴，仍要在 prompt 明確禁止並審核變更。自然語言的前端任務可能自動觸發；為了讓教學在版本與命名衝突下更穩定，本文明確使用完整名稱 /frontend-design:frontend-design。
UI UX Pro Max 則是 NextLevelBuilder 維護的第三方開源專案，提供大量風格、配色、字體與 stack 建議。它不是 Anthropic 產品，資料數量也會持續變動；若真的需要更多靈感，再依現行 repo 說明安裝，個人試用先選 Local scope，完成團隊審查、確定要共享後才用 Project scope。Claude Code 官方也提醒，第三方 plugin 能以你的使用者權限執行程式，所以「熱門」不能代替信任審查。
第三步：整理參考圖，學設計語法而不是複製網站
Claude Code 官方支援拖入圖片、貼上圖片，或直接提供本機路徑。較有效的做法不是塞進十幾張完整長頁，而是替每一張圖寫出「它要回答的問題」。例如 Hero 看明暗對比、作品集看資訊密度、project detail 看敘事順序。
reference/
├── hero-light-reveal.png
├── portfolio-grid-density.png
└── project-detail-rhythm.png檔名用語意，不要沿用 7.png、11.png 這種會在 prompt 與文章間對錯圖的編號。然後建立一份簡短 manifest：
hero-light-reveal.png
只參考：暗色基底、局部照亮、標題與人物的前後關係
不要複製：人物照片、文案、Logo、精確版面
portfolio-grid-density.png
只參考：卡片大小差、留白節奏、作品排序
不要複製：原站作品圖、品牌色與互動細節版權底線：把參考圖當 mood board，抽取色調、節奏、資訊階層與互動概念；不要搬用原站圖片、文字、Logo、程式碼，或照抄完整且高度識別性的組合。Pinterest 或 Awwwards 上看得到，不代表你取得商用授權，平台的使用條款也不會自動把第三方素材權利轉給你。正式上線前，逐項確認照片、圖示與字型授權；在台灣發布可再查閱經濟部智慧財產局著作權資料並向權利人確認。這是一般風險提醒，不是法律意見。
第四步：先進 Plan mode，把「高級感」翻成規格
一個常見的失敗，是一開始就說「做一個很高級、動畫很多的作品集」。高級感沒有單位，也不能驗收。一般 session 中，Plan mode 可讓 Claude 讀檔、執行探索命令、分析參考圖並提出計畫，但不編輯 source；已啟用 bypass permissions 的 session 是例外，因此本文不使用 bypass。先進入 Plan mode：
claude --permission-mode plan接著貼上這份規劃 prompt：
/frontend-design:frontend-design
先不要寫程式，也不要安裝套件。
請讀取 ./reference 與現有專案，先問我缺少的關鍵問題；
等我回答並批准 plan 後才能改檔。
受眾：尋找品牌影片合作的創意總監
唯一主要任務：看完代表作後寄出合作邀請
真實內容：只使用我提供的姓名、作品、年份與客戶
視覺方向：編輯感、暗色、克制，不要 SaaS 卡片牆
請提出：
1. 4–6 個具名色彩 token
2. display／body／utility 三種字體角色
3. 桌機與手機 ASCII wireframe
4. 一個招牌動效，以及觸控與 reduced-motion fallback
5. 哪些參考元素可以借鑑、哪些不應複製
6. 375／768／1440px 的驗收清單
7. 預計修改的檔案與依賴；不要自行部署你要審的不是「Claude 有沒有寫得很專業」，而是每個決策能否回答三件事：服務誰、幫他完成什麼、怎麼證明做到了。想更深入理解為何清楚的上下文比超長 prompt 更重要，可搭配Context Engineering 教學。
第五步：先做骨架與真實內容，再加一個招牌動畫
批准 plan 後，在目前 session 按 Shift+Tab 切到 Manual 逐次確認，或切到 Accept Edits 讓工作目錄內的檔案操作少一點提示；下面的 CLI flag 則是另開全新 session 時使用。注意：acceptEdits 也會自動核准工作目錄內的 rm／rmdir 等操作；若刪檔必須人工確認，請留在 Manual 或設定明確的 ask rule。第一次不要同時做 loader、頁面轉場、磁吸按鈕、3D、視差與自訂游標；官方 Frontend Design 自己也強調，集中在一個有記憶點的 orchestrated moment，通常比全頁一直動更像有意圖的設計。
claude --permission-mode acceptEdits實作 prompt 應鎖定順序與範圍：
/frontend-design:frontend-design
依已批准的 plan 實作第一版。
順序：
1. 先完成資訊架構、真實文案、連結與響應式骨架
2. 再套用色彩、字體與 spacing token
3. 最後只加入手電筒 Hero 這一個 signature motion
限制：
- 不改路由、表單提交、analytics 或既有資料流
- 不新增假客戶、假獎項、假 testimonial
- 不隱藏系統游標
- 動畫不能承載必要資訊
- 觸控裝置顯示靜態固定亮度
- prefers-reduced-motion 時停用跟隨效果
- 修改後執行 lint 與 build，但不要部署手電筒 Hero 的原理：暗層＋亮層＋圓形遮罩
較穩妥的結構不是「游標所到之處才看得到內容」，而是文字永遠可讀、人物圖預設較暗；滑鼠只負責揭露同一張圖的亮層。觸控裝置沒有 hover，就顯示靜態固定亮度；使用者要求減少動態時，也回到靜態版本。
下面是可放進 Next.js App Router 的實際元件。先將你有權使用的圖片放在 public/portrait.webp，或同步修改兩個 src。游標移動時不呼叫 React setState，而是透過 requestAnimationFrame 更新 CSS 變數；亮層是裝飾性重複圖片，所以使用空白 alt 並從輔助科技隱藏。
"use client"
import Image from "next/image"
import {
PointerEvent as ReactPointerEvent,
useEffect,
useRef,
} from "react"
import styles from "./SpotlightHero.module.css"
export function SpotlightHero() {
const frame = useRef<number | null>(null)
useEffect(() => {
return () => {
if (frame.current !== null) cancelAnimationFrame(frame.current)
}
}, [])
function move(event: ReactPointerEvent<HTMLDivElement>) {
if (
event.pointerType === "touch" ||
window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
!window.matchMedia("(hover: hover) and (pointer: fine)").matches
) return
const node = event.currentTarget
const clientX = event.clientX
const clientY = event.clientY
if (frame.current !== null) cancelAnimationFrame(frame.current)
frame.current = requestAnimationFrame(() => {
const rect = node.getBoundingClientRect()
const x = clientX - rect.left
const y = clientY - rect.top
node.style.setProperty("--x", `${x}px`)
node.style.setProperty("--y", `${y}px`)
frame.current = null
})
}
return (
<section className={styles.hero}>
<div className={styles.copy}>
<p>Motion designer · Taipei</p>
<h1>Light reveals the story.</h1>
<a href="#work">View selected work</a>
</div>
<div
id="work"
aria-label="Selected work preview"
className={styles.visual}
onPointerMove={move}
>
<Image
src="/portrait.webp"
alt="動態設計師站在攝影棚燈光前"
fill
preload
sizes="(max-width: 768px) 100vw, 50vw"
className={styles.dim}
/>
<Image
src="/portrait.webp"
alt=""
aria-hidden="true"
fill
sizes="(max-width: 768px) 100vw, 50vw"
className={styles.bright}
/>
</div>
</section>
)
}對應 CSS：
.hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr);
min-height: 80svh;
background: #111315;
color: #f7f0e8;
}
.copy {
align-self: center;
padding: clamp(2rem, 6vw, 6rem);
}
.copy a:focus-visible {
outline: 3px solid #f7f0e8;
outline-offset: 4px;
}
.visual {
--x: 50%;
--y: 45%;
position: relative;
min-height: 34rem;
overflow: clip;
}
.dim,
.bright {
object-fit: cover;
}
.dim {
filter: brightness(0.42) saturate(0.75);
}
.bright {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
.bright {
opacity: 1;
clip-path: circle(9rem at var(--x) var(--y));
}
}
@media (max-width: 48rem) {
.hero {
grid-template-columns: 1fr;
}
.visual {
min-height: 28rem;
}
}
@media (prefers-reduced-motion: reduce) {
.bright {
opacity: 1;
clip-path: none;
}
}這個版本刻意保持簡單。clip-path 在某些裝置可能造成較大的重繪成本，所以要用 Chrome Performance 實測；若掉幀，先縮小光圈、降低圖片尺寸，或把效果改成 opacity／transform 為主。web.dev 動畫效能指南建議優先動畫 transform 與 opacity，而不是反覆改 width、height、top、left 等幾何屬性。
第六步：別只叫 Claude 自評，要給它看得見的證據
「幫我檢查一下」的問題，是 Agent 很可能只重讀自己的 code。比較可靠的 QA prompt 要指定啟動網站、實際操作、截圖、列差異，再改一輪。Claude Code 的官方最佳實務也把可讀取的驗證訊號視為關鍵：build exit code、測試結果、console 與可比較的 screenshot 都比「看起來應該可以」有用。
請啟動網站並實際驗收，不要只讀 code。
1. 截圖 375、768、1440px 首頁
2. 比對 ./reference，只列「結構與設計語法」差異
3. 操作所有導覽、CTA、作品連結與表單
4. 用鍵盤走完整頁，確認 focus-visible
5. 模擬 prefers-reduced-motion: reduce
6. 檢查 console、水平 overflow、圖片 sizes 與 alt
7. 執行 npm run lint 與 npm run build
先回報證據與嚴重度；我批准後才修正。
不要部署、不要改 secrets、不要新增假內容。若你的帳號與環境支援 Claude in Chrome，可用 claude --chrome 或 session 內的 /chrome 讓它讀 DOM、console、截圖與點擊測試。它目前需要 Chrome／Edge 等 Chromium 瀏覽器、1.0.36 以上 extension、直接向 Anthropic 訂閱的 Pro／Max／Team／Enterprise，以及 /login 登入；API key、setup-token、第三方 provider 與 WSL 目前皆不支援。若不符合條件，手動開瀏覽器截圖、貼回 Claude，一樣能完成迴圈。
隱私也要算進驗收。截至 2026 年 7 月 27 日，Anthropic 的Claude Code data usage 文件寫明：Pro／Max 等消費者帳號是否用於模型改進，取決於資料隱私設定；開啟時保留期為 5 年，關閉時為 30 天。Team／Enterprise／API 等商業條款預設不以 code 或 prompt 訓練模型，標準保留期為 30 天，合資格帳號才可另用 ZDR。本機 session transcript 預設也會以明文存放在 ~/.claude/projects/ 30 天。Chrome 整合則會共享瀏覽器的登入狀態；只開必要站點權限，不要用含客戶機密的主力登入環境測未知頁面。
npm run lint
npm run build想把視覺比較固定成可重跑測試，可再加入 Playwright screenshot baseline；但基線必須由人先確認，而且最好在固定 OS 與瀏覽器版本執行。Lighthouse 是 lab 診斷，不等於真實使用者已通過 Core Web Vitals。
第七步：權限、部署與正式上線，必須留人類關卡
新手建議依序使用 Plan → Manual／acceptEdits。Auto mode 可以減少例行權限提示；截至 2026 年 7 月 27 日，權限文件的方案欄標示為 All plans，指可使用 Claude Code 的帳號類型，Claude.ai Free 本身不含 Claude Code；此外仍須符合 Team／Enterprise owner、支援模型與 provider 等條件。更重要的是，Anthropic 明確說 Auto mode 不保證安全，不能取代敏感操作的人類審查。
- 可以讓 Agent 做：在工作目錄改元件、補 CSS、跑 lint／build、開 localhost、整理驗收清單。
- 應保留確認：安裝第三方 plugin、刪檔、改資料庫、動 DNS、推 production、讀寫 secrets、送出對外訊息；要逐次確認刪檔時請留在 Manual，或為刪除設定 ask rule。
- 不要用捷徑：不要為了少按幾次確認就教新手開
bypassPermissions或--dangerously-skip-permissions。 - 上線前補齊：HTTPS、自訂網域、SEO title／description、OG 圖、404、表單真實送達、analytics 同意與隱私政策。
如果你常讓 Claude 進行長時間的多輪修改，可延伸閱讀Claude 省 Token 方法、Claude Code Subagents 與 Agent Team，以及Loop Engineering 教學。但就這個網站任務而言，先把單一驗收迴圈跑穩，比一開始就擴成多 Agent 更重要。
5 個常見的失敗，以及怎麼救
1. 把參考圖當成逐像素訂單
症狀：成品像換掉 Logo 的別人網站。修法：把每張圖拆成「可借鑑／不可複製」，再要求 Claude 說明每個新決策如何服務你的受眾。若想進一步排除常見 AI 網站套路，可讀 AlphaLab 的Hallmark AI 網站設計實測；那篇重點是 design rulebook，本篇則是完整製作與驗收流程。
2. 把第一版當成終稿
症狀：桌機 Hero 很漂亮，手機卻先看到一大塊空白。修法：先要求差異清單，不要直接「全部修好」；依內容、響應式、動畫、無障礙、工程五類逐批修，每批都重跑相關測試。
3. 每個東西都在動
症狀：loader、標題、卡片、游標與背景同時搶注意力。修法：只保留一個 signature motion；其他互動用簡短、可預期的 transition，並遵從 prefers-reduced-motion。
4. 用滑鼠影片證明「所有裝置都順」
症狀：桌面錄影流暢，就宣稱手機、觸控與真實效能都通過。修法：至少測 375、768、1440px、鍵盤、觸控 fallback、reduced motion、console 與 build；正式商業站再補 Safari、Firefox、真機與 field data。
5. 一裝第三方工具就開 Auto mode
症狀：你不知道 plugin 會執行什麼，也不知道 Agent 改了哪些依賴。修法：個人試用先用 Local scope、讀 manifest 與原始碼、保持 Git 乾淨；團隊審查通過、確定要共享後才切 Project scope，再逐步放寬。任何 production、secret 與對外操作都保留人工確認。
Claude Code 做網站常見問題
完全不會寫程式，也能跟做嗎？
能做出視覺原型，但不能把責任也外包。你可以不先會手寫 React，仍要會確認終端指令、辨認錯誤、保護 secrets、測試連結與判斷上線結果；正式商業站建議由能 review code 的人把關。
一定要安裝 Frontend Design plugin 嗎？
不用。Claude Code 本身就能讀參考圖與寫前端；plugin 的價值是把設計規劃與自我檢查變成可重複規則。已有成熟 design system 的團隊，直接提供 token、元件與驗收規格可能更準。
可以把 Awwwards 或 Pinterest 截圖直接丟給 Claude 嗎？
可以分析，不代表可以複製或商用素材。只抽取色調、節奏、資訊階層與互動概念；不要重用照片、文字、Logo、程式碼或完整辨識性組合，客戶機密與未授權素材也不要上傳。
Auto mode 會不會讓成品更好？
不會自動提高設計品質。它主要改變權限提示的頻率，不是更強的設計模型；還可能阻擋或回退到手動批准。新手先用 Plan 與 Manual／acceptEdits，更容易看清每輪變更。
動畫一定要用 Motion 嗎？
不用。簡單 hover、淡入與本文的基本遮罩可先用 CSS；只有在需要可中斷序列、手勢、layout transition 或複雜 orchestrated motion 時，再依 Motion for React 官方文件安裝 motion。
手電筒動畫很卡，先改哪裡？
先量測，再縮小重繪範圍。不要在每次 pointer move 用 React state 重畫整個 component；壓縮圖片、限制光圈範圍、用 requestAnimationFrame，並在觸控與 reduced motion 回到靜態。若仍掉幀，放棄效果也比拖慢主要任務好。
可以直接叫 Claude 部署嗎？
技術上可以，流程上應先設關卡。先在本機通過 lint、build、瀏覽器與內容檢查，再由你確認 production target、環境變數、DNS 與 rollback。部署授權不該隱含在「幫我把網站做好」裡。
兩小時真的能做完嗎？費用是多少？
兩小時或許能完成第一版視覺原型，不能當 production 工期。內容準備、素材授權、responsive、可存取性、跨瀏覽器、表單、SEO、部署與修改輪數都會改變時間與成本；原作者的速度與價值對比是個人自述，不是通用報價。
給第一次做的人：只記住這 5 件事
- 先準備真實內容與合法素材，再找參考圖。
- 用 Plan mode 把受眾、唯一任務、token、版面與驗收寫清楚。
- 先用官方 Frontend Design；第三方 plugin 是選配，不是品質保證。
- 只做一個招牌動效，並提供觸控與 reduced-motion fallback。
- 用截圖、操作、lint、build 與真人複核完成迭代，不以 Agent 自評收工。
回到開頭的乘法：好參考給方向，明確規格讓 Claude 不靠猜，可驗證迭代把漂亮原型推向可靠網站。真正的「高質感」不是動畫數量，也不是一條神 prompt；它是每個設計決定都能解釋、每個工程結果都能重做。
延伸閱讀
- Hallmark AI 網站設計實測：Design Skill 能不能消除 AI 味？
- Context Engineering 是什麼？
- AI Agent Harness 白話解釋
- Claude Code vs Codex 完整比較
- Claude 怎麼省 Token？
- Claude Code Subagents 與 Agent Team
- Loop Engineering 教學
- 更多 AlphaLab AI 教學
主要查核來源與聲明
本文主要依據 Anthropic 的 Claude Code 安裝、圖片工作流、最佳實務、權限模式、plugin 安裝與安全、資料使用及官方 Frontend Design 原始碼；前端部分另查核 Next.js 安裝、Next Image、Motion、MDN reduced motion、Web Vitals 工具與WCAG 2.2。參考圖與授權判斷另對照 Pinterest 條款、台灣智慧財產局及美國著作權局一般說明。
查核日期：2026 年 7 月 27 日。Claude Code、plugin、權限模式與第三方工具會快速更新，實際安裝前請以連結中的官方文件為準。AI 可能產生錯誤；本文為教育用途，不構成法律、資安或商業報價建議，亦非 Anthropic 或第三方工具的付費合作內容。