Open Design 與 HTML 簡報實戰：用 Codex 做出互動式網頁簡報

傳統簡報的限制不只在動畫比較少，而是內容、視覺與互動通常被綁在同一個封閉檔案裡，改用 HTML 後，圖表可以依資料更新，產品可以用 3D 呈現，卡片能拖曳與吸附，按鈕也能真的回應操作。更重要的是，Codex 可以讀懂 HTML、CSS 與 JavaScript，直接修改、測試並反覆改善。

真正有效的方法不是叫 AI 一次做完，而是先把參考案例拆成設計規則，再把內容交給規則處理。這個做法能把「好看」從模糊感覺變成可重複使用的系統，也更適合品牌簡報、產品發表、作品集與資料看板。

HTML 簡報為什麼比 PPT 更適合 AI Agent

• 內容可程式化：文字、圖片與資料都能從檔案或 API 載入
• 互動更完整：可加入篩選、拖曳、滾動、吸附、主題切換與即時圖表
• 容易驗證：Codex 可搭配瀏覽器測試畫面尺寸、按鈕、動畫與手機版
• 容易複用：風格規則可整理成 DESIGN.md，工作流程可封裝成 SKILL.md
• 交付彈性高：可直接開啟 HTML，也能再輸出 PDF、圖片、PPTX 或 MP4

如果你已經在使用 Codex，可以把瀏覽器驗證接進製作流程。相關做法可參考站內的 Playwright CLI 是什麼？讓 Codex 用 CLI 操作瀏覽器。

最穩定的五段式工作流程

1. 蒐集參考：挑一到三個真正符合目標的網站、品牌頁或既有簡報
2. 拆成規則：整理配色、字體、字級、網格、留白、圖片比例、元件與動效
3. 帶入內容：提供主題、章節、資料表、圖片與必要連結
4. 加入能力：用 ECharts、Spline 與 GSAP 補上圖表、3D 與動畫
5. 驗證與封裝：測試桌面與手機版，再把成熟規則做成 Skill

一次直出的頁面常會出現字級、卡片與配色彼此不協調的問題。兩段式做法先產生設計規格，再產生實際頁面，能讓 AI 在每一輪修改時都有共同標準。若你希望更進一步改善 AI 常見的模板感，可以搭配 用 Impeccable 改善 AI 網站設計。

Open Design 是什麼

Open Design 是開源、local-first 的 AI 設計工作區，原始碼放在 nexu-io/open-design。它不是另一個封閉模型，而是把 Codex、Claude Code、Cursor、Gemini CLI、OpenCode、Qwen 等既有 Coding Agent 接進一套視覺設計流程。

它能建立原型、Landing Page、Dashboard、簡報、設計系統與 HTML 動態內容，輸出會落在自己的專案資料夾中。核心流程是 Brief、Template、Visual direction、Artifact、Memory，也就是從需求、模板、視覺方向一路走到可執行成品與可重用記憶。

為什麼可視為 Claude Design 的替代方案

Claude Design 適合想要託管畫布、直接編輯與快速交接 Claude Code 的使用者，Open Design 則更適合重視本機檔案、可更換 Agent、可自行修改 Skill，以及希望沿用 Codex 工作方式的人。

Open Design 安裝與 Codex 用法

1. 到 Open Design 下載頁 安裝 macOS、Windows 或 Linux 版本
2. 桌面版建議登入後直接開始，官方下載頁標示不必另外設定 API Key
3. 若要接 Codex，先到 Open Design 的 Settings，再進入 MCP server，複製 Codex 專用設定
4. 若終端機的 od 指令確定指向 Open Design，也可以使用下方命令

git clone https://github.com/nexu-io/open-design
cd open-design
pnpm install

macOS 內建另一個同名 od 指令，因此桌面版使用者以 Settings 裡提供的完整路徑設定最穩。完成後可以直接對 Codex 說：

請使用 open-design，依照我提供的品牌資料與參考網站，先建立 DESIGN.md，再產生一份 16 比 9 的互動式 HTML 產品簡報。請保留可編輯文字、響應式版面與鍵盤翻頁，完成後用瀏覽器檢查每一頁。

可直接使用的繁體中文提示詞

以下內容已把可辨識的簡體中文提示改成繁體中文，並保留原本任務結構。方括號內的文字請換成自己的資料。

提示詞一：直接參考網站製作產品頁

請參考這個網站 [參考網址] 的設計風格，再根據我提供的資料，重製一個 [品牌與產品名稱] 的產品展示頁面。請保留品牌辨識度、響應式版面與可操作的互動效果。

提示詞二：把參考素材拆成設計規則

你是一位專業的前端網站設計師。請幫我拆解並整理這個 [網站或圖片] 的設計風格，包括配色、字體、字級、留白、網格、圖片比例、卡片樣式與動畫方式。請提煉成一套明確、可執行的設計規則，並整理成 Markdown 格式的規則文件。

提示詞三：使用規則產生 HTML

請根據 [我提供的內容]，套用剛才整理完成的設計規則，製作一個互動性高的 HTML 網頁。請保留一致的配色、字體、網格、留白、圖片比例、卡片與動畫節奏，並確保桌面與手機版都能正常使用。

提示詞四：用 ECharts 建立動態 GDP 排名

請載入 ECharts，幫我製作一個中國 2000 至 2025 年各省份年度 GDP 的動態長條圖。資料放在附件試算表中。請把下方範例程式碼換成附件資料，保持原有視覺樣式，最後用 HTML 呈現。畫面要精美、可互動，並提供播放、暫停、速度與年份控制。

[貼上從 ECharts 範例頁取得的程式碼]

提示詞五：用 GSAP 改造作品集

這一段是依實際操作需求補全的繁體中文版本，適合直接交給 Codex：

請把我上傳的作品集改造成互動式 HTML 網頁，並使用 GSAP 實作卡片無限循環輪播。需要支援滑鼠與觸控拖曳、平滑吸附、拖曳時的動態回饋，以及上一個與下一個按鈕。請加入一鍵切換主題色功能，保留每張作品卡片的連結，並檢查手機版操作。

提示詞六：把成熟版型封裝成 Skill

請根據這套已經驗證過的 HTML 設計風格，幫我封裝成一個可重複使用的 Skill。它需要記錄頁面的整體視覺風格、配色、字體、留白、元件樣式、圖表規範與動效原則，同時整理出封面頁、資料頁、功能拆解頁、案例頁與總結頁等常用頁面模板。

之後我只需要輸入主題、內容大綱、圖片與資料，任何相容的 AI Agent 就能自動套用這套規則，產生風格一致、可編輯、適合簡報展示的 HTML 頁面。

輸出 HTML 前，請自動檢查字體、顏色、間距、圖表樣式與頁面節奏是否統一。

第一次建立自訂 Skill，可以先閱讀站內的 用 skill-creator 建立 Skill，再把設計規則、資產與驗證流程拆成獨立檔案。

提示詞七：加入像 PPT 的可視化編輯功能

請在現有 HTML 中加入一套簡單的可視化編輯功能，支援直接點擊文字修改內容、拖曳元素調整位置、上傳圖片替換素材，並透過側邊欄統一修改字體、顏色、字級與動畫。

同時加入頁面複製、元件刪除、復原、重做與匯出 HTML 功能。編輯時顯示控制框，播放時自動隱藏。整體操作盡量接近傳統 PPT，不要破壞原有設計與動畫。

提示詞八：補上主題色切換

請在既有編輯側欄加入主題色設定。提供四組預設色票與一個自訂色彩選擇器。修改後要同步更新頁面背景、卡片、按鈕、圖表與重點文字，同時維持足夠對比。請保留原有內容、互動與動畫。

三個能大幅提升 HTML 簡報的前端工具

ECharts 不只負責把資料畫出來，還能讓篩選條件與簡報節奏同步。Spline 適合讓產品從靜態圖片變成可旋轉的物件。GSAP 則負責讓捲動、拖曳與狀態轉換具有一致節奏。三者一起使用時，先確認內容目標，再決定是否真的需要特效，避免互動比訊息更搶眼。

六個 HTML 與設計 Skill

安裝指令整理

npx skills add https://github.com/alchaincyf/huashu-design
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
npx skills add https://github.com/lewislulu/html-ppt-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

UIUX Pro Max 目前建議安裝 ui-ux-pro-max-cli，再用 uipro init --ai codex 加入專案。更完整的 WordPress 使用方式可看 UIUX Pro Max 教學。

npm install -g ui-ux-pro-max-cli
uipro init --ai codex

frontend-slides 的 Claude Code Marketplace 指令與一般 Agent 不同。Codex 最簡單的方式是提供 GitHub 網址，要求它讀取 SKILL.md 與必要參考檔，再安裝到自己的 Skill 目錄。每個專案都可能更新，正式安裝前仍應以 GitHub README 為準。

設計靈感網站完整清單

使用靈感網站時，不要只丟首頁網址給 AI。最好指定一個實際案例，說清楚要借用的是資訊層級、網格、留白、字體或動畫，並列出不能照抄的品牌元素。需要從文字或圖片快速建立 UI，也可以延伸閱讀 Google Stitch 教學。

最後的品質檢查

• 每頁是否只有一個主要訊息
• 字體是否已載入，中文與英文是否都有替代字型
• 圖表標籤、單位與資料來源是否清楚
• 動畫是否支援停止，是否干擾閱讀
• 滑鼠、鍵盤與觸控是否都能操作
• 桌面、平板與手機是否沒有溢出或遮擋
• 編輯模式與播放模式是否能明確切換
• 外部程式庫失效時是否有基本內容可看
• 輸出檔案是否保留來源與授權資訊

HTML 簡報的價值不是把 PPT 換成另一種檔案格式，而是把設計規則、資料、互動與驗證串成一條可重複執行的流程。先讓 Codex 理解規則，再讓它寫頁面，最後用瀏覽器檢查。當這套方法成熟後，再封裝成 Skill，下一份報告就不必重新教一次。

常見問題

Open Design 可以直接配合 Codex 嗎

可以。Open Design 官方列出 Codex 支援，桌面版可在 Settings 的 MCP server 取得 Codex 設定。產出仍會保留在本機專案目錄。

Open Design 完全免費嗎

Open Design 原始碼採 Apache-2.0。桌面下載頁提供登入後使用的官方模型路由，自行部署或 BYOK 模式則可能產生所接模型與 Agent 的費用。

HTML 簡報可以再輸出成 PPTX 嗎

部分 Skill 與 Open Design 提供 PPTX 或相關匯出能力，但複雜互動、3D 與 GSAP 動畫通常無法完整保留。需要保留互動時，建議直接交付 HTML。

最適合先安裝哪一個 Skill

要做一般網頁簡報可先看 frontend-slides。要快速選主題、版型與動畫可用 html-ppt-skill。要建立品牌化設計流程可研究 huashu-design。畫面總有模板感時，再加入 taste-skill 或 UIUX Pro Max。

參考資料

• YouTube 原始內容
• Open Design 官方網站
• Open Design GitHub
• Claude Design 官方介紹
• Apache ECharts
• Spline
• GSAP