我终于成为了全栈开发，各种AI工具加持的全过程记录

全栈开发新纪元，AI工具如何助力个人突破资源瓶颈？

核心内容如下：

• 全栈开发中遇到的资源瓶颈问题
• 多种AI工具在全栈开发中的应用与实践
• AI时代下技术焦虑与提效的思考

ps: 本文的核心目的是记录和分享一次使用多种AI工具进行全栈开发的过程，解决某些情况下想做点什么事，但被资源卡脖子的窘境。所以多体验和分享一些AI工具，帮助个人扩大职责边界，供学习和参考。生产环境或业务开发流程中请谨慎使用，务必仔细阅读文章中的各种流程与限制。本文承诺没有一个AI大模型在过程中受到伤害——只有调试中的那位开发者在不断破防。

一、背景

现实中，我们常常会碰到一些基础平台的需求。平台运维久了，会看到很多有价值的地方——比如要继续提供新的功能模块——都需要慢慢打磨。可一旦涉及设计、前端等协同资源，就容易被卡脖子。很多想做的事要么做不了，要么得拖很久，尤其是年底业务高峰期，资源全扑在业务上。

既然被卡脖子，总得想办法。在当下的AI时代，技术方面其实很难再被卡住。经常玩编程的同学都知道，AI出现前后，学习一门编程语言的效率和体验完全不同。好比以前学Rust，有人直接上手写书（之前有和ChatGPT一起写过一本Rust教材）。除了去学前端和相关技术栈，现在还有Cursor、Windsurf这类AI IDE工具，有Bolt.new等AI驱动的前端工程平台，甚至海外还有mgx.dev这样的Multi-Agent开发平台。

mgx.dev，包括五个角色（项目管理、工程师、架构师、TL、数据分析师），但实际上就工程师在干活。

所以本文从一个需求出发，全程记录如何做全栈开发。其实流程很简单，另外还有一些附加内容，比如基于Dify + Bolt.new，能很容易做出很多有意思的东西。Bolt.new这类工具更多是生成前端代码，而Dify天然是Backend as a Service，能很快拉出一个应用服务——但正好缺乏前端搭建的能力（补齐了和Coze的核心差距，又更加智能）。

虽然很多内容讲到前端，但并没有取代前端工程师或其他岗位的意思。关于AI时代和取代，很多人会有技术焦虑。这篇文章没有传递焦虑，这里做一点额外解释：AI提效意味着什么。

好比游戏行业，最近很火的新闻是“AI三小时做的游戏，九天挣了12万”。以前做游戏需要美工、程序一起上，成本高，而且制作人在来回拉扯中容易偏离方向。现在几个游戏制作人直接下场，有激情就能做。工具变简单了，很多美工和程序员失业了，

从行业规律来看，游戏行业在AI加持下只会更好。因为

。而现在游戏制作人更容易做出符合自己脑海里的游戏，所以可以预见未来会有更多、更有趣的作品。这对行业是好事，对玩家也是好事。

更值得思考的是：

。每个人都应该去做更多创造性的工作，而不只是做流水线上的一环、只负责干活不负责思考。每一个参与在游戏行业的人，都应该踊跃使用这些工具，争取做出更好玩的游戏。

二、先来做一些小工具

2.1 从R1的对话工具说起

自从春节DeepSeek火得一塌糊涂，一上班，大家都在找“服务器繁忙，请稍后重试”的解决方案，甚至诞生了“满血版R1”“残血版R1”这样的名词。作者也不例外，找了一圈，最后回归了公司百炼提供的DeepSeek R1服务，一过完年就在内部部署的Dify上支持了DeepSeek模型。

一开工就支持了DeepSeek R1模型的调用，重点是thinking的支持。

但仅仅支持模型调用远远不够，很多人还没体验过和DeepSeek R1对话。最好的方案是直接做一个开箱即用的对话页面——类似IdeaTalk，支持多轮对话、记忆重置，并能正确转义thinking和response。但Dify原生拉出的应用落地并不支持thinking转义，页面也比较生硬。所以需要自己上手撸页面。成品如下：

平台提供的一系列工具页面，包括与多个模型的AI对话和一系列工具；thinking部分替换成了Markdown的```think样式。这些页面和编排，都由AI完成。

当然，需要一个能从0到1根据自然语言编写页面的工具。这时就要用Bolt.new了——一个开源的自然语言编程生成工具，和MGX类似：

Bolt.new首页，只需要自然语言描述想要的产品，代码生成由AI完成。

先搭建一个能好好聊天的页面。打开Bolt.new，输入对话式描述（注意这里Dify的apiKey会明文投出，建议提供服务时再做一次加解密逻辑）：

使用Bolt.new尝试生成一个对话机器人页面。

但发现效果不太好，让AI纯粹写聊天机器人调试起来比较困难。于是调转方向，找一个比较美观的框架，把Dify的对话页面嵌入进去。继续输入：

继续对话，生成美观页面并嵌入一个页面。

这次效果不错。把代码下载下来，放进Cursor进行微调（过程略）。在自己机器上安装好node环境，执行：

npm install
npm run build

构建出dist目录，利用GitHub Pages（https://docs.github.com/en/pages/quickstart）上传这些文件，很快就能拉出一个页面服务。

2.2 补充各种小工具

到了这一步，已经有一个类似OpenAI GPTs的工具，可以直接和DeepSeek-R1对话，还能切换模型、保存记忆、重置（一半是Dify的能力，一半是生成的前端代码部署）。但还想更进一步：在Dify上能搭建很多有用的工具，比如JSON修复、SQL生成、时序图生成等常用小工具。通过Bolt.new、Cursor这类工具，可以快速给Dify配上前端代码生成能力。

上面生成的页面留了一个扩展——每个菜单栏渲染一个iframe嵌入页面，每个页面有一个单独的代码仓库。成果如下：多了一个菜单“研发工具专区”，点击后会渲染另一个GitHub Pages孵化的页面，页面右边有多个工具集可以选择，每个工具集下有一系列小工具。

制作一系列小工具，比如JSON系列、设计画图类等。

每个这样的页面可以单独制作，过程比较机械重复，熟悉的同学应该都能掌握，不再赘述。同理，很多页面都可以这样来做，和后端通信时，告诉AI点击按钮后触发Dify的API即可。示例：

小工具与Dify API的通信。

整个流程很清晰，剩下就是发挥想象力。页面可以嵌页面，页面单独生成，生成的页面通过按钮触发Dify API调用，从而让AI流程具备页面展示能力。整个过程快速高效，但调试比较耗时。

三、一个需求的完整实现

上面都是从0到1建设新工具、新页面。很多同学会说，这不是真正的全栈开发——真正的全栈应该能对已有系统进行持续开发和迭代，而不是只用小工具。下面来一个完整需求，这次不是小工具，而是在Dify本身上进行改进。

先讲下背景：Dify有很完整的编排、API服务和日志管理能力，但缺乏数据集管理和评测能力。而同类型的百炼等服务都有提供。在调试一个工作流效果时，需要同一波输入反复回放并进行评测，评测最好也依赖一个独立的工作流来实现。

整个过程涉及页面改造和服务端实现，是一个较复杂的新需求。而这一切都由作者一个人搞定。下面讲完整实现。

3.1 需求设计

先进行需求设计。既然需要数据集管理与评测，就需要一个明确的入口。设计每个工作流应用可以管理自己的数据集，在数据集管理页面中做批量运行和评测。入口设计是在Dify左侧菜单增加一个“数据集管理与评测”菜单，如图所示：

在左侧栏加入一个菜单，专门做数据集管理。

数据集从哪里来？可以从日志中已经运行过的结果里提取。所以在查看日志时，新增一个入口，让用户能方便地加入数据集：

在日志中提供“加入数据集”按钮，自动将日志加入数据集。

当然也可以手动录入数据集。接下来设计“数据集管理与评测”内部细节——进入左侧菜单后展示数据集列表，可以进行增删改查，评测内容管理也是一套简单的CRUD管理页面。这些用Bolt.new+Cursor可以快速完成，这里不展开介绍，主要说明如何在原产品上改造几个入口。

设计完成后，先写一篇设计文档，把前后端实现方式完整写出来，然后就可以开干了。

3.2 前端开发

先写前端——为什么先写前端？因为数据都可以mock，先把界面做清楚，

。

前端功能较多，这里只说明侧边栏加入页面和日志页面增加“加入数据集”按钮的实现模式。

下面是使用Curosr（Dify前端代码基本开源，几乎没有二开，无数据安全问题，但公司内使用时注意代码数据安全）的记录过程及相关截图。

先在HTML上大概改一下（要是能有这种AI工具就好了），然后截图告诉AI，现在要加个菜单栏。

然后自行定位到导航栏位置，直接描述要在什么位置加一个按钮，点击后触发什么后端接口（后端接口暂时还没有，先假设有了）。

按钮代码生成完了，根据自己的判断Accept一些代码，部署。初始样式很奇怪（忘了截图），继续让它改样式。

改样式，继续修改，继续继续——这里只简单说明，实际改了很多轮。

改好之后，大概长这样。但此时后端代码还没有，会报错——没有提示。继续让它追加Toast提示。 截图+描述，一定要尽量清晰，不要无脑接受代码，需要看看、理解一下。代码都写好了，Review清楚能事半功倍。

还是会继续报错，让它不停调整。这时应该了解报错原理，不能无脑。看了一下代码，不懂的地方问了AI，并参考其他地方怎么实现，然后告诉它应该这样改。 再调试几轮，基本就改好了。

回到之前说的，写完前端，基本后端就知道怎么写了。数据库设计、数据模型代码、业务逻辑代码都可以让AI辅助，这是老本行，不再赘述。

四、总结

拓宽边界从来不是一件简单的事。即便现在有了很多方便的AI工具，它们依然是为人类服务。要达到这种模式，大致梳理了五条技能，满足其中四条基本就能独立开发。但复杂功能仍会陷入无休止的调试，有待更多实验验证。