Specra Docs

Getting started

The shortest path from screenshots to DESIGN.md, theme.css, and a grounded agent generation workflow.

1. Create a project

Start from the dashboard prompt box.

Specra will:

  • create a new project
  • carry your dashboard text into the playground as the initial prompt
  • open the playground immediately

2. Add reference screenshots

Upload screenshots that represent the product or visual system you want to capture.

  • Use PNG, JPEG, or WebP.
  • Prefer UI screenshots over marketing art.
  • Keep screenshots visually consistent inside a project.
  • Separate light and dark references when you can.

3. Run analysis

Use the play button in the playground once the references are uploaded.

Analysis creates the current revision that powers:

  • grounded generation in the playground
  • the two public artifacts
  • plugin and MCP usage in your coding agent

4. Generate in the playground

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

Each result becomes a generation node on the canvas. If no analysis exists yet, generation will queue analysis first.

5. Inspect the handoff when needed

The playground exposes:

  • References
  • Artifacts

Use those areas when you want to inspect what Specra inferred before moving into code.

6. Install the preferred integration

When you want the same project inside your coding agent, prefer one of these paths:

  • install the Codex plugin
  • install the Claude plugin
  • install the Gemini plugin

The plugin is available at github.com/specra-tech/plugin. For Codex, first add the marketplace:

codex plugin marketplace add specra-tech/plugin

Then install or enable the Specra plugin inside the Codex CLI plugin flow so the bundled MCP connection and skills are available to new agent sessions.

For Claude Code, install it with:

claude plugin marketplace add specra-tech/plugin
claude plugin install specra

Use direct MCP only when your client does not support the preferred integrations. The hosted MCP URL is:

  • https://specra.tech/mcp

Then follow Install integrations.

Practical rule

Specra works best when you first make the project coherent in the playground, then move into code generation once the latest revision looks trustworthy.

On this page