For 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.

specra

src

theme.css

components.json

Library

theme.css

: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);
  ...
}

Specra: Generated Succesfully

specra

Specra: Generate

Specra: Push Reference ImagesSpecra: Run ExtractSpecra: Open online

Run

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

Source Reference

Specra / Without Specra

Source Reference

Specra / Without Specra

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.