很多兄弟不理解google stitch具体的用法,我也不是很懂,但为了能让兄弟们用的舒心,我就跑去研究了几天。今天分享下这几天的研究心得。
首先得说下网站的地址:
https://stitch.withgoogle.com/
首先我们假设下需求: 在网上看到一篇公众号文章,标题吸引了我,内容我还来不及看,我想先收集下来有时间了再看,有的人喜欢先收藏,有的人直接转发给自己的微信或文件传输助手。抖音、小红书基本都是这样。 但有时候工作上的事这样转发,时间长了这些内容还是淹没在微信里了,或者在收藏夹里落灰。
于是,我们自己搭建个小应用自己用,需求很简单,把这些以后想看的或者要学习的、要收藏的内容都放到这个小应用里。
(以上需求,纯属假设)
ok,我们要开始设计这个小应用了,应用很简单,一个界面就能搞定,就是一个卡片一个卡片,加个简单分类就可以了。如果放到表格里大概是这样:
落到应用里,我们就需要一个UI界面,“我不懂设计,我不会写代码”,别担心,我们会用AI进行。
下面请出我唯一在用的stitch,不是它比其他UI设计软件好,单纯因为免费!!!
打开界面后我们可以看到它朴实无华的对话窗口
我们输入提示词(这提示词和gemini讨论了半天然后它写的,实测英文效果理解的更好一点)
Chinese Inspiration Card Feed: This screen features a clean, single-column feed with a "Fresh Japandi" aesthetic. It includes a sticky top navigation with Chinese labels (全部, 灵感, 实操, 备忘), and soft rounded cards on a warm cream background. Crucially, Cards contain only text nodes (no markup, no images, no rich text), high-legibility CJK typography, and a long-press context menu for card management.
等待一会它回复我了:
“I've designed two variants of the Chinese Inspiration Card Feed with a "Fresh Japandi" aesthetic for you:
- Inspiration Feed Variant 1: This design emphasizes a clean, structured ...
- Inspiration Feed Variant 2: A more organic take on the Japandi style...
简单翻译下就是这哥们一下生成了两个版本,让我自己挑个喜欢的版本,心中OS:你人还怪好的咧!
版本一:
版本二:
我喜欢版本一的风格,然后版本二底部快速添加的按钮。 于是我让它将图1的底部改成图2那样,只有一个添加按钮在右下角。左下角为分类,右下角为时间。这种简单的修改直接说中文就行了。
又等了会版本三出来了:
颜色有点不太喜欢,通过主题直接修改:
右侧弹出的菜单里换个颜色,然后应用主题。
最后成品:
OK,就这样吧。
stitch有一点好,直接就有HTML,对我来说,设计、切图超级难。下载下来放浏览器里看看啥效果。
浏览器里看效果很好,一个清清爽爽的移动端页面就做好了。 备注:这里生成的只是一个静态页面,还没有相关的交互和数据存储,这是做应用的第一步。
为了将来设计出更好看的页面,我强烈建议大家还是对英文提示词进行拆解一下,这是快速学习提示词最好的方法!具体的拆解方法我做了一个GEM,链接地址是:
https://gemini.google.com/gem/1GeQhkJ-ou0Iy2cpnvBj7lFv1CJqClz6O?usp=sharing
现在我们完成了前端的开发, 下期我们将完成整个应用的上线,全都使用免费的工具,让大家能真正体验整个开发流程,从零到一!
如果我的文章能帮到你,请给我个三连,你们的支持是我最大的动力!