他给我返回了两个提示词（后文）。
我把他们喂给了Bolt：
如何使用Copycoder？
这个工具操作起来是图中两个箭头所指的两步。
第一步通过你给的屏幕截图生成组件实现的详细要求，这是为了确保开发工作从一开始就具备清晰的技术标准、组件规范，避免后续因实现不一致或方向不清而产生的问题。
第二步再定义 页面结构和路由设计，这样可以根据已明确的组件需求来合理布局页面，确保开发过程顺利且高效。
我们给到的截图是这个：
第一步：通过你给的屏幕截图生成组件实现的详细要求提示词。
因为这个提示词词翻译成中文就有点混淆最开始的意思了，所以我这里不翻译了：
这个提示词中，首先他定义了一些规范：
然后定义了我们的开发需求，就是那些顶部导航和左侧栏导航：
继续的话就是一些 "控制" 和 项目结构。
第二步，是生成板面结构分析提示词，这里我翻译成了中文：
他首先是在路由结构中给了要构建的所有路由，然后在页面实现中详细的描述了这个路由的目的是什么，以及要包括哪些组件。
分析一下，这三个词条（页面实现、布局、路由结构）之间的关系：
在第二个提示词“ 页面实现 ”那一节，其中的核心目的是对该页面的整体目标进行简洁的概括。而其中的关键组件是实现该页面核心目标所必需的具体功能模块或UI 元素。
一个路由页面通常涉及多个功能点，而这些功能点的实现需要多个不同的组件来配合完成。每个组件负责具体的一个小任务，这些组件相互配合以完成大任务。例如，在 /ai-consulting 页面中：
所以我们现在总结一下两个提示词：
因此，第一个提示词是基础设置，第二个提示词是具体实现。先发送第一个提示词能确保AI在开发时遵循一致的标准和结构，而第二个提示词则进一步指引AI如何将这些标准应用到具体页面和功能上。
是的，不错的，对我们后续自己编写开发提示词，是有指导意义的毕竟他都做成了一个产品。
Copycoder只提供五次的免费生成机会。
所以我们应该可以结合它输出的结构化提示词进行一下逆向工程，和我们的其他一些大模型进行迭代Chat，从而达到优化我们开发提示词的效果，也同时可以把上一篇文章所提到的Cursorrules优化一下。
当然我也不知道Copycoder产生这种专业结构化的提示词背后的驱动逻辑到底是比较简单呢，还是比较复杂的工作流。
你可以尝试chatgpt web 或者 cursor chat将一副图和Copycoder提供的专业化提示词作为一个示例，让他给新的图片输出专业化提示词，可以比较一下直接使用Copycoder的区别。
WindSurf+Bolt+Cursor+Sealos：构建AI播客应用程序，前后端分离、对象存储、数据库存储、部署、K8S
Copycoder 提供了一些便捷复制和打开AI IDE 如cursor、bolt、v0 的按钮。
这也说明这个工具肯定是专门对这些AI IDE进行适合他们提示词的测试分析的。
所以我们学习 Copycoder 提示词的特点，这个方向应该是对的。
总之，Copycoder工具通过提供专业、细化、结构化的提示词，帮助开发者快速生成网站的组件实现和页面布局要求，与Cursor、Bolt等AI工具配合使用，能够显著提高前端开发效率和代码质量。