❤️ 充满爱的 AI 结对编程神器 —— 🐌 Guii Devtool,轻松融入现有前端项目,通过自然语言指令即可轻松定制和优化代码。我们不替代创造者或 Hackers,只愿成为他们桌旁的亲密伙伴,✨ 共同创造美好的产品。
加入微信群
- 业务总是希望使用稳定的组件库,我们支持在编写的代码中适配组件,现有的项目架构和现成的代码
- 已经支持的组件库
- 🚀 在开发项目内安装插件即可使用
- 🧳 0 配置支持前端开发者们最喜欢的热重载功能
- 🔨 和 Nuxt DevTools 一样的辅助开发能力
- ☝️ 激活,选中,修改,审查代码,和 Guii AI 一起写前端
- 🌎 支持任意前端框架,Vue,React,Angular,Svelte,等等
- 🔮 多模态,用图片和 Figma,甚至是草图描述你的期望
- 安装 Guii DevTools 到前端项目中
- 配置 Vite,Webpack 插件:
import { DevTools } from '@guiijs/core'
export default defineConfig() {
return {
plugins: [
DevTools()
]
}
}
- 启动项目,打开浏览器,找到 Guii DevTools 浮窗
- 激活小鼠标
- 选中元素
- 通过自然语言指令修改代码
- 和 LLM 还有 Guii AI 一起写前端!
该项目使用 unbuild
和 vite
进行开发和构建。有了 jiti
提供的强大功能,我们不再需要使用 Rollup 进行繁琐的配置,然后观察本地文件的变化,并在没有 vite
进行热加载的情况下捆绑修改和开发的模块。我们可以直接运行以下命令输出捆绑文件并开始开发:
# run these scripts in root folder
pnpm i
pnpm run packages:stub
如果你使用 @antfu/ni
,也可以使用下面的命令:
nr packages:stub
现在,启动 Vue3 Playground:
pnpm run play:vue
如果你使用 @antfu/ni
,也可以使用下面的命令:
nr docs:dev
pnpm run packages:build
如果你使用 @antfu/ni
,也可以使用下面的命令:
nr packages:build
用下面的命令构建:
pnpm run docs:build
如果你使用 @antfu/ni
,也可以使用下面的命令:
nr docs:build
Rizumu (@LittleSound)
开源老手,著名的前三大前端框架之一的第二大框架 Vue.js 的核心成员,在开发的过程中帮助我们团队深入 Vue.js 底层,从编译器的角度处理得到了开发服务器的界面到源代码的映射。
特菈(@Dustella)
前端核心开发者,撰写了非常多的前端界面,和我们的动画样式调优和封装,让我们的 DevTools 界面更加美观和易用。
RainbowBird(@luoling8192)
后端核心开发者,负责提示词,工作流和 Agent 编排的开发,让我们的 DevTools 更加智能和易用。
Neko(@nekomeowww)
核心开发者,串联起了整个项目的前后端,打通了实时编辑和热重载、完成架构设计、API 设计、规范统一化、工具链和提供 LLM 调用和设计的最佳实践,让我们的 DevTools 更加完整和易用。
感谢每一位为 Guii DevTools 项目做出贡献的朋友们!