零基础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正在以前所未有的频率，带来那种“灵光一现”的快乐。
这个过程也再次确认，我热爱这个行业，热爱创造。当技术浪潮涌来时，愿我们都能身处其中，踏浪前行。
相关攻略
MasterBOT（BOT）是一个融合人工智能（AI）、Web3 和机器人技术的创新项目，旨在通过去中心化的方式训练下一代机器人智能。其核心机制是利用虚拟仿真环境进行 AI 模型训练，并通过社区参与的预测市场进行激励。 MasterBOT（BOT）简介 简单来说，MasterBOT 构建在 Sola
在人工智能技术深度赋能各行业的当下，智能写作工具正迎来关键性演进。作为一款前沿的AI写作助手，Compose AI凭借其独特的设计思路与技术架构，在众多工具中脱颖而出。它不仅仅提供基础的文本补全功能，更致力于深入理解每位用户的个人表达习惯，并结合上下文语义，为写作者提供从用词、句式到篇章结构的全方位
「今天天汽真不错。」 看到这条消息，你大概会笑作者打字太不走心，但绝不会怀疑这是AI写的。原因很简单，AI生成的文案或许越来越工整，却总缺了那么点“人味儿”；反倒是真正的人类输入，还保留着手滑、分心和没来得及检查的鲜活痕迹。 不知不觉间，错别字这种曾经的瑕疵，竟成了验明“人类正身”的防伪标签。 为了
近日，李飞飞团队发布的ESI-Bench（具身空间智能基准）在人工智能领域引发了广泛关注。这一基准被许多研究者视为具身智能发展的里程碑，它系统性地揭示了当前最先进的大语言模型在理解和交互物理空间时存在的核心瓶颈。 3 元认知缺陷：AI缺乏自知之明 这或许揭示了人类智能与当前人工智能之间最根本的差异
近期，职场社交平台领英（LinkedIn）展开了一项备受关注的专项治理行动：全面清理平台上由AI生成的低质“水文”。随着ChatGPT等生成式AI工具的广泛应用，不少用户开始批量生产内容，导致平台涌现大量观点雷同、缺乏深度洞察的“正确的废话”，这不仅严重影响了用户的阅读体验，也损害了社区的内容生态与
热门专题
热门推荐
个性化学习已进入“动作”定制时代，系统通过动态分析学生数据构建个人知识图谱，实时规划学习路径、讲解方式与复习节奏。例如针对错题追溯前置薄弱点并调整讲解方法，实现从结果纠错到过程归因的转变，使大规模因材施教成为可执行、可量化的科学实践。
2025年，河北信息通信行业交出了一份令人瞩目的高质量发展答卷。核心发展指标持续领跑全国，稳居第一梯队，行业竞争优势与领先地位得到全面巩固，为河北省经济社会数字化转型构筑了坚实可靠的数字基石。 这份优异成绩，首先得益于信息基础设施的跨越式升级。全年行业固定资产投资完成115 2亿元，规模位列全国第九
北京时间2026年5月25日凌晨，中国空间站迎来又一里程碑时刻。神舟二十三号载人飞船经过约3 5小时的快速交会对接，于2时45分精准对接于天和核心舱的径向对接口。 对接约2 5小时后，舱门顺利开启。已在轨长期驻留的神舟二十一号乘组航天员，热情迎接了新战友入驻。此次“天宫会师”具有双重重要意义：它不仅
竖屏SLG手游《三国计》近期开启限时测试。其竖屏设计降低了操作门槛，便于单手游玩，同时保持了紧凑的界面布局与策略深度。玩家扮演乱世诸侯，目标是从生存壮大到问鼎中原。新手期建议紧跟主线任务，以解锁武将、兵种、科技等核心系统，并获取关键资源平稳度过开荒阶段。
一场历时四年、牵动全球游戏与科技界目光的动视暴雪股东集体诉讼案，迎来关键性进展。微软同意支付高达2 5亿美元的和解金，与提起诉讼的股东达成和解，为这场旷日持久的法律纠纷画上了阶段性句号。 根据2026年5月下旬于美国特拉华州衡平法院披露的和解协议文件，这笔巨额资金将用于赔偿在特定时间段内持有动视暴雪