Midjourney操作界面

描述即设计,UI即代码,我用Google Stitch完成一个翻译App全流程UI设计

4.8
0热度

上次骂了lovart后,Stitch就来了。初试Lovart:这就是一个套壳!Google的这场发布,不象是发布会,更象是灭霸的一声响指,众多的小厂大厂应用应声倒地。Google AI 阅兵式!从模型到应用再硬件的全维度碾压眼花缭乱的发布会应用当中Stitch好像是最不起眼的那个,但是只有你真正应用过之会发现,Stitch才是真正最具有革命性的一个应用。Stitch不是让你反复拖拽,

上次骂了lovart后,Stitch就来了。

初试Lovart:这就是一个套壳!

Google的这场发布,不象是发布会,更象是灭霸的一声响指,众多的小厂大厂应用应声倒地。

Google AI 阅兵式!从模型到应用再硬件的全维度碾压

眼花缭乱的发布会应用当中Stitch好像是最不起眼的那个,但是只有你真正应用过之会发现,Stitch才是真正最具有革命性的一个应用。

Stitch不是让你反复拖拽,而是让你写几句话、扔一张草图,AI就能把你的想法变成UI和代码。

以下是官方示范例子:

后台管理系统

bb480050-6466-464d-ab95-eca7fa392e65.png

画廊应用

2cf430c0-8abb-44ee-9501-8d9a3c355111.png

独立站

e8c7a183-5c08-4643-acf6-afd0e9a80c2c.png

手机应用

ffaa165c-a581-4cf3-b9e8-f287a67fa001.png

Stitch接入并使用Gemini2.5,不管是生成速度还是设计感还是交互,都瞬间秒杀所谓的世界第一设计Agent。

最近正好需要做一个翻译App,索性用Stitch试水,顺便把我的体验和Stitch官方的高效提示词方法论融合,写成下面的内容。

从一句话到第一个界面

Stitch的入口极其简单,网页打开后只有一行输入框和上传图片的按钮。

1826c355-0b25-4911-9081-31e0b04af3be.png

我输入:“一个简洁、专注于中英互译的翻译应用,支持历史记录和收藏,支持AI的接入。”

点下生成,几秒后,一个干净的移动端UI就出来了:顶部输入框,下方翻译内容,在配置面板里面有相关的设置项。

b839c56d-4266-44ed-9e04-e8817e139368.png

设置页面

a6d6804f-3780-4f06-95a0-62c27b02fbe2.png

整个过程AI理解力超出我的预期。

许多人会困惑怎么样写提示词,Stitch官方非常贴心的给出了相关的提示词教程,其中最为推荐的就是“高阶提示词”用法。

你可以用一句话描述你的想法——比如“一个马拉松跑者的应用程序”。

如果想得到更具象的结果,就用详细提示词:“一个马拉松跑者用来找搭子、获取训练建议和附近赛事的App。”

下面是另一个手机应用生成多页面的提示词示范:

bd04da8a-9332-4857-83c9-77adc25292a3.png

Stitch 会根据我的需求生成规则出相关的页面和页面对应的功能点,两分钟后,一个多页设计精美的App UI就这么制作好了。

f151eb7d-01dd-445f-ae91-9ff47ea00385.png

你的描述越具体,AI还原得越接近你的需求。

细节打磨:像和设计师对话一样修改

初稿虽快,但细节总得打磨。

我继续输入:“主色调改成绿色,按钮做成圆角,历史记录用卡片式展示。”

Stitch立即响应,界面更柔和,按钮顺眼,历史区块分明。

47afcb4a-508e-456f-95af-2e67a5ef2296.png

每写一句需求,几秒钟就能看到变化。

“逐屏迭代”,是Stitch官方强调的核心方法——每次只调整一两个点,聚焦一个页面或组件,让每次变化都可控。

整个的过程,你甚至可以像写备忘录一样,一点点补充:“发现页用卡片式布局,图片更大。”

反正Stitch的耐心和速度,比大多数人类设计师都靠谱。

此刻,这里,你就是你平时不敢惹的甲方爸爸。

要走完应用的全流程UI,自然少不了落地页。

我试了下Stitch的“氛围提示”玩法:“极简、信任感强的产品落地页,主色白绿,突出一键翻译和隐私保护。”


94d5fd27-338a-4a53-8587-a42a473444dc.png

AI很快给出一版:大标题、简洁按钮、底部隐私承诺大的页面,AI几秒钟就能给你一个“极简、信任感强”的落地页——大标题、简洁按钮、底部隐私承诺,主色白绿,图片用抽象插画。

想再简洁一点?只要补一句“页面更留白”,Stitch立刻响应。这种“用形容词设定氛围”的方式,极其直观。

对于字体的设计,你还可以组合需求:“书籍发现App,正文用衬线体,品牌色浅绿。”字体、配色、按钮风格,都能通过一句话控制。

这种“描述即设计”,让设计变得像写诗。

图片、语言、细节批量修改

Stitch还能精确修改图片。

比如:“把落地页所有产品图背景换成浅灰。”

Stitch会询问我是否全部应用。

517df4eb-97f9-44f1-91cc-5c8387297810.png

主题色换了,可以补一句“所有图片和图标配合新配色”,整体风格自动同步。

多语言切换更简单:“所有文案和按钮切换成西班牙语。”

一句话就全部搞定。

导出代码,设计即开发

当然 以上都不是最牛逼的,最牛逼的是设计出来就是代码。

Stitch生成的每个界面都能直接导出HTML和CSS。

点一下,代码就能拉到本地IDE里跑起来,也可以一键导到Figma继续细化。

808477c1-2d60-4e85-ae7a-4f21b5f4c3f3.png

对于既写字又写代码的人来说,这种“UI即代码”的体验,生产力爆表。

最后

Stitch不完美。

它不是Figma,不是Adobe XD,复杂交互和品牌定制还得靠人。

但对于初创、个人开发者、产品经理,这种“用话语驱动设计”的方式,极大降低了门槛。

你不再需要“会点PS”才敢做App,也不用和设计师来回拉锯。

只要你能表达清楚,AI就能把它变成界面和代码。

附:Stitch高效提示词实战心得

项目初期用高阶提示词,描述核心需求,让AI给你一个雏形。

细节调整时,每次聚焦一个页面或组件,一次只改一两个点,效果最清晰。

善用形容词设定氛围(vibe),比如“极简”“温暖”“科技感”,AI会自动调整配色、字体和图片。

想要更具体的界面风格,直接描述颜色、字体、按钮、图片细节。

图片、文案、语言等批量修改,直接写出来即可,AI会整体同步。

立即下载

相似工具

评论列表 共有 0 条评论

暂无评论
发表
评论
顶部