FAQ

About the Product

What is Spec Canvas?

Spec Canvas is a methodology and a practical tool for turning rough ideas into structured specifications. It helps you describe an application through screens, blocks, and purposes — and use that description for AI-assisted exploration, development, and documentation. See Overview for more detail.

Is Spec Canvas free?

Yes. Spec Canvas is free to use. You bring your own AI agent (ChatGPT, Claude, Gemini, or any other), so there are no AI costs on the Spec Canvas side.

Where is my data stored?

All project data is stored locally in your browser (IndexedDB). Nothing is sent to a server. Your specs, implementations, and project files stay on your device.

To back up your work or move it to another browser or machine, you can export any project as a .speccanvas file and import it back at any time. You can also copy individual specs as YAML through the editor.

Is Spec Canvas open source?

The spec formats (UI Spec and Data Spec) are open and documented — anyone can use them. The Spec Canvas application itself is not open source at this time.

Why Specs at All

Why not just give a prompt directly to a coding agent?

A prompt is one-time and disposable. Once the agent finishes, the prompt is buried in chat history. If you start a new session, switch agents, or onboard a colleague, you re-explain everything from scratch.

A spec is a reusable artifact. It captures the structure of your application — screens, blocks, entities, relationships, naming — in a compact document that any agent can read at any time. You write it once and use it for exploration, implementation, debugging, and documentation.

A prompt says "build me X." A spec says "here is how X is structured." The difference matters as soon as the project lives longer than one chat session.

Why not use Figma instead?

Figma describes how an application looks — pixels, colors, spacing. Spec Canvas describes how an application is structured — screens, blocks, purpose, behavior, entities, relationships.

Figma is designed for visual design and collaboration between designers. Spec Canvas is designed for working with AI agents. A structured YAML spec with block purposes is more useful to an AI coding agent than a Figma screenshot — the agent understands the intent, the hierarchy, and the behavior directly from the spec.

They solve different problems. If you need pixel-perfect visual design, use Figma. If you need a compact, AI-readable description of your application that covers both interface and data model, use Spec Canvas.

Copy-Paste Workflow

Why copy-paste instead of built-in AI?

Spec Canvas intentionally does not integrate a specific AI provider. You copy a prompt, send it to any agent you prefer, and paste the result back.

This means you are not locked into one provider, you are not paying extra for AI tokens through Spec Canvas, and you can switch between agents freely — use Claude for one task, GPT for another, a local model for a third. You control the context window, the model, and the cost.

More clicks, but absolute freedom.

Which AI agents work with Spec Canvas?

Any AI agent that can read and write YAML. This includes ChatGPT, Claude, Gemini, Grok, DeepSeek, Qwen, Kimi, and any local or self-hosted model. Spec Canvas is agent-agnostic by design.

Can I use a local or self-hosted model?

Yes. The spec formats are plain YAML. Any model that can process structured text can create and interpret specs. The quality of the result depends on the model's capabilities, but the format works with any agent.

Formats

Can I use the formats without Spec Canvas?

Yes. The formats are independent of the tool. You can write a spec in any text editor, paste it into an AI chat, store it in a repository, or use it in an IDE. Spec Canvas makes working with specs more convenient, but the formats do not require it. See How It Works.

Do I need to explain the format to the AI agent?

For creating a spec — give the agent the format description and your idea. The format description tells the agent how to structure the output.

For interpreting an existing spec — no explanation needed. The formats are self-describing. You can paste a spec into any AI chat without instructions, and the agent will understand the structure. See How It Works.

What is the difference between UI Spec and Data Spec?

UI Spec describes the interface: screens, blocks, purposes, templates, navigation, theme. Data Spec describes the data model: entities, fields, types, relationships, enumerations. Together they form a complete description of an application. See UI Spec Format and Data Spec Format.

Workflow

Do I need a Data Spec?

No. A UI Spec is enough to start exploring and building. The Data Spec adds value when you want AI agents to understand your data model — field types, constraints, relationships — and generate more accurate backend code. You can add it later when you are ready.

Can I use Spec Canvas for an existing app?

Yes. You can reconstruct a spec from code, screenshots, or your own knowledge of the application. Once you have a spec, the app becomes easier to discuss with AI agents, refactor, and evolve. See Reconstruct an Existing App.

How detailed should my spec be?

As detailed as you need. Start rough (screen titles and purposes only) and add detail where it matters. Different screens can be at different detail levels. See Progressive Precision for guidance.

Implementations

Can Spec Canvas generate a full application?

Spec Canvas generates HTML previews for individual screens — these are visual explorations, not production code. To build a full application, export the spec and hand it to a coding agent (in an IDE, terminal, or chat). The agent uses the spec as a blueprint to generate the complete application. See Prepare Handoff to AI.

What can I do with HTML implementations?

HTML implementations are AI-generated visual interpretations of your screens. You can use them to evaluate whether the spec produces the right result, compare approaches from different agents, share previews with stakeholders, or hand them to a coding agent as a visual reference alongside the spec. Each block in the generated HTML is marked with a ui-spec-block-id attribute, so agents can map it back to the spec precisely.