不手写一行代码，100% AI从原型设计到完整网站，全栈开发实录

一、背景

AI编程赛道当前发展如火如荼，很多自媒体在鼓吹AI要取代程序员了，也有一些反对的声音，认为AI能完成一定的编程任务，例如当前让AI写一些代码片段毫无问题，但在复杂项目中后期修bug可能耗费你更多时间，甚至留下一堆代码屎山。

百闻不如一试，于是有一种冲动，做个实验，不手写一行代码，100%用AI从原型设计到完整开发实现一个网站，看看AI究竟行不行。

二、目标

考虑如下两点目标：

1、AI原生设计和开发

最近AI原生这个概念比较火，参考阿里云《AI原生应用架构白皮书》[1]，AI原生应用主要特征:

• 以LLM为核心，用自然语言统一交互协议；
• 以多模态感知扩展输入边界，以Agent框架编排工具链；
• 以数据飞轮驱动模型持续进化，实现系统的自我优化。

我个人的理解，AI原生的设计和开发方式，第一个是技术层面，和传统IT开发比，不再是把AI作为工具对既有流程的某些节点的修修补补，而是以AI为核心，围绕它做整个系统的设计和开发；第二个是思想层面，一切以AI思维和方式作为出发点，包括交互方式、设计方式、实现方式，至于用不用Agent也只是一种方式的选择而已。

回到我们的实验，AI原生体现在两个方面：

• 从原型设计到整个网站开发全用AI
• 网站本身要有AI交互方式，围绕这个AI交互方式作为核心展开

2、实现典型的网站功能

任何系统的核心，最终还是功能和流程要落脚到能满足业务需求，不能是为了使用AI炫技、为了AI而AI。

首先，要用AI的交互方式，目前主要是基于自然语言的方式，不管是文字还是语音对话，我们以AI聊天助手作为一个入口和核心展开。

其次，优秀的系统，都是根据具体的业务场景，设计和实现流程，最终让系统能用于生产，甚至指导生产。本次实验希望短时间完成验证，不去实现复杂的业务流程，所有系统底层本质都是对业务实体的增、删、改、查，再加上数据看板用于总结和决策。所以我决定网站主要功能是做一个库存管理系统，能实现对商品库存的增、删、改、查，加上商品库存的各种统计看板，可以通过传统表单形式操作商品，也可以通过AI助手对话方式操作。这是一个通用的功能，如果AI能实现这个功能，也能代表普适性。

最后，网站不是静态网页，要有专业的前、后端分离，要有独立的数据库。

三、先看结果

下面是本次实验最后实现的真实系统效果：

1、传统的商品列表，分页显示，可设置页大小；创建新商品，正确显示。商品的搜索、删除也能正常工作，视频中没录制。

2、数据看板，动态显示商品总数、在售商品数、低库存商品数、库存总量、商品分类分布柱状图、饼状图、价格分布、品牌分布等。

3、重点部分：通过AI聊天助手创建商品，可多轮对话最后确认商品信息后创建。背后调用DeepSeek大模型进行的意图识别。

接下来我们一步一步看实录！

四、AI原型设计

为了开发有个参照，我们从原型设计开始，前不久在试用Calicat工具（https://www.calicat.cn/），效果尚可，这次决定用这个试试。登录之后进入新建设计界面：

可在右侧通过和AI助理对话方式，输入设计的需求提示词，平台开始分析需求，逐个创建页面，下面是从开始到创建第一个原型页面的视频：

没有太多的对话纠正，最终创建了商品列表、增、删、改、数据看板五个页面，每个页面都有AI助手界面，基本满足需求。

几个页面效果分别如下，商品列表页：

新增商品页：

编辑商品页：

删除商品页：

数据看板页：

通过AI进行原型设计效果还不错，下面进行系统开发。

五、AI开发

1、工具选择

开发的第一步，要选择恰当的工具，目前AI编程工具竞争十分激烈，以最近几天为例，OpenAI在11月12日推出GPT-5.1，紧接着Google在11月18日发布了Gemini-3，指标上超越GPT-5.1，连OpenAI CEO Sam Altman都给它点赞，马上Anthropic在11月24日放出Claude Opus-4.5，超越了所有模型。

我用DeepSeek整理对比了国内外主要的AI编程工具，以及各自的优缺点：

Opus-4.5是具体的模型，还要搭配IDE，Cusor使用Cluade模型即使是科学上网也不稳定，Google Antigravity刚出来的，挺想尝尝鲜，据说Gemini-3在前端方面的能力秒杀一切其他工具，于是下载安装准备使用。

但在认证环节即使gmail顺利登录了，无论如何都不跳转回Antigravity界面：

网上发现大家都遇到这个问题，主要原因是gmail账号的地区是中国，申请更改没通过，放弃了！

时间紧，任务重，还是转回国内工具吧：）

平时通义灵码用得最多，最近和Trae对比觉得Trae生成的UI更专业，并且Trae完全免费，也不收大模型费用，这次决定使用Trae，安装步骤忽略。

2、小试牛刀

先看下Trae的界面，IDE长相都差不多，右侧是AI对话窗口，Trae支持Chat、Builder、Builder with MCP、新增的SOLO Coder模式，我使用默认的Builder模式:

Trae支持上传图片，把刚才的原型图直接扔进去，加上开发需求提示词，看看啥情况。

使用典型的结构化提示词，主要解释：

目标：

• 根据原型图进行开发，并描述系统的主要功能；
• AI对话使用DeepSeek进行解析，api key可配置；

要求：

根据之前的经验和常见问题，做了如下要求：

• 指定要前后端分离，有独立的前、后端，前端使用最常见的vue，后端使用AI友好、也是我自己熟悉的python语言，没有限定框架。要有独立的数据库，为了简化，指定使用本地文件数据库SQLite，以后要换为mysql等也方便。
• 指定要有日志记录，方便开发过程中查找问题，之前没有日志的时候出错找不到问题原因。
• 安装python依赖的包时，使用镜像。目前一般的AI编程工具使用智能体模式，在缺少包时都会自行安装，但不用镜像安装很慢。
• 多命令执行时一个一个执行。AI编程过程中会自行运行命令，例如切换不同目录、重启服务等，Trae和通义灵码都默认使用Linux环境下的&&连接多个命令，在Windows中不支持，这里明确要求每次执行一个命令，免得出错（虽然出错后智能体会聪明地重新一个一个执行）。
• 数据库中创建一些初始商品数据，方便查看效果。

下面是一段第一阶段视频，从一开始到Trae完成前后端代码开发，此过程花了半个多小时，我对其中耗时长的部分做了剪切、加速，为了能尽快展示完整过程。

整个过程AI分析需求，分解步骤，先创建前端代码，安装依赖的包，其中需要我选择一些使用的语言，例如是用JavaScript还是TypeScript等，然后是创建后端服务、数据库创建和初始化、商品的增删改查、对话窗口开发并集成DeepSeek......

完成数据库创建后，开始实现商品增删改查功能：

每对话一段时间，会达到思考次数上限，需要点击继续：

直到最后所有拆解步骤完成，会总结所实现的内容：

但不幸的是，系统启动出错，没跑起来！

3、先实现商品列表

基本在预料之中，不可能这么顺利一把就开发成功，接下来就是不断和AI对话解决各种问题，我节选一部分典型问题。先解决前端能正常看到页面的问题。

对话多次后，控制台不报错了，但是首页打开是空白的，我这样和AI说：

一般一轮对话，AI经过一顿修复，认为已经解决问题了，它会这样输出一个总结：

终于，终于从一开始到现在1.5个小时后，看到了第一个页面，商品列表！等等，这怎么和原型设计长得不一样呢，且原本要求的右下角AI助手没有出来，说明模型并没有真正去读取和理解我传的原型图，也没有按要求把AI助手做出来。事已至此，只能一步步往前走，不断优化。

后来继续发现商品编辑不能正常获取信息、编辑完不能保存等问题，不断对话逐个解决：

到此，商品列表、编辑、保存、删除都能正常工作了！下一步是添加AI助手。

4、增加AI助手

直接告诉AI添加AI助手，再次给它原型图（也不知道原型图是否起作用）。

右下角出来了个助手小人：

点击能打开，像那么回事了：

但是尝试通过对话添加商品，一直提示“商品已存在”，实际输入的是新商品名称：

这个问题是卡得最久的一个问题，和AI对话折腾了几个小时，让AI全局检查、做各种模拟测试。AI检查了商品创建时的各种约束，各个步骤，每次AI说已经解决了，但还是提示同样的错误，我甚至自己想了一些可能的原因让它检查。

后来我发现虽然有这个“操作失败，商品已存在”的回复，但商品列表中实际创建成功了。再测试先不回复上图的“确认”创建，去看列表中商品也已经创建了，说明在我回复“确认”的时候，进行了第二次创建，所以提示“商品已存在”。赶紧告诉AI，需求等我回复“确认”后再执行真正的创建动作：

这下问题终于解决，能通过AI助手对话创建商品了！对话过程中，在确认创建前，告诉AI助手纠正商品信息后再创建也能按要求创建成功，说明系统是调用大模型对聊天内容进行理解了的。

既然AI对话可创建商品，编辑、删除理论上都能实现，本次实验暂未处理。

5、创建数据看板

数据看板页面原本已经创建，只是其中的一些模块内容有问题，例如“品牌商品数量统计”中的品牌不是系统中真实的品牌名：

AI会创建一个脚本查询数据库检查真实的数据：

还有看板图片显示位置不恰当问题：

以及其他诸如横、纵坐标名称不全、数据不对等，分别针对问题进行对话，最终效果如下：

到此，计划开发的主要功能都有了：商品列表、创建、编辑、删除、数据看板、AI助手多轮对话方式创建商品。

六、看看实际生成的代码

先看整体项目结构，规范地分成了前后端，也按照要求创建了日志文件目录。

后端内容如下，侧重看下有后端服务的路由、AI服务、意图处理模块、数据对象处理（models）、数据库文件、初始化数据脚本。

前端vue视图、图片、样式表、路由。

下面重点看看AI服务，确实使用了大模型进行意图识别，代码开始部分有API key设置的地方，我手动设置为自己申请的DeepSeek API key。系统提示词如下：

处理意图的函数如下，调用deepseek-chat模型：

代码考虑很周到，如果大模型不可用时，还有降级方案，使用正则表达式分析对话意图：

最后，展示下在若干次的对话解决问题中，大模型经常会自己创建个脚本检查或者测试某个功能，下面是这些临时脚本的一部分，例如增加商品不成功的时候，它创建了红框中第三个脚本检查数据库中商品表的结构和内容：

七、思考总结

AI固然强大，人类的主要竞争力在于自主思考，所以我们要总结思考下此次实验，有以下几点：

1、模型或者编程工具的能力：实验最终结果总体满足要求，但明显模型没有按照我给的原型图进行前端页面开发，说明Trae后端的大模型在多模态理解方面的能力还不强。我默认使用的auto模式，使用豆包的模型，其他模型没尝试。最近比较多使用通义灵码，从我实践结果看，Trae生成的前端页面比通义灵码看起来更专业。Trae使用中模型免费，连我使用了多少token都没地方查，感谢！

这几天听说Gemini前端能力超强，下面是我用Gemini让它根据上传的商品列表原型图生成的html页面，基本复刻了原型图中的内容，包括左侧的导航、统计，中间的商品列表，右侧的聊天助手，特别是网页中的文字都一样，至少说明在前端能力方面是强于豆包和通义千问模型的：

上传的原型图片：

Gemini生成的html网页，样式和文字都几乎一模一样：

不过，网页中商品图片、头像显示都有问题，当再我尝试让它优化正确显示时，google提示访问出错了，这就是用国外模型不稳定的问题。

2、究竟AI能否代替程序员：现阶段，我只能说AI能辅助程序员，那些说能完全代替的都是噱头。首先，AI已经能很强大、快速地写一些代码片段或者模块，我本文的例子只包含简单的功能，在真正常见的软件中最多只是其中的一个模块，要在生产环境中使用还需要继续打磨，例如各种异常处理检查、是否满足并发要求等。如果让AI开发一个完整的复杂系统并且可投入生产环境使用，我认为还达不到。其次，是bug修复、系统持续维护问题，花了20%时间快速输出了系统80%的代码，最后可能要花很多时间修bug，是直接让AI修还是要人去修还是个问题，如果让AI修复，经常会出现修一个问题会带出另一个新问题，如果是人工修复，首先要花时间去理解AI创建的代码。没有程序开发经验的人想用AI开发软件，用来演示还可以，要真正用于生产环境目前还很难。

3、拥抱AI：虽然目前AI还不能完全替代程序员，但已经能极大辅助程序员提高效率，无论如何都应该拥抱AI，发挥机器的作用。随着大模型能力越来越强，替代的概率会越来越大。最近看到一个新的提法，叫规范驱动开发（SDD，Spec-Driven Development），提前清晰、完整定义好规范要求，包括目标和价值（解决什么问题）、上下文约束（架构、依赖、环境、性能要求）、功能要求、非功能要求（安全、扩展）、边界与错误处理、测试标准等，约束大模型根据规范要求进行开发，这是一个不错的方法。

让我们和大模型一样，每天进步亿点点！

参考资料

[1]. AI 原生应用架构白皮书:https://developer.aliyun.com/ebook/8479

<