先到 CopyCoder 官方网站授权登录

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

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

复制生成的 Prompt

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

等待安装依赖完成

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

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

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

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

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

此时页面已恢复正常打开

