Design / UX / Frontendthreads
Codex＋Claude 企業官網設計流程：從 IA、Wireframe 到 Code Component Library
拆解 enterprise product designer 用 Codex／Claude 完成官網改版的實戰：先整理 IA 與競品邏輯，鎖定 wireframe，再把 Figma 方向轉為 HTML/CSS 元件庫；逐頁以內容映射、元件配對與驗收矩陣防止 AI 重造樣式。
2026年9月24日4 分鐘閱讀👁 11
Product Design × AI Coding
Codex＋Claude 重做企業官網：先鎖資訊架構與元件，再讓 AI 拼頁面
一位 enterprise product designer 分享：官網改版約 95% 工作用 Codex／Claude 輔助，從 IA、競品結構、wireframe、視覺方向到 HTML/CSS component library。真正可複用的不是「AI 幫忙畫」，而是把設計決策外化成可比較表、文字 wireframe、元件清單與驗收矩陣。
來源：@irenek107 Threads 原文與作者後續留言。文中的 95%、Codex 80%／Claude 20%、2–3 週縮為 1–2 週都是作者個案，不是通用 benchmark。
原流程拆解
- 資訊架構：把既有網站與人工蒐集的競品清單交給 Codex，萃取 navigation grouping 邏輯，產出我方／競品對照表，再重組 navigation 與 navbar wireframe。
- Wireframing：先確定頁面集合與可重用 design patterns；首頁從既有 layout、競品必備內容與 variant 比較後鎖版。
- 視覺探索：人工從 Awwwards 找近兩年案例，讓 Codex 分析 visual pattern、typography 並產生 style prompts，再由 Claude 做多風格 mockup；最後仍由設計師與主管收斂。
- Code-based component library：把 Figma 定稿轉為 HTML/CSS 元件庫，微調後作為後續所有頁面的組裝底座。
- 逐頁 loop：盤點既有內容 → wireframe → 遺漏對照 → 轉文字描述 → 映射既有元件 → 補新元件 → 生 HTML/CSS → 人工微調。
最值得保留的設計控制點
| 控制點 | 為什麼重要 | 產物 |
|---|---|---|
| 競品「邏輯」而非畫面抄襲 | 把 navigation、內容層級與 conversion path 抽象化，避免只模仿視覺 | 競品矩陣、IA 決策紀錄 |
| Wireframe 轉文字規格 | 作者觀察：只留圖片，agent 可能忽略元件庫並另造 class/style | 區塊順序、目的、內容、狀態與 responsive 行為 |
| Component-first | 先付一次基礎建設成本，後面才是「拼樂高」 | 元件 API、variant、token、usage example |
| 內容遺漏對照表 | 防止改版只變漂亮卻漏掉既有資訊與 SEO 資產 | 舊內容 → 新頁面／區塊 mapping |
| 人類共識 gate | AI 不能替 stakeholder 建立偏好、品牌與商業目標共識 | style direction、decision log、sign-off |
留言區最有價值的改善
把 5.5 的元件配對直接寫回頁面規格：每個區塊附元件名稱、檔案位置、variant 與一個用法範例。這樣 5.6 拿到的是「該用哪塊現成程式碼」，而不是重新從 wireframe 外觀猜一套新 class。
建議升級成可重複產線
- 建立
site-inventory.md：所有 URL、頁面目的、owner、現有內容、SEO metadata、CTA。 - 建立 ：只記錄 IA／interaction pattern 與採用理由，避免每輪重抓。