夜间模式 切换到宽版

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 104|回复: 1

[综艺大观] 字节出手了,文/图/视/码一个Agent Plan搞定

[复制链接]
  • 打卡等级:功行圆满
  • 打卡总天数:805
发表于 2026-5-16 19:08 | 显示全部楼层 |阅读模式

马上注册,查看更多内容,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

×
大家好,我是冷逸。
最近,我们公司生成了一款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,搞定一切。
1.webp

关于Agent Plan

简单说说,怎么使用火山这个Agent Plan。
进入火山引擎,订阅一个你感兴趣的Agent Plan版本。
2.webp

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。
3.webp

然后,就可以到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,默认选择中文。然后,根据界面提示完成套餐配置。
4.webp

不过,目前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分钟后会完成切换。
5.webp

看到这里,你可能想问:不是说可以生成图片、生成视频吗?怎么讲半天还是在讲语言模型。
对于这个问题,火山的Agent Plan很好地解决了这个问题,他们把图片生成、视频生成模型做成了skills。
6.webp

你只需要把他们安装后,就可以在Claude Code里直接用了,不用换API,也不用切模型,直接调skill就能生成。
7.webp

我们重新开一个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生成技术,请谨慎甄别
8.webp

这个生图、生视频的skill,实际上就是直接调用我Agent Plan里的API Key,只不过火山在底层做了一些封装和优化。
这里,有个小技巧分享给大家一下。
seedream出图默认有AI水印,建议你在提示词中强调“不带水印”,或者加入--watermark=false参数,就可以生成不带水印的图片。
9.webp

另外,这个Agent Plan是具有Harness能力。提供了联网搜索和embedding API,有一些免费额度赠送。
10.webp

11.webp

一手实测

Agent Plan有了多模态生成能力,开发场景确实变得更丰富了。
1)生成配图版PPT
还记得藏师傅的guizang-ppt-skill吗?最近他又更新了,新增加了几个风格,并增加了自动AI配图的功能。
12.webp

开源地址:
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生成)。
任务提交后,它会分成两步来完成,一是生成配图,二是设计网页。
13.webp

生图,用的是doubao-seedream-5.0-lite,这是字节目前最强的图片模型。
14.webp

来看下最终的PPT,有配图后更入眼一些了。
15.png

2)设计产品网站
我们把生图、生视频都用上,于是就有了开头的case。
让它参考苹果官网设计一个产品网站,视频由seedance 2.0生成,配图由seedream 5.0 lite生成,语言模型用k2.6。
过程中,视频生成稍微要慢点(大概2-3分钟),它会等它,最后再根据所有的素材来设计网站。
16.webp

这是整个开发任务的交付物。
 该图片疑似使用了AI生成技术,请谨慎甄别
17.webp

再经过Chrome DevTools MCP的自动化调试后,最终交付给我了这样一个网站。
18.png

19.png

20.png

这一整套设计和交互,真的有苹果官网那个味道了。
  • 打卡等级:已臻大成
  • 打卡总天数:507
发表于 2026-5-18 10:38 | 显示全部楼层
谢谢楼主分享!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

文字版|手机版|小黑屋|RSS|举报不良信息|精睿论坛 ( 鄂ICP备07005250号-1 )

GMT+8, 2026-5-19 18:28 , Processed in 0.174509 second(s), 5 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表