我用 Claude 在一個下午內架設了一個網站，並以 1 萬美元售出。這就是我使用的完整系統。

我完整記錄了整個過程，然後逐步拆解，讓你也能複製。下方這個網站，看起來就像 freelancer 收費五位数才做得出來的。每個造訪的人，都看不出它的程式碼是 AI 寫的。讓它實際上線的總成本：大約 60 美元。

GIF

首先——老實說，事實查核一下

我不是要賣你一個不切實際的幻想。所以在開始「怎麼做」之前，先說清楚什麼是真的、什麼不是。

真的部分：

• Claude Code 會根據你的描述，從零開始寫出整個網站的程式碼。沒有套用模板，所以你的網站不會看起來像其他 Wix / Squarespace 的複製品。這是成品能達到高品質標準的核心原因。
• 我使用的兩項技能都是真的，而且免費。一個是 frontend-design，由 Anthropic 打造——它在背景執行，會禁止使用那些最氾濫的 AI 字型和版面。另一個是 UI/UX Pro Max，一個由社群打造的技能，內建數十種 UI 風格、色板和字型組合，你可以隨時呼叫使用。
• 圖片/影片工作流程也是真的。ElevenLabs 現在整合了頂尖的視覺模型（GPT Image、Google Veo 3.1）以及 Topaz 的升頻功能，全部在同一個頁籤內——我驗證過了，他們在 2025 年底轉向了圖片與影片領域。所以你可以生成靜態圖、製作成動畫、然後升頻，完全不需要離開該頁面。
• Claude Code 包含在 Claude Pro 方案中，每月 20 美元（年繳的話是每月 17 美元）。你不需要 Max 方案也能用。這個資訊已經確認，更新至 2026 年 6 月。
• 託管在預算型主機商，搭配第一年免費的網域，大約每年需要 40–45 美元。

不神奇的部分： 「10,000 美元」指的是成品的價值，不是你保證能賺到的錢。一個像這樣的網站，一般接案公司會收費 5,000 到 15,000 美元來建置。你實際上能不能賺到那麼多，取決於你是否能把它賣出去——關於賺錢的部分，後面會再說明。這裡的提示只是起點，不是自動販賣機。

每個提到的工具都是真實存在的。每個價格都是截至 2026 年 6 月的現行價格。

一個價值 10,000 美元的網站，跟一個 200 美元的網站，差別在哪

在開始建置任何東西之前，你需要一個目標。我問了 Claude，一個網站真正看起來昂貴的要素是什麼，歸結起來是 3 大類，共 8 點：

品味

1. 觀點 — 一個真正的設計方向，而不是一張情緒板
2. 字體排版 — 經過深思熟慮的字型（而且不是那些被濫用的字型）
3. 色彩 — 克制，最多 4–5 個色碼，不要像彩虹

內容

1. 層級 — 尺寸大小引導視線的閱讀順序：第一、第二、第三
2. 圖像 — 客製化或足以亂真的 AI 生成圖片，絕對不要用那種廉價的圖庫素材
3. 文案 — 克制、有畫面感、寫得像人話，而不是形容詞製造機

質感

1. 動態效果 — 游標特效和微互動，讓網站感覺有生命力
2. 行動裝置 — 是為手機設計的，而不是把桌機版縮小

把這張清單留著。最後你會用這 8 點來為自己的網站評分。這個自我評分的步驟，就是讓成品從普通進階到精緻的唯一關鍵。

這適合誰

這個方法適合你，如果：

• 你想賣網站給在地商家（餐廳、健身房、診所、房地產等），而且你不會寫程式
• 你已經是 freelancer，想讓產出量和價格都翻 10 倍
• 你想為自己的事業或個人品牌做一個高品質的網站
• 你可以花一個專注的下午，並且願意反覆迭代，而不是期望一鍵就能完美

這不適合你，如果你只想要一個「按個按鈕，生意就來」的玩具。你的簡報品質，以及當成果看起來平淡時你願意修正的態度，就是這項工作的核心。

你需要什麼（以及費用）

實際完成一個網站的總成本：約 60 美元（一個月 Claude Pro 費用 + 託管 + 一年網域）。

完整建置步驟，一步一步來

步驟 1 — 設定 Claude Code

在 claude.com 註冊 Claude Pro。下載桌面應用程式（左下角的下載圖示 → Claude Code 區塊 → 桌面應用程式 → 執行安裝程式）。登入。

從聊天模式切換到程式碼模式（左上角的頁籤，或按 Cmd/Ctrl + 3）。

在你的電腦上隨便一個地方，建立一個新的空資料夾——這就是你的工作區。點擊聊天框附近的資料夾選擇按鈕，然後在應用程式內開啟這個資料夾。Claude Code 在有專屬資料夾的環境下運作得最好。

介面經常更新，所以如果某個按鈕不在我描述的確切位置，別慌張——概念是一樣的，找到對應的功能就行。

步驟 2 — 用兩個技能升級 Claude

預設的 Claude 是一個通才。它的預設設計水準只能算還好——它會傾向使用你在每個 AI 網站上都看過的那些字型和版面。技能可以解決這個問題。

安裝技能 #1 — frontend-design (背景執行)： 將 frontend-design 技能的連結貼給 Claude Code，並附上：

1全域安裝此技能。

當它詢問時，允許其進行編輯。

安裝技能 #2 — UI/UX Pro Max (按需求呼叫)： 將 UI/UX Pro Max 的連結貼給 Claude Code，並使用以下確切的文字——措辭很重要，因為這樣它才能透過終端機乾淨地安裝：

1使用 npm 全域安裝此插件。

允許其進行編輯。

步驟 3 — 開啟自動模式

在聊天框的左下方，將模式選擇器切換到自動模式。這可以讓 Claude 在每個步驟都停下來請求許可，而是直接繼續工作。開啟自動模式並安裝好兩個技能後，你就可以準備開始建置了。

步驟 4 — 收集參考資料（快速培養品味的捷徑）

用文字來描述視覺品味很困難，特別是如果你對設計不熟悉。參考資料可以解決這個問題：把你喜歡的網站的螢幕截圖交給 Claude，讓它模仿那種感覺。展示品味比描述品味容易得多。

我通常在哪裡找參考資料：

• Dribbble — 設計師展示作品的地方
• Awwwards — 獲獎網站，水準非常高
• Pinterest — 直接搜尋你想要的東西，例如「現代餐廳網站設計」

找到 3–5 個你喜歡的網站，把螢幕截圖存下來。你不是要複製它們——而是向 Claude 展示你想要的方向。

步驟 5 — 一個提示，直接建好整個網站

這一步就是整個影片精華濃縮成的一個動作。你呼叫設計技能，提供簡報，附上你的參考截圖，然後用那句魔法咒語結尾。

在我的建置中，我為西雅圖的一家餐廳做了個網站。以下是這個提示的結構——根據你的專案調整簡報內容：

1/ui-ux-pro-max
2
3為 [商家名稱 — 例如：一家位於西雅圖的高級牛排館] 建立一個單頁網站。
4
5方向：[用你自己的話描述想要的氛圍 — 例如：黑暗、氣氛奢華，但帶有太平洋西北地區的基底，
6不是那種千篇一律的曼哈頓牛排館]。
7
8段落（依序）：[例如：主視覺區、理念/故事、菜單、空間環境、訂位]。
9不需要圖庫、不要訂位系統——就是一個從上到下滾動的單頁。
10
11我會附上 3–5 張參考截圖來說明視覺風格。
12模仿**感覺**，不要複製它們。
13
14技術棧：單一檔案的靜態 HTML/CSS/JS（不要 React——保持簡單）。
15
16在開始寫任何程式碼之前，先問我問題來釐清。

最後一行——「先問我問題來釐清」——這就是讓 Claude 在建置之前停下來思考的關鍵。它回來問了我大約 7 個問題：店名、風格方向、有哪些段落、誰寫文案、技術棧、動畫程度，以及其他細節。

最重要的部分是：Claude 提供了三個風格方向讓我選擇，就像菜單一樣。我選擇了黑暗、氣氛奢華，帶有太平洋西北地區基底，五個段落，沒有圖庫，沒有訂位系統——就是一個會滾動的單頁。

這是整個建置過程中最關鍵的一刻。 你在這裡的答案會決定整個網站的樣貌。你現在越具體，之後需要和 Claude 來回修正的次數就越少。慢慢來，不要急。

然後，送出提示。Claude 會花大約 3 分鐘閱讀和規劃，然後才開始寫程式，接著再花 4–5 分鐘建置。直接跳到成果揭曉的部分吧。

Claude 提出的問題

第一個版本揭曉

步驟 6 — 用 8 點清單為自己評分

在你繼續打磨之前，先用你設定的標準來檢視這個網站。把 8 點清單（來自本文稍早的部分）貼給 Claude，然後問：

1這是我對一個價值 10,000 美元網站的 8 點檢查清單。請審視目前的網站，並老實告訴我
2每一點它落在哪個等級：表現出色、表現普通、還是表現不足。請嚴格一點。

在我的建置中，Claude 的回覆是：觀點——出色，色彩——出色，層級——出色，字體排版——普通，而圖像/動態效果/行動裝置/其他細節——都是普通。你也會得到類似的結果，這沒關係。重點是要確切知道還有哪些地方需要改進。

步驟 7 — 從專業感進階到昂貴感的關鍵

這個章節就是決定性的差異。不要一次只修正一個問題——這樣既浪費 token，而且最終成果會感覺像是東拼西湊。要用意圖來引導，而不是用具體細節，並且要求一次處理一批問題。

這是我使用的確切提示：

1我們需要更多精雕細琢的微互動。較下方的段落感覺有點普通。
2我們不需要讓它們更忙——只要讓它們看起來更貴就好。
3請提出一批改進方案，然後一次全部套用。

注意，我沒有告訴 Claude 要加什麼——我只告訴它我希望它感覺起來怎麼樣。Claude 在將意圖轉化為具體方案這方面，比大多數人自己寫規格書還要厲害。它回傳了一批方案：全站加入底片顆粒效果、段落之間加入動態黃銅細線、一個發光的餘燼效果、逐字揭曉標題。五個變更，一個提示，一次完成。

接著，你自己驅動逐段的最佳化。 滾動瀏覽，找出那些仍然感覺平淡的段落——通常會有一兩個——然後給 Claude 每個段落一個動態效果或游標互動：

1[故事] 這個段落感覺很靜態。在這裡加入一個優雅的微動態或游標互動效果。
2保持細緻和優雅——要有生命力，而不是嘈雜。

如果第一次嘗試的效果太明顯，就提出修正：「讓它更細微一點，增加一點延遲，讓它跟在游標後面。」 在我的建置中，這把一個靜止的燭光光暈，變成了一個會以柔和的延遲效果跟隨你游標的元素。兩個提示，兩個段落——這一層的打磨，就是區分一個網站是看起來很貴，還是你在操作時感覺到它很貴的關鍵。

步驟 8 — 圖像：自行拍攝或生成

GIF

圖像是 Claude 唯一無法完全獨力解決的部分。最好的選項：客製化的攝影照片。把照片放到你的專案資料夾中，告訴 Claude 這是什麼、要放到哪裡。

沒有攝影預算？現在 AI 生成的效果已經夠好，沒有人能分辨得出來。讓這個過程變快的訣竅是：不要自己寫生成圖片的提示——Claude 已經了解你的專案，所以請它幫你寫提示：

1幫我寫一個用於這個網站主視覺區的圖片生成提示。它必須符合我們到目前為止建立的
2確切氛圍、色板和方向。只輸出提示本身就好。

把這個提示貼到你的圖片生成器中，你就能在第一次嘗試就得到符合品牌的圖片。在 ElevenLabs 中，你可以先生成靜態圖（GPT Image），把這個畫面丟進 Google Veo 3.1 做成動畫，再用 Topaz 升頻——全部在同一個頁籤內完成。把最終的素材放進你的專案資料夾。

步驟 9 — 從 [21st.dev](//21st.dev) 引入專業元件

GIF

當你想要一個引人注目的視覺元素（例如滾動效果、華麗的主視覺區）時，21st.dev 是一個由真正開發者所建立的免費元件庫。找到你喜歡的，按下 Copy Prompt，貼到 Claude Code 中，附上你的素材，然後告訴 Claude 用它來建置主視覺區。

這裡有個重要的部分：Claude 會保護你的網站架構。我選的滾動元件是為 React 建造的；我的專案只是一個簡單的靜態網站，所以 Claude 拒絕直接套用 React 版本，因為這會改變整個專案的運作方式——而是改用純 HTML 重新實作了這個效果。（如果你的專案真的需要 React——例如儀表板、結帳頁面、登入功能——Claude 會同意使用。它不會因為你要求了就隨便破壞東西。）

如果效果在第一次嘗試時就壞掉了——我的情況就是如此——只要描述問題所在：

1影片有顯示出來，但滾動效果沒有按照元件該有的方式運作。
2深入一點——在瀏覽器中開啟頁面，檢查實際發生的情況，然後修復真正的原因。

Claude 自己打開了頁面，即時檢查，然後找到了三層深處的真正 bug。重點是：持續推進。 解釋什麼東西壞了，以及你預期的是什麼結果——如果你讓它仔細檢查，Claude 幾乎總是能解決問題。

步驟 10 — 文案、字型和行動裝置（快速見效的項目）

GIF

文案： AI 寫的文案預設會過度解釋。高品質的文案是克制且有畫面的——「乾式熟成肋眼。16 盎司。60 天。爐火炙烤。」讀起來就像主廚寫的。frontend-design 技能會引導 Claude 朝這個方向寫作，這就是為什麼它在每個專案中都值得一個位置。

字型： 有一個字型——Inter——已經被過度使用到一看到它就馬上會覺得「這是 AI 做的」。如果你在輸出中看到它：

1把所有的 Inter 換成一個比較沒那麼氾濫的字型——Geist 不錯。保留標題字型。

行動裝置： 「響應式」不等於「為手機設計」。你的網站透過手機被看到的次數，遠比透過桌機多。要求一個專門為行動裝置進行的最佳化：

1進行一次專門的行動裝置最佳化。決定在較小的螢幕上哪些元素應該隱藏、
2哪些應該更緊湊、哪些應該調整大小。這是大多數人實際會看到的版本。

在我的建置中，導覽列摺疊了、品牌標誌的間距變得更緊湊、按鈕也有了較小尺寸的變體。至此，8 點檢查清單的所有項目都完成了。

步驟 11 — 讓網站上線（大家最常搞砸的部分）

現在你的網站只存在於你的電腦上——那個 localhost 網址只在你自己的機器上能看。要讓別人看到，你需要託管服務 + 一個真實的網域。

選擇一個提供第一年免費網域的主機商。對於一個簡單的靜態網站（沒有登入、沒有結帳、沒有資料庫），最便宜的「高級/共享」方案就夠用了。將方案期限設為 12 個月——這是獲得免費網域的最低要求。搜尋你想要的網域，把它註冊下來。我總共花了約 43 美元，涵蓋一年：託管 + 網域 + 電子郵件。

如果 Claude 幫你建置的東西包含真正的後端（它說

好

，然後用了 React，設定了 Node.js、資料庫等等），請選擇

商業

方案——這個方案才支援 Node.js。Claude 在步驟 9 時接受或拒絕 React，就告訴了你需要哪一種方案。

一個會導致頁面空白的常見錯誤： 上傳時，請壓縮你專案資料夾裡面的檔案——而不是壓縮資料夾本身。打開你的專案資料夾，選取裡面所有的東西（Cmd/Ctrl + A），然後壓縮。你會得到一個壓縮檔，裡面 index.html 是在最上層的。如果你直接壓縮整個資料夾，主機商解壓縮時會多一層目錄，然後你的網域就會顯示空白頁面。

在主機商的新手引導中選擇 Migrate Existing Site → Upload Backup Files，選擇你的網域，把壓縮檔拖進去，然後提交。點擊你的網域——網站就在那裡了，你的價值 10,000 美元的網站，已經上線在一個自訂的網址上。

用這個方法，你實際能賺多少

網站本身是一個價值 10,000 美元的資產。以下是它如何轉化為實際收入：

• 賣網站給在地商家是最快的路徑。餐廳、牙醫、健身房、房仲、承包商，他們通常都願意支付 1,000 到 5,000 美元來做一個高品質的單頁網站。花一個下午建一個，然後據此收費。一個月接兩個客戶，每個收 2,000 美元，兼職做就是 每月 4,000 美元。
• 有經驗的 freelancer / 小型工作室，對於這種客製化、有動畫效果、為行動裝置設計的網站，收費通常是 5,000 到 15,000 美元——而現在，你可以在幾小時內完成，而不是幾週。這個利潤空間就是重點所在。
• 產品化服務： 銷售一個固定的「高品質單頁網站，5 天交付，1,500 美元」的方案。可預測、可重複，而且你可以同時進行好幾個。
• 你自己的品牌： 如果你是為自己做的，那麼「收入」就來自於一個看起來像五位數等級的網站所能帶來的生意機會和信賴感。

對今天才開始的人來說，合理的成長曲線是：幾週內接到第一個付費客戶，幾個月內兼職做到每月 1,000 到 5,000 美元，前提是你真的有去開發客戶。建置網站已經不再是瓶頸——銷售才是。

這對你來說代表什麼改變

GIF

以前，一個高品質的客製化網站，意味著你要嘛花幾個月學習寫程式，要嘛付給開發者幾千美元。從現在開始，技術上的障礙已經不存在了。你可以用一個下午，就產出一個真正看起來昂貴、完全客製化、有動畫效果、且為行動裝置設計的網站——然後把它賣掉，或者用它來讓自己的事業看起來更專業。

你實際學到帶走的技能，不是「寫程式」。而是「執導」——知道什麼樣子看起來昂貴、精準地下達簡報、並且在成果不如預期時持續提出修正，直到滿意為止。這個技能，會在你之後建的每個網站中不斷累積價值。

你的下一步（今天就做）

1. 註冊 Claude Pro 並安裝桌面應用程式。
2. 安裝兩個技能（步驟 2）並開啟自動模式。
3. 從 Dribbble 或 Awwwards 存下 3–5 張參考截圖。
4. 執行步驟 5 中的建置提示——記得包含「先問我問題來釐清」——然後仔細回答。

不要跳過收集參考資料和回答釐清問題這兩個步驟。那裡決定了一個網站 80% 的品質。在你擔心怎麼賣之前，先完整地做出一個網站——你需要先親眼看到它是如何運作的。

一句真心話

這不是什麼仙丹妙藥。這是一個真實的工具，能做真實的工作——但最終的成果，還是取決於你。上面的提示只是起點，不是腳本。一個看起來像套版網站，和一個看起來價值 10,000 美元的網站之間的差別，來自於你帶進來的品味、你選擇的參考資料，以及你多少次在面對一個平淡的段落時選擇堅持修正，而不是接受「這樣就好了」。

Claude 負責執行。你的指導和你的努力，決定了最終的成果。你要怎麼運用這項能力，完全取決於你自己。

*

*請將此文加入書籤、轉發，並追蹤 @thegreatest_sv 以獲取更多頂級內容、AI 工具及高品質研究。免責聲明（收入與資訊） 本文中顯示的收入或統計數據來自我的研究與個人經驗，並非對您收入的保證。實際結果會因利基市場、內容品質、RPM/CPM、受眾參與度、一致性、投入程度及其他因素而異。本文不構成財務、稅務、法律或專業建議——在做任何商業決策前，請諮詢相關領域的專家。資源與連結

Claude Code 工具與資源： https://claude.com/

Frontend Design 技能（由 Anthropic 開發）：

https://github.com/anthropics/skills/tree/main/skills/frontend-design

UI/UX Pro Max 技能：

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill

21st.dev： https://21st.dev

價值 10K 美元的網站檢查清單（免費 PDF 下載）： https://drive.google.com/file/d/1CCRCvSbJ1tNXmd2YDnUNr1XkTAguYG7v/view

設計參考網站

Dribbble： https://dribbble.com

Awwwards： https://www.awwwards.com

Pinterest：https://pinterest.com