“AI开发100个应用”挑战，首战复盘

大家好，我是段小波。由于感受到AI编程的强大和便捷，我最近立项说要搞个大事——“挑战用AI开发100个应用”，主攻自动化方向，特别是自媒体和电商自动化。实现方式聚焦在“智能体-0代码”和“AI编程-轻代码/指挥AI”。

今天，就是我们系列的第一篇，复盘我的第一个AI应用：从零前端经验到上线一个功能完善、设计感不错的AI编程课程网站，并成功售出60多份课程！

是的，你没看错，这一切的核心开发，AI帮我在10天内基本搞定。

三月初，我决定开设一门AI编程课程。想法很丰满，现实却有点骨感——我压根没有前端开发经验！传统的学习路径太慢，外包又不符合我“用AI提效”的初衷。怎么办？当然是求助于我的老伙计：AI！

我的目标很明确：快速搭建一个专业的课程网站，不仅要好看，还要能承载课程内容、用户管理、在线支付等功能。

工欲善其事，必先利其器。这次挑大梁的AI编程工具主要是：

Cursor IDE：我的主力开发环境。包月20美元，包含500次GPT-4级别的高级模型调用（比如Claude 3 Opus/Sonnet，当时我用的是Claude 3.7这类强大的版本）。对于大需求，比如“搭建整个前后端框架”，它只算1次调用，后续修改几次就能完成基础网站。500次对我来说绰绰有余。
Trae：国产AI工具，优势是不用VPN，国际版能排队用上Claude 3、Gemini等新模型。
Same.new：网站复刻神器！后面会细说它的神奇之处。
其他辅助：还试用了Cline（按量付费，烧钱快，但灵活）、Roocode等。

核心感受： Cursor的性价比和整合度目前最高，AI理解需求和生成代码的质量也相当给力。

光有工具不行，你得会“指挥”。我总结了几个高效的Prompt模式：

战略规划先行：
“我要做一个AI编程课程的网站，前端使用Next.js，后端使用Python Flask，数据库使用PostgreSQL。请基于此帮我出详细的设计方案，并存到plan.md，以及具体的执行清单（包含前端页面、后端API、数据库表结构等），存到todolist.md。”
AI生成后，我会仔细检查方案，和AI讨论修改，直到满意。然后，严格按照todolist.md执行，每完成一项，就让AI在清单上打钩。
代码反向解读：
“请把[某段AI生成的代码/某个文件]的核心逻辑、每个函数的功能，以及注意事项给我做下解释。”
这能帮我快速理解AI的“思路”，也方便后续维护和迭代。
任务拆解，从宏观到微观：
第一步：整体实现。 直接跟AI说：“帮我写一个课程网站。” AI可能先用JavaScript一把梭，快速给你一个能跑起来的Demo。
第二步：模块化重构。 等基本样子能看了，再让AI进行拆解：“好了，现在我们把这个网站拆分成前端项目、后端API项目、数据库独立管理，课程内容用CMS（比如Strapi）管理。”

设计感？布局？一开始我完全是懵的。我的策略是：先模仿，再优化，全程AI辅助。

寻找“榜样”： 找到几个我喜欢的课程网站作为参考。
AI像素级复刻： 最开始试了Copyweb.ai、V0.dev，效果一言难尽。直到我发现了 Same.new，简直是神器！它能相对精准地复刻目标网站的布局和样式。
学习与理解： 虽然AI能复刻，但我不能只当个“传话筒”。我开始主动学习网站的基本组成：导航栏 (Navbar)、页脚 (Footer)、行为召唤按钮 (CTA)、英雄区域 (Hero Section) 等。了解了常见的布局方式，比如水平网格 (Horizontal Grid)、垂直网格 (Vertical Grid)。
“乾坤大挪移”： 用浏览器开发者工具，定位到参考网站上某个好看的局部布局或组件，复制对应的HTML/CSS（或者截图给AI看），然后告诉AI：“把这个布局/样式应用到我网站的[某个位置/某个模块]，并确保响应式兼容。”

就这么边学边用边指挥AI，网站的“颜值”很快就上来了。

关于我

• 前百度资深工程师 | 京东，阿里工程师

• 10年技术实战经验，擅长简化复杂系统

• 现专注AI应用落地，主攻自媒体AI自动化和电商AI自动化