Experimental Concept — AI Theming

Component
Chameleon

A stable component framework where AI generates the appearance layer on demand — converting a natural language vibe into a complete token set, applied instantly across every component.

5Components
5Themes
30+Tokens generated
The Problem Why this exists

Theming starts in
the wrong place.

Every design system has a theming story.

~4hrs
Average time to produce a new theme manually across a mid-size component library
0
Non-designers who can author a theme today without translating feeling into hex values first
1prompt
What it should take — from vibe to a live, token-backed theme
The architecture is fixed. The expression is infinite. AI is the translator between a feeling and a functioning token set.
The Approach How it works

Vibe in.
Tokens out.

The framework separates structure from expression.

Start with feeling
AI interprets
Tokens generated
Live theme
Vibe prompt
"Glass, minimal,
cold luxury"
→
AI interprets
Maps to
token schema
→
Tokens generated
Color, radius,
shadow, motion
→
⚙️
Components apply
No code changes.
Instant preview.
→
Live theme
Export to Figma,
CSS, or JSON
Interactive Demo Switch themes to see the token system in action
Component Chameleon — Live Preview
Button
Default
Hover
Pressed
Disabled
Toggle
Off
On
Disabled
Text Input
Default
Focus
Error
Disabled
Number Input
Default
Focus
Disabled

Every theme is generated from a single prompt — no component code changes, only token values.

Token Schema The stable contract between AI and components
Button — Token Schema12 tokens
TokenPropertyStateCurrent Value
btn.bg.defaultBackgrounddefaultrgba(155,109,255,0.9)
btn.bg.hoverBackgroundhoverrgba(180,140,255,0.95)
btn.bg.pressedBackgroundpressedrgba(120,70,230,0.9)
btn.bg.disabledBackgrounddisabled#1a1a1f
btn.text.defaultText colordefault#ffffff
btn.text.disabledText colordisabledrgba(255,255,255,0.28)
btn.radiusCorner radiusall8px
btn.border.defaultBorderdefaultnone
btn.shadow.defaultBox shadowdefaultnone
btn.shadow.hoverBox shadowhovernone
btn.font.weightFont weightall500
btn.paddingPaddingall10px 20px
Toggle — Token Schema7 tokens
TokenPropertyStateCurrent Value
toggle.track.bg.offTrack backgroundoff#1a1a1f
toggle.track.bg.onTrack backgroundonrgba(155,109,255,0.9)
toggle.thumb.colorThumb fillall#ffffff
toggle.track.shadow.onGlowonnone
toggle.widthTrack widthall44px
toggle.radiusTrack radiusall100px
toggle.transitionMotionall0.2s ease
Text & Number Input — Token Schema10 tokens
TokenPropertyStateCurrent Value
input.bg.defaultBackgrounddefault#141418
input.border.defaultBorderdefault1px solid rgba(255,255,255,0.13)
input.border.focusBorderfocus1.5px solid rgba(155,109,255,0.8)
input.border.errorBordererror1.5px solid rgba(255,85,85,0.8)
input.shadow.focusFocus ringfocus0 0 0 3px rgba(155,109,255,0.12)
input.text.colorText colordefault#ffffff
input.placeholder.colorPlaceholderemptyrgba(255,255,255,0.28)
input.radiusCorner radiusall8px
input.bg.disabledBackgrounddisabled#0e0e12
input.transitionMotionall0.15s ease
What value this brings
Speed for agencies & consultancies
Teams that build systems from scratch for every client could go from feeling to a working, token-backed theme in one prompt — compressing days of setup into minutes.
Non-designers can author
A PM or brand lead describes the vibe in plain language — no hex codes — and gets a system-true result that still respects the architecture.
Consistency at scale
Because AI only fills a fixed token schema, every generated theme stays structurally sound — expression changes, the contract never breaks.