我如何用
Claude AI
打造Wordpress網站
從零到上線，UI 設計、首頁、文章系統、更新日誌——全程與 AI 協作完成。這是給有興趣以同樣方式建站的你，一份完整的過程記錄。
從無到有建立
原生輸出
手動寫 CSS
到 WordPress
四步完成一個網站
每個需求，先用自然語言描述給 Claude，它輸出設計稿（HTML/CSS），再轉成 Greenshift blocks，直接透過 REST API 推送上線。
用中文說明想要的頁面設計、風格、功能，無需懂技術
Claude 輸出完整 HTML + CSS + JS，帶動畫與互動效果
自動轉成 Greenshift blocks 格式，WordPress 原生結構
透過 WordPress REST API 推送，秒速上線，無需手動貼上
品牌色彩、字體、
元件系統一次到位
跟 Claude 說「我要橘色系、溫暖的質感、Noto Sans TC 字體」，它就會建立完整的設計語言——主色 #c96442、背景 #faf9f7、按鈕樣式、卡片圓角、動畫曲線，全部一致。
- 主色 / 輔色 / 背景三層色彩系統
- 標題 / 副標題 / 內文字體階層
- 按鈕、卡片、標籤等共用元件
- Hover 動畫與過渡效果統一規範
Hero、服務區塊、
文章列表、CTA 表單
首頁從 isometric 3D SVG 插圖 Hero 到三大服務卡片，再到精選文章、聯繫表單，全部一次描述，Claude 輸出完整頁面結構與動畫。
- 左右對分 Hero + SVG 等角插圖動畫
- Ripple 波動背景效果（純 CSS）
- 3 張服務卡片含 hover 頂部橘線
- CTA 整合真實 Fluent Forms 表單
文章列表的設計
也能很精緻
文章 Archive 不只是列個清單。Claude 設計了可展開的 Accordion 效果、SVG 縮圖動畫、分類標籤系統——讓讀者從第一眼就有想點進去的衝動。
- Hover Accordion 展開預覽文字
- SVG 幾何圖形縮圖（SMIL 動畫）
- 分類標籤 + 閱讀時間標示
- 三欄響應式 Grid（桌機 / 平板 / 手機）
每次修改都有
完整的紀錄可查
每次更新後，Claude 自動把修改內容整理成結構化紀錄，更新到 WordPress 頁面、Notion 資料庫和本地 WORKLOG.md——讓你隨時能追溯每個決策。
- Timeline 時間軸視覺設計
- 自動分類標籤（Bug Fix / UI / Plugin）
- 同步 WordPress + Notion + 本地檔
- Claude 自動撰寫技術描述
不用懂程式，只需要知道自己要什麼。
剩下的，Claude 幫你做。
使用 Claude AI 協作建站，會影響網站的 SEO 或載入效能嗎？
不會。AI 在這裡扮演的是結構生成與邏輯梳理的角色。我們透過提示詞引導 Claude 100% 輸出原生相容於 Greenshift Blocks 的乾淨結構，並嚴格控管 Core Web Vitals 指標。這意味著網頁不僅沒有冗餘的代碼垃圾，還能兼顧極致的秒開速度與純淨的 HTML 語義，對 SEO 非常友善。
什麼是「全意圖驅動」建站？跟傳統手寫程式碼有何不同？
傳統建站需要花費大量時間手寫 CSS 與 JavaScript，並反覆在瀏覽器中調試。而「全意圖驅動」是指由我們（方案人員）精準定義網站的 UI 邏輯、視覺規範與互動行為（意圖），再藉由結構化的提示詞框架讓 Claude AI 進行高效的代碼轉譯。這種模式能將開發週期縮短數倍，且完全不犧牲視覺客製化的細緻度。
利用 AI 協作開發，如何確保網站未來的維護性與自動化升級？
在專案建立之初，我們就將維護性納入考量。每次透過 AI 修改或迭代內容，系統都會自動將優化邏輯統整為結構化的時間軸（Timeline）紀錄，同步更新至更新日誌。搭配自託管的 n8n 自動化工作流與 WordPress REST API，所有雲端變更都能秒級同步，讓網站的每一次升級都高效且完全可追溯。