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:
ReferencesArtifacts
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/pluginThen 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 specraUse 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.