用提示词给Stitch生成的iOS UI设计初体验

背景

这是一个来自 LINUX DO · AI 帖子的评论，分享者表示用提示词给 Stitch 生成的 UI 设计初体验不错。评论中提到他们用 Claude Code + GPT-5.5 生成了 iOS App，测试后感觉还不错。分享者特别希望网友提供教程，于是发表了这篇个人使用流程，明确说明不保证效果，仅供参考。

核心内容

分享者坦言自己不太擅长凭空想象 UI，通常需要先看到一些现有设计，才能联想到自己想要的效果。所以在设计 UI 时，更看重 AI 一次性生成的能力，即所谓的“初稿及终稿”，希望通过需求分析、设计规范和提示词优化，用比较低的成本得到一个可用方案。

大致思路是先按照软件开发流程来拆解：需求分析、概要设计、详细设计。其中与 UI 关系比较大的主要是需求分析和详细设计。前者用来明确 App 的目标用户、使用场景、核心功能和用户痛点；后者则落到具体视觉风格、页面结构、交互方式和 UI 提示词。

作者一开始尝试过直接让 AI 生成 UI，但效果比较随机。后来发现先让 AI 帮自己把产品需求、核心页面、视觉风格和设计规范梳理清楚，再让它生成 UI 提示词，最终效果会稳定很多。

工具方面，作者使用的是 Cherry Studio 进行需求分析和提示词生成。试用后发现能配置上 anyrouter，里面有一些预设助手，尤其是“智囊团”，对他这种缺少灵感的人挺有帮助，可以从不同人不同角度给出建议。

实际操作时，作者只是和“智囊团”进行了几轮对话，让它先帮自己做骑行 App 的需求分析，再给出技术框架和页面结构建议，最后让“智囊团”帮自己生成 UI 提示词，图标也是让智囊团帮忙设计的 image2 提示词。

至此就基本结束了，提示词直接丢给 Stitch 就可以生成初稿。

之前提到的“初稿及终稿”可能并不现实，这一次的设计总体来说运气比较好，大部分的结果符合预期，但实际上初稿有按钮显示不全、页面不完整、图标白色背景没去除等问题，还是需要不断调整。

以下是“智囊团”生成的对话，仅供参考： Assistant.pdf (942.6 KB)

作者还提到之前看到过【木子狸的 Vibe Coding 随笔】（总 1.5 万字 VibeCoding 真解 - 文档共建 - LINUX DO），在后续 Vibe Coding 的过程中可以供大家参考。

关键要点

• 更注重 AI 的一次性生成能力：分享者擅长利用 AI 的“初稿及终稿”特性，通过低成本优化获得可用方案，而不是完全凭空想象。
• 采用软件开发流程拆解：先进行需求分析（明确目标用户、场景、核心功能、痛点），再进行详细设计（视觉风格、页面结构、交互、UI 提示词），让 AI 逐步梳理，避免直接生成导致的随机效果。
• 工具选择与角色化：使用 Cherry Studio（搭配 anyrouter 配置预设助手），重点依靠“智囊团”助手从多角度给出建议，特别适合缺少灵感的用户。
• 实际操作流程简洁：与“智囊团”进行几轮对话，依次完成需求分析、技术框架建议、页面结构建议，最后生成 UI 提示词和图标提示词；提示词直接输入 Stitch 生成初稿。
• 初稿迭代仍是必要：初稿及终稿概念并非完全现实，初稿存在按钮不全、页面不完整、图标背景问题等问题，仍需不断调整。
• 参考价值：分享个人流程不保证效果，仅供参考；同时推荐在 Vibe Coding 后续工作中参考木子狸的 Vibe Coding 随笔。

意义与影响

这个帖子的内容为 AI 辅助设计 UI 的实践提供了具体、可操作的模板，特别适合那些缺乏设计直觉的用户，通过结构化的需求分析和提示词优化来降低成本和风险，强调了“先让 AI 梳理，再生成提示词”的有效方法。分享者明确声明不保证效果、仅供参考的态度，也体现了 AI 工具在实际应用中的现实局限性，鼓励社区成员在 Vibe Coding 等实践中相互学习与共建（如分享木子狸的随笔）。整体而言，这篇分享帮助网友理解了 AI 生成 UI 的优势与迭代必要性，推动了更多人尝试将 AI 引入设计流程，从而提升效率并丰富 LINUX DO · AI 帖子的设计相关讨论。