Featured image of post Cursor 王炸组合 CopyCoder 使用介绍

Cursor 王炸组合 CopyCoder 使用介绍

使用 CopyCoder 和 Cursor 实现最快克隆完整前端的方法,CopyCoder 可基于图片实现 prompts 的生成,然后通过使用 Cursor 对 Prompts 进行具体的实现

先到 CopyCoder 官方网站授权登录

cursor_00

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

demo_01

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

cursor_005

复制生成的 Prompt

Image

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

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

cursor_01

等待安装依赖完成

cursor_02

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

cursor_03

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

cursor_04

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

cursor_05

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

cursor_06

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

Image

此时页面已恢复正常打开

cursor_08

Licensed under CC BY-NC-SA 4.0
本博客所有内容无特殊标注均为大卷学长原创内容,复制请保留原文出处。
Built with Hugo
Theme Stack designed by Jimmy