当 CodeX 额度耗尽，作者用豆包工作接手淘宝宣传页项目，却意外发现其 Coding 能力远超预期。从视频转场卡顿到 200 毫秒延迟的巧妙方案，豆包不仅精准执行指令，更让创意迭代效率飙升。本文完整复盘制作过程，探讨低价 AI 工具如何改变开发工作流。

这两天深度体验了一下前段时间推出的豆包工作。说实在的，我一开始真没把豆包的 Agent 放在眼里。大家也知道，豆包在办公或者办正事这块的口碑一直不尽人意，网上都嘲讽叫 der 包。我自己平时用 AI 工具也挺多的，写代码主要靠 CodeX，做图做视频有其他专门的工具，豆包在我的工作流里基本没什么存在感。

这篇文章的诞生契机也比较巧。我自己平常经常会用 AI 做一些产品或者游戏类的项目，项目做完之后，宣发这一步总是绕不开。不管是个人做着玩还是公司里的正式项目，都需要一些宣传手段，落地页、宣传页、活动页这些东西，说简单不简单，说复杂也不复杂，但每次都得花时间弄。

这次我本来是想在闲暇之余做一个宣传网页练手，选题就用了我的老东家淘天的产品，也就是淘宝。准备做一个淘宝的网站宣传页。结果制作途中非常不幸，遇到了所有 Web 编码使用者都头疼的问题：我的 CodeX Token 额度彻底用完了。

当时挺纠结的。等下次额度重置吧，手头上的思路正热，放几天可能就不想做了；换别的工具吧，又得重新适应。正好豆包工作前段时间发布，我就想着干脆借此机会测一下它的 Coding 能力，实在不行就只能等 CodeX 额度重置了。结果没想到，效果居然还可以。

整体的评测我在上一篇文章里已经写过了，这次就专门针对写代码这一块，给大家分享一下我的实操项目，也就是淘宝宣传网站的完整制作过程。

首先当然是让豆包自由发挥，先跑一个初版出来。这里我刻意没有把提示词写得很精细，只是大致讲了一下需求，甚至还用了一些很笼统的主观词，比如炫酷。我当时写的 prompt 是这样的：

我准备做一个淘宝的宣传网站，需要你来辅助我完成：

设计目标：炫酷的交互效果

网站类型：在一个单页面通过点击交互来变化

要求：这次的网站制作需要年轻时尚潮流化，且仅用作 web 展示，无需考虑配置多端，同时必须要打开不卡顿，交互流畅丝滑

实际做出来的效果我放在下面了，同时还附了一段同提示词下 CodeX 给出的成果演示视频，大家可以对比着看（上面为codex，下面为豆包）

（完整演示视频在结尾）

平心而论，Codex 的整体效果肯定还是更好一些，毕竟是专门做代码的模型，积累和优化都在那里。但豆包的倒也不至于烂得出奇，毕竟我一开始也没想过让豆包去超越 CodeX。作为一个如此低价、甚至可以说得上免费的 Agent，能跑出这个效果，我觉得已经超出预期了。顿时我也来了兴趣，决定就用它把这个项目做完。

选淘宝来做炫酷潮流的效果，其实不是一件容易的事。淘宝作为一个电商平台，视觉上大部分都和商品有关，货架、推荐、促销信息这些元素天然偏商业，不像游戏或者潮流软件那样自带视觉张力。要在淘宝这个题材上做出年轻人觉得酷的东西，得换个思路。

我的做法比较激进。想法是以模特身上的商品作为展示主体，用商品的切换来映衬淘宝的注入销量或者近几年的一些成绩，从而达到宣传效果。如果商品之间的转换能做到丝滑流畅，整个页面的观感应该会不错。这个思路确定之后，接下来就是怎么实现的问题了。

一开始的困难是确定一个主体。如果用模特，建模那确实太难了，需要很高的精细度，而且我想做以及想分享给大家的教程或项目，希望基本全用 AI 搞定，不需要大家本身具备太多技能。所以我没有走建模的路线，而是采用了视频。

这里我用了 Seedance2.0，原本是准备直接生成一整段展示视频，嵌入到网站中，观察商品只需要设置一些节点，停顿即可展示商品。但实际操作的时候遇到了问题，当我给出参考图让 Seedance 生成长视频时，它总会犯一个毛病：为了确保视频的整体效果，它会把我给的参考图进行跳切。而我要的是商品与商品之间丝滑的展示，跳切就完全破坏了这种感觉。

所以我被迫把素材变成一段一段的，每段视频只展示一个商品或一个转场，再用豆包工作把这些素材整合排序，来达到一个较为丝滑的效果。但这样一来新的问题又出现了：视频素材是一段一段的，视频与视频之间的过渡如何保证丝滑、尽量做到不卡屏，成了一个比较大的难点。

虽然我用的每段视频首尾帧都是同一张图，但因为是用视频生成模型跑出来的，哪怕首尾帧一样，在一些细微之处总还是有不同。比如背景的像素会有轻微漂移，模特脸部会有微弱的表情变化。分开来看其实没什么区别，但要做到上一个视频与下一个视频无缝切换，这种细微差异就会变得很明显，肉眼能感觉到一顿。如何削弱这种卡顿感，成了整个项目里最花心思的部分。

我的第一个方案是，在视频停止、用户查看文字的时候，在后台悄悄把视频替换成下一段。这个思路的逻辑是，用户的注意力在文字上，后台换视频他感知不到。实际效果一开始确实还可以，正常阅读节奏下基本感觉不到切换。但我马上想到了一个漏洞：如果用户不打算看文字，直接点击继续的话，后台还没来得及换视频，卡顿就非常明显了。这个方案对用户的行为有假设，不够稳。

第二个方案是在用户点击继续的时候，界面出现一些动效来遮盖住这次卡顿。比如画面闪一下、或者做一个快速的缩放转场，用动效把视频切换的那一瞬间盖住。实际效果也还不错，动效一遮，卡顿基本感知不到了。但我又担心这种做法会让用户出戏，毕竟整个页面的调性是丝滑流畅的，突然来一个刻意的转场动效，反而打破了沉浸感。这个方案能用，但不够优雅。

就在我和豆包工作来回交流方案的时候，突然冒出了一个点子：当用户点击继续的时候，先不去响应用户的指令，而是延迟大概两百毫秒之后再播放视频。而这两百毫秒就用作后台偷偷将视频替换成下一个。这个方案的妙处在于，用户感知不到这两百毫秒的延迟，对他来说点击之后画面自然过渡到了下一段，但实际上系统利用这极短的时间窗口完成了视频替换。

我把这个想法告诉了豆包工作，它马上就实现了。实际操作之后，效果已经比较满意了，视频之间的切换基本做到了无感，整个页面的流畅度上了一个台阶。

而让我比较感到惊奇的是，像这样细微的提示词指令，豆包现在已经完全能够分辨出其中的差异了。不用说去年，哪怕是在今年年初的时候，豆包以及字节旗下的 AIDE 工具 Trae，都无法这么清晰地区分你对细节的更改，特别是这种技术性的细节。你说延迟两百毫秒再播放，它可能给你改成延迟两秒，或者直接忽略这个参数。但这次非常惊讶的是，我只跟它说了一遍，没有任何调整，它马上就领会了我的意思，并且效果非常好。

当我回过头来复盘整个项目的时候才发现，每次我让豆包工作进行的更改或者新增，我几乎不需要说第二遍。每次的指令完成都非常精确，我说延迟两百毫秒它就延迟两百毫秒，我说换个配色它就换个配色，我说这个动效太夸张了收一点，它收的幅度也刚好。这种沟通效率是我之前没有预料到的。

最终做出这样一个网站效果，我只用了几个小时。跟豆包发的 prompt 也没有几条，基本上每次有新的想法和想实验的效果，说一遍马上就可以看到结果。这种迭代速度对于做创意类项目来说太重要了，你脑子里冒出一个想法，几分钟之内就能看到它跑起来是什么样，不行就马上换，整个创作过程是连贯的，不会被工具打断。

最后的成品实际效果我贴在下面了。当然这次只是用淘宝练个手，所以文案和排版全都没有管，只是展示一下交互逻辑以及宣传的项目思维。如果要正式用，文案、视觉细节、响应式适配这些还得再花时间打磨，但作为一个验证交互思路的原型，它已经完全够用了。

做完这个项目之后，我对豆包工作的看法确实发生了一些变化。

最直接的感受是，低价或者说免费的 AI 工具，现在已经能做到什么程度了。以前我们总觉得，写代码这种事就得用最好的模型，就得花大价钱订阅最专业的工具。但这次用豆包工作做完整个项目，我发现对于大部分日常开发需求，尤其是做原型、做落地页、做活动页这种场景，它完全够用。CodeX 当然更强，但强出来的那部分，对于很多人来说可能感知不到。而价格上的差距是实实在在的，六十八块钱一个月的标准套餐，甚至免费版就能跑起来，这个门槛低到几乎所有人都能试。

第二个感受是豆包的进步速度。我前面提到，今年年初用 Trae 的时候，很多细节指令它理解不了，你得反复说、换着法子说，它才能大概 get 到你的意思。但现在的豆包工作，两百毫秒延迟这种技术性细节，说一遍就懂。这种进步不是线性的，是跳跃式的。可能几个月不用，再拿起来就发现它已经不是之前那个样子了。这也让我对 AI 工具的迭代速度有了新的认识，以前觉得某个工具不好用就再也不碰了，现在看来每隔一段时间都应该重新试一下，变化可能大到认不出来。

第三个感受是关于工作流的。豆包工作不只是一个写代码的工具，它是一个 Agent，意味着它能自己规划、自己执行、自己交付。做这个淘宝宣传页的时候，我不需要告诉它先写 HTML 再写 CSS 再写 JavaScript，我只需要说我要什么效果，它自己会拆步骤、会调工具、会把最终文件交给我。这种从指令到成品的一站式体验，和传统的 AI 代码助手完全是两种感觉。传统的助手是你写一段它补一段，你得一直在旁边盯着；豆包工作是你给个目标，它去干活，你中间看结果、提修改就行。

当然它也不是没有短板。复杂的业务逻辑、大型项目的架构设计、需要精细调试的性能优化，这些场景它目前还扛不下来，该用专业工具还是得用。但如果你的需求是做一个宣传页、一个落地页、一个活动页、一个简单的工具网站，豆包工作的性价比真的很高。而且它和飞书生态的联动，对于团队协作来说也是加分项，做完的东西可以直接丢进飞书文档里分享，不用倒来倒去。

这次体验让我对 der 包有了新的理解。可能它在某些方面确实还不够专业，但在它瞄准的那个场景里，它已经做得足够好了。对于大部分人来说，不需要最强的模型，需要的是够用、便宜、顺手的工具。豆包工作目前就是这样一个存在。如果你也有 CodeX 额度不够用的时候，或者想找一个低成本的 AI 开发助手，真的可以试试它，说不定会和我一样有点意外。

完整演示视频链接：https://ucn4vzfetm4h.feishu.cn/wiki/MAcBwpJFqiTn6ykUY7ncLIFan4c?from=from_copylink