Cursor 开发案例

现在你看完了cursor的基本操作用法，接下来我们来看一个完整的开发案例演示，这个案例会用到前面文章中介绍的cursor的用法，和遇到问题怎么解决。

今天我通过一个小案例，来详细讲一下使用cursor开发上线一个完整的产品流程。 这个项目我从早上有这个想法到上线，用了不到3个小时的时间。

这就是我做好的网站：已经可以用了：https://hn.aimaker.dev 

项目做完之后，源码我开源到了这里：https://github.com/ViggoZ/hackernews-cn 

今天早上我在课程的免费API列表这里看到了一个API https://aimaker.dev/guide/getting-started/free-apis  他是没有限制的，官方的API，可以请求访问Hacker News的所有文章

我点进去看了一下这个API https://github.com/HackerNews/API  这个时候我直接把这个API的链接发给来Claude，直接问他我能用这个API做什么

Claude给我分析了一堆，并且还调用了这个API，之后我就直接问他能不能做

这是我们做项目的第一步：跟AI聊清楚这个东西能不能做成一个产品，产品能有什么功能，可不可行，需要用到什么技术，头脑风暴阶段。 聊了几轮之后，我就直接给他提需求，看技术选择合理不合理，并且也可以让AI给我们优化方案。

这个时候我们就要到第二步了：让AI自己根据之前的聊天记录，给自己提需求，写Prompt

这个时候我们就可以拿着这个Prompt提示词，开始做项目了。 另外，在这个时候我们也可以跟AI聊一下产品名字。确定了产品名字，就可以直接开始创建项目了。

第三步：在Github中创建一个项目，然后在Github Desktop中把项目拉到自己电脑本地目录中。

第四步：正式开始开发，用Cursor打开这个项目，把刚才的那段Prompt直接发给Cursor，让Cursor开始开发项目，这里我让他用Next.js 14版本来做。

这个时候我们就用Cursor的Agent一步一步等他操作完成，

在Cursor写完之后，我们要看他写了什么，然后直接问他，我们现在能不能在本地跑起来这个项目。

这个时候在本地把项目跑起来之后，就看着项目有什么问题一个一个的去让AI改，比如这里我配置好了数据库之后，没有显示任何内容，我就可以直接跟他说

这个时候就一步一步地问，功能没有就让AI写功能。有BUG就让AI改BUG

下面我会放一些我跟Cursor提需求的文字描述，大家可以看看，就是直接对话一样让AI来做就行。明确地提出你的需求，你想要的效果和功能。

你可以让AI添加其他模块，修改内容，位了节省Cursor的对话次数，你可以一次性提很多要求让他一起改（这里要注意的是：你要清楚提的这些需求会牵扯到什么文件，会不会修改数据库，需不需要新建文件，安装其他开源库）

如果在localhost上预览的时候看到有报错，这个时候我们直接复制网站上的所有文字直接发给Cursor，什么都不用说直接回车发送。他会给你解决问题。

在这个阶段我们不要去关注界面样式好不好看，要先把功能逻辑都全部实现。写完之后，我们再调整页面的交互/界面元素展示的位置。

第五步：这个时候我们就可以开始优化我们的界面了。慢慢跟AI聊，调整细节，也是直接跟AI说要怎么改就行（文字大一点，不要描边，背景颜色之类的）

必要的时候我们可以截图发给AI参考图片，也可以把页面中的文字或者代码粘贴发给他。不用特别准确，有打错字也没有关系。

我们在产品和功能都做完了之后，让AI写一个README文件，帮我们整理现在项目做了什么。

记得：这个时候，你就可以去Github Desktop 提交一次代码了，每做完一个大的功能一定要提交代码，以防万一后面AI改出问题没办法回滚代码。

第六步：SEO，现在项目差不多已经开发完了，我们就可以开始让AI做SEO相关的内容了

首先我去Figma随便设计了一个Logo，就是纯文字，然后输出图片，再去网站上面转换出favicon.ico格式的文件。关于设计Logo我在课程Figma部分有半小时的课程，只讲我们会用得到的设计工具。https://aimaker.dev/guide/software/figma 

如果我们不知道Logo或者OG图片怎么做，我们也可以直接跟AI对话，让Cursor给我们建议。

记得我们再每次大的改动之后，都让AI更新一下README文件

这个时候我们项目就已经完全开发完成了，如果你还想再加一些用来做SEO的纯文字模块，可以直接跟AI对话，问他有什么模块可以添加的，这样。这个项目就已经完全开发完成了，我们直接去部署到Vercel，绑定域名就可以了。

第一个卡片展示24小时热门，感觉这样一进来就能看到最热门的内容了，慢慢优化

每做完一次大的改动都可以让cursor帮你总结一下，修改README文件和生成提交Github commit 的说明文字

HackerNews中文站还有一些BUG，刚才我录了一个视频，给大家演示一下怎么样用AI来改BUG和新增功能。

现在我每天就可以过来看一下最新的动态，非常方便。也不用再去官网手动机翻了。

这就是我做好的网站：已经上线可以用了：https://hn.aimaker.dev 

在做这个项目的过程中我们用到了很多工具，没有写一行代码。

这些工具非常重要，也都并不难，跟着我的教程一步一步做，很快就能做出一个自己完整的项目。大家加油。

这个项目我从早上有这个想法到上线，用了不到3个小时的时间。今天的分享就到此结束。

项目做完之后，源码我开源到了这里：https://github.com/ViggoZ/hackernews-cn