虽然我的读者大部分都不是前端程序员和设计师，但是我觉得这不意味着了解设计行业 AI 的变革是没有意义的。
虽然大多数时候不需要我们自己去进行设计，但我们的工作每天都会和这些应用打交道。了解这些 AI 的变革，可以帮助我们更好地了解职业的发展和 AI 能力的边界。
所以我希望我的文章能以更大众化的方式来写，让读者了解 AI 对生活会有什么影响，而不局限于具体使用细节。比如，某天我创业开发一个应用时，我能知道 AI 设计工具能做到什么程度，以及它有哪些局限与边界。
本篇文章介绍的是最新的 AI 设计软件 Stitch by Google，这是一款 AI 原生、免费的 AI 设计软件，可以设计包括 App 应用界面和网页界面。
其底层所用的 AI 模型包括 Gemini 3 Flash、Gemini 3.1 Pro 和 Nano Banana；它们都是 Google 的旗舰模型，整体能力在行业内较为领先。
Stitch 的局限
在正式的测评使用开始之前，我还是先讲一讲 Stitch 的那些局限：
-
它只能够生成前端的应用界面，而不包括后端的底层逻辑代码。所以并不是一句话做出一个应用，而是做一个软件界面的设计。 -
若要继续生成可运行的应用，可导出到 Google AI Studio（实测目前太慢了，不建议），或导出到本地，再用其他 AI 编程工具补全代码与逻辑。 -
目前软件仍处于 Beta 测试阶段，功能在快速迭代中，尚未作为正式产品上线。 -
目前还不支持多用户协作，只适合个人开发使用
以上的局限都只是当前软件开发过程中的局限，等到未来正式上线以后，估计就会是一个产品力极强的 AI 设计软件了。
AI 设计效果实测
官方案例实测
首先我们来一个简单的测试，看一下官方的测试案例能够生成什么样的效果。
这里用官方的案例生成一个塔罗牌抽卡。从界面设计来看，风格非常一致且审美在线，整体设计语言也较成熟。
在导出的位置，可以直接创建可交互的 React 应用，用于预览生成的应用效果。
也就是说，你不仅可以用图片查看生成结果，还可以通过交互预览动效与过渡。这个功能我觉得是非常方便的，也把 AI 开发应用的前端设计流程做得非常高效便捷。
创建即时交互原型
在导出的位置可以直接创建即时交互原型，这个功能我非常喜欢。创建之后就可以进入原型编辑器，针对每一个界面进行调整，并且每个界面的按钮都是可以点击交互的。而且每个界面的动画效果也可以正常显示。
编辑功能
AI 对话编辑：给左上角的设置按钮增加菜单栏选项
可以看到指令遵循非常不错，新增的界面风格较为统一。如果没有特别高的要求，基本上制作一版就能够直接使用。
每一个按钮要链接的页面，以及动画过渡的方式，也都提供了修改的入口。
线稿变成网页
Stitch 火出圈的其中一个原因，就是能够将一个非常简单的线稿，绘制成一个高质量的网页原型。
这里也测试一下效果：
我这里的提示词虽然给得不是特别精准，但是 Stitch 也基本上把我的想法做得非常漂亮。
所以理论上来讲，只需要画一个非常粗糙的线稿，再告诉它每一个位置对应的文字或者内容是什么，它就能够画出来非常满意的网页，效果还是非常惊艳的。
做一个投资机会监控系统
上面主要讲述了这个软件的一些基础功能，也基本上能看得到它的一些能力点。
接下来我会做一个简单的 demo，配合 ChatGPT 的 Codex，看一下完整开发流程中会遇到哪些问题，以及最终能做出什么效果。
先用 Codex 根据我的需求做一个代码生成计划
（模型：GPT 5.4，推理强度超高，Plan 模式）
“投资机会监控系统”。 具体需求如下：
1. 首页核心大盘指标监控 包括标普 500 指数、纳斯达克指数、道琼斯指数、黄金价格、比特币价格、白银价格等，并允许我自定义添加。
2. 核心标的的跟踪和洞察 寻找纳斯达克 100 中被错误定价或低估的机会。
3. 系统需要具备关键指标和分析洞察的标准。
我希望将界面设计外包给 Stitch，生成一份提示词，告诉它要做什么界面
接着将 Codex 生成的提示词喂给 Stitch，将界面生成的工作外包给 Stitch
整体生成的界面风格还是比较符合我的需求的，界面非常简洁美观，也非常专业。
这里我就不做过多优化了，直接回到 Codex 生成完整的应用。
这里面提示一点：软件开发的需求一定要尽可能描述得实际且准确，否则 AI 容易做出一个功能杂乱、看起来美观但没有用的成品。
建议先调整几遍提示词，之后再去生成界面，确保你的需求是真实有效的。
接下来将 Stitch 生成的网页图片导出为 ZIP 文件，放到项目文件夹下，使用 Codex 读取网页文件，开发相关代码。
AI 洞察分析我这里使用的是 MiniMax Token Plan 的 M2.7 模型。
金融数据使用的是 yfinance 数据库。
以下是最终开发成果，网页使用的是真实数据和 AI 解读结果
实际体验如下：
-
Stitch 生成的页面代码导入 Codex 后，可复现约 80%～90% 的效果。 -
页面会出现一些格式异常的情况，还需要人工多轮对话进行调整 -
Stitch 确实提升了前端界面生成的质量和可控性，大幅缩短了前端开发的流程，可以将精力更专注于后端工作的开发 -
在这里我使用的是让 Codex 一次性完成整个网页的开发。但实际如果真的要做 Vibe Coding 的话，其实还是建议逐个模块去做，完成一个模块并通过验收，再进行下一个模块的开发，这样操作的可控性和可维护性其实会更好一些。
总结
以上就是关于 Stitch 的测评和体验分享，本篇文章既体验了 Vibe Coding，也体验了 Vibe Designing。核心是探索 Vibe Designing 生成的界面，是否可以与 Vibe Coding 完美结合。
总体来看，AI 对于设计开发行业的影响正在加速，未来前端开发的流程也会被彻底重塑。
以上是我针对 Stitch by Google 的测评与分享，希望能对你有所帮助。
本账号会持续关注 AI 趋势与高效工具的最新进展，筛选真正有价值的内容持续分享。
如果你对这一方向感兴趣，欢迎点击关注，并在右上角设为星标，第一时间看到本账号的文章更新~
文章创作不易，欢迎点赞收藏和转发～