AI 網頁設計 正在改變傳統網站製作流程。
透過 Claude Design 規劃視覺方向、快速產生互動原型，再搭配 Codex 整理程式碼與專案架構，
網站不必再卡在冗長設計稿階段。
從首頁版面、RWD 測試到 CMS 上線與 AI SEO 優化，
都能更快完成，讓企業網站不只好看，也能持續累積搜尋流量與詢問機會。
用 Claude + Codex 盲切出高質感網頁
附 2026 實戰六步工作流：從視覺定調、互動原型到 CMS 部署，說清楚每個階段怎麼做。
1為什麼不想每個案子都先開 Figma？
這篇是我們實際用 Claude Design、Codex 測試網頁設計流程後整理的經驗。
測試過程涵蓋首頁原型生成、RWD 修正、元件拆分、Codex 專案整理、CMS 後台整合，
以及 AI SEO 成效追蹤流程規劃。
結論是：AI 可以大幅加快原型與切版速度，但網站要能長期維護，
還是需要 CMS 架構、SEO 欄位、人工審核與後續成效追蹤。
傳統網頁設計流程最大的問題，是設計稿和實際網頁之間有落差。
Figma 上看起來很漂亮，進到瀏覽器可能遇到手機版文字擠在一起、
圖片比例跑掉、按鈕距離不自然、客戶看稿時沒感覺、
上線後才說怪的狀況。
設計稿是靜態的，但網站是動態的。
它會被手機打開，會被平板打開，
會被不同瀏覽器打開，還會被 Google 爬蟲讀取。
- 手機版文字擠在一起，平板版走位
- 動畫效果在設計稿上看起來很好，實作成本卻過高
- 設計稿到前端之間，來回修稿耗掉最多時間
- 客戶看靜態稿難以想像實際操作感受
- Figma 是靜態的，網站是動態的、會被不同裝置打開的
能不能一開始就直接在瀏覽器裡設計？
真正的網站不是 Figma 檔，而是 HTML、CSS、CMS、SEO 標記、載入速度和轉換流程。
2三個工具，各司其職
這套工作流把原本分開的「設計」和「前端」壓縮在同一個流程裡，
靠三個工具各自扮演不同角色。
確定品牌調性、色系、首頁的視覺方向，讓後續所有元件有共同依據。
直接在右側視窗生出可互動的 React / HTML 原型，省掉傳統設計稿階段。
把 Claude 做好的元件整理成能維護、能上線、能擴充的正式專案架構。
3Phase 1 — 用 Claude Design 定視覺方向
AI 做網站最怕只說「幫我做一個高質感網站」。
這種提示詞通常生出很普通的畫面，不是藍色科技感，就是白底卡片加圓角，每個網站都長得像 SaaS 模板。
第一步是先讓Claude Design理解品牌調性。需要給的資訊包括：
- 1品牌服務項目與市場定位
- 2目標客群（職稱、產業、主要痛點）
- 3希望給訪客的視覺感受
- 4主色系與明確禁用風格
- 5首頁必要的版面區塊
- 6手機版優先還是桌機版優先
先打開 Claude Design，依照您的目的先選擇以下選項，
Wireframe（線框稿） 只有灰色方塊、線條、佔位符，沒有顏色、字型、圖片。重點是版面結構——這個區塊放哪、按鈕在哪、資訊層級怎麼排。適合還在討論「哪些東西要放、放哪裡」的階段。
High fidelity（高擬真稿） 有真實顏色、字型、圖片、間距、陰影，視覺上接近最終網站的樣子。適合要跟客戶確認視覺方向、或直接交給前端參考切版的階段。
我先選擇High fidelity（藍框選中），所以 Claude Design 產出的會是有視覺質感的原型，不是灰色線框。
例如，與其寫「幫我做一個電商首頁」，改成這樣會準確很多：
幫我做首頁 生活風格品牌 × 精品選品 × 溫柔公益感 不是強促銷、不是滿版商品，而是像「有溫度的生活選物品牌」。
版面方向 首頁要有一個很明確的品牌氣質： 大圖、留白、柔色、短文案、少量 CTA。
可以像這樣： For Love, Life and Gentle Beauty 把美好的日常，
變成可以被分享、被感受、被收藏的生活選品。
按鈕可以放： 探索品牌故事
瀏覽精選商品
hero banner 不要一開始就塞滿商品，不然會變成普通購物網站。
我希望先建立「品牌感」，再帶到產品。
視覺風格建議 可以用這組感覺： 米白底＋奶茶色＋淡玫瑰粉＋深咖啡文字。
真正能成交的網站，要讓訪客在 5 秒內知道你是誰、你能解決什麼問題、你跟別人差在哪、以及怎麼聯絡你。
4Phase 2 — 用 Artifacts 做組件盲切
Claude Artifacts 最好用的地方，是它可以直接在右側視窗生出可互動的網頁原型。
以前要先想畫面、請設計師畫、再請前端切，現在可以直接對 Claude 說需求，
它就會吐出 React + Tailwind CSS 的畫面。
不要一次生整頁，逐一確認每個區塊
AI 第一次生出來的畫面通常有幾個固定問題：
間距太平均像模板、手機版容易擠在一起、標題很有 AI 腔調、每個區塊高度相同看起來無聊。
所以逐一處理比較有效率：先做 Hero，確認後再做服務區塊，然後案例、FAQ、CTA。
電商首頁初稿
對話才是真正的工作
AI 給出第一版之後，用具體的語言追加指令：
這個畫面太像一般 SaaS 模板，請把 Hero 區塊改得更像電商的服務入口，
不要放太多抽象圖示，右側可以改成網站後台、自動化流程、AI 客服訊息三個畫面堆疊。
手機版標題太長，請改成兩段式，CTA 按鈕改成上下排列，卡片區塊不要左右滑動，改成直向堆疊。
5Phase 3 — 把原型交給 Codex 整理成正式專案
Claude 很適合做原型，但如果要變成真正能維護、能上線、能擴充的網站，就不能停在 Artifacts 裡。
這時候把 Claude 做好的元件交給 Codex，請它整理成正式專案架構。
- 整理 src/pages，拆出獨立 components
- 集中管理 CSS，移除多餘程式碼
- 檢查 RWD，確認手機版無誤
- 補上 SEO meta 與語意化 HTML 結構
- 整理圖片路徑，準備部署結構
AI 做出來的首頁有時視覺很好，但檔案可能超過 10MB，
把 CSS、字型、圖片、動畫全部塞在同一個 HTML 裡。
一次叫 Codex 做完整站容易做得很亂，改用分階段指令效果好很多：
首頁 → 元件拆分 → RWD 處理 → 內頁模板 → 正式內容填入。
AI 可以協助產出原型、文章草稿與 SEO 建議，
但不建議直接全自動發布。
正式上線前仍要檢查品牌語氣、資料正確性、RWD、圖片授權、SEO 欄位、Schema 結構與 CTA 轉換路徑。
AI 負責加速，人負責判斷。
PDF — 每頁輸出成一張，適合印出來或傳給客戶看靜態版本。
PowerPoint .pptx ：可以在 PowerPoint 或 Keynote 裡繼續編輯，適合做提案簡報。
Project archive .zip：把整個專案的所有檔案打包下載，適合備份或移交。
Standalone HTML：輸出成單一 HTML 檔，離線也能在瀏覽器開啟，不需要連網。
對我的工作流來說，
這個 Standalone HTML 是最直接有用的匯出格式：
Claude Design 做好視覺方向之後，直接匯出 HTML，
就可以交給 Codex 整理。
實測後的流程差異
先畫設計稿，再進入切版，客戶通常要等設計稿完成後才看到完整方向。
優點是設計控制細，缺點是前期溝通時間較長。
先用 Claude 產出可互動原型，邊看邊修版面，再交給 Codex 整理成正式專案。
優點是方向確認快，缺點是仍需要人工整理結構。
首頁、Landing Page、服務頁適合 AI 加速；
大型後台、完整設計系統、複雜 UX 流程仍建議搭配 Figma 或完整 wireframe。
在需求明確的企業官網首頁中，AI 原型流程可以把第一版視覺方向從原本約 7 天，縮短到 5 天內看到可互動雛形。
但後續仍需要人工做 RWD、SEO、程式碼結構與 CMS 串接整理。
5Codex 如何作業：
完成後，Codex 就能讀取整個專案內容，包括 index.html、圖片資料夾、樣式、內嵌模板與相關素材。
實作紀錄：把 HTML 丟進 Codex，讓 AI 直接接手修改網頁
這次實測的專案是電商品牌網站，主要修改檔案為：
- index.html
- image/ 圖片素材資料夾
首頁 Banner 調整
首頁 Banner 是第一個修改重點。
我們放上輪播圖片，並針對文字區加上柔白半透明底、淡陰影與霧面效果，讓品牌文字在大圖上更清楚。
原本文字會超出白底範圍，也一併修正。
後來又把柔白半透明底高度調整為與 Banner 同高，讓桌機版看起來更完整。
手機版也另外補上 Banner 文字區樣式，避免文字擠出容器。
品牌文字與主視覺文案
品牌主標改成更符合品牌調性的文字：
品牌說明也改成與空間、香氣、保養與生活美學相關的文案，
不再只是一般形象網站常見的空泛介紹。
品牌精神標題則調整為：
- 愛、生活、與歡笑
這一段的重點，是讓網站有品牌記憶點。
開場動畫
這次也新增了開場動畫。
使用 Italiana 字體，整體視覺從原本較重的圓形背景，
改成白底、細線框、中央金色細線、淡入淡出與字距動畫。
這樣畫面會比較乾淨，也更符合香氛、生活美學品牌的氣質。
商品區改版
商品區標題改為：
/ 購物饗宴 /
標語改為：
- 用購物犒賞自己
- 用香氛與自己對話
商品圖片改為 精油、巧克力、擴香石、索拉花與禮盒相關描述。
修改過程中也修正了商品圖片層級問題，避免圖片被裝飾圖層遮住。
這個問題在 AI 生成的頁面裡滿常見的，畫面看起來有設計感，
但實際上圖層順序可能會壓到內容，所以還是要人工檢查。
的馨香
Journal 區塊改成固定背景照片，
背景遮罩使用 #F6EFE6，並多次調整遮罩比例，最後提高到 80%，
讓文字在背景照片上仍然清楚可讀。
標題改為：
香氣與靈感沙龍
其中 香氣 與 靈感沙龍 套用品牌色 #9f6f68。
文章區也加上柔白底與淡陰影，讓整體更像品牌專欄，而不是單純文章列表。
三篇文章改為：
- 精油講座：情人節巧克力品鑑
- 推薦分享：來自伊甸園 Formosa 水果系列巧克力
- 活動花絮：新療癒系的禮物
會員活動區
原本的區塊改成會員活動與 LINE 會員專屬選品。
這裡也有調整圖片大小，避免圖片在部分版面寬度下壓到文字。
訂閱區與聯絡錨點
原本的 Stay in Touch 與季節情書訂閱區已刪除，相關 newsletter 樣式也一起清除。
同時將 聯絡我們 錨點改到 footer，避免選單點擊後找不到對應位置。
這種小地方很容易被忽略，但實際上會影響網站操作體驗。
Footer 與社群連結
Footer 公司資訊改為正式資料
社群連結也更新
這次修正的技術問題
除了畫面與文案，這次也處理了幾個技術問題。
包含修正 [bundle] error、移除損壞的 bundled 預覽 SVG、清除殘留缺圖路徑，
並檢查所有 image/... 引用，確認沒有缺圖。
另外也多次確認 embedded template 可以正常 JSON.parse，
並檢查內嵌模板中沒有未跳脫的 ，避免造成解析錯誤。
這也是把 AI 生成 HTML 丟進 Codex 後最需要注意的地方。
AI 產出的頁面有時畫面看起來正常，
但內部可能藏著 bundle、template、JSON parse 或路徑問題。
這些如果沒有檢查，上線後就可能出現預覽失敗、圖片不見或整頁壞掉的狀況。
目前狀態
目前主要頁面為 index.html。
整體風格已調整為白底、柔色、大圖、留白、短文案與少量 CTA 的品牌形象網站。
Banner、Journal、商品、會員活動與 Footer 都已依目前需求完成調整。
這次實作也再次證明一件事：
Codex 很適合接手「已經有初版 HTML」的網站修改工作。
只要資料夾結構清楚、圖片放好、檔案命名穩定，它就能快速理解專案內容，協助修改版面、整理樣式、排查錯誤。
但最終還是需要人來判斷品牌方向、文案是否正確、畫面是否符合客戶氣質，以及技術問題是否真的修乾淨。
AI 可以加速，但不能完全放著不管。
真正有效的流程，是讓 Claude 或其他 AI 工具先產生視覺原型，
再把 HTML 放進 Codex 做工程整理，最後由人負責檢查、修正與上線判斷。
這是我目前比較穩定的 AI 網頁設計工作流。
首頁完成初稿
6最適合這套流程的案子
這套流程不是要取代所有設計流程。大型系統、複雜後台、品牌識別要求高的案子，Figma 還是有它的位置。
但以下這幾類案子，AI 直出原型的效率會快很多：
- 企業官網首頁
- 產品介紹頁與服務 Landing Page
- SEO 文章頁批量模板
- AI 工具展示頁
- 活動頁、限時推廣頁
- 客戶提案 Demo（快速做出 2-3 個方向讓客戶選）
- 後台系統初版介面
這套流程對客戶還沒有明確想法的情境特別好用。
以前客戶說「我想要高級一點、科技感一點、不要太死板」，這種需求很難直接報設計方向。
現在可以很快做出偏科技感、偏品牌形象、偏業務轉換三個版本，
讓客戶直接看畫面選方向，比口頭討論快很多。
適合這套流程的客戶
- 想快速看到網站方向，不想卡在長時間設計稿確認
- 需要企業官網、服務頁、Landing Page 或 SEO 文章模板
- 希望網站後續可以接 CMS、SEO、AI 客服與自動化流程
- 重視上線速度，也願意保留人工審核品質
不適合這套流程的情況
- 品牌識別尚未確定，Logo、色系、字體都還沒方向
- 需要非常細緻的設計系統與多人協作規範
- 大型後台系統，需要完整 UX 流程與權限盤點
- 期待 AI 一次自動完成全站，不想參與確認與修正
7這套流程的限制，要說清楚
首頁模式多，AI 有足夠的參考依據。產品規格頁、案例頁的資訊架構，還是要人先整理好再給 AI 排版，不然 AI 只是把混亂的資料用比較漂亮的方式呈現出來。
AI 容易做出「看起來很會設計」但沒有商業邏輯的畫面。CTA 位置、成交路徑、哪個資訊該被最先看到，這些還是需要人判斷。
一次叫它做完整站容易亂。AI 指令越清楚越像工程師，越模糊越像熱心但迷路的實習生。分五個階段推進效果最好。
8上線後：AI SEO 與自動化流程
網站做完，如果只是放在那邊，其實很可惜。
2026 年的企業官網不應該只是線上型錄，
它應該要能持續新增內容、做 SEO 結構化資料、串接 AI 客服、追蹤使用者行為，
還能自動產出文章草稿。
搭配 CMS 架構，可以做到的事包括：
- 1AI 協助分析關鍵字，找出高意圖目標詞
- 2AI 產出文章初稿，系統自動整理 Meta Title 與 Description
- 3圖片自動補 Alt，JSON-LD Schema 自動補齊
- 4文章自動分類，發布後追蹤 GSC 成效
- 5表現下降的頁面回頭補強，形成持續優化循環
CMS 的優勢是它適合做比較有系統性的長期網站，
多語系、權限控管、文章分類、選單結構、模組位置、會員功能，
這些都比一般純靜態網站更適合企業長期經營。
92026 完整六步工作流
把客戶產業、服務項目、目標客群、網站目的、參考網站、痛點全部丟進 Claude，整理成網站架構。這一步是釐清方向，不是設計。
確認首頁調性、色系、區塊感、按鈕風格、卡片樣式。先不要急著做完整網站，把視覺方向定下來再動手。
先做 Hero，確認後再做服務區塊、案例區塊、FAQ、CTA。每個區塊確認後再往下，不要一次生整頁。
拆元件、整理 CSS、處理 RWD、補 SEO 標記、清掉多餘程式碼，讓原型變成可維護的網站結構。
評估要用 Joomla、WordPress 還是 Astro，重點是後續好不好維護。不是每個網站都用同一套。
上線後才是真正開始。內容更新、SEO 追蹤、AI 客服、表單轉換、自動通知，這些讓網站變成獲客工具。
10常見問題 FAQ
2026/06 初版：整理 Claude Design、Artifacts、Codex 與 CMS 的 AI 網頁設計流程。
後續若 Claude、Codex、CMS 或 AI SEO 工具流程有明顯變動，本文會持續更新實測結果。
Q 這套流程需要會寫程式嗎？
不需要從頭寫，但要能看懂 AI 產出的 HTML/CSS 結構，知道哪裡需要修改。最關鍵的能力是「怎麼給 AI 精確的指令」，而不是手寫程式碼。
Q Figma 完全不需要了嗎？
大型系統、複雜後台、品牌識別要求高的案子，Figma 還是有它的位置。這套流程主要適合企業官網、服務頁、Landing Page 這類有明確商業目的的單次性案子。
Q AI 生出來的網頁 SEO 效果怎麼樣？
AI 生的原型通常缺乏語意化 HTML、Schema 標記和適當的 Meta 設定，需要 Codex 補齊，或在導入 CMS 時另外處理。原型只是起點，不是 SEO 就緒的成品。
Q 益盛科技提供這套流程的建站服務嗎？
有提供。我們提供從需求整理、視覺方向確認、AI 原型建立，到 Joomla CMS 整合與後續 SEO 優化的完整服務。可以透過下方聯絡方式取得報價。
Q Claude Design 和 Codex 差在哪？
Claude Design 是獨立的視覺設計工具，適合用來建立版面結構、高擬真視覺稿與設計系統，做好後可以匯出 Standalone HTML 交給後續流程；claude.ai 對話中的 Artifacts 功能則可以直接生成可互動的 HTML / React 原型，邊看邊修；Codex 負責專案結構整理、元件拆分、RWD 修正與部署前檢查。
Q 這套 AI 網頁設計流程適合 Joomla CMS 嗎？
適合。AI 可以先協助產生前端原型與頁面結構，再由工程端整理成 Joomla 可維護的版型、模組或文章內容。Joomla 適合長期管理企業網站、多語系內容、分類文章、權限與後台維護流程。
Q AI 做出來的網站可以直接上線嗎？
不建議直接上線。AI 產出的畫面通常可以當第一版原型，但正式上線前仍要檢查 RWD、瀏覽器相容性、SEO 欄位、圖片壓縮、語意化 HTML、表單安全性、載入速度與後台維護方式。
Q AI 網頁設計會不會讓網站都長得很像？
會，如果提示詞只寫「高質感、科技感、現代風」，AI 很容易產生類似 SaaS 模板的畫面。要避免這個問題，必須提供品牌定位、產業特色、客戶痛點、禁用風格、參考案例與實際內容，讓 AI 不是憑空套模板。
Q AI 網頁設計流程和傳統網頁設計差在哪？
傳統流程通常是先畫設計稿，再交給前端切版；AI 流程則是先快速產出可互動原型，邊看邊修，再整理成正式專案。差異在於 AI 流程能更早看到瀏覽器中的實際效果，但也更需要後續工程整理。
Q AI SEO 自動化網站是什麼？
AI SEO 自動化網站不是只用 AI 寫文章，而是把網站內容管理、SEO 欄位、成效追蹤、文章草稿、Schema 結構化資料與詢問轉換流程串起來。目標是讓網站能持續更新、追蹤成效，並依照數據調整內容。
Q 網站上線後，AI SEO 可以自動做哪些事？
可以協助整理關鍵字、產出文章草稿、產生 Meta Title 與 Description、補圖片 Alt、建立 FAQ 草稿、追蹤 Google Search Console 成效、找出曝光下降頁面，並提出內容優化建議。但正式發布前仍建議人工審核。
Q 什麼情況不適合用 AI 盲切網頁？
如果品牌識別還沒確定、後台流程很複雜、需要大量使用者訪談、或有嚴格的設計系統規範，就不建議完全依賴 AI 盲切。這類案子可以用 AI 做初步探索，但正式規劃仍需要完整 UX、UI 與系統分析流程。
11本文經驗來源與撰寫說明
本文由益盛科技網站建置團隊依照實際 AI 網頁設計測試流程整理，內容涵蓋 Claude Design、Claude Artifacts、Codex、Joomla CMS、AI SEO 與自動化網站流程。
文章中的工作流不是單一工具介紹，而是從網站專案實作、客戶提案、前端原型整理與 CMS 上線經驗中歸納出來的操作方式。
- 實作範圍：企業官網、服務頁、Landing Page、SEO 文章模板
- 技術範圍：HTML、CSS、RWD、Joomla CMS、SEO Meta、JSON-LD Schema
- 應用範圍：AI 原型生成、Codex 專案整理、AI SEO 成效追蹤、自動化內容流程
- 審核方式：AI 產出內容皆經人工檢查版面、語意、SEO 欄位與商業轉換路徑
相關服務頁面： AI SEO 自動化網站 | AI SEO |
