Vibe Coding Side Project

Design System Generator

Generate a cohesive design system from a brand vibe. Complete with export ready tokens to import into Figma or handoff to a developer.

Jan 2026 Role: Product + UX Output: JSON + assets

Key Screens

Design System Generated
Options to edit the primary colors and heading font.

Tokens
Typography, components, colors

Export Format: JSON
Export JSON tokens for colors and typography to easily import into Figma

Export Assets
Export SVG version of generated icons and components

overview

Design system generator

Starting from a short prompt, the generator creates a cohesive foundation—semantic color roles, a typography scale, and applied UI examples—so teams can evaluate direction before committing to build.

What it generates

  1. Color and Typography tokens

    Colors for primary, secondary, tertiary, background, and text. Typography styles for H1–H6, subtitles, body, button, and caption text.

  2. Applied examples

    Example components to visualize real layouts.

  3. JSON + SVG output

    Export JSON tokens and SVG assets for easy integration and handoff.

What it does best

  • Prompt → cohesive foundation

    Turns a qualitative brand description into a structured design system.

  • Preview tokens in context

    Visualizes colors and type across common patterns to validate direction fast.

  • Export for handoff

    Exports JSON tokens and SVG assets for Figma import or developer handoff.