Live theme controls and prompt output

Build a visual theme your AI can actually follow.

Theme Forge lets you sculpt spacing, radius, typography, shadows, and gradients in real time, then turns that system into a structured prompt you can hand to Claude, Cursor, ChatGPT, or your own model.

Start Building See Presets

Single theme object

Everything flows from one config instead of scattered styles.

Live design system

Cards, navigation, buttons, and form controls react instantly.

Prompt-ready output

Generate instructions that preserve the exact theme in code.

Theme DNA

Active preset: Minimal SaaS

Updating live

Prompt Output

SYSTEM:
Apply the selected theme to every
surface, CTA, card, and dashboard.

TOKENS:
radius, spacing, font, text, bg,
surface, accent, button, gradient

Token stackReady

TypographyAdaptive

SpacingSynced

SurfacesSynced

MotionSynced

Radius + shadow

Control the tactile feel.

Prompt aligned

Auto-generated for your model.

Preview synced

Changes appear instantly.

Presets

Start from a visual direction instead of an empty panel.

Each preset rewires the same theme object, so you can branch from a full aesthetic and keep refining from there.

Theme Builder

Tune the system, inspect the canvas, and generate a prompt your AI can keep following.

Every control maps directly to the preview so you can shape a design system instead of nudging one isolated component.

Live canvasResponsive preview

Design system synced to controls

Ship interfaces that feel intentional before you write the rest of the app.

Adjust the theme once and apply it to cards, inputs, CTAs, stats, and future prompt output without juggling a dozen separate style decisions.

Theme iterations

Prompt confidence

94%

Components synced

Control pass

Sample panel with forms and tasks

Hero polish pass

Align gradients, bump CTA contrast, export prompt.

Dashboard variation

Test denser spacing without breaking readability.

Signal cluster

Accent usage

Focused

Prompt clarity

High

Hero card

Your chosen radius and shadows shape the whole product tone.

Input module

Typography, color, and density stay consistent with forms.

Stats card

Accents and surfaces extend into dashboards and analytics.

Prompt Output

Auto-generate the prompt your model should keep using.

This turns your live theme selections into reusable instructions so your next AI-generated screen still looks like the same product.

Prompt options

Trim or expand the generated prompt before copying it into your model.

Font

Geist

Gradient

Solid background

Radius

24px cards

Spacing

20px rhythm

Theme prompt

Use the following Theme Forge system for every UI surface, component, and landing-page section.

Goal
- Make the interface feel premium, creative, and AI-product ready.
- Keep the system consistent across navigation, hero, cards, forms, CTAs, and dashboard modules.

Theme tokens
{
  "fontFamily": "Geist",
  "fontScale": "104%",
  "radius": "24px",
  "buttonRadius": "999px",
  "shadowIntensity": "48/100",
  "spacingDensity": "20px",
  "containerWidth": "88%",
  "textColor": "#111827",
  "mutedTextColor": "#667085",
  "backgroundColor": "#f7f8fc",
  "surfaceColor": "#ffffff",
  "accentColor": "#4f7cff",
  "buttonColor": "#171717",
  "backgroundTreatment": "solid #f7f8fc with subtle tonal depth"
}


CSS variables
:root {
  --tf-radius: 24px;
  --tf-button-radius: 999px;
  --tf-text: #111827;
  --tf-muted: #667085;
  --tf-bg: #f7f8fc;
  --tf-surface: #ffffff;
  --tf-accent: #4f7cff;
  --tf-button: #171717;
}


Implementation rules
- Apply the tokens above before styling any component details.
- Typography should use Geist at roughly 104% scale.
- Cards should feel layered with balanced spacing.
- Use accent color for highlights, focus states, charts, badges, and premium moments.
- Use button color for primary CTAs and keep secondary actions lower contrast.
- Match radius across cards, inputs, and overlays, while buttons use their own radius token.
- Do not introduce extra brand colors unless accessibility requires it.

Return production-ready UI code plus the CSS variables needed to preserve this theme.

Live theme controls and prompt output

Build a visual theme your AI can actually follow.

Start Building See Presets

Single theme object

Everything flows from one config instead of scattered styles.

Live design system

Cards, navigation, buttons, and form controls react instantly.

Prompt-ready output

Generate instructions that preserve the exact theme in code.

Theme DNA

Active preset: Minimal SaaS

Updating live

Prompt Output

SYSTEM:
Apply the selected theme to every
surface, CTA, card, and dashboard.

TOKENS:
radius, spacing, font, text, bg,
surface, accent, button, gradient

Token stackReady

TypographyAdaptive

SpacingSynced

SurfacesSynced

MotionSynced

Radius + shadow

Control the tactile feel.

Prompt aligned

Auto-generated for your model.

Preview synced

Changes appear instantly.

Presets

Start from a visual direction instead of an empty panel.

Each preset rewires the same theme object, so you can branch from a full aesthetic and keep refining from there.

Theme Builder

Tune the system, inspect the canvas, and generate a prompt your AI can keep following.

Every control maps directly to the preview so you can shape a design system instead of nudging one isolated component.

Live canvasResponsive preview

Design system synced to controls

Ship interfaces that feel intentional before you write the rest of the app.

Adjust the theme once and apply it to cards, inputs, CTAs, stats, and future prompt output without juggling a dozen separate style decisions.

Theme iterations

Prompt confidence

94%

Components synced

Control pass

Sample panel with forms and tasks

Hero polish pass

Align gradients, bump CTA contrast, export prompt.

Dashboard variation

Test denser spacing without breaking readability.

Signal cluster

Accent usage

Focused

Prompt clarity

High

Hero card

Your chosen radius and shadows shape the whole product tone.

Input module

Typography, color, and density stay consistent with forms.

Stats card

Accents and surfaces extend into dashboards and analytics.

Prompt Output

Auto-generate the prompt your model should keep using.

This turns your live theme selections into reusable instructions so your next AI-generated screen still looks like the same product.

Prompt options

Trim or expand the generated prompt before copying it into your model.

Font

Geist

Gradient

Solid background

Radius

24px cards

Spacing

20px rhythm

Theme prompt

Use the following Theme Forge system for every UI surface, component, and landing-page section.

Goal
- Make the interface feel premium, creative, and AI-product ready.
- Keep the system consistent across navigation, hero, cards, forms, CTAs, and dashboard modules.

Theme tokens
{
  "fontFamily": "Geist",
  "fontScale": "104%",
  "radius": "24px",
  "buttonRadius": "999px",
  "shadowIntensity": "48/100",
  "spacingDensity": "20px",
  "containerWidth": "88%",
  "textColor": "#111827",
  "mutedTextColor": "#667085",
  "backgroundColor": "#f7f8fc",
  "surfaceColor": "#ffffff",
  "accentColor": "#4f7cff",
  "buttonColor": "#171717",
  "backgroundTreatment": "solid #f7f8fc with subtle tonal depth"
}


CSS variables
:root {
  --tf-radius: 24px;
  --tf-button-radius: 999px;
  --tf-text: #111827;
  --tf-muted: #667085;
  --tf-bg: #f7f8fc;
  --tf-surface: #ffffff;
  --tf-accent: #4f7cff;
  --tf-button: #171717;
}


Implementation rules
- Apply the tokens above before styling any component details.
- Typography should use Geist at roughly 104% scale.
- Cards should feel layered with balanced spacing.
- Use accent color for highlights, focus states, charts, badges, and premium moments.
- Use button color for primary CTAs and keep secondary actions lower contrast.
- Match radius across cards, inputs, and overlays, while buttons use their own radius token.
- Do not introduce extra brand colors unless accessibility requires it.

Return production-ready UI code plus the CSS variables needed to preserve this theme.

Build a visual theme your AI can actually follow.

Start from a visual direction instead of an empty panel.

Minimal SaaS

Dark Glass

Neon

Soft Editorial

Developer Dashboard

Sunlit Studio

Tune the system, inspect the canvas, and generate a prompt your AI can keep following.

Ship interfaces that feel intentional before you write the rest of the app.

Auto-generate the prompt your model should keep using.

Build a visual theme your AI can actually follow.

Start from a visual direction instead of an empty panel.

Minimal SaaS

Dark Glass

Neon

Soft Editorial

Developer Dashboard

Sunlit Studio

Tune the system, inspect the canvas, and generate a prompt your AI can keep following.

Ship interfaces that feel intentional before you write the rest of the app.

Auto-generate the prompt your model should keep using.