[Copycoder2.0]全面支持Cursor Agent + 自动生成登录注册功能

UP主: Zhu的AI日记 · 时长: 10:34 · 🔗 B站原视频

发布: 2025-01-24 · 收录: 2025-02-13

标签: AI编程 · Cursor · CopyCoder · 前端开发 · 网站克隆

CopyCoder 2.0 升级亮点：配合 Cursor Agent + 自动登录注册

之前我分享过一个叫 CopyCoder 的 AI 工具，它可以利用一张截图快速搭建一个网站，而且效果非常惊艳。现在 CopyCoder 升级了新功能：不仅能够配合 Cursor 的 Agent 模式快速克隆网站，甚至还可以自动帮你创建用户登录、注册页面，并实现身份验证的所有功能。

我们来看具体怎么做。

截图生成提示词：从 Dribbble 找设计稿并分析

CopyCoder 最近推出的新功能，能够充分利用 Cursor 的 Agent 模式，更快地克隆一个网站，还能自动创建登录和注册页面，并通过 Supabase 实现真正的身份验证。

首先我们来到 Dribbble，搜索一个你觉得比较漂亮的设计图。这次做一个 dashboard，找一个觉得还可以的，然后把这个 dashboard 截图。

回到 CopyCoder，把截图拖到框里让它分析。它会分析出关于截图的提示词。下面还有第二个部分，我们也让它分析，它会给出截图里涉及到的其它页面结构。

分析好以后点击 Download。这里有两个选项：生成身份验证，或不生成身份验证页面。选生成身份验证的话，就可以通过 Supabase 创建相关的身份验证页面。

在 Cursor 里一键生成项目：运行 setup 提示词文件

把身份验证相关的命令复制下来，回到 Cursor 里创建一个新项目，名字随便取，打开它。

在 Cursor 里打开终端，把刚刚复制的命令执行，它会自动下载相关的提示词文件。你会看到有四个提示词文件：setup 像安装提示，会调用下面三个提示词文件（首页、其他页面、身份验证）。

选择 setup，并确认选择了 Agent 模式，然后直接运行 setup 这个提示词文件就可以了。它会像安装程序一样帮我们创建网站：先分析页面结构，再创建依赖文件，现在它会创建一个 Next.js 应用以及相关依赖。

因为是 Agent 模式，它可以直接执行终端命令，所以很方便，我们只需要等一下。

生成页面结构：中途停下就让它继续

创建好后点 Accept，它会继续创建相关文件和依赖，比如 icon 图标相关的东西。接下来它会自动创建页面的基本结构。

有时它会停下来问要不要继续创建其它页面。一般情况下它应该会自动完成，但如果页面比较复杂、内容比较多，它可能没办法一口气做完，就会停下来询问。这时候我们告诉它继续就可以。

它会继续创建很多组件。这样首页就创建完成了。

接下来我们让它继续把其他页面结构也创建出来：continue with 第二个提示词文件，也就是“其他页面结构相关”的提示词文件。

你可以看到这个提示词文件里包含了页面提到的其他所有页面，以及里面的功能等。我们确认后让它继续创建，过程中你只要不断点 Continue 就可以。

最后都创建好了，我们点 Accept。

本地运行与报错处理：截图发给 Cursor 解决

现在看项目结构，在 app 下面多了很多新的文件夹，代表不同的子页面。

我们运行本地服务器看效果。若发现不能运行、有错误也没关系，直接把错误截图发给 Cursor，让它解决就可以。这种错误对 Cursor 来说一般比较简单，它很快就能修好。

修好后再看网站就运行起来了：页面很完整，每个页面都可以点进去，内容看上去也很专业、很丰富。

如果你觉得视频内容对你有帮助，麻烦你帮我点赞并收藏，这样不仅可以帮助频道持续发展，也能让平台算法知道你喜欢这一类的视频。下一次你就会更及时收到类似视频的推送。

自动生成登录/注册：Supabase 身份验证接入

网站基本完成后，最后一步是创建用户登录、注册相关页面。直接 continue with 跟用户身份验证相关的提示词文件就可以。

创建好以后点 Accept。再看结构里就多出来一个跟身份验证有关的文件夹，下面有登录、登出、注册等相关页面。

然后只需要在 local 文件里把你在 Supabase 上注册的新项目的相关 id 和 API key 填上去，就可以直接运行了。

我们再运行，运行成功后你会看到右上角已经以我的身份登录了。这个身份是因为我在 Supabase 上之前有一个用户，所以它默认帮我登录了。

我可以登出，然后就会看到登录和注册页面。你可以创建新账号，也可以用 Supabase 里已有的用户身份登录。我用之前的账号登录，登录完成后进入 dashboard，你就能看到自己是以新的身份登录到网站里的。

总结与付费建议：CopyCoder 越来越强

现在就是用 CopyCoder 帮我们生成的提示词，很快速地完成了整个网站开发。整个过程你也看到了，我们基本只是在不停告诉它继续就可以，非常方便。

这个工具确实很厉害，有兴趣可以到 CopyCoder 上面尝试。CopyCoder 真的是越来越强大了。虽然目前已经没有免费使用的机会，但如果你对快速开发网站有强烈需求，并且它能大幅提升你的工作效率，付费升级 Pro 我觉得也是值得的投资。因为它不需要你自己设计，就可以做出很漂亮的前端页面。

相关内容与知识星球：AI 设计与系统学习

说到用 AI 设计页面，我还分享过另外一个视频：通过 Creatie.ai，能够以对话的方式精准生成设计图，这样即使你不会使用设计工具，也能做出理想的应用界面。

如果你想更系统地了解 AI 开发内容，也欢迎加入我的知识星球。如果你正在为 AI 时代的激烈竞争感到焦虑，担心自己会被淘汰，渴望快速掌握新技能来提高竞争力，欢迎加入。

在这里你将获得从零基础到高阶的各平台 AI 开发完整视频，免费畅享付费课程资源，为你搭建通往 AI 领域的快速通道。你还会获得无限制的一对一答疑服务，实时解决学习与实践中的难题，让你告别迷茫、不走弯路。

我还通过大量实战开发，总结了一系列 AI 纠错技巧，针对不同类型错误精准应对，让你在 AI 开发中游刃有余。我也将持续追踪并分享 AI 最新趋势，让你总能先人一步，挖掘潜在的职业发展机会。

AI 已经彻底打破了技术门槛，让每一位曾经不懂编程的外行人，都拥有了弯道超车的机会。拥抱 AI，你的未来将从今天开始改变。