opencode6 桌面应用实战 1

本节目标

• 明确MTOOL桌面工具箱的核心功能定位与未来扩展方向
• 掌握使用Google Stitch进行原型设计的基本方法

说在前面

整个MTOOL的开发流程非常直观：

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

本节仅聚焦从想法到原型图这一步，暂不涉及用OpenCode编写代码。两个前提条件需要提前了解：

• 需要科学上网环境，因为会用到Google Stitch工具。
• Google Stitch免费用户即可使用，Pro会员（每月20美元）可解锁更多模型选择与高级功能。订阅Pro可获得更完整体验，但免费版本的基础功能已足够满足日常需求。

MTOOL想法的由来

在日常开发中，你是否也经常需要打开多个工具网站？例如：

• 格式化JSON要去json.cn
  www.json.cn/
• 生成二维码要去草料文本二维码生成器
  cli.im/text
• 甚至生成SpringBoot启动的banner也需要找在线工具
  www.bootschool.net/ascii
  patorjk.com/software/ta…

这些需求零散但却是实实在在的刚需。更令人困扰的是，工作中还有一些极其细小的痛点，根本没有现成好用的工具。比如手里有一批ID值，希望快速转换为带逗号、带括号的SQL IN子句，每次都得在编辑器中手动查找替换，非常繁琐。因此，干脆自己动手，开发一个专属的桌面工具箱。

把想法变为原型图

这一步对于缺乏设计或前端能力的后端开发者来说，过去几乎难以想象。既要掌握Figma这类设计工具，还要具备审美和UI设计素养，门槛着实不低。尤其对于“没有美感”的人更是难上加难。但有了AI之后，一切都变得友好起来。过去很多搞不定的界面设计，现在只需一句话就能生成。

目前我首选的原型设计工具是Google Stitch，地址：stitch.withgoogle.com/

页面说明

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

提示词

直接提供提示词：

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

第一版生成内容

这版设计很有感觉，整体美观度不错。查看生成的具体内容：

• 最左边的字体样式 (Design System)
  可以理解为一份视觉说明书，定义了主色调、字体规范和组件样式。由于我们不需要导出设计规范，后续可以删掉。
• MTOOL-Dashboard
  仪表盘界面，对于目前简单的工具箱来说，这个页面略有多余。
• MTOOL-Text to QR
  文本转二维码界面，核心功能之一。
• MTOOL-JSON Formatter
  JSON格式化界面，另一个核心功能。

第二版整理调整

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

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

单个页面的微调

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

这种“整体生成 + 局部微调”的方式，无需编写任何前端代码，就能快速得到一个满意的交互原型。

微调后的效果

总结

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