從安裝設計技能、蒐集參考素材、撰寫建置提示，到實作聚光燈游標動畫、逐輪審查修復，再到精修打磨，這份完整指南帶你零編程基礎也能上手。本文整理、翻譯自 monokern X 文章。 （前情提要：Claude Code 新推 /goals 指令：分離執行與評估，避免 AI 代理偷懶說謊 ） （背景補充：實戰：手把手教你用 7 個 Agent 將 Vibe Coding 升級為專家級開發流程）
本文目錄
Toggle
代理商收費 5,000 美元才能打造一個看起來這麼精良的作品集網站。
我在 2 小時內完成了自己的。以下是完整過程。
這是真正的實作記錄，不是通用模板指南。
我用自己的作品集作為範例：我實際使用的參考素材、我實際發送的提示、我實際遇到並修復的 Bug。
不需要任何編程經驗。
預設情況下，Claude 的設計輸出是平庸的。相同的字型、相同的排版、相同的扁平外觀。兩個技能可以解決這個問題。
將這段貼入 Claude Code：
Install this skill: github.com/anthropics/skills/tree/main/frontend-design
出現提示時允許變更，全局安裝。
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
那個深色、電影感的風格正是我想要的。
以下是我實際的使用方式：
我沒有截整頁並說「幫我做這個」，而是逐區塊擷取我喜歡的部分：
至於作品集頁面（列出全部作品的頁面），參考網站沒有符合的版型。我去 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 一次就做出來了。效果完全如描述——使用者移動游標，照片在他們指向的地方亮起來。
在進行正式品質檢查之前，先自己滾動瀏覽網站，記下所有感覺不對勁的地方。
我在第一次建置後的清單：
把所有問題記下來，然後一次性發送：
「以下是幾個需要修復的問題，請全部處理：\ [描述問題 1]\ [描述問題 2]\ [描述問題 3]」
「以下是幾個需要修復的問題，請全部處理：\
一次性發送所有問題非常重要。
明顯的 Bug 修復後，進行結構化品質檢查。將這段貼入 Claude：
「請對照以下標準審查這個網站，誠實指出哪些地方需要改進： — 排版（我們是否使用了 Inter 這類被過度使用的 AI 字型？） — 色彩（配色方案是克制的還是雜亂的？） — 層次結構（文字大小是否能正確引導視線？） — 動畫（流暢且有意圖，還是跳動且隨意？） — 行動版（是真正為手機設計的，還是只是縮小的桌面版？） — 文案（克制且具體，還是通用的 AI 填充語？）」
Claude 會對每個要點打分。通讀後，對每個要點表示同意或不同意，然後將你想修復的問題整理成一個提示，一次性發送。
不同意的要點不要讓它修復。你比它更了解自己的網站。
你最終會得到一個紮實的網站。不完美——但夠好。
第一次建置時有些事情不會完全正確，也許行動版需要再過一遍，或某個動畫感覺稍有偏差，這是正常的。
從這裡開始迭代。每天找一件事改善並修復它。
14.15萬 熱度
784.36萬 熱度
56.6萬 熱度
383.82萬 熱度
5549.22萬 熱度
如何用 Claude Code 打造 1 萬美元等級的網站與動畫效果
從安裝設計技能、蒐集參考素材、撰寫建置提示，到實作聚光燈游標動畫、逐輪審查修復，再到精修打磨，這份完整指南帶你零編程基礎也能上手。本文整理、翻譯自 monokern X 文章。
（前情提要：Claude Code 新推 /goals 指令：分離執行與評估，避免 AI 代理偷懶說謊 ）
（背景補充：實戰：手把手教你用 7 個 Agent 將 Vibe Coding 升級為專家級開發流程）
本文目錄
Toggle
代理商收費 5,000 美元才能打造一個看起來這麼精良的作品集網站。
我在 2 小時內完成了自己的。以下是完整過程。
這是真正的實作記錄，不是通用模板指南。
我用自己的作品集作為範例：我實際使用的參考素材、我實際發送的提示、我實際遇到並修復的 Bug。
不需要任何編程經驗。
第一步：安裝設計技能
預設情況下，Claude 的設計輸出是平庸的。相同的字型、相同的排版、相同的扁平外觀。兩個技能可以解決這個問題。
將這段貼入 Claude Code：
出現提示時允許變更，全局安裝。
將這段貼入 Claude Code：
將模式選擇器切換到 Auto 模式，這樣 Claude 在每個步驟就不會詢問你是否允許。
第二步：尋找參考素材
不要憑空描述你理想中的網站，而是讓 Claude 看到你想要的樣子。
我的作品集使用了 Awwwards 上的「Il Capo Production」作為主要參考。
那個深色、電影感的風格正是我想要的。
以下是我實際的使用方式：
我沒有截整頁並說「幫我做這個」，而是逐區塊擷取我喜歡的部分：
至於作品集頁面（列出全部作品的頁面），參考網站沒有符合的版型。我去 Pinterest 找到了一個風格相近的不同排版，並單獨截圖命名為 11.png。
不要試圖完全複製某個網站，從每個網站中借鑒好的部分。
把所有素材放入專案內的 /reference 資料夾。
第三步：撰寫建置提示
在提示的開頭使用 /ui-ux-pro-max 來啟用設計技能。
這是我為作品集使用的確切提示：
複製用提示：
最後一行是關鍵
Claude 會停下來問 4-6 個關於風格、字型、版面、動畫程度、內容語調的問題，你的回答將成為整個網站的基礎。
回答時要具體，這裡越精確，後面的反覆溝通就越少。
你回答之後，Claude 花約 5 分鐘規劃，再花約 10 分鐘建置，第一次輸出已經相當紮實。
第四步：英雄區塊動畫
在深色英雄區塊中央放一張普通照片是無聊的
使用者移動滑鼠時必須有些事情發生。
我為自己的作品集想到了聚光燈創意：
我向 Claude 描述了這個概念並請它開發實作：
Claude 一次就做出來了。效果完全如描述——使用者移動游標，照片在他們指向的地方亮起來。
第五步：審查修復
在進行正式品質檢查之前，先自己滾動瀏覽網站，記下所有感覺不對勁的地方。
我在第一次建置後的清單：
把所有問題記下來，然後一次性發送：
一次性發送所有問題非常重要。
第六步：精修打磨
明顯的 Bug 修復後，進行結構化品質檢查。將這段貼入 Claude：
Claude 會對每個要點打分。通讀後，對每個要點表示同意或不同意，然後將你想修復的問題整理成一個提示，一次性發送。
不同意的要點不要讓它修復。你比它更了解自己的網站。
結果
你最終會得到一個紮實的網站。不完美——但夠好。
第一次建置時有些事情不會完全正確，也許行動版需要再過一遍，或某個動畫感覺稍有偏差，這是正常的。
從這裡開始迭代。每天找一件事改善並修復它。