【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并提示我们执行以下命令： 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用户头像：一个圆形头像，图片 urlp6-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，分别展示 “评论”，“赞和收藏” “新增粉丝” “私信” “系统通知” 如果右侧有消息，就以徽章的方式展示消息数量，菜单标题在左侧，通知数展示在右侧。 ?在消息下拉弹窗这里遇到了问题，对话了好多次还是效果很差，没办法新建了一个对话，再进行调整。 效果展示话不多说，直接上录屏 完整代码见github.com/idonteatcoo…[9] 总结共耗时一个下午，五个小时左右。 整体的感觉： 在少数情况下，AI 对问题的解决效果不是很好，比如项目一开始遇到了无法访问的问题，对话了很多轮才修复，如果是对代码一窍不通的人，可能需要多点耐心。AI 在编写逻辑部分非常强，写一个无限加载列表只需要一次提示就能实现的非常完美，对于数据的处理，比如点赞数展示成 1.3k，我只需要给出两个示例既可以理解数据处理规则对于样式，AI 没办法通过截图来完美复刻，它生成的页面只能保证页面结构一致，如果需要更完美则需要更加详细的提示词，如果是需要 1 比 1 复刻，则需要提示文字大小，颜色，字体等更详细的信息。在多次对话无法达到很好的效果时，可以尝试新建一个对话。最后，对于 AI 的使用，如何给出提示词等，我也还在探索阶段，有什么做的不对的地方，需要改进的地方，希望大家能给出指导和建议。 AI编程资讯AI Coding专区指南： https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文