SpecraFor TailwindCSS and Shadncn UI
Generate structured UI systems from pictures for LLMs
Specra builds designs systems from your reference UI screenshots, so agents can generate UIs that look and feel right. With 99% accuracy in color, typography, and spacing.
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0.008 326);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0.008 326);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0.008 326);
--primary: oklch(0.511 0.096 186.391);
--primary-foreground: oklch(0.984 0.014 180.72);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.96 0.003 325.6);
--radius: 0;
...
}
.dark {
--background: oklch(0.145 0.008 326);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0.008 326);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0.008 326);
...
}Same prompt. One looks right
Without a reference system, models guess. With Specra, they generate against extracted tokens, patterns, and structure that keep the UI on-brand.
Make an example dashboard like the one I provided. It's the vercel dashboard. Use shadcn components. Install as needed
What you actually get
Not just a better result. The system behind it.
The difference is not just that the final screen looks closer. Specra extracts the structure that made the reference work in the first place, then hands that system back as files and instructions your agent can build from.
How it works
Upload a tight reference set
Start with the screens you already trust, not a vague style description. Specra works best when the references all belong to the same product surface or brand system.
Extract the repeatable rules
Specra analyzes the library for recurring color tokens, typography choices, spacing scales, radii, shadows, and the structure behind common components.
Package it for coding agents
The extracted system is turned into machine-readable artifacts and prompt context that agents can actually build from instead of trying to imitate by feel.
design-system.json
Canonical system map
Structured tokens, component patterns, and layout rules captured in one source of truth.
theme.css
Theme variables
Production-ready color, typography, spacing, radius, and shadow variables that carry the extracted look into implementation.
component guidance
Reusable UI patterns
Clear guidance for forms, tables, navigation, cards, and other recurring surfaces the model needs to generate consistently.
implementation prompt
Reference-aware instructions
Prompt context that tells the model what to preserve, what to reuse, and what not to invent.
Demo Video
How does it work in practice? Here's a demo of the entire process, from taking a screenshot, pushing it to the system, generating a design system, and then using that system to generate a UI that matches the reference.