Cursor 王炸组合 CopyCoder 使用介绍

先到 CopyCoder 官方网站授权登录

找来一张样图，让 CopyCoder 帮我们生成对应的 Prompt

上传我们的样图，选择 Web application，然后点击 Generate prompt （每个账号有 5 次生成机会）

复制生成的 Prompt

新建一个空的目录作为本次的项目如 copycoder-test01，并打开 Cursor ，我们先创建一个 Nextjs 环境项目，打开命令行输入以下命令，过程会询问一些配置，全部使用默认即可

# 使用 14.x 版本
npx [email protected] .

等待安装依赖完成

使用快捷键 Ctrl + i，打开 Composer 面板，并将上面复制的 Prompt 粘贴里面，它就开始自动生成代码文件，点击蓝色按钮 Accept all 即可全部应用这些代码

在响应的最后，它会询问你是否继续实现里面的功能模块，我们输入 Yes，让它继续完善里面的功能

这里需要我们安装一些依赖来实现某些功能，分别是 lucide-react 和 recharts，一个是图标库，一个是画线图库，我们只需要在命令行中复制粘贴安装即可

接下来我们就可以运行项目，在命令行输入 npm run dev，并在浏览器打开 http://localhost:3000/

如果像上图那样打开报错，就直接截图发给 cursor，让它进行修改，修改好后，点击蓝色按钮 Accept all 即可

此时页面已恢复正常打开