如何用 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 中让图片动起来
• 准备适合生成视频的参考图
• 用产品照片制作广告短片