Google Stitch：2分钟从想法→可编辑的Figma设计稿（附5个使用技巧）

Google Stitch：2分钟从想法→可编辑的Figma设计稿（附5个使用技巧） Google Stitch：2分钟从想法→可编辑的Figma设计稿（附5个使用技巧） Modified May 25, 2025 全局调整还有另一种方法，就是点击右上角的【Edit theme】，接着你就可以调整全局元素，目前支持的选项包括：皮肤（Light模式 or Dark模式）、颜色、圆角、字体等。比如我们选择Dark模式，颜色选择蓝色，就得到下面这样的UI：除了全局调整，我们还可以进行局部调整，比如：点击UI上方的【Edit】，这时候就会将你要单独调整的UI界面添加到对话框，接着输入你的调整需求，比如“将图片替换成真实拍摄的连衣裙”：然后你就能得到调整后的效果：当然还可以单独调整字体、配色、icon等等，这里就不一一展示了。也就是说，无论全局调整还是局部调整，我们都是可以通过自然语言来实现，真就动动嘴皮子的事。核心能力4：导出为Figma&代码如果大家动动嘴皮子还是没解决，可以考虑将UI界面导出为Figma文件。点击对应UI界面上方的【Figma】按钮，当看到右下角出现上图所示的“复制成功”提示后，就可以在打开的Figma文件中快捷键Ctrl+V一键粘贴，粘贴后的UI设计稿是可以二次调整的。几乎你想调整的元素，都能调整。大家注意Figma左侧文件结构的话，就会发现，从Stitch复制出来的UI设计稿，图层结构是非常清晰的，非常方便后期的快速定位和维护调整。此外，Stitch还支持将UI设计稿导出为代码。这个功能比较有意思的点在于，它也是用HTML来承载，也就是和我们之前用Cursor、DeepSeek来生成产品原型/设计稿的思路是一致的。不过我目前还没发现这个功能可以用到哪些场景，欢迎大家讨论 Stitch的4个使用技巧在前面介绍几个核心功能的时候，其实有简单带过介绍Stitch的一些使用技巧，最后做个总结： 1、提示词保持清晰简洁：如果对产品设计没太多想法，可以用简单的提示词和Stitch共创；如果有想法，在提示词中描述核心功能，不用特别复杂，Stitch就能生成不错的UI； 2、提示词中增加页面类型：如果想让Stitch生成符合你要求的页面数量，可以在提示词中指定有哪些页面来控制一次生成页面的数量，比如： Code block Plain Text 我想设计一款面向骑行爱好者的APP，主要采用Glassmorphism风格。需要包括用户注册页、骑行线路选择页面、骑行追踪仪表板页面、骑行详情页、骑行爱好者社区交流页、设置页 3、多次实验与迭代：一次生成的结果可能不一定满意，可以通过主题、颜色、字体进行多轮的全局或局部调整来完善设计； 4、一次调整一个模块/元素：这样更容易看到影响并进行调整； 5、使用 UI/UX 关键词：例如，使用“导航栏”，“header”、“footer”，或 “注册表单中的主要按钮”，“hero区域中的图片”，这样Stitch能实现更快地定位；以上就是我实测Google Stitch的全部内容，希望对大家有帮助全局调整还有另一种方法，就是点击右上角的【Edit theme】，接着你就可以调整全局元素，目前支持的选项包括：皮肤（Light模式 or Dark模式）、颜色、圆角、字体等。比如我们选择Dark模式，颜色选择蓝色，就得到下面这样的UI：除了全局调整，我们还可以进行局部调整，比如：点击UI上方的【Edit】，这时候就会将你要单独调整的UI界面添加到对话框，接着输入你的调整需求，比如“将图片替换成真实拍摄的连衣裙”：然后你就能得到调整后的效果：当然还可以单独调整字体、配色、icon等等，这里就不一一展示了。也就是说，无论全局调整还是局部调整，我们都是可以通过自然语言来实现，真就动动嘴皮子的事。核心能力4：导出为Figma&代码如果大家动动嘴皮子还是没解决，可以考虑将UI界面导出为Figma文件。点击对应UI界面上方的【Figma】按钮，当看到右下角出现上图所示的“复制成功”提示后，就可以在打开的Figma文件中快捷键Ctrl+V一键粘贴，粘贴后的UI设计稿是可以二次调整的。几乎你想调整的元素，都能调整。大家注意Figma左侧文件结构的话，就会发现，从Stitch复制出来的UI设计稿，图层结构是非常清晰的，非常方便后期的快速定位和维护调整。此外，Stitch还支持将UI设计稿导出为代码。这个功能比较有意思的点在于，它也是用HTML来承载，也就是和我们之前用Cursor、DeepSeek来生成产品原型/设计稿的思路是一致的。不过我目前还没发现这个功能可以用到哪些场景，欢迎大家讨论 Stitch的4个使用技巧在前面介绍几个核心功能的时候，其实有简单带过介绍Stitch的一些使用技巧，最后做个总结： 1、提示词保持清晰简洁：如果对产品设计没太多想法，可以用简单的提示词和Stitch共创；如果有想法，在提示词中描述核心功能，不用特别复杂，Stitch就能生成不错的UI； 2、提示词中增加页面类型：如果想让Stitch生成符合你要求的页面数量，可以在提示词中指定有哪些页面来控制一次生成页面的数量，比如： 3、多次实验与迭代：一次生成的结果可能不一定满意，可以通过主题、颜色、字体进行多轮的全局或局部调整来完善设计； 4、一次调整一个模块/元素：这样更容易看到影响并进行调整； 5、使用 UI/UX 关键词：例如，使用“导航栏”，“header”、“footer”，或 “注册表单中的主要按钮”，“hero区域中的图片”，这样Stitch能实现更快地定位；以上就是我实测Google Stitch的全部内容，希望对大家有帮助 🔗 原文链接： https://mp.weixin.qq.com/s/YNEY3rpr... https://mp.weixin.qq.com/s/YNEY3rpr... 原创蔡蔡啊 ai呀蔡蔡2025年05月22日 22:35 广东之前分享过用Cursor+Claude 3.7生成原型图/Figma设计稿的方法：五分钟！Cursor+Claude3.7直接生成一整套原型图/UI稿（附完整教程）五分钟！Cursor+Claude3.7直接生成一整套原型图/UI稿（附完整教程）只需三步！Cursor+Claude3.7就能生成可编辑的Figma设计稿（附插件+教程）只需三步！Cursor+Claude3.7就能生成可编辑的Figma设计稿（附插件+教程）这种方法的核心实现路径是：想法→代码→原型/Fimga设计稿（HTML代码承载），虽然降低了原型和UI设计的制作门槛，但由于上下文限制，无论是在Cursor、Trae中，还是DeepSeek、GPT中去实现，基本都需要分成多段代码然后拼接起来实现，也就是用户必须和代码打交道。后来也分享了Cursor+Figma MCP制作原型/Figma设计稿的方法： Cursor+Figma MCP，自动生成可编辑的产品原型（附全流程教程） Cursor+Figma MCP，自动生成可编辑的产品原型（附全流程教程）这种方法的核心实现路径变为：想法→原型/Fimga设计稿，虽然这种方法跳过了代码这一步，进一步降低了制作产品原型/UI设计稿的门槛。但这种方法的问题在于：MCP配置比较麻烦，以及生成的Figma设计稿距离生产级别还有一定距离。直到昨天谷歌 I/O 2025 推出 Stitch，这一切开始发生变化。现在我们只需要输入一句话/一段话，Stitch就可以输出生产级别的UI设计稿，并且支持直接复制粘贴到Figma中进行二次编辑，或者导出相应代码。下面会分这几个part给大家详细介绍下Stitch： • Stitch基础介绍 • 核心能力1：一句话输出完整UI • 核心能力2：根据草图输出高保真UI • 核心能力3：全局&局部UI 快速调整 • 核心能力4：导出为Figma&代码 • Stitch的5个使用技巧 Stitch基础介绍 Stitch官网 🔗：https://stitch.withgoogle.com/home Stitch前身是Galileo AI（主要做 Text to UI 和 Image to UI 的AI设计产品），后面被谷歌收购并加持上了自家的Gemini 2.5 Flash和Gemini 2.5 Pro模型，也就是大家今天看到的Stitch。它的整个操作界面非常简洁，左边是历史作品和官方示例作品，右边就是AI对话区，目前有两种模式： • Stadard Mode ：使用的是Gemini 2.5 Flash模型，生成速度更快，支持主题调整和导出为Figma（也就是接下来会提到的核心能力2 和核心能力3 ），每个月有350次免费额度； • Experimental Mode ：使用的是Gemini 2.5 Pro模型获取高保真设计，实测速度会更慢点，支持上传图片进行参考，每个月有50次免费额度。两种模式都支持生成Mobile应用和Web应用。核心能力1：一句话输出完整UI 如果你对产品还没有特别清晰的的设计规划，这时候提示词可以简单点，描述这是一款什么类似的APP，比如 “我想设计一个音乐类APP” 或 “一款给骑行爱好者的APP” ，接着 Stitch会提供一些参考页面，在这个过程中你可以和它一起头脑风暴。反之，你非常清楚自己需要设计哪些功能、页面，就可以在提示词描述得更具体些，比如：值得一提的是，在测试了多个case后，我发现原来给Stitch限定大的设计风格，比如 Glassmorphism风格、孟菲斯风格等，对UI结果的影响主要是整体色彩、字体和占位图，但这些影响并不会让我们一眼能看出是哪种设计风格。所以大家在测试中可以放弃用大的风格概念词，转而用一些形容词（它们会直接影响颜色、字体和占位图的选择）来定义应用的感受，就能很明显地改变UI风格，比如：核心能力2：根据草图输出高保真UI 前面主要介绍的是 Stitch的 Stadard Mode，而Experimental Mode是可以直接丢给它草图去生成高保真UI的。这是给出的第一张草图：这是 Stitch 根据草图生成的高保真UI：这是给出的第二张草图：这是 Stitch经过一次调整后的高保真UI：局部调整时有个小技巧，就是在提示词中写明具体到哪个模块或哪个按钮进行调整，这样AI调整起来会更加精准。草图生高保真UI这个功能，让不懂设计的产品经理也能快速将自己的想法视觉化，非常适合产品前期的demo演示。但需要注意的是，相比 Stadard Mode， Experimental Mode的生成会没那么稳定，一般需要2 3次生成才能比较满意。而且目前 Experimental Mode生成的高保真UI暂不支持导出为Figma，所以一些细节调整就比较麻烦。核心能力3：全局&局部UI 快速调整如果你对Stitch生成的整体布局是满意的，但你希望调整风格、语言、字体这些全局属性，可以直接在右侧对话框输入你的需求。比如：这是初版UI：暖色调，英文界面这是全局调整后的UI：冷色调，中文界面