火山方舟
火山方舟
文档指南
请输入
- 文档首页
火山方舟应用应用实验室Agent开发demoAgent开发指南：生成“显眼包”网站
复制全文
下载 pdfAgent开发指南：生成“显眼包”网站
文档反馈
问问助手说明
嗨，小伙伴们！豆包大模型一键生成的「显眼包」网页来啦！
（本网页由AI生成）
本文通过 火山方舟大模型体验中心 调用了 Doubao、DeepSeek 等先进模型，参考用户手绘设计图与自然语言指令快速生成 HTML 代码，并借助火山引擎函数服务（veFaaS）MCP，实现了从设计稿解析、代码生成到公网可访问网页的全流程自动化部署。
任务目标
- 场景设定：基于用户设定的需求，依据手绘设计图生成风格可爱、以蓝色为主色调的火山引擎 AI 玩偶 “显眼包” 产品网页，并将网页部署到 veFaaS，获取公网可访问链接，用于产品推广。
- 能力介绍：
- 模型能力：借助 Doubao、DeepSeek 等模型，解析手绘设计图视觉元素与自然语言指令，生成符合要求的 HTML 代码。
- Canvas 功能：实时预览生成的 HTML 代码效果，支持多轮对话调整网页风格、配色等细节 。
- 函数服务（veFaaS）：事件驱动的无服务器函数托管计算平台，实现代码上传、函数创建与运行环境配置，助力网页部署。
- API 网关（APIG）：为部署的网页分配公网域名，实现安全、高效的流量转发，使网页可通过公网访问。
- 演示视频：以下视频展示了生成“显眼包”网站 demo 的能力。
Replay
00:00
/
00:00
Live
Play
00:00
Fullscreen
Cssfullscreen
Click and hold to drag
前提条件
- 服务开通：
- 对象存储（可选）：您可体验中心内一键开通。具体使用教程见对象存储控制台快速入门。
- 函数服务：您也可在体验中心内一键开通，具体参见下文使用步骤。
生成网站代码
操作步骤
- 访问 火山方舟大模型体验中心，登录火山引擎账号。
-
- 点击模型信息旁的切换按钮，将模型切换为 Doubao-Seed-1.6模型，250615版本。
-
- 点击 Canvas 按钮，打开预览 html 代码功能。
-
- 点击 + 符号打开附件上传界面，选择图片上传。
-
- 选择一个本地手绘稿设计图上传，我们以下面的图片为例。
-
- 在输入框中输入想要生成网页的具体要求（可包括网页主题、风格、配色、是否需要加入额外的产品参考素材等）。例如：
-
- 点击 发送按钮 开始执行任务。
-
- 等待模型完成推理。
-
效果展示
模型推理完成后，将在右侧屏幕通过Canvas快速预览生成的html网页。
您也可以通过顶端的 代码/预览 切换按钮切换显示方式。
多轮对话优化（可选）
您可以继续通过对话让模型调整生成网页的效果。
例如：把网页主题颜色改为淡粉色，重新生成。
生成效果对比如下。
优化前
优化后
部署网页代码
操作步骤
开启函数服务 MCP
- 点击 MCP 按钮，打开MCP服务器管理面板。
-
- 开通 函数服务（veFaaS）。在MCP服务器管理面板中，找到 veFaaS 功能，点击右侧开启按钮。
-
- 若未开通函数服务，系统可能会提示一键授权开通，请点击 确定开通与授权 按钮。
-
- 关闭 create_zip_base64 功能，其余均保持开启。
-
- 配置成功后，鼠标指向 MCP 功能，会显示已启用 veFaaS 函数服务。
-
执行任务
在文本框中输入部署要求，点击发送按钮。 示例输入：
模型开始推理。
效果展示
模型推理完成后，大模型会返回部署好的网页链接信息。
最近更新时间：2026.09.22 16:17:49
这个页面对您有帮助吗？
有用
有用
无用
无用