分步教程

Stitch 适合放在工作流的哪个位置

把 Stitch 放在“从想法到方向”的阶段，而不是“从方向到生产”的阶段。它适合快速生成多个界面方向、验证信息结构、比较不同视觉语言，以及把零散的产品想法变成可以讨论的画面。

当团队已经确定要做什么，但还没确定页面应该怎么组织时，Stitch 的价值最大。你可以先生成 2-3 个方向，再让设计师、产品经理和开发者围绕具体画面讨论，而不是继续停留在抽象描述。

它做得好的地方

• 从自然语言生成完整的页面结构，而不是只生成单个组件。
• 快速尝试不同风格、布局和信息密度。
• 把多页面流程串起来，帮助发现缺失的状态和页面。
• 生成可读的 HTML/CSS 或设计上下文，方便后续交接。
• 在没有完整设计稿时，快速建立讨论用的视觉基线。

它不能替代什么

Stitch 不会自动理解你的业务规则、权限模型、数据结构和真实内容。它也不知道你的品牌规范、可访问性要求和工程约束，除非你在提示词或设计上下文里明确说明。

它生成的结果仍然需要人工检查：交互状态是否完整、文案是否准确、对比度是否达标、响应式行为是否合理。把生成结果直接当成生产设计，通常会在后续返工。

一个现实的工作流

一个比较稳妥的流程是：先用简短 brief 生成方向，再选一个方向补充结构和状态，最后把确定的颜色、字体、间距和组件规则整理成 DESIGN.md，交给设计工具或 Coding Agent 继续实现。

如果你已经有代码库，也可以反过来用 Code-to-Design 把现有页面带回 Stitch，先比较重构方向，再决定哪些部分值得改。

什么时候该用 Stitch，什么时候不该用

当未解决的问题是视觉或结构问题时，用 Stitch：这个页面应该长什么样、区块顺序怎么排、哪种方向更适合产品。它也很适合快速做出一份可以拿去和团队讨论的视觉材料。

当未解决的问题是行为、数据或代码时，不要把 Stitch 当成唯一工具。权限规则、边界逻辑、性能和生产级可访问性仍然需要设计师或工程师验证。

• 适合的第一件事：一个还没有设计稿的新页面。
• 适合的第一件事：比较两个布局方向。
• 不适合的第一件事：替代生产设计系统。
• 不适合的第一件事：为受监管流程生成最终文案。

接下来学什么

下一课会带你写第一个提示词，并完成一次有控制的迭代。先不要追求“一次生成完美页面”，而是练习如何描述目标、阅读输出、只改一个变量。