用Claude做網頁設計？別再叫它「AI工具」——它已經是你的設計總監
你有沒有過這種經驗：對著ChatGPT或任何AI生成工具說「幫我做一個登入頁」，結果它吐出一坨藍色漸層、圓角卡片、置中按鈕的「AI樣板臉」網頁？你看著那個成品，心底湧上一股熟悉又厭煩的情緒——「算了，反正AI就是做不出有質感的東西。」
這是2023年到2024年之間，多數人對AI生成網頁的真實感受。但如果你看過AI LABS頻道這支18分鐘的影片《How To Use Claude Design To Build Beautiful Sites》，你會發現一個反直覺的事：問題早已不在AI的能力，而在你問AI的方式。
這篇文章不是要教你「怎麼下提示詞」，而是要拆解為什麼這支影片所展示的Claude工作流，會讓「AI做出來的網站」從「堪用但很醜」一舉跳到「直接可以丟給客戶驗收」的等級。而且我會把話說得更直白一點：這已經不是一個「工具升級」的故事，而是一場關於「美感如何被量產」的權力轉移。
重點一：Claude不是生成器，而是「意圖翻譯機」
先說一個很多人搞錯的觀念。ChatGPT、Gemini、Claude這些模型被歸類為「生成式AI」，但用在網頁設計上，「生成」這兩個字其實是嚴重的誤導。
當你對AI說「做一個餐廳官網」，你腦中想的是那個米其林一星餐廳的暗色質感、襯線字體、大圖留白；但AI聽到的只是五個字。於是它用平均值的邏輯，把過去看過幾百萬個餐廳網站的特徵全部濃縮，吐出一鍋平庸的大雜燴。你不是不會下指令，你是把一個需要「設計Brief」的專案，壓縮成了一句路邊點餐的對話。
這支影片最關鍵的示範，在於Claude如何從對話中反向重構你的意圖。你要做的不是告訴它「做一個網站」，而是告訴它「這個網站要給誰看、看完之後希望訪客做什麼、目前的品牌調性是什麼」。Claude會把這些條件轉換成一個可執行的「設計策略」——包含字體選擇、色彩對比、留白比例、甚至互動行為的節奏感。
這背後的差異在於：你在跟一個能理解「設計語彙」的系統對話，而不是在跟一個HTML樣板產生器對話。
Claude在2024年推出3.5 Sonnet時，程式碼能力已經顯著提升；而到了2025年至2026年的現在，這類模型已經能理解像「視覺層級」（visual hierarchy）、「字重對比」（typographic contrast）、「呼吸感」（breathing room）這些抽象概念。這代表你可以用設計師之間的語言跟它溝通，它給回的不是工程師的邏輯，而是設計師的成品。
重點二：讓它「看圖」，不要讓它「猜」——參考圖的魔力
整支影片中，最讓我眼睛一亮的一段，是主持人上傳了一張參考圖片，然後對Claude說：「我要這個的排版結構，但風格改成北歐極簡。」
它做到了。而這件事，在2024年以前是不敢想像的。
過去你用AI做網站，唯一的溝通管道是文字。你得費盡千辛萬苦描述「左邊是選單、右邊是圖片、圖片下面有一行小字……」，AI理解你的文字，但永遠無法理解你心中那個「高級感」。現在不一樣了——Claude可以接收圖片，辨識出網頁的柵格系統、色彩比例、元件間距，然後把這些視覺特徵抽取出來，套到你指定的新風格上。
這意味著什麼？意味著你不需要再當「翻譯者」，只需要當「策展人」。
你不需要懂CSS，甚至不需要知道「柵格系統」這個名詞。你只需要在Pinterest或Behance上找到一個你喜歡的網站，截圖丟給Claude，說「用這個感覺，把我的文案放進去」。它會自動判讀出這張圖的排版邏輯，然後生成一個具有同樣視覺節奏的新頁面。
這個能力的殺傷力在於：它打破了設計行業最原始的一道門檻——「把腦中的畫面變成實際畫面」所需要的技術力。 以前這道門檻需要兩到三年的CSS切版經驗，現在變成一個檔案上傳的動作。
重點三：Artifacts讓「對話式設計」變成真實工作流
技術底子好的人可能會說：「AI生成HTML早就有了，V0、Bolt、Webflow AI哪個不行？」沒錯，但Claude的關鍵優勢，不在於生成程式碼，而在於即時可預覽的Artifacts介面。
Anthropic在2024年底推出的Artifacts功能，讓Claude不僅能生成程式碼，還能直接在對話框旁渲染出一個可互動的網頁預覽。這不只是方便，它從根本改變了「設計邊做邊改」的節奏。
你可以在同一個對話視窗裡，對Claude說「標題往左移一點」、「背景色深一階」、「按鈕改成圓角但不要太多」——每一次修改，預覽畫面會立即更新。整個過程就像是跟一位坐在你旁邊的設計師討論，而且這位設計師不覺得你煩、不會翻白眼、執行速度是0.5秒。
這讓整個設計流程從「線性瀑布式」變成「來回對話式」。以前做一個首頁，設計師出圖、工程師切版、客戶反饋、再改版——七天跑不掉。現在你跟Claude在同一個下午來回30次修改，做到第五版的時候，它甚至會提醒你：「這版本的字級與間距和前面某一版比較統一，是否要採用目前的設計系統路徑？」
它幫你記住設計決策的脈絡，而這正是人類設計流程中最常被忽略的成本。
重點四：它不只在做頁面——它在建構「設計系統」
一般AI生成網站給人的廉價感，來自於一個致命的缺陷：不一致。區塊A用了圓角風格，區塊B卻出現尖角；顏色一下偏藍、一下偏綠；按鈕的hover效果在首頁有，在內頁卻消失。這就像一個樂團每個樂手都很會彈，但沒人看指揮——出來的東西永遠是雜訊。
Claude在處理這個問題上的方式，是它最接近「設計總監」的地方。影片中的示範顯示，Claude在生成頁面時，會自動建立一整套設計系統的基礎——CSS變數、色彩色票、字體比例尺、間距單位。它不只給你一個頁面，它給你一套可以延展、維護、套用到全站的設計規範。
這背後的意義需要仔細咀嚼：AI已經開始自己管理「一致性」與「可擴展性」，而這兩件事情，是人類設計工作中最耗時、最瑣碎、也最難以傳授的部分。
設計系統之所以珍貴，是因為它代表品味可以被制度化。以前一個新設計師加入公司，得花三個月搞懂品牌的字級、顏色、間距規則；現在Claude可以在一次對話中生成完整的design tokens，甚至自動幫你歸類出哪一種色彩對比符合WCAG無障礙標準、哪一種字級組合在什麼螢幕寬度下會破版。
換句話說，它不只是設計師，還兼任了設計規範的工程化推行者。這讓「美感」不再依賴某一個人的天賦，而是變成一套可複製、可驗證的流程。
重點五：你的工作不再是「做」網站，而是「判斷」網站
講到這裡，你可能開始焦慮：如果AI什麼都會做，那我這個設計師、工程師、接案者，到底還有什麼價值？
答案是：你成為那個「品味把關者」。
影片中有一個細節非常耐人尋味。主持人展示了好幾次Claude生成的成果——每一次都不是一次到位，而是透過不斷的對話調整才達到理想狀態。但關鍵在於：調整的方向，必須由人類提出。
Claude可以做出十種不同風格的按鈕，但它無法判斷哪一種風格最符合你的品牌個性；它可以生成三段不同的首頁文案，但它不知道你的客戶看到哪一段最容易產生共鳴。這個「判斷力」——也就是品味——就是未來科技工作者最重要的稀缺資源。
反直覺的事情來了：真正不懂設計的人，用Claude還是做不出好網站。 因為他無法辨識AI給出的結果是「好」還是「平庸」。他會看著第一個版本說「看起來不錯」，然後就直接收工。但懂設計的人會說：「第三種字體組合比較適合這個品牌，但顏色要再降低一個飽和度，間距放大到120%。」然後AI照做，成品才真正出色。
所以，這支影片真正在教的，不是怎麼用Claude；它在示範**「如何用AI把設計師的美感放大十倍」**。
核心比較：傳統設計流程 vs. Claude輔助流程
| 比較項目 | 傳統網頁設計流程 | Claude輔助設計流程 | 勝出方 |
|---|---|---|---|
| 溝通方式 | 文字Brief、來回會議、需樣板圖輔助 | 自然語言＋參考圖片上傳，AI自動理解視覺意向 | Claude流程大幅縮短溝通成本 |
| 初次提案時間 | 設計師需3-5天出圖 | 10分鐘內生成可互動預覽 | Claude流程以小時計 |
| 修改迭代成本 | 每輪修改需重新協調設計與工程 | 對話中即時調整，0.5秒更新預覽 | Claude流程幾乎零成本 |
| 設計一致性 | 依賴人力維護，容易隨時間失焦 | AI自動建立CSS變數與design tokens，跨頁面統一 | Claude流程更容易維持長期品質 |
| 對專業能力的要求 | 需要完整設計與前端技能 | 需要品味判斷力與精準的指令表述 | 傳統流程門檻較高，但Claude流程改變了技能組合 |
| 最終品質上限 | 取決於設計師才華與經驗 | 取決於使用者的審美判斷力 | 高品味使用者的Claude流程品質極高 |
結語：這世界不缺「會做網站」的人，缺的是「知道什麼是美」的人
回到這支影片的標題——「How To Use Claude Design To Build Beautiful Sites」。真正的重點不在「Beautiful Sites」，而在「How To Use」。工具的門檻正在急速歸零，但使用的智慧才剛剛開始被定價。
如果你現在開始練習用Claude做設計，你把每一次對話都當成在訓練一個沒有脾氣、效率極高的實習設計師，你會很快意識到：你的產出速度不再是你能力的上限，你的眼光才是。
未來的兩到三年，我們會看到大量「AI設計顧問」這個新職業誕生。他們不一定要會寫程式，但他們一定要對「什麼是好設計」有極其敏銳的直覺；他們不一定熟悉Figma或Sketch，但他們一定知道如何用一張參考圖、三句話、五次迭代，讓AI產出一個月前需要整個團隊花兩週才能完成的網站。
留給你一個問題：當AI可以瞬間生成一百個設計方案時，你的品味，經得起這一場與機器的比較嗎？