零基础AI编程实战复盘！如何仅用7天做出2个网站？

5 月底临时需要在团队内做一场设计师 x AI Coding 的主题分享，因时间紧急（完全利用工作外时间），我决定放弃传统 PPT 的形式，从零开始利用 AI 工具链构建分享网站。

本文是这次 AI 协同实验的复盘，同时分享我对当前 Agent Coding 工具能力边界、Agent 交互、协作模式变化的新思考。

往期AI编程干货：

AI编程实战！零基础小白如何用Cursor独立开发网站？

自 24 年 11 月起，我开始动手打造一个专注于 AI 视频作品展示 的网站。

主力工具：V0（制作分享网站）、Flowith Neo（制作 AI Coding 知识库）、Manus（前期惊艳，最终任务执行失败）、Gemini（内容策划）。

先来看看最终成果：

设计师 x AI Coding 的主题分享网站： https://kzmkbx8qajeeywvv0thi.lite.vusercontent.net/

面向设计师的 AI Coding 知识库： https://flo.host/mJIyFLi/

一、Agent 实践复盘 —— 7天，2个网站，1场AI协同实验

这次实验我主要使用了大热的 Flowith Neo 和 Manus 这两个通用 Agent，感受到了 Agent 对 Coding 效率的极度提升，让我有更多时间聚焦内容本身，而非局限于分享形式（例如过去的 PPT 美化）上。不过在 Agent 对垂直领域优化做的还不够成熟的情况下，过程中也走了些弯路。

先说说 Agent 的特点

Agent 接入了 LLM、生图、生视频等大模型，能理解复杂、长期目标，并且能自主规划、调用多种工具来达成目标的，很适合这种极短时间内需要交付的非精确任务。

对比我在上个项目中使用的 Cursor 这样的 IDE 产品，Agent 给我带来最大的便捷是可以自动完成数据存储、网站部署上线等一系列事情，网站内容本身成为创作核心，人类参与制作、执行的时间大幅降低。

在我的整体使用过程中，当下的通用 Agent 更适合 0-1 阶段。1-100 的阶段还需垂直 Coding 工具接管。和垂直 Coding 工具对比，Agent 的优劣势会更加具体：

网站 Coding 全过程

① Agent 的 “惊艳开局”与“脆弱的 1-N”

这里我就要展开讲讲我和 Agent 的协同过程了，好方便大家理解前面的结论是怎么得来的。

我将同一段 Prompt 输入给了 Flowith、Manus，并通过输入简单的设计要求、参考图、参考网址等方式简单调教了几版风格：

起初我对 Manus 生成的效果（左上图 1）非常满意，它在理解图片、链接参考上的功能支持比 Flowith 更佳，生成的网页设计风格、动效都高 Flowith 一筹。在"0 到 1"阶段，Agent 快速将模糊想法具象化的能力已经让我非常惊讶了。

然而，就当我试图从 1 开始进行深度迭代时，Manus 的脆弱性便开始暴露。

对边界失败场景应对不足：

在我尝试持续修改时，Manus 很快提示上下文达到上限。并反复弹出付费页面，显示会员拥有更高上下文长度，

然而即便在我付费 20 多刀后，限制依然存在。这种在关键付费节点上的履约失败，让我对其可靠性彻底失去信任。

核心交付物质量不足。 抱着“不能白付费”的心态，我尝试让 Manus 导出源码，结果交付的代码缺失了一半的样式。

至于缺失的代码，我确实没有打字重新描述的动力。对于设计师来说，使用详细 Prompt 定义设计内容还不如自己设计来的快，通过文字详细定义设计规范总有些不太对，这违背了设计师视觉感受优先而非文字优先的直觉。

我敢打赌 90%的设计师都不愿写这样的 Prompt

② 垂类 Coding 工具来救火

就在我以为 AI 协同实验即将失败时，我将 Manus 产出的残缺代码和需求交给了垂类 Coding 工具 V0。结果让我非常惊喜：V0 不仅迅速复刻并补全了所有样式和动画，还提供了结构清晰、可供二次开发的完整代码。

相比 Manus 的不确定性，V0 给我的“安全感”非常强：它在垂类产品中审美在线、版本可随时回溯、网站无需部署可直接预览，项目支持无限修改。 终于...我的分享材料有着落了。

③ 知识库生成，Agent 的舒适区

区别于分享网站的坎坷经历，「AI Coding 知识库」的制作相对顺利。这次，我使用 Flowith 完成任务，并找到了当下 Agent 的真正优势所在：处理以复杂内容调研和逻辑为核心，而非以视觉调优、持续迭代的任务。

访问地址 (PC 体验更佳)： https://flo.host/mJIyFLi/

展示了从初版到终版的演进，略去部分对话调整

③ Flowith 的核心优势体现在：

强大的信息整合能力： 得益于 Flowith Neo 无限制的长文本分析整合，出色地完成“调研-总结报告-报告转化为结构化网页”的任务，完整度远超预期。（单这一点，垂类 Coding 工具是做不了的）

较高的指令遵循度： 在后续持续要求内容和结构调整时，能准确执行指令，体验流畅。

较高的执行效率与性价比： 对于复杂的信息处理任务，运行速度快，积分消耗相对合理。

但它同样暴露了 Agent 在“迭代”上的核心短板：

具体表现为：Flowith 会过早判定任务完成而终止对话；同时它无法提供源代码。这两个限制，导致我无法对生成的初版网页进行持续的精细化修改。

以 V0 为代表的垂类工具，允许用户直接对代码进行编辑，并支持下载代码进入 Cursor 等专业环境再次编辑，能够满足 AI 代理快速完成 0 到 1，人来高效掌控 1 到 N 的开放体验。

而以 Flowith 和 Manus 为代表的 Agent，目前则更像一个“封闭系统”，虽然“0 到 1”可能更自动化，但其后续迭代的“天花板”却很低。这正是当前我对 Agent 模式最不满意的地方。

小结：Agent Coding 的正确打开方式

综合我构建两个网站的经验，当前 Agent Coding 的核心价值在于极速完成从 0 到 1 的构建，尤其适合以下两类场景：

MVP 与概念验证：Agent 能将一个模糊的产品或设计构想实现，缩短到几小时甚至几十分钟内，变成一个功能可用、可交互的 MVP。这极大地降低了创新和试错的成本。过去需要一个团队数周才能完成的工作，现在由一人一 AI 即可实现。

内容驱动型网站的生成。 对于知识库、Landing Page、活动页这类以信息展示为核心、结构相对标准化的网站，使用 Agent 可以发挥极大价值。创作者可以跳过调研、资料整理、信息设计阶段，直接完成了初步想法 - 拿到结果的快速跨越。

当然，由于通用 Agent 对垂直领域的打磨不足，以及‘持续编辑能力’这个核心症结尚未解决，它在以下场景中表现得力不从心：

需要精细化视觉调优的生产项目。 正如我的经历，试图用文字指令去对齐高度定制化的视觉细节，效率低下且违背设计师直觉。在这方面，V0 这类垂类工具优势明显。

需要长期迭代和维护的核心产品。Agent“一次性交付”和“封闭生态”（如无法提供源码）的特性，使其几乎无法被纳入需要多人协作、持续更新的严肃项目工作流中。

对稳定性和可靠性要求极高的任务。Manus 的履约失败就是一个警钟，现阶段我们还无法将一个有明确 deadline 的关键任务，毫无保留地完全托付给 Agent。

二、重新思考 —— Agent Coding还有哪些改进空间？

开始思考之前，我尝试思考了两个问题：

从现有用户体验角度出发，当下 AI Coding 有哪些痛点是值得被改善的？

相比 V0、Lovable、Bolt 等垂直 Coding 工具直接竞争，Agent Coding 工具如何才能发挥更大优势？

如设计领域的 Agent Lovart，我想未来可能会出现 Coding 领域的 Agent 产品来解决通用 Agent 当下无暇顾及的问题。基于这个假设我想到了几点迭代方向：

为 Agent 注入设计品味，弥补创造力短板

在前面的实践中，我们能感受到不同产品间存在明显的‘审美差异’。例如，V0、Manus 支持人为输入参考图、参考网站，甚至默认输出的效果都还不错；而 Flowith 如果不经过的 Prompt 调教，其产出物更像是“功能实现”，而非“设计作品”。

Flowith 最初输出的网页效果

大模型本身并不会设计，它本质上是在模仿其训练语料中的代码与视觉风格。 它的“品味”，源自 Github 海量的开源项目和网络上无数的网页示例。

除了等待大模型自身的进化，Coding 工具也可以主动为 AI 注入审美：

通过系统级提示进行预期管理：Agent 可以通过系统级的指令约束大模型生成，通过预设 AI 的角色和行为约束输出物下限。

通过绑定组件库进行审美兜底：如 V0 集成了 Tailwind CSS 和 Shadcn UI，AI 的任务不是自由地创造一个按钮，而是被强制要求去调用一个本身就设计得很好的按钮组件。这等于借助一套成熟的设计系统来兜底，巧妙地避免了模型自由发挥导致的审美崩坏。

通过“多模态理解”实现精准还原

符合用户直觉的体验是：用户上传一张喜欢的网站截图、链接、Figma 设计稿 - Agent 分析其设计语言（色彩、字体、布局、圆角等） - 自动生成结构化的设计参数（Design Tokens） - 调用模型去精准还原或模仿其风格。这种方式能将用户从繁琐的文字描述中解放出来，让 AI 真正成为视觉意图的延伸。

Runway 可以参考用户上传的草稿进行构图

也许有一天 Coding Agent 也可以做到，这是更符合用户直觉的体验

那么，未来的基座大模型会强大到让这些“微调”失去意义吗？我认为大概率不会。

基座大模型就像 iPhone 相机，它的目标是拍出让大多数人满意的“好照片”。而 AI Agent 或垂类 Coding 工具，则更像是为这台相机配备的“专业镜头与风格滤镜”。 它们让创作者有机会超越“标准美”，去实现更具个性的艺术表达，让你从“记录”走向“创作”。

主打生成更具设计品味代码的 Coding 产品 Variant 已经开启测试邀请，申请地址: https://www.variant.ai/

Chat 模式外，扩展垂类场景交互

当前多数 AI 产品还采取一个聊天框解决所有问题的范式，在处理专业、精细的垂直任务时，显得低效且违背直觉。 这种割裂感体现在各种需要深度介入的场景中：

例如 Manus 可以生成需求文档，但我无法直接在其中直接修改，必须经历“下载到本地 → 用Word编辑 → 再重新上传”的繁琐步骤。

例如网站设计优化时，当需要进行像素级微调时，用语言去精确描述，其效率远低于所见即所得的视觉操作。

一些 Coding 工具已经开始向该方向优化，V0 上周更新的 Design Mode，则允许用户在预览窗口中，像使用 Figma 等设计软件一样，通过图形化的控件去修改组件的字体、颜色和间距等细节。

另外 Lovable、V0 都集成了专业后端服务，让用户可以直接在一个成熟、强大的专业界面中管理自己的数据。

V0 集成了后端服务、数据库、数据缓存等基础设施

Agent 的未来，也不应只是一个聊天框，而应是一个能根据需要，调用各领域专业工具台的中枢。

拓展能力边界，从编码执行到全链路助理

虽然在产品打磨好以上两点体验之前说这个话题显得有些为时尚早，但这确实是 Agent 产品存在的意义所在 —— 连接产品与市场、打通从“想法”到“增长”的全链路。

上游：市场调研到产品定义

目前，领先的通用 Agent 已经初步具备了处理“上游”任务的能力。但当下，这些任务往往是孤立的。Agent 生成的分析报告，还需要我们手动消化，再转化为对编码任务的具体要求。

想象一下未来的工作流：

用户下达一个模糊的想法。Agent 首先自主完成市场扫描和竞品分析，然后与用户一同进行头脑风暴，将讨论结果固化为一份结构化的 PRD。最关键的是，它接下来的编码工作，会严格依据这份自己参与制定的战略蓝图，比如优先开发哪个核心功能，采用什么样的技术栈能更好地服务目标用户等。

这时的 Agent，不再是被动响应指令生成代码，而是带有充分商业理解和产品思考去生成代码。

下游：从被动交付到主动增长

在充分发挥前期调研、信息整合的优势后，网页产品制作完成只是一个开始，后续的工作如数据跟踪 - 主动优化、运营推广、SEO 优化等场景都有 Agent 可发挥的空间。

再想象一下：

网页上线后 Agent 持续监控数据，当某些页面核心指标异常或未达平均水平时，Agent 会给出进一步分析及优化方案。在你发布产品新功能后，Agent 可以根据优化点自动撰写推广文案甚至自动化广告投放与社媒运营...

AI 驱动网址内容优化工具，根据实时数据调整页面细节并创建 SEO 友好的内容

Agent 领域的未来，也许不是写出更好、更快的代码，而是将“写代码”这个原本孤立的技术环节，深度融入到“定义产品、创造产品、运营产品”的整个商业闭环之中。

结语 —— Coding 和设计领域正在迎来范式转移

即使当下通用 Agent 还存在种种不成熟，也面临“只能做玩具”的质疑和挑战。但如果你体验过这种效率的直线提升，你就会感受到新的协作模式正在悄然形成，我们正身处一个新协作模式的开端。

这种模式下，人类的价值回归到了战略思考、需求洞察和创造性定义上。AI 则成为了最高效的执行引擎，负责将定义好的 What，转化为最终的 How。

在这场变革中，单纯的执行技能正被快速标准化。无论是绘制标准化的 UI 组件，还是编写模板化的功能代码，AI 的效率都将远超人类。这也不可避免地导致了专业边界的模糊化：懂需求的设计师通过 Agent 涉足了实现，而开发者也更多地参与到产品的前期构思与快速验证中。

传统的、线性的协作模式正在瓦解，取而代之的，是创作者这一角色的崛起 —— 善于思考，洞察本质，以AI为杠杆，将想法高效转化为现实。

最后，感兴趣的朋友欢迎访问我在这场协同实验中制作的网站

我在团队内部进行「设计师 x AI Coding」主题分享的网站： https://kzmkbx8qajeeywvv0thi.lite.net/

如果你是不懂代码的设计师、产品经理，这个面向小白群体的 AI Coding 知识库值得一看： https://flo.host

另外给大家推荐 V0 官方推特评论区，有很多网友脑洞大开制作的有趣案例： https://x.com/v0/status/

如果你对小白 AI Coding 领域有什么想要了解的，欢迎评论、后台留言～

如果你觉得本文对你有所帮助，欢迎帮忙转发，非常感谢！