解锁 25 年新头像，仅用一小时，用扣子给抖音做了个小程序

眼尖的朋友可能发现了，这两天跨年嘛，就换了个有趣的新头像。

再偷偷告诉大家一个秘密，其实这个头像是基于我们自己做的小程序生成的！

起因是半个多月前，扣子问我们有没有兴趣共创一个小应用。

期望能基于最近更新的 ProjectBuilder，给抖音美好跨年季活动，做其中一个功能的小程序技术支持，核心是支持用户上传头像后选择替换不同的头像框。

整体需求评估下来不算复杂，于是我们爽快地答应了下来！花了五分钟拆解具体需求，半个小时的开发，以及一段时间的测试部署，便完成了该项目。

请看 VCR！

外包开发一个小程序需要多少钱？需要多久？

我们去某宝和某🐟上打听了下行情。别看首页上写着只需要几十几百，这里面的套路还挺深。

我们把我们简单的需求发给几家客服，得到的回复均是“这个涉及定制开发”，平均报价在 5k，开发周期在 7 天左右。

而最终这个需求，我们基于扣子，只花了一小时就完成了。

为什么外包开发这么贵，我们思考了一下，原因大致有三：

1. 需求虽然不复杂但是不在他们的模板库里，无法基于现有模板微调上线，其中存在一定的不确定性和主观发挥的创造性。

2. 项目开发的外包（很可能是层层外包），其中涉及大量的沟通成本，甲方的需求大多数情况下无法一次性满足。

3. 无论是简单的代码还是复杂的，终究是要写代码的，程序员的工时相对较贵，现在即使有 AI 赋能，也还没有真正影响到行情。

而这些问题在扣子这儿都不是问题。不懂代码不会开发？不懂代码也照样使用扣子你懂代码；服务器需要成本？扣子帮你承担了；后面需要维护但不会改代码？扣子直接托管了，后面业务人员在扣子上直接修改就行了。

为什么扣子能非常便捷的实现需求？咋实现的？

那么接下来就详细地介绍一下我们的搭建过程。

我们选择先完成整个项目的“后端”（即用户表面看不到背后的运行逻辑），因为工作流比较熟悉。整体流程可以拆解为：

1. 先确定好用户的输入，包括一个上传的图片，和选择的一个头像框风格。

将这部分放到工作流开始的输入节点。

2. 将用户可能上传的不同尺寸不同分辨率的图片，按统一的规格进行缩放。

我们可以选择使用缩放插件的 Resize 函数，轻松将图片缩放到指定尺寸。

3. 由于有多样化的头像框供用户选择，因此要让把不同的需求路由给不同的图像节点去处理。

这时候选择器节点就派上了用场，我们将素材包里的十五个头像框素材，按照标定的序号顺序，塞到选择器中。

4. 下一步是核心步骤，将用户上传的头像与头像框进行拼接。

扣子的画板节点虽然功能不是非常强大，但简单的需求完全能 Cover！将素材上和 Resize 节点的输出进行一个拼接叠加，然后复制 14 份，替换其他的头像框素材。

5. 最后将生成好的图像进行输出，再测试一下效果和速度。

此处我们选择使用了扣子的文本处理节点进行统一，然后汇总给结束节点，就 OK 啦！

6.（还没做）将用户所有生成的记录都存到数据库，新建一个界面供用户查看所有的生成记录。

这一步通过代码和数据库节点可以实现，但不是硬需求，就还没花时间开发。

随后就到了前端 UI 的搭建部分。

尽管现在扣子的 UI Builder 还不是特别成熟，但现有的组件刚好够用～

1. 先把基本的元素和容器的布局搭建起来，然后把固定的图片素材进行填充。

背景和头部图片本地上传，并配置下位置和尺寸即可。

在结构部分，我们能相对清晰的看清楚整个页面图层的错叠结构，当页面元素较多时，我们能在此处快速定位（希望能上线一个能将组件重命名的功能）。

由于素材较多，我们将所有的样式展示采用了 3*5 的轮播滚动的展示方式，将溢出选为滚动，配置好容器和排版即可。

2. 配置用户的输入头像和选择头像框的入口。

这部分是最核心的，也是与后端工作流进行交互的入口。

先套一个表单输入的组件，将图片上传的组件和下拉框组件放入其中。

给按钮简单更改个样式，设置下运行事件的逻辑。

3. 配置输出图片的展示窗口。

这一步是有些复杂的，我们先做了一个中间态的展示（本来弄了个生动的 gif 动画，但稍微有点丑就砍成文字了），给“生成中，请稍等一会儿～”的元素配置了 {{ !profile_picture_2.loading }} 的可见性逻辑，即当合成新头像的工作流没有在运行时，它隐藏。

最后在合适的区域加上最终合成头像的输出组件，将工作流的输出数据绑定在此即可。

由于篇幅有限，其中有一些小的技巧无法完全展示。如果大家有相关需求或是同样是开发者遇到了一些问题，都可以加入我们的 Coze 开发交流群沟通喔（私信特工少女）。

为什么不直接用 AI 编程产品完成项目，似乎会更快？

很简单，因为当下的 AI 编程助手，一定程度上是过誉的。不是高可用的，不能端到端完成开发和部署。

具体原因如下：

1. 相较之下，扣子更可控、更可用。AI 写的代码越多，对于非资深 Coder 来说就越是一个黑盒。很多时候我们想要按照特定需求调整部分代码，但 AI 总是不能完全理解需求，或顾此失彼，一旦出了 AI 无法解决的问题，手动 Debug 前需要把 AI 写的代码看一遍理解一遍，再上手调试，其中的时间成本是不可预测的。

而扣子会带给你更多的确定性，由于封装好了工作流和前端组件（虽然现在还不多），哪一环节出了问题能够快速定位。后期维护也不需要程序员了，跟业务同学简单教学一下即可。

2. 扣子更低门槛，对开发小白更友好。使用 AI 编程工具，基本上需要较强的编程素养，这一学习门槛是很高的。但扣子上手相对更加轻松，比如完成我们整个小项目，没有写过一行真正的代码。

3. 扣子支持一站式托管，轻松发布到小程序等平台。虽然 AI 能够指导你配置环境、部署项目代码，但真正实际的部署环节中，由于环境、版本、系统等差异性问题，AI 往往爱莫能助，甚至因为幻觉给出更错误的答案。而扣子直接帮我们打消了这份担忧。

我们相信，基于现在扣子平台的能力和更长期的迭代更新，以及底层大模型效果的提升，未来会有更多好玩的、好用的 AI 应用，会通过扣子轻松搭建完成！

这不，AI 产品经理罗凯同学就做了一个「点评笔记助手」，下周一（1.6）在咱们社区做个分享，uu 们可以预约一下！

One More Thing！

扣子在分发场景上也一直在创新，Agent 的载体也从 ChatBot 扩展到了 Web、小程序，甚至是硬件。

在几天前的火山引擎 FORCE 原动力冬季大会上，扣子展示了许多 Agent 与硬件结合的有益尝试，其中现场最受参访嘉宾们关注的，就是和 TaShan 团队 x EduSnap 合作的 AI 天文望远镜。

1. 通过自然语言对话与意图识别，实现便捷交互控制；

2. 具备单智能体高精度指向、拍摄实时叠加；

3. 多智能体加入科学组网等专业模块。

他们甚至把它搬到了抖音美好跨年季-张杰跨年演唱会的现场！双厨狂喜！

“这一天我开始仰望星空，发现星不远，梦并不远，只要你踮起脚尖...”

在此前我们有多篇分析文章都有提及到，2025 年会是 Agent 备受期待，迎来爆发，并真正落地之年。

那么在 2025 年伊始，就让我们一起仰望星空，眺望那个即将到来的 AgentUniverse 吧！

文章来自于微信公众号“特工宇宙”，作者“ 特工少女”