Artifacts

Specra generates a small set of artifacts from each successful revision.

design-system.json

This is the source of truth.

It contains the extracted tokens, component inventory, diagnostics, source summary, and any structure guidance captured during the run.

Use this when you need the full machine-readable result.

tailwind-theme.css

This file is designed to match the shadcn semantic theme model.

It provides semantic variables such as:

• --background
• --foreground
• --card
• --primary
• --accent
• --border
• --ring
• --sidebar-*

Use semantic classes in generated UI:

• bg-background
• text-foreground
• bg-card
• border-border
• text-muted-foreground

Do not treat the theme artifact as a place for custom specra-* utility classes. The intended flow is semantic theme variables plus normal Tailwind classes like p-4, gap-6, rounded-lg, and shadow-sm.

design-system.prompt.md

This artifact is intended for implementation-oriented LLM use.

It combines deterministic facts from the extracted system with GPT-generated guidance on:

• aesthetic mood
• layout and structural patterns
• shadcn component usage
• example TSX snippets

The prompt should stay close to the actual user request and the extracted system. It is not meant to invent a brand-new visual direction.

Using artifacts together

The recommended order is:

1. Apply tailwind-theme.css.
2. Feed design-system.prompt.md to the coding model.
3. Use design-system.json when you need stricter implementation checks or post-processing.