Design Systems via MCP

Retrieving Design Systems

Call get_active_design_system with a project_id to get the complete 9-section design specification.

Response Structure

{
  "usesTailwind": true,
  "fonts": ["Outfit", "Inter"],
  "themeAnalysis": "# 🎨 LiveFolio Unified Design System: My Project\n\n...",
  "projectMode": "document",
  "theme": "Premium SaaS Deck",
  "palette": "Cobalt Ocean",
  "typography": "Outfit & Roboto Mono"
}

The 9-Section Design Document

The themeAnalysis field contains a comprehensive markdown document:

1. Visual Theme Style & Brand Identity — active theme preset and identity description
2. Harmonious Palette & Custom Colors — palette with hex values, any custom overrides
3. Typography Scaling & Font Selection — font pair with usage guidelines
4. Elevation, Shadow & Border Radii — depth and rounding specifications
5. Responsive Grid & Container Specs — width constraints and grid patterns
6. Interaction Micro-animations — hover, focus, and transition rules
7. Intent Mode Layout Best Practices — mode-specific layout guidelines
8. Approved Script & External Libraries — CDN URLs for approved libraries
9. Anti-AI-Slop Do's and Don'ts — quality checklist and custom guidelines

Using Design Systems in Agent Workflows

Before Creating a Folio

1. If there are existing folios in the workspace, call get_active_design_system on one to understand the brand
2. Use the theme, palette, and typography in your HTML generation
3. Follow the anti-slop guidelines to avoid common AI generation issues

Before Updating a Folio

1. Call get_active_design_system on the target project
2. Apply the specified theme colors, fonts, and spacing
3. Respect the mode layout guidelines (document vs deck vs spreadsheet vs dashboard)
4. Only use approved libraries from the design system

Example Agent Prompt Pattern

"Before editing, call get_active_design_system on project X. Use the exact palette hex colors, the specified font pair, and follow the anti-slop checklist. Only use libraries from the approved list. Match the elevation and border radius specifications."

Design System Inheritance

• Each project has its own independent design preferences
• There is no global or workspace-level design system — each folio is self-contained
• When creating a new folio, you can either inherit preferences from an existing folio or specify new ones

Custom Guidelines

The customGuidelines field in design_preferences enforces project-specific rules. These appear in section 9 of the design document:

#### 📌 Project Specific Custom Enforcements:
> "Use HSL custom properties for all colors. No inline styles. All buttons must have hover transitions."

AI agents should treat custom guidelines as mandatory requirements.