Other frameworks

Specra is easiest to use in a Tailwind CSS + shadcn-style stack, but the outputs are still useful in other frameworks.

What stays the same

No matter the framework, keep the same roles:

• design-system.json is the source of truth.
• tailwind-theme.css is the semantic theme contract.
• design-system.prompt.md is the implementation prompt artifact.

React without Next.js

If you have a Vite or plain React app:

1. Import tailwind-theme.css into your global CSS entry.
2. Keep semantic classes like bg-background and text-foreground.
3. Use the prompt artifact with a concrete component or page task.

Vue, Svelte, Solid, or other component frameworks

You can still use the extracted outputs, but the flow becomes:

1. Read design-system.json for the extracted system.
2. Mirror the semantic theme variables in your own CSS layer.
3. Translate the prompt artifact into the conventions of your component system.

The important part is preserving:

• semantic theme roles
• spacing and density
• radius and shadow choices
• component hierarchy
• structural guidance when present

If you are not using Tailwind

Treat tailwind-theme.css as a semantic token reference, not as the final implementation format.

Map the variables into your own design-token or CSS-variable system and keep the same role names where possible.

Practical advice

If the target stack is far from shadcn or Tailwind, use the outputs as:

• a style system reference
• a prompting aid
• a structure guide

but do not force a literal Tailwind implementation where it does not fit.