【AI初体验】用cursor复刻一个掘金网站

看过了太多人吹 AI 编程，GitHub Copilot，Cursor，Windsurf 等 AI 编程工具层出不穷，百闻不如一见，百见不如一干。于是我决定亲自体验一下 Cursor 编程。目标是不手动写一行代码，来复刻一个掘金网站。

经过几个小时的尝试，我完成了掘金首页，截图对比如下，完整效果可以跳转「效果展示」小节。

原版	复刻版

下面是实现的完整过程。

初始项目

我先截图了网站首页，然后命名为 screenshot.png，并在 cursor 的 composer 中输入命令：

我想仿写一个类似掘金的网站，网站截图为 @screenshot.png 请帮我创建一个react+vite的项目，并完成初始的框架内容

很快 cursor 帮我生成了一些文件，我们直接点击 "Accept all" （其中readme和prompt是我创建的，但还是空文件）

但是项目无法启动无法启动，于是我继续提问：

项目无法启动，请帮我提供项目启动的方法

这次，cursor帮我生成了 vite.config.ts 和 package.json 并提示我们执行以下命令：

# 安装基础依赖
npm install react react-dom react-router-dom

# 安装开发依赖
npm install -D @types/react @types/react-dom @types/styled-components @vitejs/plugin-react vite typescript

# 安装UI组件和样式依赖
npm install antd @ant-design/icons styled-components

然后按照 cursor 的提示，使用 npm run dev 启动项目，并打开 http://localhost:5173/ 但是页面提示找不到 "找不到 localhost 的网页"，于是我继续对 cursor 提问：

打开http://localhost:5173提示 "找不到 localhost 的网页"

这次 cursor 帮我修改了 package.json 中依赖的版本，并提示我重新安装依赖

# 删除旧的依赖
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install

再次启动页面，还是无法访问

继续提问：

在终端看到了 VITE v5.4.14 ready in 271 ms 但我打开页面提示 "找不到 localhost 的网页"

cursor 帮我修改了 vite.config.ts，但是......还是打不开，继续提问：

终端提示：

VITE v5.4.14 ready in 87 ms ➜ Local: http://localhost:8080/

➜ Network: http://192.168.192.233:8080/

➜ Network: http://11.249.99.164:8080/

➜ press h + enter to show help

但我还是打不开页面

cursor 继续帮我修改，这次我帮创建了 src/main.tsx，然后又修改了 vite.config.ts 这回再次尝试 npm run dev 启动成功！！！

先把代码保存，方便后面找回，记得让 cursor 给我们生成一个 gitignore 文件。

顶部导航栏

我们一部分一部分的实现页面功能，首先是顶部导航栏，把顶部导航栏的截图贴进去，然后给提示词：

帮我完善顶部导航栏内容，页面顶部导航栏内容从左到右内容如下

• 左侧导航栏包含以下选项：
• 导航菜单项："首页"（默认选中状态）、"AI Coding"、"沸点"、"课程"、"直播"、"活动"、"AI测题"、"APP"、"插件"
• 搜索框：单行输入框，提示文本"搜索稀土掘金"
• "创作者中心"下拉按钮
• "会员"图标和链接
• 消息中心：一个铃铛的图片，包含未读消息99
• 用户头像：一个圆形头像，图片url p6-passport.byteacctimg.com/img/user-av...

cursor 帮我修改了 Header 组件，但是效果不是太好......

继续给它提示：

菜单的样式错乱了，请帮我修改

这回好多了

我们继续提示优化，这次进行了两轮提示

继续优化顶部导航栏，最左侧的网站logo使用图片@lf-web-assets.juejin.cn/obj/juejin-... 搜索框需要垂直居中对齐
搜索框中的文字需要在搜索框内部垂直居中 (并贴上错误截图)

让我们看看现在的导航栏，已经基本和原版差不多了。

保存代码，继续。

左侧导航栏菜单

现在实现左侧的导航栏菜单，因为注意到页面有些数据是从接口获取的，我先本地保存了一份接口数据，存在了 mock 文件夹里面。

给 Cursor 如下提示词：

帮我完善左侧的菜单栏，第一个菜单栏是"关注"，文字右上角展示一个小红点、第二个菜单栏是"综合"，这一项是默认选中项。接下来的菜单项是从接口获取的，请帮我写一个mock接口，接口数据直接使用 @query_category_briefs.json ，展示菜单内容为 category_name 字段。最后一项固定为"排行榜"。注意当鼠标划过每一项的时候，该项菜单显示高亮样式，即文字变成蓝色。当点击某一项时，切换选中项。（并附上截图）

Cursor 很聪明，它知道自动帮我修改哪个组件，也成功读取了 mock 数据，但在样式上还是差一些。

继续调教了两轮

请参考这个样式，现在的菜单宽度太大了，而且选中样式需要把选中项的背景改成浅蓝色。在每一个项菜单的文字前，请帮我加一个icon（并附上截图）
再缩小一点左侧菜单的宽度，注意关注的小红点需要在文字的右上角，紧挨着文字。文字的颜色需要再深一些，并且让排行榜项的icon使用展示为金黄色（并附上截图）

看下现在的效果

完美~

文章列表

接下来实现页面中最重要的部分，文章列表。这部分也是接口获取的，我先保存了一份 recommend_all_feed 接口的数据。

这部分的逻辑有点复杂，所以给 Cursor 的提示词也比较长：

帮我实现文章列表区域，这部分顶部有两个 Tab 项，"推荐" 和 "最新"，默认选中为"推荐"。文章列表的数据来自 @recommend_all_feed.json 请通过mock接口的形式获取数据。点击 Tab 菜单需要刷新列表。

对于每一个文章项，如果文章存在封面，取item_info.article_info.cover_image，则在左侧展示文章信息，右侧展示文章封面，如果没有封面，则只展示文章信息，文章信息有三行，第一行展示文章标题，对应字段item_info.article_info.title，第二行展示文章简介，对应字段item_info.article_info.brief_content，第三行展示文章作者，对应字段item_info.article_info.user_name,文章阅读量，一个小眼睛图标和阅读数据，取item_info.article_info.view_count，注意阅读超过请显示为例如1.3k的格式。然后是点赞数，取item_info.article_info.digg_count。第三行的右侧显示文章标签，取item_info.tags中的tag_name，可能有多个，需要依次展示。

列表需要有无限加载的功能，每次滑动到列表最底部，需要通过接口再次获取下一批文章列表。

打开页面发现报错了，把错误信息贴给 Cursor 让它修复下即可，运气很好，修复一轮就解决了。

页面控制台报错了（附报错信息）

页面效果如下：

已经实现的不错了，甚至连无限加载也是一次实现了，但是离完美复原还差一些。

先保存，我们接着优化样式。我们每次只提一点建议，不断的去进行优化。

文章列表的第四项图片没没有展示出来，能帮检查一下
需要在文章每一项的第三行开头展示作者名称，取item_info.author_user_info.user_name字段，文章列表模块的整体宽度需要小一些，Tab标题的高度为50px，选中的Tab为黑色，未选中为灰色，选中Tab后直接切换，不需要滑动动画。图片的高度要和文章说明部分一样高。每个文章卡片的高度为100px。请参考截图样式实现。
两个Tab标题的距离近一些，选中的Tab下方中间展示15px x 3px 的蓝色小横条。

现在我们来看看文章列表的效果：

以及切换 Tab 会有加载效果：

太完美了，比我强太多了，我去喝杯咖啡冷静下。。。

右侧区域

最后是右侧区域，这部分元素有点多，我们先尝试整体给 AI 提示词和截图，效果不好的部分，我们再一次提示优化。

实现页面最右侧的内容，最右侧区域的内容宽度固定为260px，分多个部分，由上到下排列，第一部分为签到模块，第二部分为文章榜，第三部分为一个广告图片，图片地址为 p6-juejin.byteimg.com/tos-cn-i-k3...

效果果然一般，我就不截图了，接下来依次去进行优化。你提示的越详细，生成效果越好，我尝试优化签到模块效果总是不好，后面我加了颜色，总算符合预期了。由于这部分调试太多次了，只给出关键提示词。

优化已签到组件样式，标题居左对齐显示，主标题16px，副标题12px，按钮呈蓝色圆角矩形样式位于右侧，边框颜色 rgba(30, 128, 255, .3) 背景色 rgba(30, 128, 255, .05); 按钮在容器内部垂直居中
优化文章榜组件，标题为一个图片，图片地址为@p9-juejin.byteimg.com/tos-cn-i-k3...? 加上"文章榜"，右侧有按钮"换一换"，默认显示排名1-5的榜单，点击缓换一换的时候，会切换至6-10，以此类推，最多展示前50名，之后切换会回到1-5名。榜单数据来自 @article_rank.json ，通过mock接口的形式获取数据。每一行展示排名和标题内容，内容取接口数据中的content.title。1-3名的排名显示为彩色，后面都为灰色。
优化作者榜组件，标题是一个icon+"作者榜"，接拉下展示作者榜数据，内容来自 @quality_user.json 的 data.user_rank_list，每一项左边展示头像，取user_info.avatar_large，垂直居中，然后中间部分是两行，第一行是作者名，取 user_info.user_name，第二行展示职位，取 user_info.job_title 拼接 @ 和公司名，取user_info.job_title，不存在 user_info.job_title 则只展示职位。右侧展示"+关注"。只展示前5条数据，组件最下方展示查看更多和一个右箭头图标。
优化推荐话题组件，参考截图。数据来自 @list_by_hot.json 中的 data。推荐内容前面为一个蓝色背景的"荐"，然后展示推荐内容 #{theme.name}# 字体大小14px，每一行展示热度，大小12px取theme.hot，并展示为格式化数据，比如14386073展示为14.4m 229977展示为230k，以此类推

经过一系列的调教，我们的页面已经基本完成了。

整体优化

我们先调整整体页面大小，间距，和一些样式优化。

中间的文章列表模块宽度为720px，左侧的菜单栏宽度为180px，左侧菜单栏和中间文章列表的间距为20px，文章列表和右侧区域的间距也是20px
优化头部导航栏，标题字体大小为14px，字体颜色为灰色，选中的标题项展示为蓝色字体，不要有其他的高亮样式。在 AI codeing的右上角展示红色的徽章，内容为 NEW

这下谁还分得清我和掘金啊（狗头

最后优化一下交互我们就完工：

每次点击中间文章列表的Tab时，都需要重新加载文章列表数据。点击左侧菜单时，也需要重新加载文章列表数据，并且把选中Tab重置为推荐
当鼠标划过 @Header.tsx 右侧的消息时，弹出下拉菜单，宽度为165px，分别展示"评论"，"赞和收藏" "新增粉丝" "私信" "系统通知" 如果右侧有消息，就以徽章的方式展示消息数量，菜单标题在左侧，通知数展示在右侧。

在消息下拉弹窗这里遇到了问题，对话了好多次还是效果很差，没办法新建了一个对话，再进行调整。

效果展示

话不多说，直接上录屏

完整代码见 github.com/idonteatcoo...

总结

共耗时一个下午，五个小时左右。

整体的感觉：

• 在少数情况下，AI对问题的解决效果不是很好，比如项目一开始遇到了无法访问的问题，对话了很多轮才修复，如果是对代码一窍不通的人，可能需要多点耐心。
• AI在编写逻辑部分非常强，写一个无限加载列表只需要一次提示就能实现的非常完美，对于数据的处理，比如点赞数展示成1.3k，我只需要给出两个示例既可以理解数据处理规则
• 对于样式，AI没办法通过截图来完美复刻，它生成的页面只能保证页面结构一致，如果需要更完美则需要更加详细的提示词，如果是需要1比1复刻，则需要提示文字大小，颜色，字体等更详细的信息。
• 在多次对话无法达到很好的效果时，可以尝试新建一个对话。

最后，对于AI的使用，如何给出提示词等，我也还在探索阶段，有什么做的不对的地方，需要改进的地方，希望大家能给出指导和建议。