大家好,我是冷逸。最近,我们公司生成了一款AI蓝牙耳机,叫Aura,我用Clau
首页 行业资讯 文章详情
行业资讯

字节出手了,文/图/视/码一个Agent Plan搞定_

发布日期:2026-06-19 14:27 来源:迪运网络
字节出手了,文/图/视/码一个Agent Plan搞定_

大家好,我是冷逸。

最近,我们公司生成了一款AI蓝牙耳机,叫Aura,我用Claude Code做了一个产品网站。

Thumbplayer Poster Plugin Image
暂停
下一个
打开循环播放
00:02
/
00:30
720P
720P 准高清
480P 标清
倍速
3.0X
2.0X
1.5X
1.25X
1.0X
0.75X
0.5X
语言
多音轨
AirPlay
0
静音播放中,点击
画中画
网页全屏
全屏
error-background
你可以 试试
视频信息
1.33.6
播放信息 上传日志 调试信息 [X]
视频ID
VID
h32619oftqe
播放流水
Flowid
535e72dce6600962bfc3e2deabbc46f2
播放内核
Kernel
mp4/origin (1.33.5)
显示器信息
Res
-
帧数
3/56; 5.36%
缓冲健康度
28.06s
网络活动
net
0 KB/s
视频分辨率
1280*720
编码
Codec
(T265)
mystery
mystery
br:0.000-30.145 t:2.09 pg:1 s:lt->cy->pg

按住画面移动小窗

这是网站首屏,有没有想要购买的欲望?

耳机还在研发中,但我想给你介绍一下这个网站是怎么做的。

很简单,全程就一句话,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的自动化调试后,最终交付给我了这样一个网站。

图片
图片
图片

这一整套设计和交互,真的有苹果官网那个味道了。

免责声明:本站内容来源于互联网公开信息,仅供学习和参考使用。如涉及版权问题,请联系我们,我们将在核实后第一时间删除相关内容。
« 上一篇:成都直播小程序软件开发有实力的公司去哪儿找? 下一篇:安全公司:部分使用 Vibe Coding 开发的网络 App 安全堪忧_ »