大家好，我是 LV。
AI 赋能前端研发是一系列的篇章，从头开始分享自 AI 爆发以来，将 AI 融入前端研发工作流的探索经历。
目前已经连载多篇，体系化内容详见开源小册：https://ai.iamlv.cn
现代化前端的开发体系下，组件化是大家公认的的开发模式，随着前端项目的不断迭代，沉淀的公共私有组件也会越来越多。
因此，基于私有组件来生成代码，是一个非常重要的需求。
本篇，我们分享一些使用LV0来基于公司私有组件库来生成代码的案例。
案例
「案例 1」：生成一个 button 组件，展示不同 props 组合的 demo
Copilot 根据用户的输入，分析并从私有组件库中提取所需要的 Button 组件。👇
汇总需求，点击开始生成代码。👇
生成代码如下，Button 组件来源于私有组件库，通过预览可以看到不同 props 组合的 demo。👇
「案例 2」：生成一个 TodoList 组件
Copilot 分析出生成一个 TodoList 所需要的私有组件，同时还给出一些提示建议。👇
提出把 List 换成 Table。👇
汇总需求，点击开始生成代码。👇
生成的代码全部来源于公司的私有组件，预览效果也正常。👇
「案例 3」：生成图片中的组件
Copilot 根据图片，分析出所需要的私有组件。👇
汇总需求，点击开始生成代码。👇
生成的代码和预览效果如下 👇
注意：整体的还原度 80%左右，主要原因：受限于 LLM 的多模态识图能力，因此需要用户针对代码进行一些迭代调整。
「案例 4」：生成一个贪吃蛇游戏
Copilot 根据用户的输入，分析并从私有组件库中提取所需要的组件。👇
根据 Copilot 的建议，添加了一个Typography组件来展示分数。👇
汇总需求，点击开始生成代码。👇
生成的代码和预览效果如下 👇
如上案例仅提供演示价值，实际使用中，可以根据具体的业务需求来生成代码。
了解 LV0 的更多使用方式，可以查看文章开头提到的开源小册内容。
规划
如上，我们在 LV0 中使用了公司私有组件库来生成代码，现阶段在 LV0 中是通过配置文件来实现的。👇
后续 LV0 中会开放可视化的配置方式，让所有用户更方便的使用公司私有组件库来生成代码。
后续篇章，我们分享将 LV0 集成到 Vscode 中，让开发者更方便的沉浸式使用 AI 来生成代码。
