在智能代码编辑器的浪潮中，Cursor无疑成为了众多开发者的得力助手，它极大地提升了我们的编码效率。然而，在前端页面开发这一领域，Cursor虽表现出色，但似乎并未达到令人惊艳的地步。
这个时候，CopyCoder出现了。要不说有需求就会有进步呢。
CopyCoder，一款专门解决UI设计到前端代码的辅助工具，它可以非常精准地根据截图生成相应的提示词，提示词包括应用结构、组件规划、代码要求等，并且已经适配当前主流的智能代码编辑器，Cursor、V0、Bolt。
当然这里缺少了一个最近刚出来的Windsurf，希望后续可以增加上。 （Windsurf初体验，据说要超越Cursor - 掘金）
主要特色
- 截图生成提示词：根据用户上传的设计图生成代码提示。
- 适配主流智能代码编辑器：提示结果专门适配Cursor、Bolt和v0，优化效果。
- 页面结构分析能力：基于已有的侧边栏、顶部导航分析系统页面逻辑，构造项目页面结构、路由配置。（截止发文时间，仅支持侧边栏，顶部导航分析尚未支持。）
实战尝试
前置准备
注册、登录，这个网络好像不影响，大家尽管尝试。
CopyCoder
该章节操作是在CopyCoder网站完成。
界面介绍
非常简洁，左侧是宣传，右侧是功能区。
主要介绍下功能区:
- 上传设计图：上传设计图。
- 选择系统类型：下拉会发现支持
Web applications（网页）、Mobile APP（移动应用）两种，但截止发文时间，仅支持网页。 - 生成按钮：点击生成。
- 历史记录：之前使用过的记录会在下面出现。
生成
使用掘金界面进行测试。
上传该截图。
出现如下生成结果。
主要包括两部分：
- Copy Initial Prompt：根据图片生成的提示词，根据该提示词可以使用AI代码编辑器生成页面。
- Generate Page Structure：根据上述初步结果，进一步分析，生成页面结构，目前仅支持侧边栏导航，且再次生成需要花费更多的额度。
本次尝试主要想要验证根据设计图生成前端代码效果如何，所以
Generate Page Structure不再展开验证。生成结果底部还有
Create Backend字样，应该是可以直接创建后端接口，但是目前尚未上线。
Cursor
该章节操作是在Cursor内完成。
创建项目
根据CopyCoder中的要求，创建项目。
- 新建文件夹，使用
Cursor打开。
- 创建Next.js项目。
这一步和CopyCoder官网建议不太一样，可能和使用习惯有关，我是先创建的文件夹，所以，终端中输入以下命令，直接在当前文件夹创建Next.js项目。
npx create-next-app@latest .
一路默认即可。
- 初始化依赖
主要是初始化shadcn UI。
npx shadcn@latest init
又是一路默认。
导入
Ctrl+Shift+I调出Cursor的Composer，插入CopyCoder生成的提示词，执行。
大模型使用的Claude-3.5-sonnet。
生成后，会出现一些小问题，可以直接通过Chat方式修复，都比较顺利。
运行
确认没有问题后，运行项目。
npm run dev
访问：http://localhost:3000/
效果不是特别还原，但是大体布局还是比较一致的。
个人怀疑是因为CopyCoder目前采用tailwind，没有自己编写css导致还原度不够，希望这点后续可以得到优化。
问题记录
低版本Cursor支持不佳
容易出现各种问题，需要一步步修复，我进行了好几遍都没有成功，后来，升级到0.43版本，一遍成功。
非标准侧边栏布局生成效果不佳
最初想使用掘金创作者中心界面进行尝试，效果不佳。
个人怀疑是CopyCoder目前对侧边栏布局有专门优化，其它布局支持程度一般，当然，也有可能是个人抽卡运气不佳，仅供参考。
原图：
生成：
总结
整体试用下来，比Cursor直接截图生成的代码还原度还是有所提升的。
当然，肉眼可见的差距，咱也不能无视。希望CopyCoder后续能够快速改进，提高设计图的还原度，当然我也会再继续研究下如何提升界面代码的还原度。另外，就是希望前端框架支持可以丰富一点，比如可以选择Vue。
