AI编程实践第9节：阿里秒悟与谷歌Stitch平台实现需求界面原型设计
公众号名称：无处不在的技术
作者名称：爱海贼的无处不在
发布时间：2026-04-16 13:10
持续内容输出，点击蓝字关注我吧
01
前言
来看一段AI大模型对它的介绍
最近，许多公司已经开始大规模拥抱 AI Coding。对我来说，AI Coding 并不仅仅是“写代码”这么简单，它是一条完整的软件研发闭环——从最初的想法，到设计，再到开发、测试，直到落地，每一步都承载着工程化的智慧与热情。
这个过程中，使用到AI的地方，从我个人的角度都是AI Coding的范畴。
目前，在实际的开发过程中，多数是需要开发人员承接来自业务的需求，但是业务的需求是BRD方式的说明方法，有可能是一段话，一个想法，对于开发人员来说理解起来稍微困难，于是PM出现，将BRD的文档转换为PRD风格的文档，他们像桥梁一样，把这些模糊的想法整理成可执行的 PRD 文档。
在AI时代以前是没问题的，但是AI Coding时代，需要开发什么不仅需要给人阅读，还需要给AI Agent阅读，如果这个文档的内容不清晰，甚至存在不易发现的错误，那么AI生成的也是错误的
因此，在 AI 时代，我们做的第一步，不仅是整理需求，更是在教 AI “听懂我们的语言”，让每一条需求都成为可靠、可执行的输入。这是一种责任，也是一种未来感十足的创新。
在本文中，我将基于阿里最新的在线编码平台 秒悟，展示一个我个人的初步想法界面交互。同时结合谷歌最新的原型设计工具 Stitch，探索 AI 时代两种不同的工作方式。
本文要做的一个这个Web界面演示的效果核心解决2个事情：
一个是将PM或业务的原始需求描述，转化为EARS需求描述法的格式。
一个是将SDD规范驱动开发第一阶段所需要的Spec文档的格式生成。
前几天阿里秒悟仍处于内测，现在已经正式发布，感兴趣的同学可以尝试。理论上，其他 AI 工具和在线平台也可以实现类似操作。我会同时演示谷歌 Stitch 的实战操作，让大家感受 AI 如何从想法到落地，变得触手可及。
02
正文
首先我们理解下什么是EARS需求重写？
EARS（Easy Approach to Requirements Syntax）是一种用来重写和规范化业务需求的方法，它的核心目标是让需求清晰、可测试、可理解，减少歧义和沟通成本。
为什么使用 EARS？
想象一下，当业务人员写下“系统应该快速响应用户操作”，开发者和测试人员可能会疑惑：什么是“快速”？一秒、两秒，还是十秒？EARS 用结构化句式让每个需求都像一个有温度的信件，准确传递给每一个执行者——无论是人还是 AI。。
EARS提供了一套结构化句式来统一表达。价值如下：
减少歧义：固定句式让开发、测试和业务人员理解一致
易于测试：每条需求都可以直接转化为测试用例
快速培训新成员：新人只需掌握句式就能书写规范需求
提高需求质量：结构化表达让遗漏和逻辑错误更容易被发现
EARS 将需求分为几种典型模式，每种模式都有固定的句式：
1. Ubiquitous Requirements（通用/普适需求）
-
形式
The
shall . -
特点
不依赖特定事件或状态，始终适用
-
示例
系统应保存所有用户输入的数据。
2. Event-Driven Requirements（事件驱动需求）
-
形式
While
is , when occurs, the shall . -
特点
当事件发生时触发，强调因果关系
-
示例
当用户点击“提交”按钮时，系统应验证输入的完整性。
3. State-Driven Requirements（状态驱动需求）
-
形式
While
is in , the shall . -
特点
行为依赖于系统状态，而非单个事件
-
示例
当系统处于维护模式时，应阻止用户登录。
那么在公司落地中，我们可以将PRD或BRD上的原始需求描述进行优化，优化完成后与PM、测试人员对齐描述，看看这个搭建理解的实际是否正确，是否存在偏差。
关于SDD规范驱动开发之前已经分享过了，这里不在分享，接下来开始进行操作。
AI时代，当我们有一个想法后，想验证是否可行，AI时代最快的方法是找一个零代码的AI Web应用制作的平台，快速搭建产品原型，如果觉得OK，可以继续后面的事情。
目前我觉得几个类似的平台是Enter.pro、百度秒哒、字节妙搭、阿里秒悟。
从想法到原型：秒悟的实践
今天这篇文章我选择的事阿里的秒悟，之前分享了百度的秒哒，对于本文的场景来说，其实用百度秒哒是比较合适的，他提供了AI模型，可以让生成的Web应用具备模型调用的能力。
不过写这篇文章的时候，刚好看到了阿里秒悟，因此我选择的这个。
我进入到了阿里秒悟的首界面，目前看到的这个界面和百度的秒哒界面是非常类似的，都是那种在线制作应用的平台。
接下来，我们可以提前添加好2个技能，分别是头脑风暴和UI设计：
接下来我输入我的一个我目前的基本的原始想法：
我想做个网页应用，首先进来后是个落地页，非常漂亮的适合宣传的，
我希望这个页面未来能够PM和开发者来提供日常软件开发辅助提效。
比如PM日常的第一个功能是针对需要带开发的需求，
进行输入然后系统返回经过EARS语法重写后的描述。
同时PM日常的第2个需求是输入原始需求后，
系统能够转换成SDD规范驱动开发的第一步所需要的Spec文档。截图让AI给我们润色下自己的想法和话术。
想法输入完成后，我们先选择一个润色的功能，将我们的原始需求想法，转化为更标准的写法，转换完成后的截图如下所示：
这里优化后的润色完成的提示词如下：
设计并实现一个面向产品经理与开发者的软件开发辅助提效平台，
核心包含两大功能模块：
第一，需求描述优化引擎——接收用户输入的原始需求，
自动应用EARS语法规则（Event-And-Response Structure）进行结构化重写
，输出清晰、可测试、无歧义的需求描述；
第二，Spec文档生成器——将原始需求转换为
符合SDD（Specification-Driven Development）规范的初始Spec文档，
包含功能范围、验收标准、技术约束等必要章节。
平台需以精美落地页作为入口，
突出产品价值主张与核心能力展示，
整体视觉风格专业现代，兼顾技术感与亲和力，
为后续功能迭代预留扩展接口。
技术栈建议采用Vue前端配合Node.js/Python后端，
确保响应速度与可维护性。润色后的效果基本是符合我的基本想法的，接下来选择Agent模式，让这个平台开始干：
接下来我们继续等待处理，目前看这个平台目前的实现方式是没有先写PRD文档，直接就开始干了，不过效果还可以：
基本上页面的想法也是我想要的，例如针对我们的EARS需求优化这块，基本页面的设计非常符合我的想法，而且设计的非常漂亮：
接下来再来看下我的另外一个功能，Spec文档生成，这个界面默认的效果也可以：
这样我们的一个基本的想法就实现了，目前感觉这个平台应该有些功能是缺失的。如果自己对接了AI模型，这个功能是比较完整的。这里只是演示下。
谷歌 Stitch：让想法开花
接下来使用谷歌最新的设计神器 “Stitch”，一个“氛围设计”（vibe design）的工具，用户只需要用自然语言描述想法，它就能直接生成相对完整的 UI 界面。这个东西可以用AI出设计原型，还能语音交互、无限画布、MCP开发者集成、导出到Figma。
Google Stitch是Google Labs推出的一款AI驱动UI设计工具。注意，它不是编程工具，也不是普通的AI画图工具——它的核心定位是AI原生的软件设计画布。
以前做 UI，你得从空白画布开始，拖组件、调间距、选配色、搭层级。一个首页，熟练的设计师也要半天起步。
Stitch 的逻辑完全不同：你说人话，它给你画。
这背后的概念叫 Vibe Design（氛围设计）——你只需要描述感觉、目标、氛围，不需要懂什么圆角12px、间距24px、主色#3B82F6。AI帮你把抽象的感觉变成具体的界面。
很多人认为Google Stitch不是要”干掉设计师”，而是让”从想法到可交互原型”这段最耗时的流程，从几天压缩到几分钟。它是产品经理和开发者的福音，但对专业设计师来说，目前还只能是”高级起稿工具”。
Stitch的定位很明确——不是给专业设计师用的主力工具，而是给”需要做设计但不是设计师”的人用的：
Google Stitch对于企业和个人的价值如下：
接下来我们访问这个地址：https://stitch.withgoogle.com/
打开的首页如下：
接下来我们可以输入我们的详细需求，这里我这里为了演示输入的比较简单，也是我们原来的那个提示：
我们也可以参考网上的实践，写一写更加优秀的提示词。当前输入需求后，开始干活了。
目前每日额度如下：
接下来看看第一版生成的效果，由于在上一步的需求中，没有明确选择样式和颜色主题，他帮助我们生成了几个网页：
接下来，我们开始提出第2个需求，让他帮助我们生成中文风格的。
生成的页面原型也是非常的不错：
接下来开始使用谷歌Stitch的第二个玩法，将页面的UI效果转换为可以交互的原型设计，点击下页面上的生成即时原型的操作：
接下来等等一会儿，我们就可以收到一个可以点击交互的原型，这里每个界面都是可以点击交互的：
接下来开始分享谷歌Stitch的第三个能力，导出能力，可以导出Figma的格式，也可以导出HTML格式的页面原型：
导出后页面下载文件夹如下所示：
在导出的所有文件中，有个一个DESIGN.md文件是非常有价值的，我们做了一个原型，我们能够获得这个原型的设计标准说明：
DESIGN.md 是 Google Stitch 引入的新概念。一种纯文本设计系统文档，AI 代理可以读取它来生成一致的 UI。
它就是一个 Markdown 文件。不需要 Figma 导出，不需要 JSON Schema，不需要特殊工具。把它放到项目根目录，任何 AI 编码代理或 Google Stitch 都能立即理解你的 UI 应该长什么样。Markdown 是大语言模型最擅长阅读的格式，所以无需解析或配置。
因此在AI时代，我们的项目下通常会存在2种文件：
导出的文件列表中包含了网页风格的原型、以及图片，访问后，效果真的太棒了，网页都给我写好了：
这种比以前的VibeCoding效果好太多了，设计出来的效果就是我们想要的。
导出的时候，支持生成导出React应用网页代码：
这里我选择React后，经过一些时间的等待，我看到了一个单页应用，基于前端React效果的界面。可以交互和点击，未来可以转换为React的格式的项目。
第一次看到生成的网页原型，我的心里涌起一股暖流——几分钟内，我的想法变成了可点击的交互界面。设计稿、原型代码、Figma 文件……所有成果整齐呈现。这一刻，我仿佛看到了未来的研发世界：创意不再被繁琐流程束缚，而是直接与技术对话。这样图片设计稿，可以完全作为我们的开发辅助资料进行提效。
03
总结
AI Coding 让创意与实现之间的距离前所未有地缩短。秒悟和 Stitch 只是冰山一角，它们展示了一个可能的未来：想法可以在几分钟内变为可交互原型，需求可以被 AI 精准理解并落地执行。
技术的温度，不只是冷冰冰的代码，而是让每一个脑海中闪现的念头，都被尊重、理解、实现。它让研发不再只是机械劳动，而是一种充满诗意的创造力体现。
未来，我们每一个软件工程师、PM，甚至每一位有创意的你我，都可以像导演一样，执笔构建未来世界。AI 只是手中的画笔，而思想、想法、热情，才是最珍贵的颜料。
喜欢本文的，可以关注、收藏、点赞、转发、分享到朋友圈哦。
本专题系列文章：
VibeCoding实践第1节：字节Trae实现简历与简历生成器
AI编程实践第2节：Spec规范驱动开发(SDD)1024游戏
AI编程实践第3节：Trae实现Web管理后台界面，效果出奇好
AI编程实践第4节：基于GPT5+Trae实现MCP服务市场
AI编程实践第7节：Git WorkTree机制实现分支并行开发
AI编程实践第8节：使用Understand Anything理解项目关系图谱
最近也看到有人问如何学习AI，这里分享几个资料如下：
1、通往AGI之路的知识库飞书云文档
https://waytoagi.feishu.cn/wiki/QPe5w5g7UisbEkkow8XcDmOpn8e
2、掘金的AI知识库的飞书云文档
https://agijuejin.feishu.cn/wiki/UvJPwhfkiitMzhkhEfycUnS9nAm?table=blk3RfZtR7Nh73tO
3、极客时间的AI知识库的飞书云文档
https://geek-agi.feishu.cn/wiki/B9rYwwg6xidZYJkbrlscxTQFnOc
4、LangGPT社区的飞书云文档（结构化提示词等等）
https://langgptai.feishu.cn/wiki/RXdbwRyASiShtDky381ciwFEnpe
5、一站式AI产品经理飞书知识库
https://v11enp9ok1h.feishu.cn/wiki/KiIvwdFOciiqqNkwKzTcmn88ndL
6、微软网站分享的AI指南说明知识
7、赋范空间的飞书AI知识库：
https://kq4b3vgg5b.feishu.cn/wiki/ETqzwH4THiTY8kkGqAucYbSonPt
- END -
喜欢的可以加入我的免费知识星球：觉醒的新世界程序员，或者付费的知识星球：觉醒的AI技术经验，随时与我沟通，交流技术与想法。
喜欢的也可以关注我的公众号：无处不在的技术，与我一起学习成长、共同进步，在技术的道路上越走越远。
喜欢就点个 在看****呗 👇1
Original 爱海贼的无处不在 无处不在的技术
内容效果不满意？点此反馈