Specra Docs

Overview

What Specra does and how to use it through the dashboard, playground, and MCP.

Specra turns reference screenshots into a machine-readable design system that your coding agent can use through MCP.

During the current beta, the product is centered around a simple loop:

  1. Start from the dashboard with a prompt.
  2. Land in a new project playground.
  3. Add reference screenshots directly on the canvas.
  4. Run analysis and review the generated handoff artifacts.
  5. Generate grounded screens in the playground.
  6. Connect your MCP client through the hosted MCP endpoint when you want the same system inside your coding agent.

What Specra produces

  • theme.css for semantic Tailwind and shadcn-style theming.
  • design-foundations.md as the main design-system handoff.
  • patterns.md for reusable product and interaction patterns.
  • features.md for image-first visual cues that are easier to inspect than describe.

Current beta shape

  • The playground is the primary web-app surface.
  • Artifacts are still available, but they are mainly for inspection and debugging.
  • MCP is the preferred path for agent-driven generation in real repos.
  • Screenshot libraries work best with a focused, visually consistent set of references.
  • Light and dark references should be supplied separately when possible.
  • Only successful extraction runs bill.
  • The current beta pricing is 5 free runs per month, then $1.00 per successful run.

On this page