字节出手了，文/图/视/码一个Agent Plan搞定
大家好，我是冷逸。最近，我们公司生成了一款AI蓝牙耳机，叫Aura，我用Claude Code做了一个产品网站。
这是网站首屏，有没有想要购买的欲望？
耳机还在研发中，但我想给你介绍一下这个网站是怎么做的。
很简单，全程就一句话，Vibe Coding生成：
给AI蓝牙耳机Aura设计一个产品网页。
关于Aura耳机：这是一款来自「沃垠科技」生产的AI蓝牙耳机，产品叫Aura，融合顶尖降噪技术与智能语音助手，带来清晰纯净的音质体验。轻巧贴耳、全天舒适佩戴，让音乐、通话和AI助手随时随地触手可及。Aura，让每一次聆听都更聪明、更自由。
网页设计要求：
1、网页的整体风格和布局，参考苹果网站：https://www.apple.com.cn/airpods-pro/
2、主Hero区域放一个产品宣传视频，用byted-ark-seedance-skill基于产品图“蓝牙耳机.png”生成。
3、网页中的产品场景图、产品切图，用byted-ark-seedream-skill基于产品图“蓝牙耳机.png”生成。
4、整体高级审美，大师级作品，顶级前端网页设计。
产品图、产品介绍、网页设计、产品视频和产品场景图，全都在⬆️这一个任务里完成。
你可能会有疑问，这有图、有视频又有代码的，真就不用反复切API、来回换model吗？
不用。
最近，火山引擎不是搞了个Agent Plan嘛，我把它接到Claude Code里，glm-5.1、kimi k2.6、seedance 2.0、seedream 5.1 lite这些模型都能直接用。
一个API Key和URL，搞定一切。
关于Agent Plan
简单说说，怎么使用火山这个Agent Plan。
进入火山引擎，订阅一个你感兴趣的Agent Plan版本。
Agent Plan订阅地址：
https://ai.volcengine.com/activity/agentplan
订阅前，你先想一下自己的高频使用场景。如果生图、生视频比较多的话，自然是Large、Max版本比较划算；如果生图、生视频不是很多，推荐Medium，性价比还不错。
订阅后，设置一下你的Agent Plan。
它有3类模型：语言模型、向量化模型和视觉模型。
语言模型可以指定路由谁。比如，你经常做Agent长程任务，那么优选GLM 5.1、K2.6和M2.7；如果是文本写作、推理类任务比较多，推荐DeepSeek V4 Pro/Flash；如果需要视觉识别，推荐K2.6和Seed 2.0。
然后，就可以到Claude Code、Codex或OpenClaw里进行配置了，下面我们以Claude Code为例。
你可以安装一个编码助手Ark Helper。
输入命令：
[*]
curl -fsSL https://lf3-static.bytednsdoc.com/obj/eden-cn/ylwslo-yrh/ljhwZthlaukjlkulzlp/install.sh | sh安装完后，在命令行输入：
[*]
ark-helper就可以启动 Ark Helper，默认选择中文。然后，根据界面提示完成套餐配置。
不过，目前Ark Helper只支持MacOS、Linux系统，暂不支持Windows。所以，我是进行手动配置的。
配置方法，也很简单，就是把我们的API key、URL和model这三件套在命令行敲入。
Windows请输入：
[*]
[*]
[*]
setx ANTHROPIC_BASE_URL "https://ark.cn-beijing.volces.com/api/plan"setx ANTHROPIC_AUTH_TOKEN "你的api key"setx ANTHROPIC_MODEL "ark-code-latest"MacOS请输入：
[*]
[*]
[*]
export ANTHROPIC_BASE_URL=https://ark.cn-beijing.volces.com/api/planexport ANTHROPIC_AUTH_TOKEN=你的api keyexport ANTHROPIC_MODEL=ark-code-latest注意，model名统一填ark-code-latest，这样你就不用手动在命令行里来回切模型了。
后面需要换模型时，直接在火山的Agent Plan里点一下就行，大概3-5分钟后会完成切换。
看到这里，你可能想问：不是说可以生成图片、生成视频吗？怎么讲半天还是在讲语言模型。
对于这个问题，火山的Agent Plan很好地解决了这个问题，他们把图片生成、视频生成模型做成了skills。
你只需要把他们安装后，就可以在Claude Code里直接用了，不用换API，也不用切模型，直接调skill就能生成。
我们重新开一个cmd终端，在命令行里输入以下指令就可以安装。
视频生成Skill的安装命令：
[*]
npx skills add https://skills.volces.com/skills/volcengine/agentplan -s byted-ark-seedance-skill --agent claude-code图片生成Skill的安装命令：
[*]
npx skills add https://skills.volces.com/skills/volcengine/agentplan -s byted-ark-seedream-skill --agent claude-code比如，我们随便输入一个提示词，Claude Code调用byted-ark-seedream-skill直接把图片生成好，并在了我的本地文件夹里。
该图片疑似使用了AI生成技术，请谨慎甄别
这个生图、生视频的skill，实际上就是直接调用我Agent Plan里的API Key，只不过火山在底层做了一些封装和优化。
这里，有个小技巧分享给大家一下。
seedream出图默认有AI水印，建议你在提示词中强调“不带水印”，或者加入--watermark=false参数，就可以生成不带水印的图片。
另外，这个Agent Plan是具有Harness能力。提供了联网搜索和embedding API，有一些免费额度赠送。
一手实测
Agent Plan有了多模态生成能力，开发场景确实变得更丰富了。
1）生成配图版PPT
还记得藏师傅的guizang-ppt-skill吗？最近他又更新了，新增加了几个风格，并增加了自动AI配图的功能。
开源地址：
https://github.com/op7418/guizang-ppt-skill
如果你已经安装过这个skill，直接对你的Claude Code这样说就行：
帮我更新guizang-ppt-skill。
请进入C:\Users\Administrator\.claude\skills\guizang-ppt-skill执行git pull，然后告诉我当前的最新commit。
既然Agent Plan可以直接生图，那我们就让它出一版带图的PPT。
提示词：用guizang-ppt-skill把这份聊天记录（https://chat.deepseek.com/share/h3tkicxmtg40n3leaf）创建一份电子杂志风的PPT，8页左右，需要3-5张配图（用byted-ark-seedream-skill生成）。
任务提交后，它会分成两步来完成，一是生成配图，二是设计网页。
生图，用的是doubao-seedream-5.0-lite，这是字节目前最强的图片模型。
来看下最终的PPT，有配图后更入眼一些了。
2）设计产品网站
我们把生图、生视频都用上，于是就有了开头的case。
让它参考苹果官网设计一个产品网站，视频由seedance 2.0生成，配图由seedream 5.0 lite生成，语言模型用k2.6。
过程中，视频生成稍微要慢点（大概2-3分钟），它会等它，最后再根据所有的素材来设计网站。
这是整个开发任务的交付物。
该图片疑似使用了AI生成技术，请谨慎甄别
再经过Chrome DevTools MCP的自动化调试后，最终交付给我了这样一个网站。
这一整套设计和交互，真的有苹果官网那个味道了。 谢谢楼主分享！
页:
[1]