Overview

Specra turns reference screenshots into DESIGN.md: a reusable design handoff that coding agents can use through plugins or direct MCP.

The product is intentionally simple:

1. Create a project from the dashboard.
2. Add reference screenshots in the playground.
3. Run analysis.
4. Use the resulting artifacts and Specra integration to build UI that stays close to the source.

What Specra gives you

Every successful revision produces two public artifacts:

• DESIGN.md
• theme.css

Those outputs power the same grounded workflow your agent uses later in code.

The shortest path

• Read Getting started if you are new to the product.
• Read Install integrations when you want to use the project in Codex, Claude, Gemini, or another MCP client.
• Read Artifacts when you need to inspect the handoff directly.

Supported integrations

Specra currently supports four practical client surfaces:

• the Codex plugin
• the Claude plugin
• the Gemini plugin
• direct MCP at https://specra.tech/mcp for clients that do not use the preferred plugins

The Specra plugin can be found 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

Direct MCP is the fallback path for clients that do not have a Specra plugin.

Current beta shape

• The playground is the main web-app surface.
• Plugins are the preferred agent-facing integrations.
• Artifacts are mostly for inspection, debugging, and stricter implementation work.
• Screenshot quality and consistency still matter more than prompt phrasing.