使用 stitch 和 Gemini 来开发应用UI的步骤
为什么选择Gemini
选择使用Gemini来开发Flutter应用原因如下：
- Gemini和Flutter都是谷歌的产品，对于自家产品AI方面的支持当然要做的好一点；
- Gemini有官方支持的Flutter扩展，一键安装就可以获得Dart和Flutter相关MCP、Skill的支持，当然其质量也是很好的；
- Gemini每天有免费的2.5-pro模型额度，只需要登录谷歌账号就可以。免费额度用完还可以切换到2.5-flash免费使用，虽然速率上有限制但对于普通个人开发者来说已经足够了。
开发流程
首先使用stitch网站生成UI界面，然后下载PNG图片。然后使用 gemini工具生成一个空的Flutter工程，把刚刚下载的图片放到提示词里面，一步一步调试就可以完成了。下面详细说明一下。
使用Stitch生成应用界面
浏览其打开如下 https://stitch.withgoogle.com/ 网站，可以看到一个提示框，输入设计内容：
这里选择应用开发，是可以生成移动客户端分辨率的界面的。如果选择了网页开发，那么生成的分辨率就适合电脑端应用。我这里输入一个计算器应用的提示词，运行结果如下：
可以看到这里生出来三个计算机界面，虽然底部栏有一些出入，但还是很不错的。接下来咱们下载基础版本的，然后使用 Gemini 让我们根据这个UI设计，写一个基础版本的计算器把。
使用Gemini编写基础计算器
首先安装Gemini CLI 的Flutter扩展。Gemini CLI 扩展包将提示词、MCP服务器、自定义命令、主题样式、钩子函数、子代理及智能体技能封装为熟悉且用户友好的格式。借助扩展功能，你可以拓展Gemini CLI的能力边界，并与他人共享这些能力。所有扩展均设计为易于安装与分享的模块化组件。
1gemini extensions install https://github.com/gemini-cli-extensions/flutter.git --auto-update--auto-update 字段表明后续r扩展如果有新的发布版本会自动更新。当然你也可以通过如下命令更新插件：
1 gemini extensions update flutter这个扩展包含如下四个命令，包括创建Flutter应用、修改Flutter应用、git提交助手等，下面一一介绍一下。
1. /create-app
启动一个引导式流程来初始化一个新的Flutter应用程序，确保您的项目拥有坚实的基础。
流程：
- 询问包的用途、详细信息以及在您文件系统上的期望位置。
- 使用推荐的设置和代码检查规则创建一个新的Flutter项目。
- 生成初始的pubspec.yaml、README.md和CHANGELOG.md文件。
- 在编写任何代码之前，生成DESIGN.md和IMPLEMENTATION.md供您审阅和批准。
例如，启动gemini后，使用如下命令创建一个Flutter应用
1/create-app I want to create a trip planning app之后会自动生成一个Flutter应用，生成设计和实现MD文档，也许会询问你关于APP的一些实现细节问题。你也可以修改对应的文档，然后他会根据文档步骤一步一步实现对应功能、进行编译和linter检查，最好会提交git完成整个开发流程。另外一个是 /create-package 命令和APP命令是一样的。
2. /modify
启动一个结构化会话以修改现有代码。它帮助您安全高效地规划和执行更改。
流程：
- 询问您的总体修改目标及希望实现的内容。
- 提议为修改工作创建一个新的 git 分支，以隔离变更。
- 生成一份 MODIFICATION_DESIGN.md 设计文档，详细说明拟议的更改。
- 创建分阶段的 MODIFICATION_IMPLEMENTATION.md 计划供您审阅和批准。
这个和create命令一样，只不过是在已有的应用上添加或修改，会生成以MOD开头的设计和实现文档。
3. /commit
准备您暂存的git更改，以进行清晰、高质量的提交。它充当自动化的预提交钩子和消息生成器。
流程：
- 运行dart fix和dart format来清理和格式化您的代码。
- 执行Dart分析器以检查静态分析问题。
- 运行项目的测试套件以确保所有测试通过。
- 根据暂存的更改生成描述性的提交消息供您审阅、编辑和批准。
开始实现
好了，介绍完扩展工具，我们就可以来实现一个简单的计算器应用了。下面，说一下我实现的步骤吧：
- 把之前的设计界面下载到本地后，在控制台使用 create-app 命令创建一个简单的应用
- 应用目录新建一个design目录，拷贝设计UI到当前目录
- 使用/modify命令来修改当前界面设计，可以使用 @ 命令指定设计界面，例如：使用 @design/ui.png 重新设计一个标准计算器应用
首先使用create-app创建一个简单的Flutter应用，它会询问一些关于应用的信息，这里我为了方便演示modify命令，就说只创建了一个hello world应用。
后面，他会询问关于APP的一些必要信心，比如：
我回答package name是 calc_flutter，在当前目录创建应用。当然你也可以使用中文进行交流。回车继续后会自动在本目录下生成一个calc_flutter的应用。Gemini还会根据包的名称来推测应用功能，比如我这里名称带了 calc 关键词，它就猜测是不是一个计算器应用，需要生成简单的计算逻辑吗。这里，我选择还是生成一个简单的Hello界面，后续使用modify命令再进行修改。
回答完必要的问题后，该命令会先生成一个DESIGN.md文档。生成之后会先让你review一下，有没有需要修改的，如果没有可以回答OK让其继续生成实习计划。
I've completed the design document for calc_flutter, which you can find in DESIGN.md. It outlines a modern, Material 3
"Hello World" app that includes declarative routing with go_router and a robust foundation for future expansion.
Please review the design document and let me know if you approve it, or if you'd like any changes before I proceed
with the implementation plan.
实现计划也是一个MD文档，会拆分成几个阶段，每个阶段都是一些TODO项目。之后实现一个项目会把对应的设置成完成。
好了，create命令执行完成之后，在生成的应用目录里面执行modify命令来修改UI和逻辑实现一个标准的计算器应用吧。可以直接使用/modify 命令，后面添加描述信息。比如：使用desin目录里面的图片作为计算器界面，然后实现对应的计算器功能。其他的就交给Gemini吧，必要的时候它会询问你的意见，然后生成对应的设计和实现文档。最后，会根据实现文档一步一个功能去实现。
在这个过程中，你就可以泡杯咖啡等待结果了。
下面来看看最终的实现结果：
看起来还不错。底部栏还实现了科学、程序员计算器，那么下一部就是使用另外生成的三个UI来完善APP了，大家可以去试试。
思考总结
从界面设计到应用实现，都可以在短时间内完成，而且完成的质量是相当的不错。但我们还是应该冷静的思考，这并不代码不需要人工参与。相比之前写代码的效率，确实提高了不少。但是，其从设计到实现也不完全是按照你的意愿来的。
首先从界面设计来说。虽然，我们可以使用一句话设计一个漂亮的界面，但这个界面也许和你预期还是有差距，还是需要你使用其他工具或者使用stitch不断的迭代。
其次，对于应用UI代码实现，有时候也是会有偏差，也需要多次的迭代。效率相比较之前确实有提高，但并不是一劳永逸的。只是，我们的角色有所转换。