程序员的 UI 救星：Google Stitch

如果你是在大厂工作的程序员，或许不会碰到太多让人头疼的 UI 设计问题。但在小公司打拼的工友，很多时候就没那么幸运了。常常是一个人身兼多职，甚至连 UI 设计师都不给你配一个，老板提个需求，从设计、前后端开发到部署上线，全靠程序员自己扛。

又或者，你打算自己开发一款软件，翻遍了 Dribbble、花瓣等设计平台，结果依然找不到灵感，设计这关还是卡住了。

工作这些年，我见过不少前后端开发者，发现一个很有趣的现象：后端怕写 CSS，前端怕搞 UI。

虽然这两年 AI 工具有了大爆发，AI 写界面、AI 文生图、图生图的工具层出不穷，在海报设计方面确实有很大助力。但真正好用、靠谱的 AI 驱动的 UI 设计工具却寥寥无几。

🎨 上手体验 Stitch

Stitch 是 Google 推出的 AI 驱动 UI 设计工具，简单来说，它支持文生UI图、图生UI图。还能对生成的UI图进行微调。

体验地址：https://stitch.withgoogle.com/

Stitch 现在还是 BETA 版，但不用排队，用 Google 账号登录就能使用。

在产品的主界面可以看到左侧有一栏“Examples”，Stitch 生怕你不会用它，所以提前准备了几个例子给你参考。随便点开一个例子都能看到和 Stitch 交互的聊天记录。

看完例子还是觉得不会写提示词的话，可以在页面右上方的“3个点”里面找到“Prompt Guide”，里面有 UI 设计的提示词的指南。

这点我觉得做得很好，毕竟对于不是 UI 出身的工友来说，可能不清楚可以使用哪些 UI 专业的形容词来描述自己想生成的 UI。

在这“3个点”的左边有一个下拉菜单，里面有2个模式可以选择。

• Standard Mode：基于 Gemini 2.5 Flash 模型，主打极速生成，适合快速出图，并且支持一键导出到 Figma，方便后续编辑调整。
• Experimental Mode：基于更强大的 Gemini 2.5 Pro 模型，最大亮点是支持 “图生图” 功能，可以根据已有界面图，智能优化或衍生出新的设计方案，体验更具想象力。

📝 Standard Mode

先试试 「Standard Mode」。

我想生成一个类似掘金平台的UI界面，提示词如下：

提示词：

Design a clean and modern developer community web UI. The interface should include:

A top navigation bar with logo, multiple navigation links (Home, AI, Courses, Live, Events, Plugins, App), a search bar, creator center button, and a user profile avatar.

A left sidebar menu with categories like: Follow, All, Backend, Frontend, Android, iOS, AI, Developer Tools, Coding Life, Reading, Ranking.

A main content feed with a tab switcher for "Recommended" and "Latest".

Content cards for each article, showing title, description, author name, tags, read count, like count, comment count, and optional thumbnail image.

A right sidebar with a daily check-in widget (showing consecutive check-in days and button), an article ranking list, and promotional banners for events.

Use light and clean colors, rounded corners, modern typography, and slightly card-styled article containers.

在我的网络环境下，「Standard Mode」模式理解上面这份提示词大概用了10秒，生成下方 UI 图大概用了40秒。总时长不超1分钟。

效果还不错。

在生成结果上方有一个“Edit”按钮。如果你想对本次生成的结果做微调，可以点这个按钮，然后在左下角的输入框输入提示词让 Stitch 做调整即可。

除此之外，还可以使用页面右上方的“Edit theme”对页面的主题色、边框圆角、字体进行调整。

在这个例子中只生成了一张UI图，所以“Edit theme”这个功能的优势没体现出来。如果生成了一组图，这个配置就会作用在当前所有图上。

当然啦，Google 应该也清楚自己是设计界的新人，在设计软件的功能和交互上短时间是追不上老牌大哥的（比如PS、Figma等软件）。所以它用了很聪明的一招，可以将生成的 UI 图一键复制进 Figma 里，在 Figma 可以更自由的编辑。

比如，在 Figma 里调整页面比例。

移动端的 UI 也能生成，需要手动切换到“Mobile“。

可以一次让他生成多个页面。

提示词：

Design a UI for a Property Management Backend App with three bottom navigation sections: Revenue, Owners, and Me. In the Revenue section, display a top header titled "Revenue Statistics". Below, use summary cards: one for last month's property management fees (e.g., "¥25,000" in green with a money icon), one for last month's overdue fees (e.g., "¥5,000" in red with a warning icon), and one for this month's shared water and electricity fees (split into water and electricity amounts with respective icons). Include a bar chart showing fee and arrears data for the last six months, with a legend below. The Owners section features two tabs: Owners and Tenants. Each tab lists user cards with avatars (house or person icons), names, unit numbers, and edit/delete buttons (edit in blue, delete in red with confirmation). A floating action button at the bottom right allows adding new owners or tenants, opening a form with fields like name, unit, contact, and ID, plus save/cancel options. In the Me section, show the current account details: username (property management staff), a profile area with an avatar (user icon), the app version (e.g., "v1.0.0"), links to privacy policy, and a logout button. Use a clean layout with white backgrounds, blue accents for selected states, and gray for secondary text. Icons should be simple and relevant (e.g., money, house, user). Ensure responsive design for mobile, with clear spacing and readable fonts (like Source Sans Pro) in 14-18px sizes. Each module should have intuitive navigation and data presentation, focusing on clarity for property management tasks.

忘记叫他生成 Tabbar 了😁，补一句

Add a tabbar at the bottom of the page.

不改变原有内容的基础上，在各个页面底部新增了 Tabbar。不过美中不足的是所有页面的 Tabbar 都高亮了第一个图标。

🖼️ Experimental Mode

「Experimental Mode」模式是一个更放飞的模式，支持图生图。也就是说，描述一下需求，然后画个草图丢给它参考。

举个例子，我用鼠标画了一副精美的App草图给 Stitch 参考，让它帮我生成一个分享照片的App。

提示词只有短短一句：

Make me an app for people who love share a picture

可以看到，我草图的 Tabbar 只有2项，而 Stitch 生成出来的图是有3项的，可能它认为这个App要有一个上传照片的功能会更加合理，确实如此。

细心的工友可能已经注意到，上图并没有“Figma”按钮，而且“Edit theme”选项也变灰了。

没错，现阶段的「Experimental Mode」模式只具备生成图片的功能，不具备编辑能力。这个模式更适用于找灵感，毕竟 Gemini 2.5 Pro 更强。

㊥ 支持中文吗？

相比起其他公司的AI工具，我感觉 Google 系列的产品对中文的支持程度相对来说没那么高。

我测试了几次，大多数时候你直接输入中文提示词是没问题的，就是生成结果需要的时间会变得更长。

提示词：

设计一个开发者社区网站UI，包含： 顶部导航栏：logo、多个导航链接（首页、AI、课程、直播、活动、插件、APP）、搜索框、创作者中心按钮、用户头像 左侧侧边栏：分类菜单（关注、综合、后端、前端、Android、iOS、AI、开发工具、代码人生、阅读、排行榜） 中间内容区：推荐/最新 Tab 切换 文章信息流卡片：标题、简介、作者名、标签、阅读数、点赞数、评论数、小缩略图（部分文章有） 右侧侧栏：签到打卡、文章排行榜、Banner 广告 整体风格：浅色简洁、圆角卡片、现代字体、清爽留白

但也有概率会出现它假装不懂中文的情况。

Stitch 生成的 UI 图里的文字默认都是用英文输出，我用不同案例试了十来次让它切换成中文输出，暂时没成功过。

提示词：

Switch all product copy and button text to Chinese.

👤 个人感受

Stitch 的整体使用体验是挺不错的，对提示词的理解能力、生成效果都超越了初级UI设计师，对于程序员来说是很可用的了。在UI生成领域，微调和编辑功能更是远超同类产品。

但 Stitch 的优势同样也可能是它的劣势，不知道各位工友觉不觉得 Stitch 生成出来的 UI 图有一股 Google 味，我猜应该是用了自家的组件库来训练，好处就是生成出来的风格统一，也相当有设计规范。坏处嘛，如果你不喜欢 Google 的风格，那这个产品暂时可能还不和你胃口。这也许是友商的一个突破点～

---

以上就是本文的全部内容啦，如果本文对你有用的话，也可以转发给你的UI朋友，让他颤抖。