Generate a cohesive, harmonious color palette from a base color using color theory principles.

Supports multiple harmony schemes: monochromatic, analogous, complementary, split_complementary, triadic, and tetradic. Also generates neutral grays and semantic color roles (primary, secondary, accent, background, etc.).

Args:

• base_color (string, optional): Hex color code (e.g. "#3B82F6" or "3B82F6"). If omitted, a color is derived from the style preset.

• scheme (string, optional): Harmony scheme — 'monochromatic', 'analogous', 'complementary', 'split_complementary', 'triadic', 'tetradic'. Default: 'monochromatic'

• style (string, optional): Style preset — 'minimal', 'bold', 'playful', 'dark', 'editorial', 'tech'. Used when base_color is omitted. Default: 'minimal'

• include_neutrals (boolean, optional): Include a 11-step neutral gray scale. Default: true

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: A color palette with hex/rgb/hsl values, semantic role assignments, usage guidance, and CSS custom properties.

Examples:

• Generate a triadic palette from blue: base_color="#3B82F6", scheme="triadic"

• Generate a minimal palette without neutrals: style="minimal", include_neutrals=false

• Generate a complementary palette for a dark theme: base_color="#10B981", scheme="complementary"

Suggest a curated font pairing (display + body font) based on a design style.

Provides Google Fonts import links, CSS font-family declarations, recommended weights, and usage notes.

Args:

• style (string, optional): Design style — 'minimal', 'bold', 'editorial', 'playful', 'tech'. Default: 'minimal'

• category (string, optional): Font category preference — 'any', 'sans-serif', 'serif', 'mixed'. Default: 'any'

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Font pairing with display font, body font, Google Fonts link, CSS snippet, and usage notes.

Examples:

• Get a minimal font pairing: style="minimal"

• Get a tech-focused serif+sans mix: style="tech", category="mixed"

• Get editorial pairings: style="editorial"

Generate a modular typography scale using a chosen ratio.

Produces a full set of type sizes from 'xs' to '4xl' with px, rem, line-height, weight, and usage recommendations.

Args:

• base_size (number, optional): Base font size in px. Default: 16

• ratio (string, optional): Scale ratio — 'minor_second' (1.067), 'major_second' (1.125), 'minor_third' (1.2), 'major_third' (1.25), 'perfect_fourth' (1.333), 'augmented_fourth' (1.414), 'perfect_fifth' (1.5), 'golden_ratio' (1.618). Default: 'perfect_fourth'

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Typography scale with named sizes, px/rem values, line heights, and CSS variables.

Examples:

• Golden ratio scale: ratio="golden_ratio"

• Large base with perfect fifth: base_size=18, ratio="perfect_fifth"

Generate a consistent spacing scale for layout and component spacing.

Supports multiple generation strategies: linear (equal steps), geometric (exponential growth), and fibonacci (golden ratio progression).

Args:

• base_unit (number, optional): Base unit in px — 4 or 8. Default: 8

• strategy (string, optional): Generation strategy — 'linear', 'geometric', 'fibonacci'. Default: 'geometric'

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Spacing scale with named steps (0 to 3xl), px/rem values, usage guidance, and CSS custom properties.

Examples:

• 8px geometric scale (most common): base_unit=8, strategy="geometric"

• 4px fibonacci scale for fine control: base_unit=4, strategy="fibonacci"

• 8px linear scale: base_unit=8, strategy="linear"

Generate a cohesive elevation shadow system with multiple depth levels.

Supports three visual styles: subtle (soft, minimal), medium (balanced depth), and sharp (crisp, defined edges).

Args:

• style (string, optional): Shadow visual style — 'subtle', 'medium', 'sharp'. Default: 'subtle'

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Shadow system with 5 elevation levels (sm, md, lg, xl, 2xl), CSS box-shadow values, usage guidance, and CSS custom properties.

Examples:

• Subtle shadows for minimal design: style="subtle"

• Sharp shadows for material/tech design: style="sharp"

Generate a border-radius scale with named levels from sharp to fully rounded.

Supports four visual styles: sharp (minimal radius), subtle (small radius), rounded (medium radius), and pill (large/pill radius).

Args:

• style (string, optional): Radius visual style — 'sharp', 'subtle', 'rounded', 'pill'. Default: 'subtle'

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Border radius scale with 6 levels (none to full), px/rem values, usage guidance, and CSS custom properties.

Examples:

• Subtle radius for minimal design: style="subtle"

• Pill radius for playful design: style="pill"

Check the WCAG 2.1 color contrast ratio between a foreground and background color.

Evaluates against WCAG AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text) standards.

Args:

• foreground (string): Foreground/text hex color (e.g. "#333333")

• background (string): Background hex color (e.g. "#FFFFFF")

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Contrast ratio, pass/fail for each WCAG level, overall grade, and actionable recommendations.

Examples:

• Check dark text on white: foreground="#1A1A2E", background="#FFFFFF"

• Check white text on blue: foreground="#FFFFFF", background="#3B82F6"

• Check if a muted gray passes: foreground="#888888", background="#FFFFFF"

Generate a CSS gradient from a base color with automatic color stop generation.

Supports linear and radial gradients with configurable angle and number of stops. Color stops are generated using color theory for harmonious transitions.

Args:

• base_color (string): Hex color code for the gradient base (e.g. "#6366F1")

• type (string, optional): Gradient type — 'linear' or 'radial'. Default: 'linear'

• angle (number, optional): Gradient angle in degrees for linear gradients (0-360). Default: 135

• stops (number, optional): Number of color stops (2-5). Default: 3

• direction (string, optional): Color shift direction — 'analogous' (nearby hues), 'complementary' (opposite hue), 'triadic' (spread hues). Default: 'analogous'

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: CSS gradient string, color stops, and raw values.

Examples:

• Purple linear gradient: base_color="#6366F1", angle=135

• Blue to orange complementary gradient: base_color="#3B82F6", direction="complementary"

• Radial triadic gradient: base_color="#10B981", type="radial", direction="triadic"

Generate a responsive breakpoint system with named breakpoints, container max-widths, and CSS media queries.

Supports popular frameworks (Tailwind, Bootstrap, Material) and custom breakpoints, with mobile-first or desktop-first strategies.

Args:

• framework (string, optional): Breakpoint preset — 'tailwind', 'bootstrap', 'material', 'custom'. Default: 'tailwind'

• strategy (string, optional): Media query strategy — 'mobile_first' (min-width) or 'desktop_first' (max-width). Default: 'mobile_first'

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Breakpoint definitions with px values, container max-widths, usage guidance, and ready-to-use CSS media queries.

Examples:

• Tailwind mobile-first: framework="tailwind", strategy="mobile_first"

• Bootstrap desktop-first: framework="bootstrap", strategy="desktop_first"

• Custom simple breakpoints: framework="custom"

Generate a complete, cohesive design token system in a single call.

Combines colors, typography, spacing, shadows, border-radius, and transitions into one unified token set with CSS custom properties. Tokens are harmonized based on the chosen style preset.

Args:

• style (string, optional): Design style preset — 'minimal', 'bold', 'playful', 'dark', 'editorial', 'tech'. Default: 'minimal'

• base_color (string, optional): Override the preset's base color with a hex code (e.g. "#6366F1")

• dark_mode (boolean, optional): Generate dark mode color tokens alongside light mode. Default: true

• response_format (string, optional): 'markdown' or 'json'. Default: 'markdown'

Returns: Complete design token set with all categories (colors, typography, spacing, shadows, radii, transitions) as CSS custom properties, ready to paste into a project.

Examples:

• Minimal design system: style="minimal"

• Dark-first system with custom brand color: style="dark", base_color="#6366F1"

• Playful system without dark mode: style="playful", dark_mode=false

Initialize a new design project. Sets the overall style, generates a complete token set, and clears any previous state.

The client dashboard will update in real-time when this is called.

Args:

• project_name (string): Name for this design project

• style (string): Design style — 'minimal', 'bold', 'playful', 'dark', 'editorial', 'tech'

• base_color (string, optional): Override the preset base color (hex like "#6366F1")

Examples:

• design_init(project_name="电商促销页", style="bold", base_color="#F97316")

• design_init(project_name="极简博客", style="minimal")

Add a UI component to the design canvas. The component will appear in the client dashboard in real-time.

Component types: hero, navbar, card, card_grid, button, form, text_section, image, cta, footer, stats, timeline, pricing, testimonial, faq, feature_list, banner, tabs, accordion, carousel, modal, sidebar, breadcrumb, pagination, progress, badge, avatar

Each type has variants:

• hero: 'centered', 'split', 'fullbleed'

• navbar: 'simple', 'with_cta', 'mega'

• card: 'product', 'feature', 'article', 'profile'

• card_grid: '2col', '3col', '4col'

• button: 'primary', 'secondary', 'ghost'

• cta: 'centered', 'split', 'banner'

Args:

• type (string): Component type

• variant (string, optional): Component variant

• props (object, optional): Component properties (title, subtitle, text, image_url, items, etc.)

• parent_id (string, optional): Parent component ID for nesting

Examples:

• design_add_component(type="hero", variant="centered", props={"title": "夏季大促", "subtitle": "精选商品5折起", "button_text": "立即抢购"})

• design_add_component(type="card_grid", variant="3col", props={"items": [{...}, {...}, {...}]})

Update properties of an existing component on the canvas. Changes appear in real-time on the client dashboard.

Args:

• id (string): Component ID (from design_add_component response)

• props (object): Properties to update (merges with existing)

Example:

• design_update_component(id="comp_12345", props={"title": "新标题", "button_text": "点击这里"})

Set animation for a component. The client dashboard will play the animation in real-time.

Animation entries: fadeUp, fadeIn, scaleIn, slideRight, slideLeft, slideUp, spring Curves: ease, easeOut, easeInOut, spring, linear, bounce

Args:

• component_id (string): Component to animate

• entry (string, optional): Entry animation type

• hover (string, optional): Hover animation type (scaleUp, lift, glow)

• duration (number, optional): Duration in seconds (0.1 - 3.0). Default: 0.3

• delay (number, optional): Delay in seconds (0 - 3.0). Default: 0

• curve (string, optional): Easing curve. Default: 'easeOut'

Example:

• design_set_animation(component_id="comp_123", entry="fadeUp", duration=0.5, delay=0.2, curve="spring")

Get the complete current design state including all tokens, components, and animations.

Use this to check what's on the canvas before making changes, or to see if the user has made manual adjustments via the client dashboard.

Returns: Full design state (project name, style, all tokens, component tree, activity log)

Set or update a single design token. The client dashboard updates in real-time.

Categories: colors, typography, spacing, shadows, radii, transitions

Args:

• category (string): Token category (colors, typography, spacing, shadows, radii, transitions)

• key (string): Token key (e.g. "color-primary", "font-display", "space-md")

• value (string): Token value (e.g. "#FF5733", "1.5rem", "12px")

Example:

• design_set_token(category="colors", key="color-primary", value="#FF5733")

Remove a component from the canvas by its ID.

Args:

• id (string): Component ID to remove

Example:

• design_remove_component(id="comp_12345")

Undo the last design operation. Reverts the most recent change to the design state.

No arguments required. Returns whether the undo was successful and the current state summary.

Redo the last undone operation. Re-applies the most recently undone change.

No arguments required. Returns whether the redo was successful and the current state summary.

Add a new page to the design project. The new page becomes the current active page.

Args:

• name (string): Name for the new page

Example:

• design_add_page(name="产品详情页")

Switch to a different page in the design project.

Args:

• page_id (string): ID of the page to switch to

Example:

• design_switch_page(page_id="page_12345")

Remove a page from the design project by its ID.

Args:

• page_id (string): ID of the page to remove

Example:

• design_remove_page(page_id="page_12345")

Apply a pre-built page template. Automatically adds multiple components to the current page.

Available templates:

• ecommerce_home: Navbar + Hero (centered) + Card Grid (3col) + CTA (centered) + Footer

• saas_landing: Navbar (with_cta) + Hero (split) + Feature List + Stats + Pricing + CTA (banner) + Footer

• blog_post: Navbar + Text Section + Image + Text Section + Footer

• portfolio: Navbar + Hero (centered) + Card Grid (4col) + Text Section + Footer

• dashboard: Navbar + Stats + Card Grid (2col) + Feature List

Args:

• template (string): Template name — 'ecommerce_home', 'saas_landing', 'blog_post', 'portfolio', 'dashboard'

Example:

• design_apply_template(template="ecommerce_home")

Export the current design as code in the specified format.

Supported formats:

• html: Complete standalone HTML file with CSS variables and all component markup

• react: React JSX component code

• vue: Vue Single File Component (SFC) code

• figma_tokens: Design tokens in Figma token JSON format

Args:

• format (string): Export format — 'html', 'react', 'vue', 'figma_tokens'

Example:

• design_export(format="html")

Reorder a component relative to another component in the canvas.

Args:

• from_id (string): ID of the component to move

• to_id (string): ID of the reference component

• position (string): Where to place the moved component relative to the reference — 'before' or 'after'

Example:

• design_reorder_component(from_id="comp_123", to_id="comp_456", position="before")

Set the theme mode for the design project (light or dark). The client dashboard will update accordingly.

Args:

• mode (string): Theme mode — 'light' or 'dark'

Example:

• design_set_theme(mode="dark")

Check for token conflicts such as low contrast color combinations or inconsistent spacing.

No arguments required. Returns a list of conflicts found, or an empty list if none.

Check if the user has sent any natural language prompts via the client dashboard.

If a pending prompt exists, it is returned and then cleared. Use this to periodically poll for user instructions sent from the browser client.

No arguments required.