零基础AI编程实战：用Cursor工具独立开发网站全流程

去年11月，一个想法开始落地：打造一个专注于展示优秀AI视频作品的网站。在AI工具的辅助下，我从零开始，独立完成了前后端与插件开发，最终让这个想法变成了现实。目前，网站已收录超过300个来自全球创作者的AI视频作品。

这篇文章，将围绕项目初衷、开发历程、工具使用心得以及新手成长的思考，完整分享这几个月来的探索与收获。

一、网站介绍

1. 项目缘起

去年9月，在完成一篇AI视频工具的测评后，原本计划在10月推出一篇作品集锦。然而，行业的发展速度远超预期——Luma迅速崛起，国产的Kling、海螺AI相继发布，海螺的图生视频和Vidu在动漫风格上不断突破……几乎每隔几天，社交媒体上就会涌现一批令人惊叹的新案例。一篇静态文章，显然已无法承载这种爆炸式的更新。

恰逢年末，Bolt AI、Cursor等AI编程工具爆火。一个念头闪过：为什么不直接做一个动态更新的网页，在我浏览最新作品的同时，就能同步整理并展示出来呢？但问题随之而来：一个从未写过代码的人，真的能搞定这样一个项目吗？

带着疑问，我开始了前期调研，明确了项目将涉及插件开发、数据爬取、存储、后端API和前端展示等多个环节。就这样，一段“技术小白”的AI编程探索之旅正式启程。

2. 核心功能

网站的第一期功能聚焦于核心的数据流转与展示。它能够自动抓取并同步最新的AI视频作品，用户可以根据视频使用的具体AI能力、生成工具、发布时间等标签进行筛选和分类。通过这些标签，你可以直观地看到当前哪种风格流行，以及创作者们更偏爱哪些工具。例如，Vidu和Luma Ray2是平面风格的热门选择，而在文生视频领域，Veo目前表现突出。

前端网站基于Framer搭建，结合了其可视化编辑与自定义代码组件的能力。目前，网站的数据存储服务器位于新加坡。

接下来的计划，是优先迭代“AI视频工具”模块，旨在为大家提供一个清晰的产品信息库，包含参数对比甚至价格信息，帮助每个人找到最适合自己的创作工具。

二、项目开发全记录

整个一期的开发过程，大致可以划分为调研、试水、草莽、规范与收尾五个阶段。这个过程充满了“第一次”的尝试，既有发现新大陆般的兴奋，也有陷入困境时的抓狂。

调研期：让AI参与规划，技术小白不必慌

项目伊始，面对“如何实现”、“难度多大”、“能否完成”等一系列问题，头脑几乎是一片空白。

于是，策略转向求助AI。将整个想法和盘托出后，让ChatGPT帮忙解构：需要哪些技术栈？有哪些现成工具？哪些是知识盲区需要补课？经过反复对话和交叉检索，一个模糊的轮廓逐渐清晰：网页爬虫有开源项目可参考；后端云存储有MongoDB Atlas的免费方案；Framer配合API可以实现数据拉取；前端视频加载需要考虑性能优化……虽然当时对这些概念的理解还很粗浅，但至少有了“这个项目或许可行”的底气。

试水期：行动验证，迈出第一步

规划清晰后，便迫不及待地开始了实操。这个阶段先后完成了三件事：写一个初步的爬虫脚本，从目标平台抓取文本、图片和视频信息并导出；编写基础的后端代码，尝试将数据存入云服务器；为浏览器插件增加弹窗，实现简单的标签选择功能。

然而，过程并非一帆风顺，尤其是在连接MongoDB数据库时，几乎被劝退。作为数据库新手，当时完全听从了AI的推荐，没有进行更多对比。结果卡在URI连接报错上，反复尝试AI给出的各种方案均告失败，耗费数日毫无进展，甚至一度考虑放弃项目。

转机出现在一个不起眼的论坛角落，一条网友评论提供了截然不同的解决思路，问题才迎刃而解。这个教训很深刻：不要盲目相信AI给出的唯一答案，当陷入死胡同时，主动检索或寻求替代方案往往更高效。如果当时早点了解Supabase这类工具，数据管理的初体验可能会轻松许多。

这一阶段的收获是实实在在的：理解了插件与后端如何通过API交互；学会了使用Postman测试接口；掌握了基础的Git版本管理操作；更重要的是，建立了对AI答案的批判性思维——要结合AI建议与传统检索手段来解决问题。

草莽期：陷入设计师的“完美主义”陷阱

熬过了枯燥的数据调试，终于可以着手设计前端页面了。首先是给网站起名和设计Logo。

在实现后端API与前端打通时，最初尝试了Framer自带的fetch功能，但发现它只适合少量数据的随机展示。最终，还是通过编写自定义代码组件来灵活拉取和呈现数据。

初步尝到AI编程的甜头后，很容易陷入另一个极端：过度关注设计细节。当时偶然看到一个非常炫酷的悬浮可变字体效果，便执意要将其应用到网站标题上。花费了几天时间与AI协作实现，却最终因Framer对可变字体的渲染支持不足而失败。项目复盘时意识到，这完全违背了MVP（最小可行产品）原则，是一次宝贵的教训。

这一阶段的收获在于：深刻理解了线上部署的重要性——本地运行成功不等于线上可用；同时也认识到，必须克制对炫酷效果的贪念，优先保障核心功能的流畅运行。

规范期：沟通规范化与攻克难题

随着开发模块越来越复杂，与AI“随意聊天”式的沟通开始显得低效。这个阶段，我开始尝试用Markdown文档来整理需求，尽可能将交互逻辑、边界条件等细节描述清楚后，再交给AI生成代码。

本阶段完成了瀑布流布局、加载逻辑优化、分页器、筛选器等核心功能，并进行了设计还原和缓存机制优化。其中，瀑布流布局的实现堪称继数据库连接之后的第二大挑战。

尽管AI详细解释了Grid、Column、Flex、Masonry等布局方案的差异，但在具体实现类似“小红书”网页版那样的Masonry瀑布流时，代码却在几种错误效果间反复横跳，进展缓慢。

关键时刻，一位程序员朋友分享了一篇详细解析Masonry布局的文章。在理解其核心高度计算逻辑后，我再次让AI学习该文章，并在需求文档中明确定义规则，最终成功实现了理想的布局效果。

这件事再次证明，不能完全依赖现阶段的AI。适时地主动搜索、借鉴成熟经验，远比盲目试错高效。

核心代码开发完成后，我在Framer中完善了网站的其他部分，如导航、背景、品牌展示、页脚及响应式适配。选择Framer结合代码的方式，本质上是出于对纯AI编程效率的务实考量——在某些环节，成熟的设计师工具反而更能节省时间。

新阶段：发布只是开始

当一期功能正式上线，真正的挑战才刚刚开始。许多在开发时未曾细想的问题接踵而至：这个项目值得长期投入吗？后续如何规划？在成功前景不明时，是否应该为更多工具付费？新品牌名不利于搜索引擎优化，当初是否该蹭个热门关键词？是否需要考虑数据合规与国内备案？业余时间有限，该如何平衡新功能开发与运营推广？

与此同时，也迎来了许多“第一次”：第一次系统学习SEO，第一次在海外社区尝试推广个人项目。这一切，都处于边学习边实践的状态。

三、Cursor高效协作实战心得

回顾整个开发过程，在与AI协作编程方面积累了一些具体经验。如果你也打算尝试AI Coding，希望这些心得能帮你少走弯路。

注：以下经验基于Cursor中的Claude 3.5 Sonnet模型。

1. 对话管理：一个问题一个Chat

建议将大的模块需求拆解成小问题，并为每个新问题单独开启一个Chat对话。过长的对话容易导致AI记忆混乱、响应变慢，也不利于后期回溯和管理。

当发现AI在某个Chat中陷入“死胡同”——例如反复提供错误或无效的解决方案时，最好的策略是新建一个Chat，结合之前的错误经验，重新清晰地描述问题。这往往能帮助AI跳出思维定式。

2. 多文件修改：善用Composer模式

当修改涉及多个文件的联动时（例如模块间数据联调），建议使用Cursor的Composer功能，而非普通Chat。Composer能同时分析多个文件的上下文，提供更连贯合理的修改建议，准确率更高。

两者另一个区别在于代码应用方式：Chat模式需要手动点击“Apply”；而Composer模式的修改建议会自动应用到文件中（当然，不满意的部分可以手动拒绝）。对于涉及多文件的工作流，Composer效率明显更高。

3. 明确需求，避免AI过早执行

明确指令，暂缓编码： Cursor有时过于“积极”，即使你只是想讨论可行性，它也可能立刻开始写代码。在项目前期，可以明确要求它“先不要写代码，我们讨论一下思路”，等确认后再让它执行。

引导AI提问，确认细节： Cursor默认会相信你的判断。如果你自己都不确定解决方案，一定要主动让AI反问你，确认更多细节，而不是让它沿着可能错误的方向执行。

4. 控制AI的修改范围

在持续优化大型文件时，AI可能会误改无关代码。为了减少这种情况：

可以强调自己是新手，要求AI生成详细的中文注释，便于理解逻辑和检查改动。在需求描述中明确划定修改范围，指明哪些部分可以动，哪些部分必须保持原样。

5. 沉淀需求文档(.md)

开发中经常需要向新的Chat反复介绍项目背景。最初通过临时记录复制粘贴，效率很低。后来受启发，开始维护一个核心的PRD（产品需求文档）.md文件。

建立上下文： 文档中记录项目背景、核心逻辑、已实现功能等。开发新功能前，先让AI阅读此文档。

强调阅读： 除了@文件，最好用文字再次说明需要AI重点阅读的内容，避免因@文件过多而导致漏读。

让AI总结与同步： 完成重大功能后，让AI先阅读一遍代码，自行总结实现的功能点，并更新到需求文档中，确保信息同步。记得提示AI“用文字总结，不要写代码”，否则它可能又会开始生成代码。

6. 利用“思维链”提升推理质量

“思维链”（Chain of Thought）是一个有效的提示技巧，能引导AI进行更逐步、严谨的逻辑思考，尤其适用于复杂计算、代码分析或任务规划场景。在Prompt中明确要求AI“逐步思考”或“展示推理过程”，可以减少模糊跳跃。

7. 高效调试：让AI添加调试代码

对于复杂的逻辑（如瀑布流布局计算），如果不想深入阅读代码，但又需要验证其运行是否符合预期，可以让AI在关键位置添加调试代码（例如console.log），然后在Framer的代码编辑器中运行并查看输出结果。

如果结果不符，可以将运行截图或日志反馈给AI，能更快地定位问题根源。

8. 请求更丰富的解释形式

当遇到难以理解的概念时，可以引导Claude以更丰富的方式解释。虽然Cursor中的Claude无法直接生成图片，但它可以通过符号、文字排列、对比描述等方式，让解释更加直观。

案例：对比Perplexity和Claude对“瀑布流布局”概念的解释差异。前者仅为文字描述，而后者通过示意图和对比，让人一目了然。

四、给新手开发者的思考

精简，再精简一点

经过这几个月的实践，真切感受到了将一个想法落地为产品的复杂程度。幸好这是一个个人练手项目，没有数据指标的压力。

但如果代入实际项目场景，务必记住：用更简单、更轻量的方式去验证想法。因为一旦启动，需求、设计、开发、运营每一项都是巨大的工作量。打造一个真正能解决核心问题的产品原型，能让你更早获得反馈，也更容易坚持下去。用完整产品来验证市场，成本太高了。

在规划时，不妨多问：这个功能真的必要吗？这个效果能简化吗？即便是让AI写代码，反复描述需求和修改错误也同样耗费心力。作为设计师，尤其需要警惕完美主义的陷阱，学会做减法，聚焦于MVP。

工作量，远不止用户看到的页面

你可能会好奇，最终呈现的网页功能看起来并不复杂，为什么说成本高？

因为背后有大量看不见的工作：反复权衡产品定义与模块优先级；进行技术方案选型；在独立模块开发完成后，打通数据流转并进行边界测试；考虑数据缓存以降低API消耗；优化加载规则以保证体验流畅……这些细节所耗费的时间，可能是在企业协作中容易被忽略的。这份经历让人对跨职能协作多了一分理解。

亲手实践，才能获得具象感知

说来惭愧，尽管从事设计多年，也设计过各类产品，但直到这个个人项目，才真正具象地理解了诸如“后端数据如何通过API传给前端”、“数据如何持久化存储”、“前后端如何协同”等基础概念。当看到自动化脚本控制浏览器爬取数据时，作为一个新手，确实体验到了那种“原来如此”的顿悟时刻。

当视频在手机上无法加载，可前往PC查看。

AI很强，但你原有的能力依然关键

开玩笑地说，这次经历也算是对“独立开发”的一次祛魅。完成前端后，我问一位程序员朋友，这些功能让他来做需要多久？他的回答让我汗颜。

AI的潜力巨大，但使用工具的人的能力，往往决定了工具能发挥的上限。分析问题的能力、拆解任务的方法、检索信息的技巧，这些核心能力依然至关重要。

说了这么多，希望没有吓退对AI Coding感兴趣的朋友。这和那些宣传“十分钟开发一个产品”的自媒体内容可能不太一样。但就像学习任何新技能一样，大部分时间都花在了“学习、理解、实操、沉淀”的循环里。度过最初的几个坎，积累一些经验后，进度自然会越来越快。

五、结语

很难用言语完全描述第一次独立完成一个项目是怎样的感觉。我想，这必定需要亲身实践才能体会。AI Coding正在以前所未有的频率，带来那种“灵光一现”的快乐。

这个过程也再次确认，我热爱这个行业，热爱创造。当技术浪潮涌来时，愿我们都能身处其中，踏浪前行。