Skip to main content
Glama
elsahafy
by elsahafy

UI Toolkit MCP Server

npm version CI Tests Snyk Security Known Vulnerabilities Socket License: MIT

The most comprehensive UI MCP server available. 13 tools, 5 resources, 3 prompts for end-to-end UI development: generate components, manage design tokens, audit accessibility, auto-fix issues, inspect live pages, compare screenshots, generate Storybook stories, extract Figma styles, compose layouts, and preview responsive designs -- across React, Vue, Svelte, Angular, and Web Components.

Works with any MCP-compatible client including Claude Desktop, Claude Code, Cursor IDE, Continue.dev, Cline, and Zed.

Installation

npx (No Install)

npx -y @elsahafy/ui-toolkit-mcp

npm (Global)

npm install -g @elsahafy/ui-toolkit-mcp

Claude Code CLI

claude mcp add ui-toolkit -- npx -y @elsahafy/ui-toolkit-mcp

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "ui-toolkit": {
      "command": "npx",
      "args": ["-y", "@elsahafy/ui-toolkit-mcp"]
    }
  }
}

Cursor IDE

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "ui-toolkit": {
      "command": "npx",
      "args": ["-y", "@elsahafy/ui-toolkit-mcp"]
    }
  }
}

Optional: Browser Tools

For inspect_page, live_audit, and responsive_preview, install Playwright separately:

npm install playwright
npx playwright install chromium

All other tools work without Playwright.

Related MCP server: memoire

Tools (13)

Component Generation

generate_component

Generate production-ready UI components from natural language. Automatically audits the output and reports issues inline.

"Generate a card component with image, title, and action buttons in React"

Parameters:

  • description (required) -- What to build

  • framework (required) -- react | vue | svelte | angular | web-components

  • component_name (required) -- PascalCase name (e.g., ProductCard)

  • variant -- default | outlined | filled | ghost | elevated

  • size -- sm | md | lg | xl

  • auto_audit -- Automatically audit generated output (default: true)

  • include_styles -- Include CSS with design tokens (default: true)

  • include_tests -- Generate test file (default: false)

  • responsive -- Include breakpoints (default: true)

Generated components are automatically registered in the component registry.

compose_layout

Compose a full page layout from previously generated components in the registry.

"Compose a page from Hero, Features, and Footer components in React"

Parameters:

  • component_names (required) -- Array of component names from the registry

  • framework (required) -- Target framework

  • layout_description -- Description of the page layout

Produces a complete page with imports, semantic structure (<header>, <main>, <footer>), and skip navigation.

Design Tokens

import_design_tokens

Import design tokens from Figma Tokens JSON, Style Dictionary, or CSS custom properties.

Parameters:

  • tokens_json (required) -- Raw JSON string of tokens

  • format (required) -- figma-tokens | style-dictionary | css-custom-properties

  • namespace -- Optional prefix (e.g., brand)

  • merge_strategy -- replace | merge-overwrite | merge-keep

extract_figma_styles

Extract design tokens directly from a Figma file via the REST API.

Parameters:

  • figma_file_key (required) -- Alphanumeric file key from Figma URL

  • figma_pat (required) -- Figma Personal Access Token (never stored or logged)

  • node_ids -- Optional specific nodes to extract

  • namespace -- Optional CSS variable prefix

  • merge_strategy -- How to handle existing tokens

export_tokens

Export the active token store as CSS custom properties, JSON, or Style Dictionary format.

Parameters:

  • format -- css | json | style-dictionary (default: css)

clear_tokens

Clear all design tokens from the active store.

Auditing & Fixing

audit_component

Audit markup for WCAG accessibility, performance, and responsive design issues. Returns scored findings with fix suggestions.

Parameters:

  • markup (required) -- HTML/JSX/Vue/Svelte markup

  • component_name -- For report labeling

  • categories -- ["accessibility", "performance", "responsive"]

  • wcag_level -- A | AA | AAA

  • framework -- Affects how markup is parsed

29 built-in rules: 12 accessibility (WCAG), 9 performance, 8 responsive design.

auto_fix_component

Automatically fix common accessibility and performance issues based on audit findings.

"Auto-fix the accessibility issues in this component"

Parameters:

  • markup (required) -- The markup to fix

  • findings (required) -- Array of AuditFinding objects from audit_component

Supported auto-fixes: missing alt text, missing lang attribute, missing lazy loading, positive tabindex, px font-sizes to rem.

live_audit

Navigate to a live URL and audit the rendered HTML. Combines browser inspection with markup auditing in one call. Requires Playwright.

Parameters:

  • target_url (required) -- HTTP/HTTPS URL (private IPs blocked)

  • categories -- Audit categories to run

  • wcag_level -- WCAG conformance level

Browser Tools (Playwright)

Install separately: npm install playwright && npx playwright install chromium

inspect_page

Navigate to a live URL and extract accessibility tree, component structure, performance metrics, and screenshot.

Parameters:

  • target_url (required) -- HTTP/HTTPS URL (private IPs blocked)

  • viewport_width / viewport_height -- Viewport size

  • wait_for -- load | domcontentloaded | networkidle

  • timeout_ms -- Navigation timeout

  • include_screenshot -- Base64 PNG screenshot (default: true)

visual_diff

Pixel-by-pixel PNG comparison for visual regression testing. No Playwright required.

Parameters:

  • before_image (required) -- Base64 PNG

  • after_image (required) -- Base64 PNG

  • threshold -- Per-channel tolerance (0-255, default: 10)

responsive_preview

Screenshot a URL at mobile (375px), tablet (768px), and desktop (1280px) viewports. Requires Playwright.

Parameters:

  • target_url (required) -- HTTP/HTTPS URL (private IPs blocked)

Storybook

generate_story

Auto-generate CSF3 Storybook stories with prop detection, play functions, and accessibility addon config.

Parameters:

  • component_code (required) -- Full component source code

  • framework (required) -- react | vue | svelte | angular

  • component_name (required) -- PascalCase name

  • story_title -- Storybook path (default: Components/{name})

Detects props via regex from: TypeScript interfaces (React), defineProps (Vue), export let (Svelte), @Input() (Angular).

Resources (5)

URI

Description

ui://tokens/active

Currently loaded design tokens

ui://patterns/components

Component pattern library (12 patterns with a11y requirements)

ui://components/registry

Registry of all generated components with audit scores

ui://server/health

Server version, tool count, token count, uptime

ui://audit/checklist

Full audit rule reference (auto-generated from rule definitions)

Prompts (3)

Prompt

Description

build_page

Generate a full page with multiple components using design tokens

component_audit

Comprehensive audit + fix workflow

design_to_code

Full Figma-to-code: extract tokens, generate components, audit, generate stories

Key Features

Audit-at-Generation-Time

Every component generated by generate_component is automatically audited for accessibility, performance, and responsive issues. Critical findings are reported inline. No other UI MCP server does this.

Component Registry

All generated components are tracked with metadata (framework, tokens used, audit score, timestamp). Use compose_layout to assemble them into full pages.

Design Token Pipeline

Import tokens from Figma, Style Dictionary, or CSS custom properties. Export in any format. Tokens are automatically applied to generated components.

Framework Agnostic

All 13 tools support React, Vue, Svelte, Angular, and Web Components. One server, any framework.

Architecture

src/
  index.ts                          # Server entry (thin orchestrator)
  lib/
    types.ts                        # Shared TypeScript interfaces
    token-store.ts                  # In-memory design token state
    component-registry.ts           # Component tracking
    framework-templates.ts          # 5 framework component generators
    story-templates.ts              # CSF3 story templates + prop detection
    accessibility-rules.ts          # 12 WCAG audit rules
    performance-rules.ts            # 9 performance audit rules
    responsive-rules.ts             # 8 responsive design rules
    pattern-library.ts              # 12 component patterns
    browser.ts                      # Playwright lifecycle + URL validation
    validation.ts                   # Shared input validation
    utils.ts                        # Shared utilities (kebab, clamp, fileExt)
  tools/
    generate-component.ts           # + auto-audit + registry
    import-design-tokens.ts
    audit-component.ts
    auto-fix-component.ts
    inspect-page.ts
    visual-diff.ts
    generate-story.ts
    extract-figma-styles.ts
    export-tokens.ts
    clear-tokens.ts
    live-audit.ts
    responsive-preview.ts
    compose-layout.ts
    index.ts                        # Tool registry + dispatch
  resources/
    index.ts                        # 5 resources
  prompts/
    index.ts                        # 3 workflow prompts
tests/
  lib/                              # 11 library test files
  tools/                            # 12 tool test files

184 tests across 23 test files. All source files have dedicated test coverage.

Security

  • No code execution -- all markup parameters are analyzed via regex, never evaluated

  • URL validation blocks private IPs (127.x, 10.x, 172.16-31.x, 192.168.x, fe80::, fc00::, localhost)

  • Only HTTP/HTTPS schemes allowed for browser tools

  • Figma PAT is never stored, logged, or returned in responses (sanitized from error messages)

  • All string inputs have maxLength constraints enforced at runtime

  • No credential keywords in resource URIs

  • Input validation helper shared across all tool handlers

License

MIT

Available Tools

13 tools
audit_componentA

Audit HTML/JSX/Vue/Svelte markup for accessibility (WCAG), performance, and responsive design issues. Returns scored findings with fix suggestions.

ParametersJSON Schema
NameRequiredDescriptionDefault
markupYesHTML, JSX, Vue SFC, or Svelte markup to audit
frameworkNoFramework of the markup (affects parsing)html
categoriesNoAudit categories to run. Defaults to all three.
wcag_levelNoWCAG conformance levelAA
component_nameNoName of the component (for report labeling)

TDQS

A3.6/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden, and it does add one useful behavioral fact: the tool returns scored findings with fix suggestions. However, it omits whether this is purely static analysis (no runtime/rendered DOM), whether it mutates anything, and any size or rate constraints, so the disclosure is partial.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tightly packed sentences, front-loaded with the action and resource, then the return value. No filler, no redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

No output schema exists, but the description compensates by stating the return shape (scored findings with fix suggestions), and all parameters are documented in the schema. Minor gap: it does not clarify the static-vs-runtime nature of the analysis, which matters given the live_audit sibling.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so framework, categories, wcag_level, and component_name are already fully documented in the schema. The description adds no meaning beyond that baseline (e.g., how framework changes parsing or what happens when categories is omitted).

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Uses a specific verb ('Audit') with a clearly bounded resource ('HTML/JSX/Vue/Svelte markup') and enumerates the three analysis dimensions (accessibility/WCAG, performance, responsive). An agent can tell it is a static markup analyzer, but it never names or distinguishes itself from close siblings such as live_audit or auto_fix_component.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage is only implied: the input types suggest 'use this when you have source markup to check.' There is no statement of when to prefer it over live_audit (runtime page auditing) or auto_fix_component (applying fixes), nor any prerequisites or exclusions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

auto_fix_componentA

Automatically fix common accessibility and performance issues in markup based on audit findings. Returns the corrected markup with a list of applied fixes.

ParametersJSON Schema
NameRequiredDescriptionDefault
markupYesThe markup to fix
findingsYesArray of AuditFinding objects from audit_component

TDQS

A3.6/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description must carry behavioral disclosure. It usefully bounds scope to 'common' accessibility and performance issues and states the return value, implying a non-destructive transform that hands back markup. It does not say whether every finding will be fixed, what happens to unfixable findings, or whether anything is written to disk.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tight sentences: the fix behavior and its scope lead, followed by the return value. No padding or repetition of the schema.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter tool with no output schema and no annotations, the description covers purpose, scope limits, and the return shape (corrected markup plus applied-fix list). It is only mildly short on edge-case behavior such as findings it cannot auto-fix.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so both parameters (markup, findings) are already documented in the schema. The description adds no syntax, format, or size guidance beyond referencing 'audit findings', so the baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (fix) and resource (markup issues) scoped to accessibility and performance problems derived from audit findings. The phrase 'based on audit findings' effectively ties it to the audit_component sibling, though it does not name that sibling outright.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage is only implied: the input 'findings' come from an audit, so the natural workflow (audit_component then auto_fix_component) is inferable. There is no explicit statement of when to use this versus auditing again, nor when not to run it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

clear_tokensA

Clear all design tokens from the active token store. Use this to reset before importing a new set of tokens.

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.9/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It does disclose the destructive scope ('clear all design tokens from the active token store'), which is the key behavioral fact, but says nothing about reversibility, undo, permissions, or confirmation, leaving significant gaps for a destructive operation.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two short sentences, front-loaded with the action and scope, followed immediately by the use case. No filler or repetition.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a zero-parameter tool with no output schema and no annotations, the description covers purpose, scope, and intended timing adequately. It could add whether the operation is irreversible or what state remains after clearing, but nothing essential for invocation is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool takes zero parameters, so there are no parameter semantics to explain and the baseline of 4 applies. The description correctly implies no filtering options exist ('all tokens').

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource — 'Clear all design tokens from the active token store' — with scope ('all') and target ('active token store'). It implies differentiation from import_design_tokens via the reset scenario, but does not explicitly name or contrast sibling tools.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives a concrete situation for use: 'reset before importing a new set of tokens.' That is clear context, but there are no exclusions (e.g., what to do instead if you only want to remove a subset, or whether a backup/export is required first).

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

compose_layoutA

Compose a page layout from previously generated components in the registry. Produces a full page with imports, semantic structure, and skip navigation.

ParametersJSON Schema
NameRequiredDescriptionDefault
frameworkYesTarget framework for the composed page
component_namesYesArray of component names from the registry to compose into a page
layout_descriptionNoDescription of the page layout

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full behavioral burden. It discloses meaningful output traits (imports, semantic structure, skip navigation), which is more than a bare restatement, but it omits failure modes, permission/auth needs, or what happens when a component name is unknown.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with the core action and zero filler. Every clause earns its place by adding scope or output detail.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a three-parameter tool with no output schema and no annotations, the description usefully sketches the return artifact ('a full page with imports, semantic structure, and skip navigation'). It is still thin on edge cases and on the relationship between component_names and the framework's expected output.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% and the enum for framework is documented, so the schema does the heavy lifting. The description adds no parameter-level meaning (e.g., that component_names must match registry keys), so the baseline of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('Compose') and resource ('page layout') and scopes the source ('previously generated components in the registry'), which implicitly distinguishes it from the single-component sibling generate_component. It stops short of naming or directly contrasting with any sibling, but the resource is unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The phrase 'previously generated components in the registry' implies a precondition (components must already exist before composing), which is a useful usage cue. However, there is no explicit when-to-use vs. alternatives guidance, no mention of what to do if components are missing, and no routing to siblings such as generate_component.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

export_tokensB

Export active design tokens as CSS custom properties, JSON, or Style Dictionary format.

ParametersJSON Schema
NameRequiredDescriptionDefault
formatNoExport formatcss

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full behavioral burden. It hints that only 'active' tokens are exported, which is useful, but does not say whether output is returned inline or written to a file, nor whether the operation is read-only or mutating.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single front-loaded sentence with no filler; every clause (verb, resource, formats) earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple one-parameter tool with no output schema, the description covers purpose and formats adequately, but omits the delivery mechanism (return value vs. file) and any usage context, leaving a meaningful gap for an unannotated tool.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

With a single parameter at 100% schema coverage, the baseline is 3. The description restates the enum options and slightly clarifies what 'css' means (CSS custom properties), but adds little beyond the schema's own enum.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Names a specific verb (Export) and resource (active design tokens) and enumerates the three target formats. It implicitly contrasts with siblings like import_design_tokens and clear_tokens, but never explicitly distinguishes itself from them.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description never states when to export versus using an alternative sibling, nor any prerequisites or context of use. An agent must infer the appropriate moment to call it purely from the name.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

extract_figma_stylesA

Extract design tokens (colors, typography, effects) from a Figma file via the Figma REST API. Normalizes tokens and loads them into the active token store. Requires a Figma Personal Access Token.

ParametersJSON Schema
NameRequiredDescriptionDefault
node_idsNoOptional specific node IDs to extract. If omitted, extracts all published styles.
figma_patYesFigma Personal Access Token for API access. Not stored or logged. Generate at figma.com/developers/api#access-tokens
namespaceNoOptional prefix for extracted token CSS variables (e.g., 'figma' produces --figma-color-primary)
figma_file_keyYesThe Figma file key (alphanumeric ID from the file URL, e.g., 'abc123XYZ')
merge_strategyNoHow to handle conflicts with existing tokensreplace

TDQS

A3.5/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden and does reasonably well: it discloses that a Personal Access Token is required, that extraction goes through a remote REST API, and that tokens are normalized and written into the active token store (a mutating side effect). It still omits what happens to pre-existing tokens when merge_strategy is left at its default and any rate-limit/error behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three short sentences, purpose front-loaded, no filler. The final auth sentence partially duplicates the figma_pat schema description, which keeps it just short of ideal.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Covers source, destination, auth, and normalization for a 5-parameter tool with no annotations. The main gap is that no output schema exists and the description never indicates what the call returns or how success/failure is reported.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all five parameters are already documented in the schema, including the PAT, the namespace prefix, and the merge_strategy enum. The description adds nothing beyond 'Requires a Figma Personal Access Token', which the schema already states, so the baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (extract) and resource (design tokens: colors, typography, effects), names the source (Figma REST API) and the destination (active token store). This clearly separates it from generic token siblings, though it never explicitly contrasts itself with import_design_tokens.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No when-to-use guidance, no exclusions, and the obviously related sibling import_design_tokens is never referenced. The agent must infer that this tool is the Figma-specific path and that other importers cover other sources.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_componentA

Generate a production-ready UI component in any framework (React, Vue, Svelte, Angular, Web Components) from a natural language description. Uses active design tokens if loaded.

ParametersJSON Schema
NameRequiredDescriptionDefault
sizeNoSize presetmd
variantNoVisual variant styledefault
frameworkYesTarget UI framework for the generated component
auto_auditNoAutomatically audit the generated component and report findings (default: true)
responsiveNoInclude responsive breakpoint styles
descriptionYesNatural language description of the component (e.g., 'a card with image, title, description, and action buttons')
include_testsNoGenerate a companion test file
component_nameYesPascalCase name for the component (e.g., 'ProductCard')
include_stylesNoInclude CSS styles using active design tokens

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses two useful traits: output is 'production-ready' and token-aware ('uses active design tokens if loaded'). It does not explain side effects (does it write files?), what auto_audit actually does at runtime, or auth/permission needs.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tightly packed sentences with no filler; the core action is front-loaded and the token dependency is stated second as a qualifier.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a 9-parameter generator with no output schema and no annotations, the description is merely adequate. It never describes what the tool returns (code snippet, file path?) or how include_tests/auto_audit manifest, leaving those to the schema alone.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all nine parameters are already documented by the schema, including enums and defaults. The description adds no syntax or format detail beyond restating the framework list, so the baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (Generate) and resource (UI component) and enumerates the supported frameworks, so the agent knows exactly what it produces. It does not name or contrast against siblings like generate_story or compose_layout, but the purpose itself is unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage is implied by the generation verb, and the phrase 'Uses active design tokens if loaded' hints at a precondition (run import_design_tokens first). However, there is no explicit when-to-use versus alternatives guidance and no exclusion conditions.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_storyB

Auto-generate a Storybook story file (CSF3 format) for a UI component. Detects props from code, includes default story, variant stories, play functions, and accessibility addon config.

ParametersJSON Schema
NameRequiredDescriptionDefault
frameworkYesFramework the component is written in
story_titleNoStorybook story title/path (e.g., 'Components/ProductCard'). Defaults to 'Components/{component_name}'
component_codeYesFull source code of the component to generate stories for
component_nameYesPascalCase name of the component (e.g., 'ProductCard')

TDQS

B3.3/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It usefully discloses the generated output shape (CSF3, default + variant stories, play functions, a11y addon config), but says nothing about whether a file is written to disk, its path, overwrite behavior, or error conditions for unsupported frameworks.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tight sentences, front-loaded with the action and artifact format, then the contents. No filler or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a generation tool with no annotations and no output schema, the description explains what the artifact contains but omits where it is written, what the tool returns, and any failure modes. Adequate but with clear gaps for an agent invoking it.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all four parameters are already documented, including the framework enum and the story_title default. The phrase 'Detects props from code' hints that component_code is parsed, but no param-level detail is added beyond the schema, so the baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb ('Auto-generate') and resource ('Storybook story file (CSF3 format) for a UI component'), and enumerates the artifact contents (default story, variant stories, play functions, a11y config). It is distinguishable from generate_component, but it never names that sibling explicitly, so the differentiation is left implicit.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no when-to-use guidance, no prerequisites (e.g., must exist alongside generate_component), and no alternatives named among the many siblings. The only implied context is 'for a UI component', which is too thin to route an agent between this and generate_component.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

import_design_tokensA

Import design tokens from Figma Tokens JSON, Style Dictionary, or CSS custom properties into the active token store. Imported tokens are used by generate_component for styling.

ParametersJSON Schema
NameRequiredDescriptionDefault
formatYesFormat of the provided token data
namespaceNoOptional prefix for all imported tokens (e.g., 'brand' produces --brand-color-primary)
tokens_jsonYesRaw JSON string of design tokens. Supports Figma Tokens, Style Dictionary, or flat CSS custom properties format.
merge_strategyNoHow to handle conflicts with existing tokens. 'replace' clears all. 'merge-overwrite' overwrites conflicts. 'merge-keep' keeps existing.replace

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full behavioral burden. It usefully discloses the destination store and the downstream consumer, but says nothing about whether the import mutates/overwrites existing tokens, permission needs, or failure behavior for invalid JSON; the merge semantics live only in the schema.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, zero waste, and the core action plus destination are front-loaded before the downstream-use note. Nothing is padded or redundant.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a mutation tool with no annotations and no output schema, the definition should disclose more about side effects and results. Parameters are well covered by the schema, but the lack of any indication of overwrite risk, auth requirements, or return shape leaves a meaningful gap.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all four parameters including the merge_strategy enum values and the namespace example. The description adds no syntax or format detail beyond what the schema provides, so baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (Import) and resource (design tokens) and names the three supported source formats plus the destination (active token store). It is clear what the tool does, though it does not explicitly contrast itself with the related sibling extract_figma_styles, which an agent could easily confuse with this tool.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage is only implied: the agent can infer this is the tool for bringing external token data in, and the description notes the downstream consumer (generate_component). There is no explicit when-to-use guidance and no exclusion versus extract_figma_styles or clear_tokens/export_tokens.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

inspect_pageB

Inspect a live web page using a headless browser. Extracts accessibility tree, component structure, performance metrics, and an optional screenshot. Requires Playwright (optional dependency).

ParametersJSON Schema
NameRequiredDescriptionDefault
wait_forNoWhen to consider the page loadedload
target_urlYesThe URL to inspect (http:// or https:// only). Private/internal addresses are blocked.
timeout_msNoNavigation timeout in milliseconds (5000-60000)
viewport_widthNoViewport width in pixels (320-3840)
viewport_heightNoViewport height in pixels (240-2160)
include_screenshotNoInclude a base64 PNG screenshot in the response

TDQS

B3.4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are supplied, so the description carries the full disclosure burden. It does reveal the payload (accessibility tree, component structure, performance metrics, optional screenshot) and the Playwright dependency, and inspection is inherently read-only, but it says nothing about runtime cost, latency of a headless navigation, failure modes, or whether the call has side effects against the target site.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tightly written sentences: the operation is front-loaded in sentence one, and sentence two covers output and the dependency. Nothing is redundant or padded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a six-parameter, read-only inspection tool with no output schema and no annotations, the description supplies the missing return-value context (what gets extracted) and a dependency prerequisite. The remaining gap is disambiguation from near-neighbor siblings, but the operational picture is otherwise sufficient.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% and all six parameters (including enum, ranges, and defaults) are documented in the schema itself. The description only restates that a screenshot is optional, adding no syntax, format, or interaction detail beyond what the schema already provides — the baseline of 3 is correct.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description gives a specific verb ('Inspect') and resource ('a live web page using a headless browser'), plus an enumeration of what it extracts. It is clear what the tool does, but it never distinguishes itself from plausible siblings such as live_audit, visual_diff, or responsive_preview, which an agent would have to guess between.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no statement of when to reach for this tool versus the audit/preview siblings, nor any exclusion guidance. The only contextual information is a dependency note ('Requires Playwright (optional dependency)'), which reads more like an environment caveat than usage direction.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

live_auditB

Audit a live web page by navigating to it and running accessibility, performance, and responsive checks on the rendered HTML. Requires Playwright.

ParametersJSON Schema
NameRequiredDescriptionDefault
categoriesNoAudit categories to run
target_urlYesURL to audit (http/https only, private IPs blocked)
wcag_levelNoWCAG conformance levelAA

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries full burden. It mentions 'Requires Playwright' which is useful context about external dependencies. However, it doesn't disclose whether the audit is read-only, if it has side effects (e.g., page navigation), performance impact, timeout behavior, or what the output looks like. For a live navigation tool, these are significant omissions.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, front-loaded with the main action and scope, then the dependency requirement. No wasted words; efficient and clear.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with no annotations, no output schema, and 3 parameters (all schema-documented), the description is adequate but incomplete. It doesn't explain what the audit returns, whether it modifies state, or how it differs from sibling tools. The Playwright requirement is helpful but insufficient for full behavioral disclosure.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all three parameters including enum values and defaults. The description adds no additional parameter meaning beyond what's in the schema. Baseline 3 is appropriate when schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a clear verb (audit), resource (a live web page), and scope (accessibility, performance, and responsive checks on rendered HTML). It distinguishes itself from audit_component by specifying 'live web page' with navigation. The only minor gap is that it doesn't explicitly contrast with inspect_page or visual_diff.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage by requiring Playwright and navigating to a URL, but doesn't state when to use this over audit_component or inspect_page. No explicit when-to-use or when-not-to-use guidance is provided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

responsive_previewA

Screenshot a URL at mobile (375px), tablet (768px), and desktop (1280px) viewports for responsive comparison. Requires Playwright.

ParametersJSON Schema
NameRequiredDescriptionDefault
target_urlYesURL to preview (http/https only, private IPs blocked)

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It usefully discloses the exact viewport widths and the Playwright runtime dependency, but omits whether output is inline images or file paths, how page-load readiness is handled, and any auth or rate-limit behavior for a read-style capture.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two tight sentences, front-loaded with the action and viewport specifics; the prerequisite follows. No filler or redundancy.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a single-parameter capture tool with no annotations and no output schema, the description covers what is captured and the Playwright requirement, but leaves the return format (images vs. saved files) unspecified, which is the main thing an agent still needs to know.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Only one parameter and schema coverage is 100%: the schema already documents target_url, its maxLength, http/https restriction, and private-IP blocking. The description adds nothing about the parameter, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb (Screenshot) and resource (a URL), plus the exact scope: three named viewports with pixel widths. An agent immediately knows the output is a responsive-comparison capture, though it never names the nearby siblings (visual_diff, inspect_page) to disambiguate.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The phrase 'for responsive comparison' implies the intended use case, but there is no explicit when-to-use guidance, no exclusions, and no pointer to an alternative such as visual_diff or inspect_page when only one viewport or a diff is wanted.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

visual_diffA

Compare two PNG screenshots pixel-by-pixel for visual regression testing. Returns diff statistics including changed pixel count and percentage. Does not require Playwright.

ParametersJSON Schema
NameRequiredDescriptionDefault
thresholdNoPer-channel difference threshold (0-255) below which pixels are considered identical
after_imageYesBase64-encoded PNG of the 'after' snapshot (no data URI prefix)
before_imageYesBase64-encoded PNG of the 'before' snapshot (no data URI prefix)

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses the return shape (changed pixel count and percentage) and a dependency fact (Playwright not required), which is genuinely useful, but says nothing about whether a diff image is produced, side effects, or processing limits for large images.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Three short sentences with zero filler; the core action is front-loaded and each sentence adds a distinct fact (action, return, dependency).

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-image comparison tool with no output schema and no annotations, the description covers the action, inputs (base64 PNGs, inferable from schema), and return summary. It is nearly complete, only lacking detail on the optional threshold's effect and whether image artifacts are emitted.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the threshold, before_image, and after_image parameters are already documented in the schema. The description adds no additional parameter meaning (e.g., how threshold interacts with the reported percentage), so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resources ('Compare two PNG screenshots pixel-by-pixel') plus the domain ('visual regression testing'). No sibling tool does image-to-image comparison, so the agent can route to it without opening the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The 'for visual regression testing' phrase implies the use case, and 'Does not require Playwright' hints at an alternative execution path, but no explicit when-to-use vs when-not guidance or named alternative tool is given.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 13 tool updatesv2.0.1
    • First observedaudit_component
    • First observedauto_fix_component
    • First observedclear_tokens
    • First observedcompose_layout
    • First observedexport_tokens
    • First observedextract_figma_styles
    • First observedgenerate_component
    • First observedgenerate_story
    • First observedimport_design_tokens
    • First observedinspect_page
    • First observedlive_audit
    • First observedresponsive_preview
    • First observedvisual_diff

TDQS

A3.6/5.0

Scored across 13 tools

Disambiguation4/5

Most tools have clearly distinct purposes (generation, token management, auditing, layout composition). A few pairs could be confused: audit_component vs live_audit (static markup vs live page) and import_design_tokens vs extract_figma_styles (both load tokens into the store), but the descriptions clearly differentiate them.

Naming Consistency4/5

Consistent snake_case throughout with a mostly predictable verb_noun pattern (generate_component, import_design_tokens, audit_component, clear_tokens, export_tokens). A handful lean noun-based (visual_diff, live_audit, responsive_preview), a minor deviation but still readable and coherent.

Tool Count5/5

13 tools is well within the ideal 3-15 range and each maps to a distinct capability in the UI workflow (generation, tokens, audit, fix, storybook, layout, visual testing). No filler tools appear present.

Completeness4/5

The surface covers a broad lifecycle: token import/extract/export/clear, component generation, static and live auditing, auto-fix, storybook generation, responsive preview, visual diff, and layout composition. Minor gaps exist (no explicit component registry/list or delete operations), but core workflows are covered.

Maintenance

ActivityInactive
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers