我不會寫程式也能自己做網站？用 Claude Design + Claude Code 教學實作給你看
圖／文 © 知行墨序
想做一個網站，一定要會寫程式嗎？
過去答案通常是肯定的。你可能要會 HTML、CSS、JavaScript，還要懂一點設計工具，最後還要知道怎麼把網站部署到網路上。對沒有技術背景的人來說，這些名詞大概都沒聽過，也很難想像在完全不懂技術背景的情況下，有一天能用 AI 做出一個網站。
現在，AI 工具已經讓網站製作的流程變得不一樣。
如果你只是想做一個小型網站，例如：活動報名頁、課程介紹頁、個人作品集、小店形象頁，或是一頁式產品介紹頁，其實不一定要從寫程式開始。你可以先用 Claude Design 把想法變成網站設計，再用 Claude Code Desktop 協助整理成可以部署的網站，最後透過 Netlify 發布上線。
這篇文章會用一個完整範例，帶你做出一個「毛孩咖啡日光活動報名網站」。
這個範例的情境，是一家寵物友善咖啡店想舉辦週末活動，邀請飼主帶毛孩一起來喝咖啡、拍照、吃點心、參加手作體驗。店家希望有一個簡單漂亮的網站，讓使用者可以看活動資訊，也可以直接填寫報名表單。
重點是，這篇不是寫給工程師看的。
你不需要會寫程式。
你不需要會設計。
你也不需要知道什麼是部署。
只要你能把自己的想法說清楚，再更好一點是有一些素材，然後 AI 就可以協助你一步一步完成網站。
Claude Design 是什麼？
Claude Design 是 Anthropic 提供的視覺設計工具，內建畫布與設計功能，用文字描述你的需求，它就能直接產生並反覆修改設計成品（例如：簡報、原型、landing page、一頁式設計稿）。
簡單說，可以把它想成一個 AI 設計助理。
你不用先打開設計軟體，也不用自己畫版面。只要用文字描述你想做的網站，Claude Design 就能幫你產生初步設計。接著你可以用對話的方式繼續調整，例如：請它改成更溫暖、更有日光感、更像咖啡店、更適合手機閱讀，或是讓報名按鈕更明顯。
對不會設計的人來說，Claude Design 最大的幫助在於，它可以先把你腦中的想法或是你收集的素材，變成看得見的畫面。這也是為什麼這篇 Claude Design 教學會特別從最基礎的操作開始說明。
對於多數非設計專長的人而言做網站會卡住，並不是因為完全沒有想法，而是不知道怎麼把想法變成版面，Claude Design 剛好可以補上這一段。
舉例來說，你可以直接告訴它：
「我想做一個寵物友善咖啡店的活動報名網站，風格要溫暖、療癒、有陽光感，網站要有活動介紹、活動資訊、報名表單和常見問題。」
Claude Design 就可以根據這段描述，產生一個網站設計方向。
- 如果第一版看起來像科技公司網站，你可以請它改得更像咖啡店。
- 如果畫面太空，你可以請它增加活動感。
- 如果手機版太擠，你可以請它幫你重新調整手機版。
整個過程不需要使用設計專業術語，只要用一般人看得懂的方式描述感覺即可。
Claude Design 教學：如何開始使用
- 首先，安裝 Claude Code Desktop app，可以從Claude 官方網頁下載安裝。
- 開啟 Claude Code Desktop app，並在左側選單中選擇 Design（應用的UI會隨時間改版，在本文撰寫的當下，是在左側選單中選擇）。
- 接著你可以上傳素材檔案，或是直接加入一個目錄，而目錄內是你的所有參考檔案，而 LLM 模型建議可以直接選用最新的 Claude Opus 4.8 模型。
- 在對話框，輸入你的需求，例如：
我開一家咖啡店，2026/7/11週末想辦一場活動，需要一個網站讓客人報名。素材資料都在目前的目錄內，你可以自行使用。活動是這樣：這是一家歡迎帶寵物來的咖啡店。週末這天，客人可以帶自己的毛孩來店裡，一起曬太陽、喝咖啡、拍照，我們會準備給吃的點心，也會帶大家做一個簡單的小手作。我希望有一個網站，大家看完介紹，就能直接在上面報名。活動費用每人（每個毛孩）是450元。網站上我想讓客人知道這些事：活動在做什麼、當天幾點到幾點、有哪些內容、在哪裡、怎麼來、要注意什麼（像是要牽繩、要打過疫苗、名額有限）。報名的時候想請他們填：自己的名字、電話、Email、來幾個人、帶幾隻寵物來（每隻填名字、品種、大概多大）、想參加上午還是下午、要不要多做一份寵物手作。填完送出後，讓他們看到「報名成功」。風格你幫我決定就好，我希望感覺溫暖、輕鬆、看了會想來。你可以先做一版給我看，有需要問我的就問。
等Claude Design 做出第一版後，你很可能會有一種感覺：好像有了，但又不完全對。
這很正常，因為AI 產生的第一版通常不會是終點，它比較像是把你的想法先具體化。以前你可能腦中只有一個模糊畫面，現在它變成一個可以被討論、被修改的東西。這時候你不需要懂設計術語。你只要用自己的話說感受。例如，你覺得畫面太正式，可以說：
目前畫面有點太正式，請讓它更像週末咖啡店活動。希望多一點日光、咖啡、毛孩陪伴的感覺，但不要變得太可愛或太花。
你覺得資訊不夠清楚，可以說：
活動日期、時間、地點和費用不夠明顯。請讓使用者一進來就更快看到這些資訊，報名按鈕也要更清楚。
你不用說出專業設計語言，你只要描述「我覺得哪裡怪，我要怎麼改」，Claude Design 就會把這些感受轉成具體修改。所有的過程都是採用討論、修正的循環，直到完成最終版本。
以上是基本的 Claude Design 教學流程，接下來分享兩個能讓設計更精準的進階技巧。
💡小技巧1：讓 AI 一次做三種版本給你選
如果你一開始不知道自己喜歡什麼風格，可以不要硬想，直接讓 Claude Design 做不同方向。
請幫我做三種不同風格方向，讓我比較：
- 第一種是日系生活風，乾淨、溫暖、留白多。
- 第二種是週末市集風，比較活潑，有活動感。
- 第三種是咖啡店品牌風，比較成熟、有質感，適合店家對外形象。
- 活動內容都一樣，但請讓三個版本的視覺感受明顯不同。
這個技巧很好用。
因為很多不會設計的人，最大問題是不知道該怎麼把腦中的感覺講出來。讓 AI 先做三種版本，你會比較容易判斷：「我喜歡這個」、「這個太吵」、「這個比較接近我要的感覺」。
💡小技巧2：請 Claude Design 幫忙做檢查
設計差不多後，請 Claude Design 自己幫我檢查一次：
請用第一次看到這個網站的使用者角度，幫我檢查目前頁面。
我想知道：使用者能不能很快知道這是什麼活動？
活動時間、地點、費用和名額是否清楚？報名按鈕是否夠明顯？
手機版是否容易閱讀？
報名表單會不會讓人覺得太麻煩？
請直接幫我修改成更適合報名轉換的版本。
讓 AI 用「第一次進來的人」的角度檢查。這樣它比較會去修資訊順序、按鈕位置、文字清楚度、手機版閱讀，而不是只調顏色和裝飾。
如何上架網站？把設計完稿交給 Claude Code Desktop
當 Claude Design 裡的網站看起來已經差不多，就可以交給 Claude Code Desktop：
- 在 Claude Design 右上角選擇 Share / Send to
- 看到 Claude Code 選項後，點選 Send
- 選擇 Send to local coding agent
- 勾選 Download zip，按下按鈕取得 zip 檔案
輸出專案zip檔接下來，解壓縮剛剛的zip檔案到你的本機電腦任一目錄。
開啟Claude Code desktop 應用，選擇Code功能，接著指定到剛剛解壓縮的目錄。
Claude Code選擇Code功能
Claude Code開啟指定目錄讓我們先停在這裡一下。
由於活動網站需要對外公開，我們需要找一個平台來部署已設計好的報名網站，並取得一組可公開存取的網址。這裡我們可以選擇使用 Netlify。Netlify 是一個雲端網站托管與部署平台，常用於架設靜態網站與單頁式應用，並提供 CDN、自訂網域、HTTPS、無伺服器函式（serverless functions）以及表單處理等功能。
這些技術名詞暫時不需要深入理解，只要知道 Netlify 可以幫助我們把活動報名網頁放到網路上，系統會自動產生一個公開網址，也能支援表單填寫功能。後續即可在後台查看並彙整報名資料。
直接到Netlify官方網站註冊一個免費的會員帳號，接著回到Claude Code desktop在對話框下面的+號按一下，選擇connectors / add connectors，然後找到Netlify，按下+號進行連接，過程中會需要進行Netlify的登入作業，只要跟著指示做完即可。
Claude Code連接 Netlify_步驟1
Claude Code連接 Netlify_步驟2完成以上步驟後，就能將 Claude Code desktop 與 Netlify 連接起來。接著，回到 Claude Code desktop 的 Code 功能頁，請 AI 協助進行部署。
我要把目前的目錄裡的專案部署到netlify，這個專案已經設計完成並且具有表單功能，我的目標是要部署到netlify，並且可以實際填寫，而表單資料會記錄在netlify的後台裡，你檢查一下是否都已完備，有缺少或不正確的地方，請你直接修到好，我不是工程師，所以我也不懂，你全部確認好並且修好之後，直接部署到netlify，完全後回報給我
在部署過程中，AI 可能會向你確認一些設定或需求，你只需要依照自己的想法，回覆希望怎麼做即可。有時候AI會需要你同意一些授權以便它能夠進行檔案的變更或資料的取得，你可以根據它的請求授權給予AI。
Claude Code要求權限等 Claude Code 完成部署後，你會拿到一個正式網址。
Claude Code部署完成回報
Netlify 後台內建收集表單資料管理功能這時候，這個網站就不是只存在你的電腦裡，你可以把它貼到 LINE 群組、Facebook 活動頁、Instagram 個人檔案、粉專，甚至做成 QR Code 放在海報或桌卡上。
這整個過程，是從一開始你只有一個想法：「我想做一個毛孩咖啡活動報名網站。」
接著用 Claude Design 把想法變成設計。
再用 Claude Code Desktop 把設計變成可以上線的網站。
最後用 Netlify 把網站發布到網路上。
整件事的過程中，沒有自己寫任何一行程式，也沒有自己設計版面，更沒有自己研究部署細節，但仍然完成了一個可以被別人打開、閱讀、報名的網站。
而，真正有意思的地方，不只是「AI 可以幫你做網站」。
比較重要的是，它讓網站製作從技術問題，慢慢變成表達問題和判斷問題。
過去想做網站，第一個問題是你會不會寫程式。
現在想做一個小型網站，第一個問題會變成：你能不能說清楚你想做什麼？你能不能看得出來目前結果哪裡不對？你能不能一步一步要求 AI 幫你修正？
這對許多人來說是很大的差別。
因為不是每個人都需要成為設計師或工程師，但很多人都需要一個網站。可能是課程頁、活動頁、作品集、服務介紹頁、店家頁、講座報名頁、社群招募頁，這些需求過去常常因為技術門檻被擱置，而現在靠著AI已經可以用更低成本開始嘗試。
當然，這不代表所有網站都可以靠 AI 隨便做完。
如果你要做大型電商、會員系統、金流、後台管理、權限控管，那還是需要專業工程的規劃，也需要更完整的測試和資安檢查。
但如果你的目標是一個小型活動網站、一頁式介紹頁，或是先做出 MVP（Minimum Viable Product）來驗證想法，那 Claude Design 加上 Claude Code Desktop，再接 Netlify，這樣的模式很值得你親手嘗試。
給零基礎使用者的建議
如果你完全不會寫程式，請不要一開始就問 AI：「幫我寫一個網站。」，這樣太籠統，AI 只會產出一個看起來像網站的東西。
你可以換成這樣說：
- 我想做什麼網站。
- 這個網站給誰看。
- 使用者看完後，我希望他做什麼。
- 我希望網站帶給人的感覺是什麼。
- 網站一定要有哪些資訊。
這樣 AI 會更容易做出接近真實需求的東西。
以這次的「毛孩咖啡日光活動報名網站」為例，真正重要的是，我們把一個生活中的小需求，變成了一個可以真的被使用的網站。這也是現在 AI 工具最值得期待的地方，它讓更多沒有技術背景的人，也能把自己的想法放到網路上，不一定一次做到完美，但至少可以開始。
看完這篇 Claude Design 教學，你會發現網站製作的第一步，不再是學程式語法，而是學會怎麼把需求講清楚。
Claude Design 教學常見問題解答（FAQ）
Q1：完全不會寫程式、也沒有設計經驗，真的可以用 Claude Design 做出網站嗎？
A：可以。Claude Design 是用對話的方式描述需求，AI 就能直接產生網站設計稿，不需要懂 HTML、CSS 或任何設計軟體。你只需要把想做的網站講清楚（給誰看、要呈現什麼資訊、想要的風格），Claude Design 就會先做出一個版本，再透過反覆對話調整細節。
Q2：Claude Design 跟 Claude Code Desktop 有什麼不一樣？分別負責什麼？
A：Claude Design 負責「設計這一步」，把你的想法變成可以看見、可以討論的網站畫面；Claude Code Desktop 則負責「把設計變成真正能運作的網站程式碼」，並協助處理部署相關的技術細節。簡單說，Design 解決「長什麼樣子」，Code Desktop 解決「怎麼讓它真的能上線運作」。
Q3：如果一開始不知道自己想要什麼風格，該怎麼辦？
A：可以直接請 Claude Design 一次產出多種風格方向（例如日系生活風、市集活潑風、品牌成熟風）讓你比較。這個方法特別適合不擅長把感覺講清楚的人，因為比較「我喜歡哪一個」會比憑空描述風格容易很多。
Q4：這個方法適合做哪些類型的網站？有沒有不適合的情況？
A：適合小型、單一目的的網站，例如活動報名頁、課程介紹頁、個人作品集、店家形象頁，或是用來快速驗證想法的 MVP。但如果是大型電商、會員系統、金流串接、複雜的後台權限管理，這類專案仍建議交由專業工程團隊規劃，因為涉及更嚴謹的測試與資安考量。
Q5：跟 AI 溝通需求時，要怎麼描述才容易得到想要的結果？
A：避免只說「幫我做一個網站」這種太籠統的指令。建議具體說明：這個網站是給誰看的、使用者看完之後希望他做什麼動作、網站想帶給人的感覺、以及網站上一定要出現哪些資訊。描述越具體，AI 產出的結果就會越接近真正的需求。
Q6：把網站部署到 Netlify 會產生費用嗎？
A：Netlify 提供免費方案，一般小型活動頁或個人作品集完全夠用，不需要付費。免費方案已包含自動產生公開網址、表單收集功能、基本流量額度，對於用來辦一次性活動報名或展示用途的網站來說，幾乎不會遇到任何限制。如果未來網站流量很大、或需要自訂網域、進階表單處理等功能，才需要考慮升級付費方案。
想做的不只是網站？讓 AI 成為你的設計與技術夥伴
如果這篇文章讓你開始對「用 AI 做設計」、「用 AI 做網站」產生興趣，這正是接下來最值得投資的能力。AI 工具會持續進化，但能不能精準下指令、能不能判斷產出好不好、能不能把多個工具串起來完成一個完整專案，這些是需要系統性學習的。
想更有系統地掌握 AI 視覺設計與實戰應用，歡迎了解巨匠電腦的
商業視覺設計與
網站視覺設計，讓 AI 與專業技能一起成為你的助力。
關於作者【知行墨序】
在軟體架構、著作、演講與培訓等多重身分之間移動，長期站在技術、知識與人的交界處，觀察系統如何被設計，如何改變流程、判斷與溝通方式。 面對複雜事物，習慣把混雜的線索拆開，找出可被理解、可被重組、也可被傳遞的脈絡，再用相對簡單的方式重新說明。文字裡帶著實務現場的痕跡， 這樣的整理不只來自技術理解，也來自長時間在實務現場、教學現場與交流過程中的反覆推敲。
免費學習資源不漏接
分享至 :
