如何用 Claude Code 生成圖片和影片，並放進網頁？

想用 Claude Code 生成圖片和影片，可以通過 MCP 接入外部生成服務。先讓它選擇支援所需引數的模型、給出準確報價，等你確認後再生成。先做好靜態圖，將選定圖片的已完成生成 ID 用作影片首幀，最後把兩個素材下載到網站專案中。

下面以咖啡店首頁為例：一張溫暖的室內照片、一段緩慢推進的鏡頭，以及放在旁邊的網頁文字。你也可以換成作品集或產品頁。用明確的檔名和生成 ID，把圖片、影片與頁面位置對應起來。

Claude Code 能生成圖片和影片嗎？

Claude Code 負責組織任務、修改網頁程式碼；MCP 讓它能夠呼叫外部工具；FlyAIgh 把圖片或影片請求交給選定模型，再返回任務和結果。能寫 SVG、HTML，或者看懂上傳的圖片，不等於能直接生成照片或影片。

這個區別會影響工具選擇。簡單圖示、圖表或 CSS 動畫，寫程式碼可能就夠了。需要攝影風格的場景或生成鏡頭運動時，再呼叫相應的媒體模型。接入 MCP 並不代表每個模型都支援相同的輸入、時長和解析度。

先接入生成工具

先準備好已安裝並登入的 Claude Code，以及有效的 FlyAIgh Basic 或以上訂閱。只有嚐鮮包不包含 MCP 許可權。Claude Code 的賬戶費用與 FlyAIgh 的生成積分分別計算。在 FlyAIgh 開啟“工具 → MCP”，建立 API Key；也可以給這把金鑰設定每日積分上限。

在自己的終端執行下方 HTTP 連線命令，將佔位符換成自己的金鑰。儲存金鑰的客戶端配置應按私密檔案管理，不要提交到儲存庫，也不要把金鑰寫進網頁程式碼。文末的 FlyAIgh MCP 接入指南提供當前配置說明。在 Claude Code 輸入 /mcp 檢查連線；claude mcp list 也能列出已配置的服務。

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

開始生成前，讓 Claude Code 呼叫 get_balance 和 list_models。按返回結果選擇模型 ID 與引數，不要猜模型名稱。使用自己的照片時，先呼叫 upload_file；如果返回的是簽名上傳地址，還要把檔案內容傳到該地址，之後才能使用 file_id。本地路徑或任意圖片網址不能代替這個引用 ID。

為頁面中的具體位置生成圖片

先考慮頁面佈局，再描述風格。確定圖片放在哪裡、用什麼畫幅、主體處於什麼位置，以及是否需要留白。本例用一張 16:9 圖片作為媒體區域，標題放在旁邊，用 HTML 顯示。這樣文字可以單獨修改，在手機上也更容易閱讀。

讓它列出可用的圖片模型，並為選定參數報價。list_models 中的價格是預設設定下的示例；quote 才會計算這次具體請求。確認後再呼叫 generate_image。更換模型、解析度、質量或參考圖，都可能改變報價。

get_job 顯示完成後，先審圖，再做影片。檢查構圖、多餘文字、憑空出現的物品，以及窄屏下主體是否完整。把選定圖片的 ID、提示詞和模型記下來。有多個版本時明確選哪一張，不能預設最新一張就是你認可的那張。

把選定圖片變成影片

圖片確認後，選擇支援 i2v 的影片模型，把這張已完成圖片的生成 ID 傳給 first_frame。這樣影片才關聯到你選中的圖；如果只用文字描述一個相似場景，會重新生成場景。生成前，按所選時長、解析度、畫幅和聲音設定重新報價。

運動指令要具體：鏡頭緩慢推進，蒸汽輕微飄動，杯子保持不動。從符合頁面需要的較短時長開始，並確認模型支援。想做安靜的首頁視覺，就不要同時要求大幅轉場。首幀可以引導生成，但不能把每個物體或標誌的畫素完全鎖住。

拿返回的影片任務 ID 呼叫 get_job 查詢進度。完成後看完整段影片；有聲音時也要聽完。檢查杯子形狀、邊緣、鏡頭運動和最後一幀。任務完成仍可能有畫面問題。如果準備迴圈播放，還要檢查結尾接回開頭是否跳變，不能預設它是無縫迴圈。

下載素材，再放進網頁

下載選定圖片和已經完成的影片。get_job 返回的私有檔案下載連結會在 1 小時後過期；需要時再次呼叫 get_job 獲取新連結。不要把臨時簽名地址當作永久網頁素材地址。保留一份對應記錄，寫清圖片 ID、影片 ID、提示詞、模型和最終本地檔名。

Next.js 專案中的 public/media 檔案可通過 /media 訪問；其他框架使用自己的靜態素材目錄，也可以放到自有 CDN。下面的例子假定封面是真正的 JPEG 檔案 hero-poster.jpg，影片是瀏覽器可播放的 MP4 檔案 hero.mp4。需要時進行格式轉換；把 PNG 字尾改成 .jpg 不算轉換。公開頁面裡不要包含 API Key 或生成呼叫。

HTML 示例提供原生播放控制元件、靜態封面，由使用者點選播放。preload="none" 用來避免預先載入影片，瀏覽器的實際行為可能不同。窄屏時佈局上下排列，文字與影片分開。在 React JSX 中使用 className、playsInline 等對應屬性寫法。

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

控制修改次數與費用

每次生成分別確認，對照報價、餘額和金鑰上限。API Key 的每日上限有助於限制花費，並不意味著可以免費反覆修改。呼叫支援的 expected_credits 可以防止報價變化後直接生成，但它不是整個專案的總預算。

如果不確定請求是否提交成功，先檢查原任務。24 小時內，同一個請求重複使用同一個 idempotency_key，可以避免建立重複任務；同一個鍵換引數會發生衝突。修改創意生成新版本屬於新請求，可能再次扣積分。成功生成但你不滿意的影片，不等同於任務失敗。

• 連不上：檢查 /mcp、HTTP 地址、API Key，以及符合要求且仍有效的訂閱。
• 參考素材被拒絕：使用自己賬戶下已經完成的圖片，或已經傳完的 file_id。i2v 模式要放在 first_frame。
• 網頁素材失效：用 get_job 重新整理過期下載連結，再把檔案放到穩定路徑，不需要重新生成。
• 播放或裁切不對：檢查檔案格式、網路響應、手機尺寸和 CSS。使用 cover 裁切可能隱藏一部分主體。

參考資料與相關教程

能力區別依據 Anthropic 官方說明；工具名稱與引用方式依據 FlyAIgh 當前 MCP 實現；網頁示例採用標準 HTML 影片行為。實際操作時，以當前模型選項和具體報價為準。

• Claude：圖片生成能力說明
• Claude Code：通過 MCP 連線工具
• FlyAIgh：MCP 接入與工具說明
• MDN：HTML 影片元素
• 在 FlyAIgh 中讓圖片動起來
• 準備適合生成影片的參考圖
• 用產品照片製作廣告短片