Claude Design＋Midjourney 網頁技術流：用 AI 打造頂級動態影片網站！
三句話摘要
以 Claude Design + Claude Code + Midjourney 全 AI 工具鏈，從 Wireframe 設計到正式主機部署，零程式碼打造機器人賽事網站。 Claude Design 負責設計、Midjourney 負責視覺素材、Claude Code 負責輸出程式碼、cPanel 負責部署——四工具串成一條完整 AI 網站生產線，非工程師也能在一個工作流程內完成從設計到上線的全部動作。 Claude Design 的兩階段設計流程：先產 Wireframe 確認版型結構，再下指令生成高擬真 UI，這樣可以在低成本的線框稿階段就鎖定七大區塊與整體調性，避免後期反覆修改浪費 Token。
重點整理
重點- 1
Claude Design 的兩階段設計流程：先產 Wireframe 確認版型結構，再下指令生成高擬真 UI，這樣可以在低成本的線框稿階段就鎖定七大區塊與整體調性，避免後期反覆修改浪費 Token。
- 2
Midjourney 圖生影（Image to Video）方法：先用 AI 生成完整 Prompt（可借助 Gemini），在 Midjourney 生成靜態圖後，再上傳圖片選 Start Frame 轉為動態影片，比直接文字生影片品質更可控。
- 3
Claude Design 直通 Claude Code：設計稿不需人工翻譯成程式碼，透過 Share → Send To → Claude Code 一鍵整合，自動產出結構完整的 HTML 與素材資料夾，大幅縮短設計到開發的交接成本。
- 4
SSL 是上線後必做的動作：HTTP 網站在 Google 排名與 SEO 表現上都會受罰，需在 cPanel 安全性申請 SSL 憑證並開啟 HTTPS 強制導向，才算完成正式部署。
實用技巧與重點
乾貨- 工具清單：Claude Design、Claude Code、Midjourney、Gemini（Prompt 生成輔助）、Netlify（免費主機）、hosting.com（付費主機）、TinyPNG（圖片壓縮）、cPanel（主機管理介面）
- Claude Design 方案要求：Claude Pro 以上
- Wireframe 版本數量建議：2-3 版（Token 成本考量）
- 網頁區塊數量：首頁共 7 個區塊（Hero、賽事影片 3 格、價目表、最新消息、LOGO 輪播、FAQ、訂閱 CTA、頁尾）
- 影片尺寸規格：16:9（需寫入 Midjourney Prompt）
- Midjourney 流程：Gemini 生成 Prompt → Midjourney 出 4 張靜態圖 → 選圖上傳 → Start Frame 設定開頭畫面 → 生成 4 支影片 → 下載使用
- Claude Code 整合指令取得位置：Claude Design 右上角 Share → Send To → Claude Code（本機用複製指令貼入終端機）
- cPanel 上傳結構：`public_html/index.html` + `public_html/[images資料夾]/`
- SSL 申請位置：cPanel → 安全性 → SSL 憑證 → 勾選主網域 → 繼續 → 執行加密
- HTTPS 強制導向位置：cPanel → 網域 → 找到網域 → 開啟「強制用 HTTPS 連線」
- hosting.com 方案贈品：承租基礎規格贈一年免費網域
結論
結論“Claude Design 負責設計、Midjourney 負責視覺素材、Claude Code 負責輸出程式碼、cPanel 負責部署——四工具串成一條完整 AI 網站生產線，非工程師也能在一個工作流程內完成從設計到上線的全部動作。”
完整解析
詳細這支影片示範了一套完整的 AI 網站開發流程，核心工具是 Claude Design 與 Claude Code，目標是打造一個暗黑色系的高科技機器人打鬥賽事網站，並最終部署到正式主機對外開放。
流程的第一階段是在 Claude Design 中建立專案，輸入包含七個首頁區塊、暗黑調性的 Prompt，系統會引導使用者選擇區塊類型、網頁調性、顏色偏好與佈局風格，接著生成 2-3 個 Wireframe 版本（Layout A / Layout B）供比較挑選。選定版本後，再下一道指令「用 Layout A 做出高擬真 UI 設計」，Claude Design 便會自動填入科技感用色、文字排版與各區塊佔位圖，形成接近完稿的視覺稿，並支援全螢幕預覽。
第二階段是透過 Midjourney 強化視覺素材。建議先用 Gemini 生成符合 Midjourney 語法的完整 Prompt（指定 16:9、鋼鐵質感、火花特效等細節），再貼入 Midjourney 一次生出四張靜態圖，挑選最滿意的一張後，上傳至 Midjourney 的 Start Frame 功能轉換為動態影片。影片生成後下載，再回到 Claude Design 上傳，並下指令指定將 Hero Section 背景替換為該影片、確保文字明度可讀、設定影片自動循環播放，以及請 Claude Design 協助壓縮影片體積。
第三階段是從設計稿輸出程式碼。在 Claude Design 右上角點選 Share → Send To → Claude Code，複製自動產生的指令，貼入本機 Claude Code 終端機執行，系統便會從 Claude Design 抓取設計資料，輸出結構化的 HTML 主程式與對應的圖片資料夾。接著前往 cPanel 的檔案管理員，進入 public_html 目錄，將 index.html 與圖片資料夾按相同路徑結構上傳，訪問主機商提供的網址即可看到網站正式上線。
最後是上線後的安全性設定。若網址顯示為 HTTP 不安全狀態，需在 cPanel 安全性區塊申請 SSL 憑證並勾選主網域執行加密，等待憑證生效後，再到網域設定開啟「強制用 HTTPS 連線」，確保所有流量統一走加密連線，這對 Google 排名與使用者信任度都有正面影響。
關鍵時刻
Pipeline v2帶時間戳的重點，會在逐字稿層級分析上線後產生。目前請先透過原始影片觀看。
事實查核
Pipeline v2說法查證是下一次管線升級的一部分。KeyFrame 只會顯示它真正能驗證的內容。
