├── docs
    ├── how.png
    ├── preview.gif
    └── wechat.jpg
└── README.md


/docs/how.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guiiai/guii-devtools/HEAD/docs/how.png


--------------------------------------------------------------------------------
/docs/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guiiai/guii-devtools/HEAD/docs/preview.gif


--------------------------------------------------------------------------------
/docs/wechat.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guiiai/guii-devtools/HEAD/docs/wechat.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Guii DevTools
  2 | 
  3 | > ❤️ 充满爱的 AI 结对编程神器 —— 🐌 Guii Devtool，轻松融入现有前端项目，通过自然语言指令即可轻松定制和优化代码。我们不替代创造者或 Hackers，只愿成为他们桌旁的亲密伙伴，✨ 共同创造美好的产品。
  4 | 
  5 | <p align="center">
  6 |   <img src="./docs/preview.gif">
  7 | </p>
  8 | 
  9 | <p align="center">
 10 |     <a href="https://www.bilibili.com/video/BV131421t7Jk">它是如何运作的？请观看我们的演示视频！</a>| <a href="https://guii.app">官网</a>
 11 | </p>
 12 | 
 13 | <p align="center">
 14 |     <a href="https://discord.gg/jVNjbbUJmy">加入 Discord 服务器 <img src="https://img.shields.io/discord/1229292283657195520?style=flat&logo=discord&logoColor=white&label=Discord&color=%23404eed" /></a>
 15 | </p>
 16 | 
 17 | <!--
 18 | <p align="center">
 19 |     <span>加入微信群</span>
 20 | </p>
 21 | 
 22 | <p align="center">
 23 |     <img src="./docs/wechat.jpg" width="160" height="160">
 24 | </p>
 25 | -->
 26 | 
 27 | - [x] 业务总是希望使用稳定的组件库，我们支持在编写的代码中适配组件，现有的项目架构和现成的代码
 28 |   - [x] 已经支持的组件库
 29 |     - [x] [Radix Vue](https://www.radix-vue.com/)
 30 |     - [x] [shadcn vue](https://www.shadcn-vue.com/)
 31 | - [x] 🚀 在开发项目内安装插件即可使用
 32 | - [x] 🧳 0 配置支持前端开发者们最喜欢的热重载功能
 33 | - [x] 🔨 和 Nuxt DevTools 一样的辅助开发能力
 34 | - [x] ☝️ 激活，选中，修改，审查代码，和 Guii AI 一起写前端
 35 | - [x] 🌎 支持任意前端框架，Vue，React，Angular，Svelte，等等
 36 | - [x] 🔮 多模态，用图片和 Figma，甚至是草图描述你的期望
 37 | 
 38 | ## 如何使用
 39 | 
 40 | 访问 [Guii.AI](https://guii.ai) 官网，加入等待列表。
 41 | 
 42 | <!--
 43 | 
 44 | ## How
 45 | 
 46 | ![](./docs/how.png)
 47 | 
 48 | 1. 安装 Guii DevTools 到前端项目中
 49 | 2. 配置 Vite，Webpack 插件：
 50 | 
 51 | ```javascript
 52 | import { DevTools } from '@guiijs/core'
 53 | 
 54 | export default defineConfig() {
 55 |   return {
 56 |     plugins: [
 57 |       DevTools()
 58 |     ]
 59 |   }
 60 | }
 61 | ```
 62 | 
 63 | 3. 启动项目，打开浏览器，找到 Guii DevTools 浮窗
 64 | 4. 激活小鼠标
 65 | 5. 选中元素
 66 | 6. 通过自然语言指令修改代码
 67 | 7. 和 LLM 还有 Guii AI 一起写前端！
 68 | 
 69 | ## 如何开发
 70 | 
 71 | 该项目使用 [`unbuild`](https://github.com/unjs/unbuild)和 [`vite`](https://github.com/vitejs/vite)进行开发和构建。有了 [`jiti`](https://github.com/unjs/jiti)提供的强大功能，我们不再需要使用 [Rollup](https://rollupjs.org/) 进行繁琐的配置，然后观察本地文件的变化，并在没有 [`vite`](https://github.com/vitejs/vite)进行热加载的情况下捆绑修改和开发的模块。我们可以直接运行以下命令输出捆绑文件并开始开发：
 72 | 
 73 | ```shell
 74 | # run these scripts in root folder
 75 | pnpm i
 76 | pnpm run packages:stub
 77 | ```
 78 | 
 79 | 如果你使用 [`@antfu/ni`](https://github.com/antfu/ni)，也可以使用下面的命令：
 80 | 
 81 | ```shell
 82 | nr packages:stub
 83 | ```
 84 | 
 85 | 现在，启动 Vue3 Playground：
 86 | 
 87 | ```shell
 88 | pnpm run play:vue
 89 | ```
 90 | 
 91 | 如果你使用 [`@antfu/ni`](https://github.com/antfu/ni)，也可以使用下面的命令：
 92 | 
 93 | ```shell
 94 | nr docs:dev
 95 | ```
 96 | 
 97 | ## 如何构建
 98 | 
 99 | ```shell
100 | pnpm run packages:build
101 | ```
102 | 
103 | 如果你使用 [`@antfu/ni`](https://github.com/antfu/ni)，也可以使用下面的命令：
104 | 
105 | ```shell
106 | nr packages:build
107 | ```
108 | 
109 | 用下面的命令构建：
110 | 
111 | ```shell
112 | pnpm run docs:build
113 | ```
114 | 
115 | 如果你使用 [`@antfu/ni`](https://github.com/antfu/ni)，也可以使用下面的命令：
116 | 
117 | ```shell
118 | nr docs:build
119 | ```
120 | 
121 | -->
122 | 
123 | ## 关于我们
124 | 
125 | ### 成员（排名不分先后）
126 | 
127 | #### Rizumu ([@LittleSound](https://github.com/LittleSound))
128 | 
129 | - [Github](https://github.com/LittleSound)
130 | 
131 | 前端框架 [Vue.js](https://vuejs.org) 的成员，在开发的过程中帮助我们团队深入 Vue.js 底层，从编译器的角度处理得到了开发服务器的界面到源代码的映射。
132 | 
133 | #### 特菈（[@Dustella](https://github.com/Dustella)）
134 | 
135 | 前端核心开发者，撰写了非常多的前端界面，和我们的动画样式调优和封装，让我们的 DevTools 界面更加美观和易用。
136 | 
137 | #### RainbowBird（[@luoling8192](https://github.com/luoling8192)）
138 | 
139 | 后端核心开发者，负责提示词，工作流和 Agent 编排的开发，让我们的 DevTools 更加智能和易用。
140 | 
141 | #### Neko（[@nekomeowww](https://github.com/nekomeowww))
142 | 
143 | 核心开发者，串联起了整个项目的前后端，打通了实时编辑和热重载、完成架构设计、API 设计、规范统一化、工具链和提供 LLM 调用和设计的最佳实践，让我们的 DevTools 更加完整和易用。
144 | 
145 | ## Star History
146 | 
147 | [![Star History Chart](https://api.star-history.com/svg?repos=guiiapp/guii-devtools&type=Date)](https://star-history.com/#guiiapp/guii-devtools&Date)
148 | 
149 | <!-- ## 项目状态
150 | 
151 | ![Repobeats analytics image](https://repobeats.axiom.co/api/embed/422f7e142085eeb0c7ef854046101bf90927de91.svg "Repobeats analytics image") -->
152 | 
153 | ## 贡献者们
154 | 
155 | 感谢每一位为 Guii DevTools 项目做出贡献的朋友们！
156 | 
157 | [![contributors](https://contrib.rocks/image?repo=guiiapp/guii-devtools)](https://github.com/guiiapp/guii-devtools/graphs/contributors)
158 | 
159 | ### Written with ♥
160 | 


--------------------------------------------------------------------------------