Playground

The playground is the fastest way to use Specra in the web app.

It is built for a simple loop:

1. Start from the dashboard prompt.
2. Land in a new project playground.
3. Drop screenshots onto the canvas.
4. Run analysis.
5. Generate grounded screens from the latest revision.

What the playground is for

Use the playground when you want a fast 0-to-1 workflow inside Specra itself:

• create a new project from a prompt
• add screenshots directly to the canvas
• inspect references and generated artifacts together
• generate screens grounded in the latest extracted system

Create a project from the dashboard

When you create a new project from the dashboard:

• the project name defaults to New Project, New Project 2, and so on
• your dashboard text becomes the initial playground prompt
• generation does not run until you submit from the playground

Add references

In the playground you can:

• drag PNG, JPEG, or WebP screenshots onto the canvas
• use the + button in the prompt dock to upload files

Uploaded screenshots appear in the References section immediately.

Run analysis

Use the play button in the top-right controls to analyze the current references.

Analysis creates the project revision that powers:

• MCP tools
• theme.css
• design-foundations.md
• patterns.md
• features.md
• grounded generation in the playground

Generate screens

After analysis is ready, submit a prompt from the bottom composer.

Each result becomes a Generation X node on the canvas. These generation nodes persist on the project, so they stay available after refresh.

What the canvas shows

The playground board is organized into three sections:

• References
• Artifacts

Generated screens appear as their own large nodes beside those sections.

Relationship to MCP

The playground is the web-app demo surface.

MCP is the agent-facing integration layer.

A common flow is:

1. use the playground to create or refine a project
2. run analysis on the references
3. connect your MCP client to https://specra.tech/mcp
4. let your coding agent use the extracted system in code generation