苦逼前端

面向大模型的基建设计

Javascript2025-09-09 17:36:51大模型

最近老板们集体为 AI 而兴奋、激动、疯狂、焦虑,在实际应用中我们主要遇到了以下两点问题:

  1. 大模型生成项目比较慢,尤其是带有构建环境的工程。一些 IDE 工具尤其慢,逐个逐字的生成文件,生成几十个文件后还要 npm install 然后再启动,等到看到页面已经过去了半个小时。
  2. 每次生成的项目不重样。一会 react 一会 vue 一会又是个 html 文件,拿来做 demo 还行,如果后期需要维护就麻烦了。

针对以上问题,我们于七年前设计的脚手架工具还能持续发光发热,稍作改造即可让 AI 生成、迭代项目有迹可循,解决大模型「零帧起手」的问题。

我们的脚手架有以下几个明显的优点,可助力大模型快速可靠的搭建符合我们要求的项目工程:

  1. 使用全局构建环境,项目只有运行时依赖,npm install 后只有十来个 npm 包几兆大小。相比其他主流脚手架工具创建的项目,构建环境相关依赖也在项目中,一般都有上百个 npm 包几百兆大小。
  2. 工程模板可自定义,目前已经积累了从 H5 端营销活动到管理后台等数十个基础模板。
  3. 丰富的组件市场,脚手架同时支持了业务组件的管理和安装能力,可方便大模型自由组合。
  4. 部署能力,脚手架还支持快捷部署到测试环境,让老板马上看到你手搓的项目。

以上所有能力都集成在命令行工具里,大模型只需要直接调用即可。我们需要稍作改造的点在于,一些需要交互式输入的内容都可以直接通过参数指定即可,举个例子:

以往创建项目时需要在命令行询问用户项目名称,现在可以直接通过 --name xxx 来指定,这样就可以让大模型绕过交互式输入这个卡点,直接通过参数指定。

所以我们只需要给大模型预置如下提示词,即可让大模型丝滑的使用脚手架的能力:

  1. 要先检查用户是否安装了 xxx-cli 这个工具,在命令行执行 xxx -v 正常返回版本号视为已安装,不要询问用户,直接执行
  2. 如果用户没有安装 xxx-cli, 则执行 npm install xxx-cli@next -g --registry=https://registry.npmjs.org, 询问用户是否执行,不执行的话直接退出
  3. 要判断用户的意图,是创建全新的项目,还是迭代已有的项目
  4. 如果是创建全新的项目,则执行 xxx init [templateName] -n [projectName] -y, 创建完成后直接把这个项目打开到左侧目录里,templateName 是模板名称,可通过 xxx init -l 获取所有模板列表及描述,请选择最符合用户要求的工程模板,projectName 是创建的项目名称,请根据用户要求自由发挥。
  5. 如果是迭代已有项目,则读取项目根目录下的 AI.md, 并严格按照这个声明来迭代项目

每个工程模板根目录下都有一个 AI.md 文件,用于描述这个项目的关键点,如默认引入了哪些组件,有哪些强制约定,以及更细化的对脚手架工具的使用描述,比如:

本工程模板依赖了 abc 组件,文档地址 abc.com
所有可用组件在 all.com,请根据用户需求优先使用该组件库,xxx install 可安装所需组件
xxx dev 可以用于启动本地开发服务器
xxx build && xxx deploy 可以用于把项目部署到测试环境


通过以上手段我们获得了如下优势:

  1. 项目初始化更快,体积更小
  2. 项目更可控,限制大模型自由发挥,更容易保证 UI 交互一致性
  3. 知识库共享,已有能力可方便大模型复用

所以,命令行工具 yyds

讨论(0)
  • 暂无,求挽尊 ~
还可输入2000个字
京公网安备 11011202003202号 鲁ICP备 13027548号-1