Step-by-Step Tutorials

Where Stitch fits in the workflow

Place Stitch in the “idea to direction” stage, not the “direction to production” stage. It is useful for generating several interface directions quickly, validating information structure, comparing visual languages, and turning a loose product idea into screens a team can discuss.

Stitch is most valuable when the team knows what it wants to build but has not decided how the pages should be organized. Generate two or three directions, then let designers, product managers, and developers react to concrete screens instead of abstract descriptions.

What it does well

• Generates a complete page structure from natural language, not just a single component.
• Lets you compare styles, layouts, and information density quickly.
• Connects multiple screens into a flow, which exposes missing states and pages.
• Produces readable HTML/CSS or design context for a later handoff.
• Creates a visual baseline for discussion when no finished design exists.

What it cannot replace

Stitch does not automatically understand your business rules, permission model, data structures, or real content. It also does not know your brand guidelines, accessibility requirements, or engineering constraints unless you state them in the prompt or design context.

Generated screens still need human review: interaction states, copy accuracy, contrast, and responsive behavior. Treating the first output as production design usually creates rework later.

A realistic workflow

A reliable sequence is: generate directions from a short brief, choose one direction and add structure and states, then turn the settled colors, type, spacing, and component rules into DESIGN.md for a design tool or coding agent.

If you already have a codebase, you can also use Code-to-Design to bring existing pages back into Stitch, compare redesign directions, and decide which parts are worth changing.

When to use Stitch, and when not to

Use Stitch when the open question is visual or structural: what should this screen look like, how should the sections be ordered, or which direction fits the product. It is also a fast way to create a visual artifact for a team discussion.

Do not treat Stitch as the only tool when the open question is about behavior, data, or code. Permission rules, edge-case logic, performance, and production accessibility still need a designer or engineer to verify them.

• Good first task: a new screen with no existing design.
• Good first task: comparing two layout directions.
• Bad first task: replacing a production design system.
• Bad first task: generating final copy for a regulated flow.

What to learn next

The next lesson walks through your first prompt and one controlled iteration. Do not aim for a perfect screen on the first try; practice describing the goal, reading the output, and changing one variable at a time.