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

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

本文目錄

Toggle

第一步：安裝設計技能
第二步：尋找參考素材
第三步：撰寫建置提示
第四步：英雄區塊動畫
第五步：審查修復
第六步：精修打磨
結果

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

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

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

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

不需要任何編程經驗。

第一步：安裝設計技能

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

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

將這段貼入 Claude Code：

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

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

將這段貼入 Claude Code：

將模式選擇器切換到 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 分鐘建置，第一次輸出已經相當紮實。