Getting started

1. Create a project

Create a new project from the Specra dashboard. Each project stores its own screenshot library, extraction runs, revisions, and artifacts.

2. Add references

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

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

3. Run extraction

Start an extraction run once your references are uploaded.

Specra will analyze each screenshot, aggregate the results, and persist a structured design system revision.

4. Review the outputs

After a successful run, the project workspace exposes:

• Tokens
• Components
• Diagnostics
• Downloadable artifacts

If a run fails, check the diagnostics and the server logs first. In beta, malformed or weak source material is still the most common cause of low-quality outputs.

5. Use the artifacts

The generated artifacts are intended to help implementation, not just inspection.

• design-system.prompt.md guides LLM-based UI generation.
• tailwind-theme.css provides a shadcn-style semantic theme contract.
• design-system.json is the canonical extracted revision.

Continue with the artifact docs if you want the exact role of each output.