【AI初体验】用cursor复刻一个掘金网站
我不吃饼干约 8 分钟看过了太多人吹 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 并提示我们执行以下命令：
ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line# 安装基础依赖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 提示[1] “找不到 localhost 的网页”
❞
这次 cursor 帮我修改了 package.json 中依赖的版本，并提示我重新安装依赖
ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line# 删除旧的依赖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/[2]
➜ Network: http://192.168.192.233:8080/[3]
➜ Network: http://11.249.99.164:8080/[4]
➜ 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…[5]
cursor 帮我修改了 Header 组件，但是效果不是太好……
继续给它提示：
❝菜单的样式错乱了，请帮我修改
❞
这回好多了
我们继续提示优化，这次进行了两轮提示
❝继续优化顶部导航栏，最左侧的网站 logo 使用图片 @lf-web-assets.juejin.cn/obj/juejin-…[6] 搜索框需要垂直居中对齐
❞
❝搜索框中的文字需要在搜索框内部垂直居中 (并贴上错误截图)
❞
让我们看看现在的导航栏，已经基本和原版差不多了。
保存代码，继续。
左侧导航栏菜单
现在实现左侧的导航栏菜单，因为注意到页面有些数据是从接口获取的，我先本地保存了一份接口数据，存在了 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…[8]? 加上”文章榜 “，右侧有按钮” 换一换“，默认显示排名 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，分别展示 “评论”，“赞和收藏” “新增粉丝” “私信” “系统通知” 如果右侧有消息，就以徽章的方式展示消息数量，菜单标题在左侧，通知数展示在右侧。
❞
在消息下拉弹窗这里遇到了问题，对话了好多次还是效果很差，没办法新建了一个对话，再进行调整。
效果展示
话不多说，直接上录屏