我们在做产品原型的阶段，可以用一些工具来辅助设计出比较精美的页面，推荐一个 Google 的 Stitch。
有几个核心功能，从自然语言提示生成 UI HTML /**CSS** 代码，也能直接导入 Figma 继续编辑
最关键的是只需要输入一句话或者一段话就能够生成很高级的 UI 设计稿。
网址在这：https://stitch.withgoogle.com/
可以看到它整个操作界面非常简洁，左边是示例作品，右边就是和 AI 进行对话的区域。
有两种模式可以选择。第一个标准模式，使用的是 Gemini 2.5 Flash 模型。可以看到关键词 faster，它生成的速度会更快，支持调整和导出为 Figma。
第二种模式专业模式，使用的是 Gemini 2.5 Pro 模型。生成速度会相对慢一点。它支持上传图片或者草图生成高保真UI。
前面就说可以通过一句话或者一段话让他生成一套比较高级的 UI 设计。如果你对你的产品还没有很清晰的认识规划，还没有完全想好的话，就可以把它当做一个需求分析兼设计师，跟他聊。
比如：
我想做一个自动生成手帐的网站 ，上传照片就能自动合成一张好看的手帐风格的图片，用于社交媒体传播。
比如：我想做一个轻量的出行规划 APP，需要清晰的路线。
如果产品已经有比较详细的规划了，就可以把这个产品大概功能以及需要哪些页面都告诉他。
这个产品叫"懒得记 (LazyRecord)"，是一个语音记账工具。
核心功能：
说一句话就能记账。比如用户说"今天中午吃饭花了45块"，系统会自动识别，然后用户确认一下就完成记账了，整个流程大概10-15秒。
完整的产品功能包括：
语音记账（核心功能）
- 说一句话自动识别金额、分类、备注
账单列表
- 查看最近的记账记录
- 支持删除和修改
数据统计和可视化（统计页）
- 显示本月支出、收入、结余
- 各分类支出占比（带进度条可视化）
- 按分类查看消费明细
- 导出Excel功能
分类管理
- 12个默认分类（餐饮、交通、购物等）
- 支持自定义添加分类
用户系统
- 微信/手机号登录
- 数据云端同步
我需要全部的前端页面
大概一两分钟全部的页面就出来了，基本上符合这个目标产品的规划。我们来试一下编辑的功能。
可以直接通过对话的方式让它修改，比较适合全局调整颜色或者风格。
也可以局部调整，单选中某一页，上方会出现菜单栏。点击第一个笔尖图片，就可以框选出你需要修改的部分，描述你的想法，这时候他就会把你需要调整的界面以及内容添加到对话框，点击应用稍等片刻即可。
还有一种方式，同样点击具体页面上方出现调色板图标，点击之后右侧就会出现一些选项，支持调整light 模式还是 dark 模式，调整颜色、圆角以及字体。
以上我们用的都是标准模式，下面我们再来试一下专业模式，上传一张线稿图让它生成网站页面。
还挺还原的。
关于获取前端代码这个功能，点击已经生成的页面，点击 view code 就可以看到完整代码。也可以点击 copy to figma，然后到 figma 文件中一键粘贴，粘贴后的 UI 设计稿可以继续调整的。
💡 AI 工具的爆发，让普通人也能快速做出产品。
但如何做？如何变现？如何真正走向海外市场？
👉 想了解更多 AI 编程 & 出海实战信息
扫码或微信搜索 257735，发送暗号 【美金】
了解详情，加入实战社群。
微信扫一扫，了解更多详情
🚀 我们的出海作品展示平台上线啦！
欢迎访问 Showcase 平台，
这里汇聚了学员的出海实战作品，方便大家获得反馈、积累曝光机会。
我们还会定期举办创作活动与奖励计划，欢迎来逛逛！
🔗 更多教程请访问 ipengtao.com
文章评论