Design Tool — Design Systems

The Design Tool lets you create, manage, and activate visual design systems — colors, typography, spacing — for your web projects, ensuring consistent styling across every page.

What is it?

The Design Tool is Yukkai's built-in system for creating and managing design systems — reusable sets of visual rules that keep your web projects looking consistent. A design system defines your color palette, fonts, spacing, border radius, and more, all in one place. Once activated, Yukkai applies those design tokens automatically whenever you generate or edit web pages.

Think of it as your project's visual DNA. Instead of hard-coding colors and fonts on every page, you define them once in a design system, and Yukkai references them everywhere.

How it works

Each design system lives as a DESIGN.md file behind the scenes, but you don't need to write it manually. The Design Tool provides a simple form-based interface where you specify:

  • Colors — primary, secondary, accent, background, surface, plus semantic colors (success, warning, error)
  • Typography — font family, optional heading font, spacing scale
  • Border radius — e.g., 8px, 12px, 0px
  • Raw content — advanced sections for Components, Layout, Motion, and Anti-patterns

When a design is activated on a workspace, Yukkai treats its tokens as the single source of truth. Generated code references these tokens directly, so changing a color in your design system updates it everywhere.

How to use it

Creating a design system

Tell Yukkai what you want — for example:

"Create a design system called 'Ocean Breeze' with a deep blue primary color, white background, and Inter font."

Yukkai will call the create action with the parameters you specified and generate the design system automatically.

Listing your designs

You can ask:

"Show me all my design systems."

Yukkai calls the list action and returns every design with its name, activation status, and key details.

Activating a design

Once you have a design you like, activate it:

"Activate the Ocean Breeze design for my current project."

This associates the design with your workspace so its tokens are enforced.

Updating a design

"Change the primary color of Ocean Breeze to navy blue."

Yukkai calls update with the new color value.

Exporting a design

"Export my Ocean Breeze design as a DESIGN.md file."

The export action produces a downloadable markdown file with the full design specification.

Importing a design

If you have an existing DESIGN.md file, you can import it:

"Import this DESIGN.md content into a new design system."

The import_md action parses the raw markdown and creates a design from it.

Deleting a design

"Delete the Ocean Breeze design system."

Use the delete action to permanently remove a design by its ID.

Examples

Example: Minimal brand design

Name:        Acme Brand
Primary:     #1A1C1E
Secondary:   #4A90D9
Accent:      #FF6B35
Background:  #FFFFFF
Surface:     #F5F5F7
Font:        Inter
Radius:      12px
Spacing:     default

Example: Dark theme design

Name:        Midnight
Primary:     #BB86FC
Secondary:   #03DAC6
Background:  #121212
Surface:     #1E1E1E
Error:       #CF6679
Success:     #81C784
Font:        Roboto
Heading:     Poppins
Radius:      8px
Spacing:     compact

Example: Advanced raw content

For advanced use, the raw_content field accepts structured sections: 

Components:
  - Button: primary accent, 12px radius, 14px font
  - Card: surface background, 16px padding, subtle shadow

Layout:
  - Max width: 1200px
  - Grid: 12 columns, 24px gap

Motion:
  - Transitions: 200ms ease
  - Hover: scale 1.02

Anti-patterns:
  - Never mix two accent colors on the same card
  - Avoid font sizes below 12px for body text

Tips & best practices

  1. Start simple. Define your primary, background, and font first. You can always add more tokens later with the update action.
  2. Use semantic colors. Don't hard-code #FF0000 for errors. Define it once as the error_color token so every component stays consistent and changes propagate automatically.
  3. Activate before generating. Always activate a design on your workspace before asking Yukkai to generate pages. This ensures the generated code uses your tokens from the start.
  4. Keep spacing consistent. Choose a spacing scale (compact, default, or spacious) that matches your brand's density. Mixing manual padding values defeats the purpose of a design system.
  5. Export for backups. Use export to save a DESIGN.md copy. If you ever need to recreate a design on another machine, import_md brings it back instantly.
  6. Deactivate to experiment. Use deactivate to temporarily disassociate a design from your workspace without deleting it. This lets you test different visual directions freely.
  7. Use the raw_content field for rules. If your team has specific component rules or anti-patterns, encode them in the raw_content sections. Yukkai reads and respects them during code generation.

Last updated: July 19, 2026