只有内部组件库，AI如何帮你实现效率加倍 😍

提出问题

我们在开发公司内项目时，往往使用到的都是内部组件库，如果在没有利用RAG、AGENT MCP之类的技术时，AI是缺少相应知识的，就无法帮助我们生成能用合适代码。

解决问题

方式一：用相近风格的开源组件库进行生成

举个栗子🌰：生成一个高级搜索组件（此处我使用的是cursor进行演示，cline之类的同样效果不错 ）

原型图：

如何生成：

⏰一些小技巧点：

1. 在提供原型图的时候，可以把一些不重要的细节先涂去，避免AI过份理解；
2. 功能描述尽可能清晰（一开始可能会抗拒打那么多字，但AI时代，语言表达能力同样重要，同样也对自己的产品理解能力有帮助）

方式二：无相近风格组件库时，先对要实现的功能先理解，拆分成模块或函数，再用AI去生成模块、工具类代码

举个栗子🌰：生成一个高级搜索组件

原型图：

功能拆分：

1. 点击选项，根据全部和选项x有不同的逻辑；
2. 已选中支持删除

代码生成：

1. 在项目里写入功能的骨架；

// 在vue3中先搭好函数、模块的架子（名称、注释）

setup() {
	enum TagType {
		TYPE_1,
		TYPE_2
	}
	const selections = reactive({
		[TagType.TYPE_1]: [],
		...
	})
	const handleSelect = (tagType, tag) => {
		// ⚠️ 此处写上功能 点击选项，根据全部和选项x有不同的逻辑；
	}
	const handleClear = () => {}
}

1. 利用自动补全或chat模式去补全

相信我，当你熟练的使用【设计】+ 【拆分】+【生成】后，你会发现：

1. 整体设计、模块化能力大大加强，别人开发1个小时的组件，你10分钟搞定；

一些感悟，👏欢迎大家交流指正

1. AI并不是完全替代前端，而是辅助更快、更高质量的写出代码；
2. AI时代，前端最重要的就是设计、模块化能力，以前面试侃侃而谈的吹牛逼，现在就不再是吹牛逼了，而是所谓的“架构能力”、“升维”

最后给大家推荐一篇讲述AI辅助编程的文章，写得非常好👍，理解我们和AI的关系：addyo.substack.com/p/the-70-pr…

最后

如果有内容帮助到大家，还请大家关注、点赞，我会持续输出能帮助到大家的内容 😍