Interface Intelligence
AI-powered design system co-pilot. Build components, validate consistency, and generate documentation, all grounded in your actual design system. AI should not generate from scratch. It should generate within your system.
Powered by Output.ai
Interface Intelligence is built on Output.ai, an open-source AI workflow framework by GrowthX. Each workflow uses version-controlled .prompt files with Liquid templates, Zod-validated schemas, and structured step execution, the same patterns used in production Output.ai deployments.
YAML frontmatter for model config + Liquid templates for variable injection. Version-controlled and reviewable in PRs.
Every workflow input and output is typed and validated. Structured data in, structured data out. No guessing.
Your design tokens are injected into every prompt at runtime. The AI references your actual values, not generic ones.
Each workflow runs as isolated steps. In production with Output.ai, these gain Temporal orchestration, tracing, and caching.
Mirabelle Design System
Token Overview
Workflows
Build Component
Generate a component spec grounded in your tokens, patterns, and accessibility requirements.
Validate Code
Check component code against your system for token adherence, consistency, and a11y compliance.
Generate Docs
Create comprehensive documentation with usage examples, do/don't guidelines, and a11y notes.
Components
Web Component (<ds-button>). Pill-radius (ds-radius-pill), min-height 2.75rem. Primary variant uses accent color with inverse text and shadow-sm. Hover lifts 1px via translateY(-1px). Focus ring is accent at 60% mix with white, 2px solid, 2px offset. Disabled state at 0.55 opacity with cursor not-allowed.
Web Component (<ds-card>). Content container using backdrop-filter blur(16px), bg-surface at 92% opacity via color-mix, border-subtle, radius-lg + 0.125rem. Elevated variant adds shadow-md. Uses slot-based composition: slot='eyebrow' (uppercase kicker, accent color, letter-spacing 0.14em), slot='title' (font-size-500, snug line-height), default slot (body, text-secondary), slot='footer' (flex row with gap-3).
Web Component (<ds-input>). Min-height 3rem, radius-md, border-subtle, bg-elevated. Focus state: border color-mix(accent 48%, white), box-shadow 0 0 0 3px color-mix(accent 18%, transparent). Label is font-size-200, semibold. Helper text is font-size-200, text-secondary. Emits custom events: ds-input (on input) and ds-change (on change) with detail.value.
Web Component (<ds-badge>). Pill-shaped (ds-radius-pill), min-height 1.75rem, font-size-100, semibold, letter-spacing 0.02em. Tones use color-mix for transparent backgrounds: neutral (surface-subtle bg, text-secondary), accent (accent at 12%, accent text), success (success at 14%, success text), warning (warning at 12%, warning text). All tones include matching border at slightly higher opacity.
Web Component (<ds-modal>). Overlay uses ds-color-overlay (rgba(23,23,22,0.5) light, rgba(23,23,22,0.74) dark). Content panel uses bg-surface with backdrop-filter blur(20px), radius-xl, shadow-lg. Focus trap on open, restores focus on close. Escape key dismisses. Slots: slot='header' (title area), default slot (body content), slot='footer' (action buttons). Transition uses ds-duration-normal with ds-ease-emphasized.
Web Component (<ds-select>). Trigger styled like ds-input (min-height 3rem, radius-md, border-subtle). Dropdown panel uses bg-elevated, shadow-lg, radius-md. Options have hover state using bg-inset. Selected option shows accent-colored check icon. Supports keyboard navigation (arrow keys, enter, escape). Emits ds-change event with detail.value.
Web Component (<ds-toast>). Positioned bottom-right, stacks vertically with ds-space-3 gap. Uses semantic color tokens for variants: success (ds-color-success), warning (ds-color-warning), error (ds-color-danger), info (ds-color-accent). Auto-dismisses after configurable duration (default 5000ms). Entry animation slides up with ds-ease-decelerate, exit fades with ds-ease-accelerate. Includes optional dismiss button and action slot.