Visual Card & Token Editor · Personal Project
A visual editor for building and theming reusable UI cards: a layer tree and properties panel for structure, a token-based theme builder for branding, and a template gallery to start from. Point it at raw JSON and it infers the schema and maps your data onto a card automatically. Designed and built solo, as the design layer of a wider AI-experience platform.
Next.js
TypeScript
Tailwind CSSdnd-kitStyle Presets as Token Bundles
Minimal, Spacious, Compact, Bold, and Soft each bundle padding, gap, corner radius, base color, and accent color into one reusable choice, so picking a feel is one click instead of tuning five properties by hand.
A Real Color System
Base and accent color palettes pair with a swappable icon library (Lucide, Heroicons, Phosphor, Tabler) and font choice, so a card's entire visual identity comes from a small set of token decisions.
Layer Tree to Live Render
A layer tree, properties panel, and renderer stay in sync as one editor, so a structural edit shows up in the same component that ships — not a separate, drifting preview.
Automatic Field Detection
Given arbitrary JSON, the studio detects collections, catalogs their fields, and infers a schema — then maps a card's props onto the matching fields automatically instead of asking someone to hand-wire each one.
One Mapping, Two Outputs
That field mapping isn't just for rendering — it's also the input to Conversational Studio's tool generator, so wiring a data source to a card also produces the callable agent tool that reads from it.
