opencode6-桌面应用实战1

本节目标

构思我们的MTOOL能做什么事情，以及后续的扩展性
了解用 google stitch 如何设计原型

说在前面

我们做 MTOOL 的整个流程如下：

复制代码

Stitch 画原型图  →  导入 AI Studio  →  生成前端代码  →  Tauri 项目集成  →  opencode 实际开发

本节主要是从想法到原型图的过程，不牵扯到用 OpenCode 进行编码。其中有两个前提需要提前说明：

需要魔法上网。因为要利用 Google 的 Stitch。
我本身是 Google 的 Pro 会员（每月 20 美元）。我之所以充值 Google，主要是看中了它的全生态------从想法到原型，再到代码的一站式能力。当然，免费用户也是可以使用 Stitch 的，可能在模型选择或某些高级功能上有限制，但基础功能应该没有太大区别。

MTOOL想法的由来

在实际开发过程中，不知道你们怎样。反正我是经常需要使用一些工具网站的。比如：

格式化 json 要去 json.cn

www.json.cn/
生成二维码要去草料文本二维码生成器

cli.im/text
甚至生成 springboot 项目启动的 banner 都要去在线工具

www.bootschool.net/ascii

patorjk.com/software/ta...

这些需求很分散，但又是刚需。另外我们在实际工作中，还有一些特别细小的痛点，虽然经常遇到，却没有现成合适的工具。比如：有一堆 ID 值，我想转换为逗号分隔、带括号的 IN 子句，用于 SQL 查询。每次都要在文本编辑器中进行繁琐的查找替换。基于上述的不便之处，我们就来开发一个专属于自己的桌面工具箱应用。

把想法变为原型图

这步对于没有设计或前端能力的后端开发人员来说，以前几乎是不可想象的。既要会用 Figma 等设计工具，还要有一定的审美和 UI 设计能力，门槛着实不低。尤其对于我这种"没有美感"的人来说，更是难上加难。但是有了 AI 之后，对后端开发者变得特别友好。很多以前做不来的界面设计，现在只要一句话就能轻松搞定。

在这里，Stitch 就是我目前的首选工具。网址：stitch.withgoogle.com/

页面说明

添加/上传附件按钮 (+) 这里可以上传截图、手绘草图、本地文档（如 PRD、需求文档）或网址等，作为 AI 生成设计的参考背景，帮助 Stitch 更准确地理解你的意图。
应用 & Web 切换选择目标输出平台。
- 应用 (Mobile)：生成适用于移动端 App 的 UI 布局。
- Web：生成桌面端或响应式网页界面（通常是 React/Vue 等前端代码）。
主题/样式配置 (调色盘图标) 用于设置视觉规范。你可以选择现成的配色方案，或者让 AI 自动生成符合要求的品牌视觉风格（如 Tailwind CSS、Ant Design 风格）。
模型选择器切换底座大模型版本。点击下拉菜单可以切换不同的 AI 模型，这里建议选择 Thinking with 3.1 Pro 模型，以获得更强的逻辑处理和代码生成能力。
声波图标支持与 AI 语音对话，你可以像和设计师沟通一样，边聊边调整设计，这是一个非常实用且有趣的功能。
初始模板/引导选择 (Start with a DESIGN.md) 允许你通过导入名为 DESIGN.md 的 Markdown 文档来生成整个应用布局。它通常包含页面结构、功能描述和组件清单，非常适合习惯从技术架构文档入手的开发者。

提示词

javascript 复制代码

我要开发一个工具箱桌面应用，名字叫 MTOOL。目前只有 JSON 格式化（需支持彩虹色花括号）和文本转二维码两个功能。但我未来可能会加许多工具。请帮我设计前端交互页面。我希望这个页面美观、简洁，且具有 AI 科技感。

第一版生成内容

这版设计已经很有感觉，整体美观度不错。我们先来看看第一版生成了哪些内容：

最左边的字体样式 (Design System)

可以把它理解为一份视觉说明书。定义了整个应用的主色调、字体规范和组件样式。因为我们不需要导出设计规范，所以后续可以把它删掉。
MTOOL-Dashboard

仪表盘界面。目前对于我们的简单工具箱来说，这个页面显得有些多余。
MTOOL-Text to QR

文本转二维码界面。正是我们需求中提到的核心功能之一。
MTOOL-JSON Formatter

JSON 格式化界面。同样是我们需求中的核心功能。

第二版整理调整

虽然第一版界面很不错，但仍需要根据实际需求进行裁剪和调整。首先我们要把最左边的视觉说明书删掉，然后通过以下提示词对 AI 下达调整指令：

markdown 复制代码

请对界面进行整体调整，具体要求如下：
1. 去除 Dashboard 界面。
2. 界面头部仅保留简单的 "MTOOL" 标题，不需要额外的功能按钮。
3. 屏幕左下角只保留"用户"和"Settings"图标。
4. 左侧功能菜单仅保留 "JSON Formatter" 和 "Text to QR" 两个菜单项。
5. 增加一个"Settings"（设置）界面的设计。该页面需要展示当前拥有的工具列表，包含：工具名称、工具描述以及开启/关闭的开关。

单个页面的微调

对生成的页面细节还可以进行局部微调。在 Stitch 中，你可以直接选中想要修改的元素，并通过对话指令让 AI 单独调整该区域（例如修改某个按钮的颜色，或调整列表的间距）。

通过这种"大体生成 + 局部微调"的方式，我们不需要编写任何前端代码，就能快速得到一个满意的交互原型。

微调后的效果

都是通过自然语言调整的。没有太多难度。

我这里保留了 AI 给生成的图标。看着还不错。

总结

对于缺乏前端和 UI 设计经验的后端开发者而言，Google Stitch 极大地降低了原型设计的门槛，让"从想法到界面"变得触手可及。
我们不仅要学会用 AI 写代码，还要运用其他的 AI 工具，来强化我们，使我们变成六边形战士。
需求源于日常痛点，我们这个 MTOOL 就来源于生活。
Stitch 强大的自然语言交互能力（包括支持上传参考文档、语音对话等），使得修改和微调界面就像喝水一样easy。