Integrate with Next.js
Apply Specra outputs inside a Next.js app using shadcn-style semantic theme variables.
This is the cleanest integration path if your app already uses Tailwind CSS and shadcn-style components.
1. Copy the generated files
The minimum useful set is:
tailwind-theme.cssdesign-system.prompt.md- optionally
design-system.json
With the VS Code extension, the common target is:
src/generated/2. Import the theme
Import tailwind-theme.css into your app's global stylesheet or root layout CSS entry.
The goal is to make semantic classes available everywhere:
bg-backgroundtext-foregroundbg-cardborder-bordertext-muted-foreground
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "../generated/tailwind-theme.css";
@custom-variant dark (&:where(.dark, .dark *));
@custom-variant light (&:where(.light, .light *));
@custom-variant auto (&:where(.auto, .auto *));
@utility container {
margin-inline: auto;
padding-inline: 2rem;
@media (width >= --theme(--breakpoint-sm)) {
max-width: none;
}
@media (width >= 1400px) {
max-width: 1400px;
}
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
letter-spacing: var(--tracking-normal);
@apply bg-background text-foreground;
}
html {
@apply font-sans;
}
}3. Use semantic classes as normal
Prefer:
<Card className="bg-card text-card-foreground border-border">
...
</Card>Not:
<div className="bg-white text-black border-[#e5e7eb]">
...
</div>4. Keep layout utilities standard
Use normal Tailwind classes for:
- spacing:
p-4,px-6,gap-6 - radius:
rounded-md,rounded-lg,rounded-xl - shadow:
shadow-sm,shadow-md - typography:
text-sm,text-base,text-lg,text-3xl
5. Generate from the prompt artifact
When asking a coding model to build UI, include:
- your task
design-system.prompt.md- the target file path
That keeps the result tied to the extracted system