「聊天式」代码生成
在上一篇文章「循序渐进式」代码生成》中，我们聊到了循序渐进式的代码生成，但是发现了一个问题：不同的人由于知识背景的不同，使用方式和效果都不一样。
比如，有的伙伴本身对于产品设计或 UI 设计有一定的了解，因此生成的代码效果会更好，然而这部分人占比相对较少。
因此，我在想，有没有一种方式，能够辅助用户更好地表达清楚自己内心的诉求、从而让 AI 生成的代码更符合大部分人的预期呢？
于是，我想到了聊天式的代码生成方式，在生成正式的代码之前，先和 AI 聊天，让 AI 了解我们的需求，同时让 AI 也不断给用户一些建议，让用户更好地表达自己的需求。最终将整个聊天的上下文抽象化为真实的代码。
下面，正式开始介绍聊天式代码生成。
LV0 Copilot
在 LV0 的最新版本中，我们加入了一个 Copilot 的助手，这个助手可以帮助用户更好地表达自己的需求，从而生成更加符合预期的代码。
👇 点击打开 Copilot。
在生成代码之前，我们可以和 Copilot 进行一段对话，让 Copilot 了解我们的需求，然后生成代码。
Copilot 主要包含 3 个功能：
1、分析用户的需求，分析出来实现这个需求所需要的基础组件（包括开源组件和私有自定义组件）。
如下，给一张图，Copilot 可以分析出设计稿中所需要的私有组件、来源和使用描述。
2、智能提供建议，帮助用户从 0 ～ 1。
如下，我想做一个贪吃蛇的游戏，但是不知道从何下手，Copilot 可以给我一些建议。
3、汇总整个对话的上下文参数，生成最终的代码。
继续上面的贪吃蛇示例，Copilot 会邀请用户确认是否生成业务组件，用户确认后，Copilot 会生成最终的代码。
下面提供几个案例，让大家更好地了解 Copilot 的使用方式。
案例
案例一：
需求：生成一个可搜索、分页的卡片列表，每个卡片包含 logo、name、description，可以编辑、删除、分享。
👇 输入需求。
👇 Copilot 根据需求列出来我所需要的基础组件，并询问我是否需要按照建议进行调整。
👇 当我确认无误后，Copilot 会弹出一个二次确认框，询问我是否生成业务组件。
👇 点击确认后，Copilot 将汇总整个对话的上下文参数，开始生成最终的业务组件代码。
👇 针对可视化的结果，提出一些新的要求。
👇 Copilot 针对新的要求，给出了一些建议。
👇 最终生成的效果。
如上案例，细心的伙伴可能发现了，正是 LV0 新版的列表页面。👇
ps：有一些差别是因为我后面用 LV0 的 Vscode Continue 插件进行了一些细节的优化。（后续有专门的文章来分享如何将 LV0 集成到 Vscode 插件中）
案例二：
需求： Codegen 是 LV0 中一个很重要的概念，是生成业务组件的核心引擎，其中定义了包括框架（如 react 或者 vue 等）、npm 包、私有组件、以及 AI Model 等在内。
由于不同的用户、不同公司所使用的技术栈和基础组件、私有组件可能都不一样，因此，LV0 现在要支持用户可以自定义 Codegen，需要一个 Codegen 的配置页面，可以给用户来自定义生成业务组件的框架、npm 包、私有组件、AI Model 等。
Codegen 的部分数据结构大概如下：
👇 输入需求。
👇 Copilot 分析了 Codegen 配置页面所需要的基础组件，同时还提供了一些建议。
👇 汇总所有数据，开始生成代码。
👇 针对可视化的结果，提出一些新的要求。
（中间省略一些跟 Copilot 的交互）
👇 最终效果
一些想法
如上 Copilot 案例，我们可以看到：
1、当你有一些需求场景，但是不知道从何下手时，Copilot 可以帮助你进行需求分析，给出一些产品功能上的建议。
2、当你不太懂设计时，Copilot 可以针对你的功能需求，分析出实现功能所需要的基础组件，同时还能够给出一些 UI 设计上的建议。（从我个人的使用上来看，目前这个环节在 LV0 的 Copilot 中还比较弱，用户最好能够提供一些参考的设计稿贴图，不过针对这个问题，我有了一些新的 idear正在探索中～）
3、当你觉得 Copilot 给出的建议最终符合了你的需求时候，你可以让 Copilot 汇总整个的对话上下文参数，生成最终的代码。
AI 时代，很多角色会发生变化，前端开发者也不例外。未来的前端开发者，不仅仅是一个前端代码工人。
借助 AI 工具，借助 Copilot，我们可能会是一个个的超级个体，拥有更多的能力，更多的技能，更多的价值，不局限于前端，我们可以搞定产品、UI 设计、后端、甚至运营...
我现在也在探索如何从前端成为 超级个体 道路上，LV0 这个产品，也是我探索这条道路上的一些小经验沉淀，产品尚在早期，欢迎感兴趣的小伙伴一起来探讨交流。