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强大的自然语言交互能力（包括上传参考文档、语音对话），让修改和微调界面变得像喝水一样简单。