用豆包 Agent 制作
可编辑的作品集网站

原视频拆解｜小白复刻教程｜可实现性评测

来源作品：野川设计《我用豆包 Agent 做了一个作品集》

核验日期：2026 年 9 月 22 日

 结论先说

这个案例可以复刻。对于“单页作品集网站、多主题、可编辑文字与图片、上传作品、生成预览链接”这一级目标，技术可行性高；对于“长期稳定运行、跨设备同步、真实后台数据库、自定义域名和可靠联系表单”，原视频没有给出足够证据，只能按生产项目另行加固。

初学者按本文可以先做出可打开、可更换作品、可在手机查看的最小可用版本。不要先追求和视频一模一样，先把信息架构、真实作品数据和发布链路做通。

本文区分来源画面事实、创作者披露、官方资料和我们的复刻方案；复刻方案不等于创作者完整原始流程。

原作品由抖音创作者“野川设计”发布，标题为《我用豆包 Agent 做了一个作品集》，页面标注“内容由 AI 生成”，发布时间为 2026 年 8 月 25 日，时长约 1 分 55 秒。视频章节是：00:00 引言、00:35 如何制作网站、00:54 生成素材、01:22 完善功能、01:45 结语。

 视频真实演示了什么

图 1：原视频从展示成品、进入工作任务，到生成网站与继续完善的完整链路

视频先展示一个红黑电影感作品集：首屏是大字标题、两张主视觉和数字信息，向下包含关于我、精选作品、能力和联系方式。作品卡可点击打开详情，网页可在电脑和手机查看。

从 00:35 起，视频进入豆包任务界面，选择“工作”，在新工作任务中发送一段细化过的提示词。视频只展示了提示词的部分画面，可读到的要求包括：站点名称、首屏红黑流体视觉、导航、关于我、6 个作品、6 个能力、联系方式、编辑入口、上传作品、文字修改、主题切换与本地保存。

首次生成后，画面中的 Agent 列出了产物：3 张首屏图片、开屏动画、首屏、关于我、精选作品、能力介绍、联系方式与编辑台。画面明确提到文字双击编辑、数据保存在 localStorage、红黑流体 / 赛博蓝 / 极简白三套主题，并适配电脑和手机。

从 00:54 起，视频演示在同一任务中生成概念图片和一段 15 秒横版概念视频，再把素材放回网站首屏。随后让 Agent 生成多个主题方案，不只更换颜色，还变化版式、卡片和交互。

从 01:22 起，视频通过对话继续修复“文字不能编辑、图片不能替换”的问题。Agent 返回的可读信息包括：全站自动注入编辑能力；文字单击选中、双击修改；图片/视频可替换；元素可拖动、可改背景色和边框色；编辑工具随主题适配。最后画面显示“作品标题、分类、描述、标签、上传作品”表单和“发布预览”按钮。

 复刻性评测

可稳定复刻的是：单页信息架构、响应式布局、作品卡和弹层、文字修改、图片替换、三套主题、浏览器本地保存和预览链接。

需要多轮调整的是：与原片接近的高级视觉、多主题下的布局差异、全站编辑器的操作稳定性、动画与手机性能。

视频未证明的是：多用户后台、服务端数据库、真实文件存储、联系表单收件、跨设备实时同步、自定义域名、SEO 和长期托管承诺。画面中明确出现 localStorage，这意味着数据默认保存在当前浏览器，不应将它误写为“云数据库”。

截至 2026 年 9 月 22 日，豆包官方页将豆包工作定位为可根据目标调用技能并持续完成复杂工作的产品，官方隐私政策说明“工作任务”会自动拆解任务、调用工具并持续推进；编程产物可通过飞书平台访问、发布和分享。但功能入口、套餐和权益可能调整，以当前界面为准。原视频评论区中，创作者当时对“是否付费”回复“不用”；当前官网已出现订阅权益与定价入口，因此本文不保证所有账号永久免费。

 准备材料

1. 一台能运行豆包工作的电脑和可登录的豆包账号。

2. 站点名称、一句话定位、个人简介、工作经历时间线、技能和联系方式。

3. 4 到 6 个真实作品；每个作品准备标题、分类、简介、个人职责、年份、工具和 1 张横版封面。

4. 练习时使用的图片副本。不要上传未获授权的客户资料、内部项目、证件、手机号或私密数据。

5. 真实发布时使用的备份目录，用于保存网站导出文件、作品数据和原始素材。

作品经历、个人职责和数据不应由 AI 虚构。可以用 AI 生成视觉占位素材进行练习，但对外求职时要换成真实作品并标明自己的贡献。

 步骤一 进入工作任务

图 2：原视频中的工作任务入口与长提示词画面；按钮名称会随版本变化

1. 打开 https://www.doubao.com/work，按当前页面下载并安装豆包工作。官网会根据当前系统显示下载入口。

2. 登录后新建工作任务。原视频界面需要在“对话 / 工作”中选择“工作”，输入框下方出现“工作任务 Pro”和“云电脑”。

3. 当前版本的入口可能叫“新建办公任务”、“工作任务”或相近名称。找不到时先升级客户端，再从官网帮助中心确认当前入口。

4. 第一次不要给真实资料的写入或删除权限，先用副本练习。

预期结果：你能看到一个可发送长任务的输入框，任务运行后会显示分析、调用工具和产物预览。

失败排查：如果只进入普通对话，不要继续发网站需求；先切回工作任务。如果账号没有某个入口，这是版本或权益差异，不要照搬视频旧按钮。

 步骤二 先生成网站骨架

图 3：首次生成结果中可辨认的页面模块、编辑能力、主题和响应式要求

下面是我们编写的复刻提示词示例，不是创作者原文。为了稳定，先生成框架，不让 Agent 第一轮同时做复杂动画、后台和全套素材。

复刻提示词 A 网站骨架

请为我生成一个设计师单页作品集网站。站点名称是【你的名称】，目标读者是【招聘经理 / 客户】。先输出页面结构和实施计划，等我确认后再实现。

页面必须包含：固定导航、首屏、关于我、工作经历时间线、精选作品、能力、联系方式。精选作品先放 6 个明确标注为“待替换”的测试数据，点击后打开作品详情弹层。不要虚构我的公司、项目、客户或数字成果。

视觉方向：【红黑电影感 / 你的风格】。大标题高对比，卡片留白充足，作品图是信息主体。先使用轻量级占位图，不要从网络抓取来源不明的图片。

交互要求：导航可滚动到对应模块；作品卡可打开和关闭；联系按钮可正常聚焦；桌面和 375 像素宽手机都不能横向溢出。暂时不做真实数据库、登录、支付和多用户后台。

完成后请列出已实现的模块、未实现功能和我需要替换的素材。

预期结果：Agent 先给出结构，然后生成可预览页面。你能看到所有必要模块，即使占位图还不美观。

失败排查：如果页面只有首屏，要求 Agent 按模块清单逐项检查；如果一次生成太多出错，要求先保留内容和布局，关闭复杂动画。

 步骤三 检查首次生成

图 4：视频展示的首版网站：先验证结构和交互，再调整视觉细节

按以下顺序检查，不要立即改配色：

1. 导航能否跳到首屏、关于我、作品、能力和联系方式。

2. 6 个作品卡是否全部出现，点击后能否打开详情。

3. 手机宽度下是否没有横向滚动，文字和按钮是否依然可读。

4. 联系按钮是否有真实去向；如果只是视觉假按钮，先记入待修清单。

5. Agent 是否列出了自己实现的模块和未实现部分。

可复制的纠错指令：

 步骤四 生成首屏图片和概念视频

图 5：在同一工作任务中继续生成首屏图片与横版概念视频

视频中的提示词画面将首屏素材拆成 3 张图，分别是红橙流动光线粒子、VR 眼镜人物仰头特写和红橙竖条光影前的多人剪影。下面是我们根据可见画面整理的复刻提示词，不是完整逐字转录。

复刻图片提示词

1. 黑色深色背景，红橙色流动光线与细小粒子，科技感、电影质感，大面积留黑，无文字、无标识，16:9 横版。

2. 佩戴发光 VR 眼镜的人物仰头特写，红橙色光线勾勒面部，深色背景，强对比、电影灯光，无文字，16:9 横版。

3. 红橙色竖向光幕前的多人剪影，前后层次明显，深黑背景，时尚活动与电影感，无文字，16:9 横版。

视频界面可读到概念视频的参考值：Seedance 2.0 fast、15 秒、16:9、未来科技感、电影质感、深色底加橙红光效、缓慢推进加环绕、无台词和无文字。这些是视频画面当时显示的设置，当前账号可用模型和时长以实际界面为准。

复刻视频提示词

15 秒横版未来设计概念视频。开场为纯黑背景，红橙色细小粒子从画面四周缓慢汇聚；中段粒子形成流动光线和扭转的 3D 流体，有液态金属质感；高潮时流体释放橙红光芒，中心形成球形能量核心；结尾光芒缓慢收束，粒子回归黑暗并留下少量余辉。镜头缓慢推进并轻微环绕，空间层次明显。无人声、无字幕、无文字。

生成后发送：

失败排查：图片里出现错字时，不要继续修图，重新生成“无文字”素材；视频卡顿时优先改静态图，不要用高码率大文件硬撑手机端。

 步骤五 做多主题但不只换颜色

图 6：多主题复刻的关键：视觉、版式、组件和交互一起变化

原视频的初次结果列出红黑流体、赛博蓝、极简白三套主题；后续画面中可读到更多视觉方案。视频强调“不只是换颜色”，布局、卡片形状、按钮样式、装饰元素和悬停交互也要变化。

发送以下复刻指令：

预期结果：切换主题时，文字和作品数据不变，但视觉和布局明显不同。

失败排查：如果三套主题只有颜色变化，要求 Agent 列出每套主题的布局、字体层级、卡片和交互差异，再按清单修改。

 步骤六 补齐全站可编辑能力

图 7：原视频后续补齐文字、图片、视频、拖动和样式编辑能力

不要一次要求“所有东西都可编辑”而不设验收标准。发送下面的分项指令：

“请在不破坏当前视觉的前提下添加编辑模式。

1. 只有点击右上角齿轮才进入编辑模式。

2. 文字：单击选中，双击编辑内容；可调整字号、字重、颜色和对齐。

3. 图片和视频：选中后显示替换按钮，支持上传同类型文件，替换后保持容器比例。

4. 作品：新增表单，字段为标题、分类、年份、个人职责、描述、标签和封面图；可新增、编辑和删除。

5. 元素：如果实现拖动，仅在编辑模式启用，防止正常浏览时误操作。

6. 保存：当前版本先保存到 localStorage，同时提供导出 JSON 备份和导入 JSON 恢复。

7. 提供“完成”和“取消本次修改”按钮。完成后请用一个测试作品验证新增、刷新保留、编辑、删除和 JSON 恢复。”

为什么补充 JSON 备份：localStorage 可能因清理浏览器数据、更换域名或设备而丢失，不能把它当作唯一备份。这是我们为可靠复刻补充的方案，不是原视频已展示功能。

 步骤七 上传真实作品并发布

图 8：作品上传表单与发布预览画面；发布后仍需无痕窗口与手机验收

1. 先用一个测试项目，在编辑台填写作品标题、分类、描述和逗号分隔的标签，再上传封面图。

2. 返回作品列表，确认新卡片出现，点击能打开详情，图片没有拉伸。

3. 刷新页面，确认数据依然存在。再编辑标题并删除测试项目，确认完整增删改闭环。

4. 点击当前界面提供的发布或预览入口。原视频中的按钮叫“发布预览”，当前版本名称可能不同。

5. 在无痕窗口打开发布链接，检查访客是否需要登录、图片是否加载、作品弹层是否可用。

6. 用手机打开，检查导航、首屏、卡片、动画和联系按钮。

7. 导出或下载可用产物，同时保存 JSON 数据和原始素材。

联系表单需要单独测试。如果没有后端或邮件服务，表单可能只是界面。最小版本可先使用明确的邮箱链接；要实际收集表单，需要额外配置后端或受信任的表单服务。原视频没有演示这一层。

 失败排查

• 网站只是好看的静态图：要求 Agent 逐项验证导航、作品弹层、编辑、数据保存和发布链接，不接受“已完成”一句话。

• 变更一处后其他模块丢失：每次只改一类问题，要求保留现有内容和数据结构，修改后重跑验收清单。

• 上传图片刷新后丢失：检查图片是否只是临时 URL；如果是，需要改成可持久文件存储或导出打包，不要假设 localStorage 可以稳定存大图。

• 手机动画卡顿：在窄屏停用背景视频和大面积粒子，改用封面图；将非关键动画限制在一次入场。

• 页面文字很像模板：不要让 AI 自己编工作经历；上传真实作品资料，仅让它压缩和统一表达。

• 发布后访客无法打开：先用无痕窗口检查权限，再检查是否需要登录、链接是否过期、资源是否依赖本地路径。

 最终验收清单

图 9：从需求、网站、素材、主题、编辑到发布验证的完整复刻闭环

• 所有导航链接可达到正确模块。

• 4 到 6 个真实作品都有标题、类别、个人职责和封面。

• 作品详情可打开、关闭，键盘用户也可操作。

• 手机 375 像素宽度下没有横向溢出，图片不变形。

• 复杂动效在手机和减少动效模式下有静态替代。

• 编辑模式可进入和退出，普通访客不会误改页面。

• 测试过新增、编辑、删除、刷新保留和数据恢复。

• 发布链接已在无痕窗口和手机验证。

• 联系入口真的可用，没有伪装成可提交的假表单。

• 未公开客户隐私、公司内部文件或未授权图片。

• 已保存可恢复的数据与素材备份。

 官方入口与核验日期

核验日期：2026 年 9 月 22 日。

• 原视频：https://www.douyin.com/video/7677574626146290950

• 豆包工作官网：https://www.doubao.com/work

• 豆包工作帮助中心：https://www.doubao.com/work/docs/

• 豆包官方隐私政策：https://www.doubao.com/legal/privacy

• 豆包电脑端下载：https://www.doubao.com/download/desktop

注：公开转载原视频画面时，发布者仍应确认对应授权范围。