AI Generator
Configure
Output
Theme File
How it works
Style Studio connected — theme will be injected into generation
Using: Playfair Display · from-red-300/fuchsia-900 · radius-none · accent #7c3aed
StackSelect one
▲Next.jsApp Router
🔵WordPressHeadless
🟢ShopifyHydrogen
🟣MedusaCommerce
🔴SanityCMS
🌐HTMLVanilla
Auth Cart Stripe Dark Mode i18n SEO Analytics CMS Search Email
Anthropic API KeyRequired
Stored locally in browser only · Get key →
Injected themeAuto-connected
From Style Studio
Gradient
radial-top · red/fuchsia
Display font Playfair Display
Body font Inter
Border radius sharp (0px)
Accent color
#7c3aed
Glass blur 16px blur · 10% opacity
This theme will be injected into the AI prompt so Claude generates code that matches your exact style — gradient, fonts, radius, colors and glassmorphism.
theme.generated.css ~1.2kb
Generation settingsOptions
Inject theme into prompt
Send your Style Studio settings to Claude
Generate theme.css file
Output a separate CSS theme file
Tailwind config
Include tailwind.config.js with theme
TypeScript strict mode
Generate with strict TS types
shadcn/ui tokens
Include shadcn CSS variable mapping
Max tokens
Higher = more complete code