Use Cases
Real scenarios where Spec Canvas is most useful — from early exploration to UX refactoring.
Spec Canvas and the spec formats are used differently depending on where you are in the product lifecycle. These use cases describe real workflows, not abstract ideas.
For format reference, see UI Spec and Data Spec. For techniques used across these scenarios, see Patterns & Practices.
Explore Product Directions
You have a rough idea but no clear picture of what the app should look like. You use Spec Canvas to generate a UI Spec from a short description, see the possible screens and blocks, generate HTML implementations from multiple AI agents, and compare different directions before committing to one.
Starting point: a product idea, a feature concept, or a vague brief.
Result: a structured spec with screens, blocks, and visual previews that make the direction tangible.
Prepare Handoff to AI
You have a spec and want to hand it off to an AI coding agent — in an IDE, a terminal, or a chat. The spec becomes compact, reusable context that the agent can read without rediscovering the app from code and chat history. This works in Spec Canvas, but also outside of it — the spec is a plain YAML file.
Starting point: a UI Spec (and optionally a Data Spec) for an application.
Result: a coding agent that understands the app structure, screens, entities, and naming from day one.
Reconstruct an Existing App
You have an existing application — code, screenshots, scattered docs — but no single place that describes how it is structured. You use the spec format to reconstruct a compact specification from what exists, making the app easier to discuss, refactor, and evolve with AI.
Starting point: an existing codebase, README, screenshots, or product knowledge.
Result: a UI Spec (and optionally a Data Spec) that serves as a readable map of the application.
Rethink UX
You have a working application but something about the interface is not right — a screen looks off, a layout feels wrong, or you are stuck on how to reorganize a complex page. You use Spec Canvas to explore alternatives: generate HTML implementations from different agents as visual references, or rework the spec structure through conversation with AI and preview the changes before committing to code.
Starting point: an existing app with UX problems, or a detailed spec that needs structural improvement.
Result: a visual reference or an updated spec that you hand to a coding agent for implementation.