如何用 Claude Code 打造 1 萬美元等級的網站與動畫效果

從安裝設計技能、蒐集參考素材、撰寫建置提示，到實作聚光燈游標動畫、逐輪審查修復，再到精修打磨，這份完整指南帶你零編程基礎也能上手。本文整理、翻譯自 monokern X 文章。
（前情提要：Claude Code 新推 /goals 指令：分離執行與評估，避免 AI 代理偷懶說謊）
（背景補充：實戰：手把手教你用 7 個 Agent 將 Vibe Coding 升級為專家級開發流程）

本文目錄

代理商收費 5,000 美元才能打造一個看起來這麼精良的作品集網站。

我在 2 小時內完成了自己的。以下是完整過程。

這是真正的實作記錄，不是通用模板指南。

我用自己的作品集作為範例：我實際使用的參考素材、我實際發送的提示、我實際遇到並修復的 Bug。

不需要任何編程經驗。

第一步：安裝設計技能

預設情況下，Claude 的設計輸出是平庸的。相同的字型、相同的排版、相同的扁平外觀。兩個技能可以解決這個問題。

Frontend Design — 由 Anthropic 開發，在背景運行，封鎖像 Inter 這類被過度使用的字型，推動更大膽的排版，提升文案品質。

將這段貼入 Claude Code：

Install this skill: github.com/anthropics/skills/tree/main/frontend-design

出現提示時允許變更，全局安裝。

UI/UX Pro Max — 57 種介面風格、95 種配色方案、56 種字型搭配，你在建置時直接呼叫它。

將這段貼入 Claude Code：

Install this plugin using NPM: github.com/nextlevelbuilder/ui-ux-pro-max

將模式選擇器切換到 Auto 模式，這樣 Claude 在每個步驟就不會詢問你是否允許。

第二步：尋找參考素材

不要憑空描述你理想中的網站，而是讓 Claude 看到你想要的樣子。

我的作品集使用了 Awwwards 上的「Il Capo Production」作為主要參考。

awwwards.com/sites/il-capo-production

那個深色、電影感的風格正是我想要的。

以下是我實際的使用方式：

我沒有截整頁並說「幫我做這個」，而是逐區塊擷取我喜歡的部分：

1.png — 英雄區塊
2.png — 英雄下方的區塊（作品以影片 + 標題/描述的形式呈現）
6.png — 頁尾與網站底部
11.png — 單一專案頁面
12.png — 載入畫面

至於作品集頁面（列出全部作品的頁面），參考網站沒有符合的版型。我去 Pinterest 找到了一個風格相近的不同排版，並單獨截圖命名為 11.png。

不要試圖完全複製某個網站，從每個網站中借鑒好的部分。

把所有素材放入專案內的 /reference 資料夾。

第三步：撰寫建置提示

在提示的開頭使用 /ui-ux-pro-max 來啟用設計技能。

這是我為作品集使用的確切提示：

複製用提示：

/ui-ux-pro-max
為一位前端開發者打造一個高端個人作品集網站。它應該看起來昂貴、現代且技術印象深刻，
並具有在任何設備上都能流暢載入的優雅動畫。
使用 reference 資料夾中的設計參考：1.png 是英雄區塊，2.png 是英雄下方的區塊
（以影片 + 標題/描述格式展示作品），6.png 是頁尾/網站底部，7.png 是列有全部作品
的作品集頁面，11.png 是從作品集點開任何作品時的單一專案頁面範例，12.png 是載入畫面。
在英雄區塊中央，使用 me.png 放置我的照片。
所有作品/專案圖片佔位符使用 example.png。

在開始建置之前，請問我任何需要澄清的問題。

最後一行是關鍵
Claude 會停下來問 4-6 個關於風格、字型、版面、動畫程度、內容語調的問題，你的回答將成為整個網站的基礎。

回答時要具體，這裡越精確，後面的反覆溝通就越少。

你回答之後，Claude 花約 5 分鐘規劃，再花約 10 分鐘建置，第一次輸出已經相當紮實。

第四步：英雄區塊動畫

在深色英雄區塊中央放一張普通照片是無聊的
使用者移動滑鼠時必須有些事情發生。

我為自己的作品集想到了聚光燈創意：

整個區塊是深色的
我的照片預設幾乎不可見
游標像手電筒一樣——「照亮」我
第二層只是同一張照片的明亮、暖色版本

我向 Claude 描述了這個概念並請它開發實作：

「在英雄區塊中，我想要一個手電筒/聚光燈游標效果。深色背景。我的照片預設幾乎不可見。當游標在區塊上移動時，它充當聚光燈——透過跟隨游標的柔邊圓形遮罩，揭示照片下方更明亮、暖色的版本。半徑 100-150px，柔和的羽化邊緣。請實作這個效果。」

Claude 一次就做出來了。效果完全如描述——使用者移動游標，照片在他們指向的地方亮起來。

第五步：審查修復

在進行正式品質檢查之前，先自己滾動瀏覽網站，記下所有感覺不對勁的地方。

我在第一次建置後的清單：

頁面路由間的轉場感覺突兀——需要平滑的淡入淡出
聚光燈效果有明顯延遲，跟不上游標
某些元素溢出畫面，無法適配螢幕
字型與參考網站不符——看起來比 Il Capo 美學更通用

把所有問題記下來，然後一次性發送：

「以下是幾個需要修復的問題，請全部處理：\

[描述問題 1]\

[描述問題 2]\

[描述問題 3]」

一次性發送所有問題非常重要。

第六步：精修打磨

明顯的 Bug 修復後，進行結構化品質檢查。將這段貼入 Claude：

「請對照以下標準審查這個網站，誠實指出哪些地方需要改進：
— 排版（我們是否使用了 Inter 這類被過度使用的 AI 字型？）
— 色彩（配色方案是克制的還是雜亂的？）
— 層次結構（文字大小是否能正確引導視線？）
— 動畫（流暢且有意圖，還是跳動且隨意？）
— 行動版（是真正為手機設計的，還是只是縮小的桌面版？）
— 文案（克制且具體，還是通用的 AI 填充語？）」

Claude 會對每個要點打分。通讀後，對每個要點表示同意或不同意，然後將你想修復的問題整理成一個提示，一次性發送。

不同意的要點不要讓它修復。你比它更了解自己的網站。