近幾個月 AI 工具迎來爆發式的成長，網頁開發的流程也產生了根本性的改變。這篇文章我想和大家分享，我近期實測非常順手的一套網頁開發工作流：從 Claude 的概念設計，到 Claude Code 生成程式碼，最後無縫銜接至 WordPress 搭配 Greenshift 組裝上線。
這套流程最厲害的地方在於「各司其職」——它把複雜的程式開發、排版與動畫拆解開來，即使不精通前端語法，也能高效做出生產環境級別的精美網頁。
三大核心階段實戰解析
第一階段：用 Claude 搞定網頁設計與內容架構
在這個階段，Claude 扮演的是你的專案設計師。你完全不需要動手寫任何一行 code，只要用日常對話的「自然語言」，把你的想法具體告訴它。
- 明確頁面需求：把網頁的目的、區塊結構（例如：Header、服務優勢、客戶證言、Call to Action 等）詳細列給 Claude。
- 生成 Mockup 視覺草稿：請 Claude 直接輸出 HTML 格式的線框圖（Wireframe）或視覺草稿，並透過內建的 Artifacts 功能直接預覽效果。
- 打磨細節與文案：針對色彩調性、文字內容與區塊順序進行微調，直到整體視覺與架構符合預期。
本階段目標：確立清晰的設計方向、視覺風格與網頁內容架構。
第二階段：用 Claude Code 將設計轉化為精準程式碼
設計稿定案後，接下來交給更擅長工程實作的 Claude Code。這個階段的關鍵，在於「如何下對開發指令（Prompt）」，讓產出的程式碼能完美適應 WordPress 環境。
在請 Claude Code 寫 Code 時，有幾個實務小撇步：
- 明確指定目標環境：主動告知這段 Code 是要跑在
WordPress + Greenshift架構下。 - 遵循 Greenshift 的規範：要求它使用 Greenshift 的 CSS 命名慣例、設計 Token 或 CSS 變數，這樣後續進了編輯器才好維護。
- 輸出乾淨的模組：請它將 HTML、CSS 和必備的 JavaScript 整理成結構乾淨、方便複製的格式，確保能完美貼入
Custom HTML Block。
本階段目標：產出高相容性、無衝突且可以直接嵌入 WordPress 的乾淨程式碼區塊。
第三階段：在 WordPress + Greenshift 快速組裝與上線
最後一步，就是回到我們熟悉的 WordPress 後台，將 AI 準備好的材料進行實地組裝。
- 程式碼嵌入：將第二階段拿到的程式碼，直接貼進 Greenshift 的
Custom HTML Block或相關的進階區塊中。 - 區塊微調與響應式優化：利用 Greenshift 編輯器直覺的 UI，調整間距（Spacing）、字型（Typography），並切換到平板與手機模式檢查 RWD 響應式佈局。
- 動態效果加分：這步是 Greenshift 的強項。你可以直接套用內建的滾動顯示（Scroll Reveal）或視差滾動（Parallax），讓原本靜態的頁面瞬間活起來。
- 測試與發布：最後做好行動裝置的相容性測試、確認 SEO 欄位與頁面載入效能，就能正式發布上線了！
結語：持續迭代的現代網頁工作流
這套 Claude → Claude Code → WordPress Greenshift 的工作流程並非單向的，它最棒的地方在於可以「隨時往回修正」。如果上線後發現某個區塊想微調，隨時可以帶著想法回到第一或第二階段，請 AI 幫忙修改再貼回 WordPress。
這種開發模式不僅大幅縮短了從「想法」到「上線」的時間，也讓個人開發者或小型團隊，能用極低的成本做出大廠等級的網頁質感。推薦大家也試試看這套流暢的工作流！