作者作为一名精通HTML/JS但CSS苦手的开发者，在搭建学习管理系统时遭遇插件噩梦，转而使用Google Gemini CLI、Stitch和Jules三款工具，从后端逻辑到前端设计再到代码合并，全程AI辅助，最终零手写CSS完成了完整项目。文章记录了真实使用流程与体验，展示了AI开发工具链如何降低全栈开发门槛。

我写CSS的水平有多烂？

能用JavaScript和HTML搭出功能完整的页面，但你要问我“为什么那个提交按钮是蓝色？”我只能回答：它是蓝色的。

过去几年，Bootstrap是我的救星。但当一个真实的项目需要定制化界面时，我的救星就成了噩梦。

事情是这样的：2025年第四季度，朋友Aniedi邀请我为一个创作者经济课程项目搭建学习管理系统（LMS）。平台基于WordPress，但那些插件让我头大——不是这儿报错就是那儿不兼容。

有人说过：“手里拿着锤子，看什么都像钉子。”

我选择了另一条路：不用锤子，用AI。

第一步：用Gemini CLI写后端逻辑

我选了Nuxt.js（Vue.js框架）作为前端栈。Gemini CLI能自动识别框架路由，这一点帮了大忙。

在一个空文件夹里创建Nuxt项目，然后打开终端输入“gemini”，对话就开始了。

我告诉它：“创建一个学习管理系统的主页，放在/app/pages/index.vue，更新路由。”

几分钟后，一个基础页面就生成了。接着我让它安装Prisma处理数据库、创建SQLite schema、集成nodemailer做邮件通知和密码恢复，甚至自动生成了登录注册页面。

整个过程就是“描述需求→调整→继续描述”。Gemini CLI像一位永不疲倦的初级程序员，你只需要告诉它“这里改一下配色”“那里加一个搜索框”。

第二步：前端设计交给Google Stitch

后端逻辑跑通了，但页面还是“程序员审美”。而Google Stitch就是专门拯救像我这样的CSS残疾人的。

打开stitch.withgoogle.com，点击Web图标，然后输入一段自然语言描述：

“一个学习管理系统着陆页。添加登录和注册按钮，展示课程目录，课程分为付费和免费。学生报名时会加入班级，如秋季班或夏季班。班级有讲师和导师。用户可以注册为学生、导师或讲师。使用活力专业的主题配色。”

Stitch立刻生成了一版完整的设计稿。你可以点击“View Code”查看CSS和HTML，也可以直接导出到多个平台。

最重要的导出选项是：Jules。

第三步：Google Jules自动创建Pull Request

Jules是Google新出的一款AI工具，能连接到你的Git仓库。在Stitch中导出设计时，选择“Jules”为目标，选择你的GitHub仓库，输入一条指令：

“更新/app/pages/index.vue使其匹配这个设计。我的框架使用Nuxt.js和Vue.js。登录链接指向/login，注册链接指向/register。”

点击“Create Task”，Jules会自动克隆你的仓库、执行修改、创建一个新分支并提交Pull Request。整个过程可以实时查看进度。

完成后，到GitHub上审查PR，合并，拉取到本地，刷新页面——新的前端界面就诞生了。

效果怎么样？

从零设计到上线，我几乎没写一行CSS。唯一的“人工干预”是手动修复了一个CTA按钮的错位问题——这对我来说已经是巨大进步了。

我继续用同样流程实现了登录页面，同样顺滑。

一个真实的开发者困境

这套工具链让我重新理解“全栈开发”。过去要懂路由、数据库、状态管理、响应式设计、版本控制……现在，AI处理了80%的机械工作，开发者只需描述需求、做决策和修复细节。

当然，它不是万能的。Gemini CLI偶尔会生成不合理的架构，Stitch的配色有时需要调整，Jules的PR也可能引入错误。但关键在于：它让一个CSS苦手从“做不了”变成了“可以完成”。

如果你也像我一样，被某个技术短板卡住项目进度，不妨试试这套Google三件套。用自然语言写代码的时代，也许真的来了。