【2026 最新】Claude Design 到 Claude Code：網站設計核准、交接與桌機手機驗收教學

你在 Claude Design 做出一頁喜歡的網站，點頭核准後交給 Claude Code；成品卻變成另一套字體、卡片間距和手機排版。Claude Design 到 Claude Code 的問題，通常不是「再生成一次」就會好，而是核准時沒有留下能比對的規格。

這篇寫給第一次做網站、也不會寫程式的讀者。我們用一頁虛構的咖啡訂閱網站，走完設計簡報、核准、官方交接、桌機與手機截圖、差異修正和第二輪驗收。你可以把範例文字換成自己的產品；成果是一個可預覽、可逐項核對的頁面。

先說結論：核准的是可檢查的畫面

一句話記住：網站交接＝核准稿＋設計決策清單＋實作版本＋同尺寸截圖驗收。把它想成裝潢：設計稿是樣品屋，核准清單是尺寸與材料單，Claude Code 是施工者；驗收要量實際房間，不能只問「感覺像不像」。

Claude Design 適合做可互動的視覺原型；Claude Code 會接手實作與修改程式。Anthropic 的 Claude Design 官方入門說明說明目前可以從聊天或 Artifacts 的 Design 範本開始，也可以使用獨立的 Claude Design；官方的 Claude Academy 的原型交接教學明列「Export → Hand off to Claude Code」路徑。以下按2026 年 9 月 29 日查到的介面與說明寫，實際畫面以你登入的工作區為準。

Claude Design 到 Claude Code 為什麼要先核准？

如果只說「做得更高級」，兩個人對高級的想像可能完全不同。你想要大留白、襯線標題和暖白底；實作者可能交出深色漸層與三排卡片。把視覺選擇寫成清單後，每次修改都有對照物。

尤其要分開原型與可交付網站：原型用來快速確認文字、結構、互動和視覺方向；實作還得在你的專案裡處理既有元件、內容、導航、手機尺寸與可預覽環境。官方教學也把「設計審查 → 交接 → 工程實作」列為不同步驟。

第 1 步：把一頁網站的需求寫成設計簡報

先挑最小範圍：咖啡訂閱首頁，只有導覽列、主視覺、方案說明、常見問題與訂閱按鈕。不要在第一輪同時要求會員後台、付款和多語系。把以下指令貼進 Claude Design；有品牌字體、色票或參考圖，就一併附上。

請替「晨杯咖啡」設計單頁訂閱網站。讀者是第一次訂閱的人；主要動作是看懂方案並點「查看訂閱方案」。頁面依序包含導覽列、首屏、三個服務重點、方案摘要、FAQ、頁尾。視覺方向：暖白底、深咖啡色文字、鮮明但節制的珊瑚色按鈕；標題清楚，留白充足，避免把每段文字都做成卡片。先給桌機與手機版，顯示真實的繁體中文範例文案。請說明字體、色彩、間距、按鈕與手機版如何調整。

參考圖要標明「借哪一點」：例如借 A 的字級層次、B 的留白、C 的手機導覽，而非要求複製整張圖。如果已有元件庫，依 設計系統設定教學把設計系統接進來；Anthropic 說它可從程式碼、設計檔、簡報與品牌素材建立字體、色彩、元件和版面慣例。

第 2 步：用一頁核准表凍結視覺決策

不要只核准一張漂亮截圖。打開桌機與手機原型，逐項檢查，並把每項狀態寫成「核准／待改／不適用」。以下是能直接複製的核准表：

1. 頁面目標：首屏是否在一句話內說清服務？主按鈕是否指向預期區塊？
2. 字體：標題與內文使用哪種字體、粗細和大致字級？繁體中文會不會擠在一起？
3. 色彩：背景、主文字、按鈕及狀態色各是什麼？文字與背景是否容易辨識？
4. 留白：首屏、段落、卡片與頁尾的間距規則是什麼？哪些內容刻意不包卡片？
5. 手機版：窄螢幕的排列順序、導覽收合、按鈕寬度與圖片裁切是否已看過？
6. 互動與例外：按鈕點了去哪、FAQ 能否展開？文字加長、圖片缺失時畫面怎麼處理？

請 Claude Design 依這份表修稿，然後把核准版本的分享連結或匯出檔、核准日期、桌機與手機截圖放進專案的交接資料夾。官方說明提供分享、下載 ZIP 與 HTML 等匯出選項；若設計會改版，檔名可用 design-approved-v1，避免實作者拿到一份不知何時核准的畫面。這是你的工作流程建議，並非產品的版本歷史功能。

第 3 步：Claude Design 到 Claude Code 官方交接

在 Claude Design 的專案中按 Export，選 Handoff to Claude Code，再依畫面選本機 coding agent 或 Claude Code Web。Claude Academy 的原型交接教學說明本機路徑會提供一個含設計檔、對話與 README 的套件，以及可貼進 coding agent 的交接提示；如果你的介面顯示不同選項，參照 Claude Design 官方入門說明的最新匯出章節。

交接套件帶走脈絡，施工單負責把你的驗收門檻講清楚。把下面的文字與官方交接提示一起交給 Claude Code；專案若已有測試或啟動指令，填上真實指令：

請依已核准的 Claude Design 原型實作「晨杯咖啡」單頁。先讀交接套件的 README、設計決策與現有專案。使用既有元件和樣式慣例；不要自行更換核准的字體、色彩、頁面順序與文案。完成後提供：①可預覽網址或本機啟動步驟；②修改檔案清單；③桌機 1440px 與手機 390px 的截圖；④按鈕、導覽與 FAQ 的操作檢查；⑤與核准稿仍有差異的項目。若原型沒有定義互動或資料來源，先列出假設。

如果你已在 Claude Code 工作，官方說明也列出 /design 匯入設計、/design-sync 同步設計系統的路徑。選一條符合現有專案與帳號的路徑即可；本篇的重點是同一份核准稿和清單要一路跟到驗收。

第 4 步：桌機與手機並排比對，不用「再漂亮一點」

讓 Claude Code 啟動本機預覽，使用瀏覽器開啟成品。把核准稿與實作頁面都固定在桌機 1440px、手機 390px 寬度擷取畫面；高度可以依頁面內容延伸。這兩個寬度是教學範例，真正交付時請另外檢查你的常用裝置。

每一個偏差都寫成位置 → 現況 → 目標 → 驗收方法。例如：「手機版首屏 → 標題變成五行，按鈕掉到首屏之外 → 核准稿是三行且按鈕可見 → 同寬截圖比對」。這比「做精緻一點」更能讓下一輪修改收斂。

第 5 步：先修大偏差，再做第二輪驗收

返工順序先看結構（區塊順序、內容缺漏），再看響應式（手機換行、橫向溢出），再看視覺（字體、色彩、留白、裁切），最後看互動（按鈕、導覽、FAQ）。一次只給一組能驗收的差異，修改後重新截同尺寸畫面。

第二輪請真人操作：按主按鈕、開合 FAQ、點導覽、在手機寬度捲到底，確認沒有文字被遮住或按鈕難以點擊。若網站需要表單或付款，另列資料提交與錯誤情境；不要把「頁面看起來對」當作那些功能已完成的證據。完成後保存核准稿、實作網址與最後一輪截圖，讓下一位接手的人知道交付依據。

常見的 5 個返工坑

1. 只給參考圖：標明借的是字體、留白還是排列，並寫下不借哪些內容。
2. 先寫程式才決定設計：先核准桌機和手機，再交接，減少反覆重做同一區塊。
3. 把匯出當成上線：要求可預覽網址、操作檢查與截圖，分別驗收。
4. 一次喊十種形容詞：把「更專業」翻成具體位置、現況、目標與比對方法。
5. 忽略專案元件：已經有設計系統時，先連結正確的元件目錄，確認原型與實作使用同一套規則。

FAQ：Claude Design 到 Claude Code 的 8 個問題

一定要會寫程式嗎？

不用先會寫程式。你要能描述需求、操作預覽、核對差異；若要部署正式網站，仍需有人處理主機、資料與專案設定。

只有一張參考圖可以開始嗎？

可以。請補上文字需求，並標出參考圖中要借的具體元素；第一輪先生成可討論的草稿。

先用 Claude Design，還是直接在 Claude Code 做？

要先比較視覺方向、請別人核准時，先做可分享的設計原型；已有明確規格與程式專案時，也可從 Claude Code 的設計路徑開始。

核准稿需要幾張截圖？

至少保留桌機與手機各一張；長頁面最好能看到所有主要區塊。更重要的是同一寬度下能和實作版本比對。

可以把設計稿直接當成正式網站嗎？

先檢查你匯出的是原型、HTML，還是已整合到現有專案的實作；再逐項操作按鈕、導航和需要的資料流程。

為什麼 Claude Code 做出來還是不同？

檢查交接套件、設計系統、字體素材和核准清單是否完整，再用同寬截圖找出具體差異。

如果主管核准後又改主意？

把新決定記成下一版清單，標出變更的區塊與原因，再更新設計稿與實作驗收基準。

最先修哪個問題？

先修缺漏或錯序的內容，再修手機破版，最後處理細部色彩與間距；阻斷操作的功能問題應立即處理。

給新手的 4 個重點

• 先核准：把字體、色彩、留白、手機版和互動寫成一頁清單。
• 帶脈絡交接：用官方 Handoff 路徑帶設計檔與決策，再附上施工單。
• 同尺寸比對：桌機與手機各留一組核准稿／成品截圖。
• 修正後複驗：位置、現況、目標、驗收方法都寫清楚，最後親手操作網站。

想先補齊網站視覺觀念，可看 網站設計美感教學；想知道如何把動態效果做進頁面，接著讀 Claude Code 動態網站教學。若你還在選工具，Claude、Claude Code 與 Cowork 比較會幫你辨認各自的工作介面。