Getting Started

What is YuBild?

YuBild solves a problem every frontend team faces: building and maintaining a consistent design system. Instead of manually writing CSS variables, tweaking Tailwind configs, or mapping design tokens to library-specific theme objects, YuBild gives you a visual editor that generates production-ready theme code for 10 UI libraries across React, Vue, and Angular.

You design your tokens visually — colors, typography, spacing, shadows, borders, motion, effects, accessibility rings, and z-index layers. YuBild previews your tokens on real UI components in real-time, then generates the exact theme file your library expects. No hand-coding, no guessing, no inconsistency.

Quick Start Guide

Here's a walkthrough of the entire flow, from creating a project to using the generated theme in your application.

Step 1: Create a Project

From the Dashboard, click New Project. You'll need to:

1. Give your project a name (e.g., "My App Design System")
2. Choose a framework: React, Vue, or Angular
3. Select a UI library from the 10 available options

Your choice of library determines what component demos you see in the preview and what theme format gets generated. You can always change the library later.

Step 2: Design Your Tokens

The project editor opens with two panels: the Token Editor (left sidebar) and the Live Preview (main area).

Start with Colors — pick your primary brand color. YuBild immediately:

• Generates a full 50-950 shade scale from your base color
• Calculates accessible contrast colors for text on each shade
• Updates the preview with your new palette applied to all components

Then move through the other token categories in the sidebar. Each one has tailored controls:

• Typography — Pick heading, body, and monospace fonts from Google Fonts. Set the size scale, line heights, letter spacing, and weights.
• Spacing — Choose a density preset (compact, normal, relaxed, spacious) that generates a full spacing scale.
• Shadows — Select shadow intensity (none, subtle, medium, strong) generating 6 elevation levels.
• Border Radius — From sharp (0px) to fully rounded (9999px) with 7 presets.
• Borders — Width from thin (1px) to thick (3px).
• Effects — Backdrop blur, disabled opacity, hover opacity, backdrop overlay opacity.
• Motion — Transition speed and easing curve for all interactive states.
• Focus & Accessibility — Focus ring width and offset for keyboard navigation visibility.
• Z-Index — Layering scale (flat, normal, elevated) with named layers for dropdown, modal, tooltip, etc.

Step 3: Preview Your Design System

The preview area has three modes, controlled by the segmented toggle in the header:

• Components — Real, interactive UI components from your selected library. This includes buttons (all variants and sizes), cards, forms with inputs and selects, data tables, dialogs, tooltips, alerts, accordions, switch toggles, avatars, skeletons, navigation patterns, and more. Each demo is fully functional — you can click buttons, toggle switches, and expand accordions.
• Design — A visual overview canvas showing your complete design system laid out: color palettes, type specimens, spacing visualization, shadow levels, and component examples side by side. Good for design review sessions.
• Code — Opens Code Lab, the multi-file code viewer. Shows you the exact generated theme files with syntax highlighting.

You can also test responsive behavior with the viewport controls (desktop, tablet, mobile) and zoom from 50% to 150%.

Step 4: Explore Generated Code

Switch to Code mode to open Code Lab. You'll see multiple file tabs:

1. Theme file — The library-specific theme. For Angular Material, this is_yubild-theme.scss with SCSS palette maps, typography config, and component overrides. For shadcn, it's globals.css with HSL custom properties.
2. design-tokens.css — Universal CSS custom properties.
3. tailwind.config.ts — Tailwind theme extension.
4. Framework file — ThemeProvider (React), YubildTheme.vue (Vue), or design-token.service.ts (Angular) for runtime token access.

Click any token category in the Code Lab sidebar to scroll directly to that section in the code. Modified lines are highlighted in green when you change a token.

Step 5: Export and Integrate

When you're satisfied with your design system, you have several export options:

• Copy from Code Lab — Click the copy button on any file tab to copy that file to your clipboard. This is the fastest path for grabbing one file.
• Export dialog — Click Export in the toolbar to download all output files at once.
• PDF documentation — Generate a shareable PDF of your design system for team review.
• Setup Guide — The interactive step-by-step guide in Code Lab walks you through integration for your specific library and framework.

Supported Libraries

How YuBild Works Under the Hood

Understanding the architecture helps you get the most out of YuBild:

1. Token Config — Your design decisions are stored as a typed TokenConfig object (colors as hex strings, spacing as enum presets, etc.). This is persisted in a Zustand store with localStorage and synced to the database on save.
2. Theme Generators — Each UI library has a dedicated generator that transforms your TokenConfig into library-specific code. Generators are lazy-loaded so only the one you need is bundled. They're deterministic — same input always produces same output.
3. CSS Injection — The live preview injects your tokens as CSS custom properties via a StyleInjector component. Component demos react to changes instantly without page reload.
4. Build Engine — For export, a build engine compiles your tokens into multiple output formats: CSS bundles, Tailwind presets, and framework-specific integration files.

Example: Building a SaaS Dashboard Theme

Let's walk through a realistic workflow. You're building a SaaS dashboard with React and shadcn/ui:

1. Create a project → React + shadcn/ui.
2. Colors → Set primary to #2563eb (brand blue). YuBild generates 50-950 shades. Set destructive to red, accent to amber.
3. Typography → "Inter" for body, "Cal Sans" for headings. Default size scale.
4. Spacing → "Compact" — dashboards need tighter spacing.
5. Shadows → "Subtle" — modern flat-ish design.
6. Border Radius → "lg" (8px) for friendly components.
7. Preview → Check buttons, cards, tables in Components mode.
8. Code Lab → Copy globals.css into your project.
9. Copy tailwind.config.ts to extend your Tailwind theme.
10. Follow the Setup Guide for ThemeProvider integration.

Next Steps

• Token Editor — Master the visual editor, undo/redo, search, and preview modes
• Design Tokens — Comprehensive reference for all 10 token categories
• Code Lab — Learn scroll sync, diff highlighting, and the interactive setup guide
• Theme Generators — Understand what each library's generator produces
• Exports — All export formats and integration patterns
• Keyboard Shortcuts — Speed up your workflow