一行代码不写实现Kimi同款AI智能助手网站！Cursor+copyCoder实操

大数据小禅

已于 2024-12-28 11:28:00 修改

阅读量904

点赞数 8

分类专栏： AI大模型文章标签：人工智能

于 2024-12-28 11:22:32 首次发布

本文链接：https://blog.csdn.net/weixin_45574790/article/details/144785394

版权

AI大模型专栏收录该内容

6 篇文章

订阅专栏

🚀 作者：“大数据小禅”

🚀 文章简介 ：本专栏后续将持续更新大模型相关文章，从开发到微调到RAG应用，个人V: 【yopa66】，持续分享副业与前沿AI实战。

🚀 欢迎小伙伴们点赞👍、收藏⭐、留言💬

目录导航

先看效果！

通过copyCoder和cursor完成项目的整体搭建，全程前端界面亲测一行代码没有写！

什么是copyCoder

CopyCoder是一款创新的AI驱动工具，可以帮助开发者将应用程序界面、UI模型或自定义设计的图像转化为编码提示词，加速应用开发过程。亲测实现出来的整体效果不错，不同编程的兄弟可以配合Bolt一起用，整体配合丝滑。 copycoder.ai 【核心还是大模型的提示词工程构建】

主要功能：

图像上传与分析：用户可以上传应用程序的截图、UI设计图或完整的应用图像，CopyCoder会自动分析这些图像，识别UI元素、布局结构和设计模式。
生成编码提示词：根据分析结果，CopyCoder生成详细的编码提示词，包括应用结构、组件规划、代码要求等，帮助开发者更快地构建应用。
适配主流AI编码工具：生成的提示词专门适配当前主流的智能代码编辑器，如Cursor、Bolt和v0，优化效果，提高开发效率。

什么是cursor

cursor是一款AI驱动的编辑器，风格类似vscode，可以快速根据你的提示词构建项目，完成功能。 cursor.com

0代码打造Kimi同款网站

首先需要需要到Kimi官方将前端页面图截图下来保存

之后将图片传送到copycoder，进行解析后的提示词结果如下

这里提示词太多就不全部分享出来了，需要完整提示词的可以到公众号点击【联系我】
生成的提示词经过拆解后发现是比较有逻辑的，会拆解图片中前端界面的构造，生成项目的目录，以及每个栏目的提示词，下面是提示词的一下内容，这里就不翻译成中文了，会理解错误。

根据你的前端界面主要拆分成下面的结构：需求，目录，尺寸，组件，构造

Create detailed components with these requirements:
1. Use 'use client' directive for client-side components
2. Style with Tailwind CSS utility classes for responsive design
3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI 
1. Project Structure:
```
src/
├── components/
│   ├── layout/
│   │   ├── Sidebar
│   │   ├── SearchContainer
│   │   └── SuggestionGrid
│   ├── features/
│   │   ├── Search
│   │   ├── Suggestions
│   │   └── Navigation
│   └── shared/
├── assets/
├── styles/
├── hooks/
└── utils/
```
2. Key Features:
- Real-time search suggestions
- Multi-type search support
- File attachment handling
- Search history management
- User authentication
- Responsive layout
</development_planning>

将生成的提示词输入给cursor，当然可以输入给Bolt，Bolt可以帮你一键构建部署好，我这里为了方便调整直接使用cursor渲染
在cursor新建一个空白的目录之后输入下方的提示词

{提示词放这里}

基于上面的提示词，请从0帮我构建出来这个前端界面，要求
1.严格遵守提示词的要求，包括目录结构等
2.构建出来的项目需要包含初始化的一些文件，例如依赖文件等

结果如下全程度只需要调整提示词即可得到前端界面

Langchain实现RAG知识检索增强

在我实现的效果中你可以发现最终是一个交互式的形态，得到前端界面后如果要实现交互，还需要和后端的接口交互，后端你可以用fastapi，flask，springboot都可以，选择一个自己擅长的即可，最简单的就是直接调用大模型接口。
如果想要实现专属的助手，可以使用Langchain编写Agent，根据自己自定义的工具，结合知识库实现特定领域的大模型接口，大家如果对后端的代码感兴趣的话可以私聊我一下，后续更新RAG检索增强的文章。