Skip to main content
Glama
denizzeybek-fe

Insider Design System MCP

๐ŸŽจ Insider Design System MCP

Automated Model Context Protocol server for the Insider Design System. Enables AI assistants like Claude to discover, understand, and generate code for 60+ Design System components with automated extraction from source code.

Version: 2.0 (Automated Extraction) Status: โœ… Production Ready Last Updated: 2025-11-21


โœจ Features

๐Ÿค– Automated Extraction

  • Zero Manual Work: Automatically extracts component metadata from Vue source files

  • Always Up-to-Date: Re-run extraction when Design System changes (~5 minutes)

  • Rich Metadata: Props, emits, enums, validators, slots - all extracted automatically

๐Ÿ“Š Comprehensive Data

  • 62 Components: Full coverage of Insider Design System

  • 1,087 Props: With types, defaults, and validators

  • 30 Enums: STYLES, TYPES, SIZES automatically detected

  • Real Usage Analysis: Common mistakes detected from analytics-fe codebase

  • Manual Enrichments: Critical components have detailed examples and notes

๐Ÿ”ง MCP Tools

  • list-components - List all components

  • get-component - ๐Ÿ†• Markdown format - Get component info in human-readable format with 77% token savings

  • search-components - Search by name/description

  • generate-code - Generate Vue component code

  • map-figma-component - Map Figma to DS components

โšก Markdown Format (NEW!)

The get-component tool now returns component documentation in Markdown format for massive token savings:

Benefits:

  • ๐Ÿ’ฐ 77% token savings compared to JSON format (690KB โ†’ 161KB)

  • ๐Ÿ“– Human-readable format with clear structure

  • ๐ŸŽฏ ~135,335 tokens saved across all components

  • โšก Faster responses with smaller payloads

Top Performers:

  • InButtonV2: 88% savings (55KB โ†’ 6.6KB)

  • InDropdownMenu: 87% savings (36KB โ†’ 4.8KB)

  • InTooltipV2: 86% savings (31KB โ†’ 4.2KB)

Format includes:

  • Props with types, defaults, descriptions

  • Events with payloads

  • Examples with code snippets

  • Common mistakes and best practices

  • Related components

๐Ÿ“š MCP Resources

  • ds://components - All components list

  • ds://registry - Registry metadata

  • ds://component/{name} - Individual component

  • ds://categories - Component categories


Related MCP server: BrowserStack Design Stack MCP Server

๐Ÿ“– Documentation

โ†’ See docs/ for complete documentation index


๐Ÿš€ Quick Start

Prerequisites

  • Node.js >= 20.0.0

  • npm >= 10.0.0

Installation

# Clone repository
git clone <repo-url>
cd design-system-mcp

# Install dependencies
npm install

# Extract component metadata (first time)
npm run extract:all

# Build
npm run build

# Test
npm run test:production

Need help with extraction scripts? See WORKFLOW.md for detailed usage guide.


โš™๏ธ Configuration

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "design-system": {
      "command": "node",
      "args": ["/Users/YOUR_USERNAME/path/to/design-system-mcp/dist/index.js"]
    }
  }
}

Environment Variables

# Design System source path (for extraction)
export DS_PATH="/Users/YOUR_USERNAME/path/to/insider-design-system"

# Analytics FE path (for usage analysis)
export ANALYTICS_FE_PATH="/Users/YOUR_USERNAME/path/to/analytics-fe"

๐Ÿ”„ Data Extraction Pipeline

Architecture

Design System Source Code (Vue files)
         โ†“ AUTOMATED EXTRACTION
data/combined.json (209 KB)
         โ†“ BUILD & COPY
dist/data/combined.json
         โ†“ RUNTIME LOADING
MCP Server (in-memory, enum-resolved)
         โ†“ FAST QUERIES
Claude Code

Extraction Commands

# Extract all data (run when Design System changes)
npm run extract:all

# Or run individually:
npm run extract:components  # Parse Vue components โ†’ data/components.json
npm run extract:storybook   # Extract examples โ†’ data/storybook.json
npm run extract:usage       # Analyze usage โ†’ data/usage.json
npm run extract:argtypes    # Sync possibleValues from storybook argTypes
npm run extract:merge       # Merge all โ†’ data/combined.json

# Rebuild MCP server
npm run build

What Gets Extracted?

1. Component Metadata (extract-components.ts)

  • Props (type, default, required, validator)

  • Emits (from $emit() calls)

  • Enums (const STYLES = {...})

  • Slots

  • Version (V1/V2)

2. Storybook Examples (extract-storybook.ts)

  • Code examples from stories

  • Descriptions

  • Categories

3. Real Usage Analysis (extract-usage.ts)

  • Usage counts from analytics-fe

  • Common mistakes (auto-detected)

  • Most used props

  • Real code patterns

4. Manual Enrichments (overlay)

  • Detailed valueFormat for critical props

  • Common mistakes documentation

  • Helper functions

  • Migration guides


๐Ÿ“– Usage Examples

๐ŸŽฏ Complete Walkthrough: From Raw Request to Implementation

Scenario: You need a button that opens a dropdown menu.

Step 1: Optimize Your Raw Request

# In Claude Code (works in ANY project with Design System MCP!)
User: "Use optimize-prompt to transform this request: I need a button that opens a dropdown menu"

Claude calls mcp__design-system__optimize-prompt and returns:

# Original Prompt
I need a button that opens a dropdown menu

# Analysis
- Language: English
- Intent: implement
- Components: InButtonV2, InDropdownMenu
- Complexity: medium
- Estimated Token Savings: ~24,000 tokens

# Optimized Prompt
I need to implement InButtonV2 and InDropdownMenu components with proper integration.

Please use the Design System MCP to:

1. Get documentation for both components
   - Tool: mcp__design-system__get-component
   - Components: InButtonV2, InDropdownMenu
   - Note: Markdown format saves ~87% tokens on average

2. Generate implementation code
   - Tool: mcp__design-system__generate-code
   - Include integration between components

Requirements:
- Primary styling for main actions
- Dropdown opens below trigger element
- Proper state management between components

Show me:
โœ… Which components you're using
โœ… Token savings from Markdown format for each component
โœ… The generated Vue code
โœ… Integration example showing how components work together

Step 2: Use the Optimized Prompt

User: "Now use the optimized prompt above to implement the button + dropdown"

Claude executes:

  1. Gets InButtonV2 docs (Markdown format)

    • Original: 55KB JSON โ†’ 6.6KB Markdown

    • Token savings: 88% (~12,198 tokens)

  2. Gets InDropdownMenu docs (Markdown format)

    • Original: 36KB JSON โ†’ 4.8KB Markdown

    • Token savings: 87% (~8,214 tokens)

  3. Generates integrated Vue code:

<template>
  <div class="button-dropdown-container">
    <InButtonV2
      id="actions-button"
      :type="TYPES.PRIMARY"
      :styling="STYLES.SOLID"
      label-text="Actions"
      @click="toggleDropdown"
    />

    <InDropdownMenu
      v-if="isOpen"
      :items="menuItems"
      @item-click="handleItemClick"
      @close="isOpen = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { InButtonV2, InDropdownMenu } from '@useinsider/design-system-vue';
import '@useinsider/design-system-vue/dist/design-system-vue.css';

const isOpen = ref(false);

const menuItems = [
  { id: 'export', label: 'Export Data', icon: 'download' },
  { id: 'share', label: 'Share Report', icon: 'share' },
  { id: 'settings', label: 'Settings', icon: 'settings' },
];

const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
};

const handleItemClick = (item: any) => {
  console.log('Clicked:', item.id);
  isOpen.value = false;
};
</script>

Summary

Total token savings: ~20,412 tokens (87.5% reduction) Time saved: Claude uses the right tools in the right order Quality: Proper integration, best practices included


๐Ÿ’ก Pro Tips

Always optimize raw requests first:

โŒ Don't do this:

User: "I need a button"

Claude searches through code files, wastes time.

โœ… Do this:

User: "Use optimize-prompt: I need a button"

Claude gets optimized prompt โ†’ Uses MCP tools โ†’ Fast & accurate implementation.

Works everywhere:

  • โœ… analytics-fe project

  • โœ… marketing-web project

  • โœ… customer-portal project

  • โœ… ANY project with Design System MCP configured


๐ŸŽฏ Quick Reference: optimize-prompt

// Single component
mcp__design-system__optimize-prompt("I need a button")

// Multiple components
mcp__design-system__optimize-prompt("button and dropdown menu")

// Migration task
mcp__design-system__optimize-prompt("migrate InDatePicker from V1 to V2")

// Debug issue
mcp__design-system__optimize-prompt("InSelect not working, showing errors")

// Learning
mcp__design-system__optimize-prompt("how to use InTooltipV2?")

Get Component Details

// Claude automatically calls:
mcp__design-system__get-component("InButtonV2")

// Returns in Markdown format (88% token savings):
# InButtonV2

**Version:** v2

## Props

### `styling`
**Type:** `String` | **Default:** `"STYLES.SOLID"`

**Allowed values:** `solid`, `ghost`, `text`

### `type`
**Type:** `String` | **Default:** `"TYPES.PRIMARY"`

...

## Examples

### Basic Primary Button
```vue
<InButtonV2
  id="primary-btn"
  styling="solid"
  type="primary"
  label-text="Click Me"
/>

Token savings: 55KB โ†’ 6.6KB (88% reduction)


### Search Components

```typescript
mcp__design-system__search-components("button")
// Returns: InButton, InButtonV2, InCreateButton...

Generate Code

mcp__design-system__generate-code({
  component: "InButtonV2",
  props: { styling: "solid", type: "primary" }
})

// Returns:
// <InButtonV2
//   id="button-1"
//   styling="solid"
//   type="primary"
//   label-text="Button"
// />

๐Ÿงช Testing

# Test combined dataset
npm run test:data

# Test production build
npm run test:production

# Run unit tests
npm test

# Coverage
npm run test:coverage

๐Ÿ“‚ Project Structure

design-system-mcp/
โ”œโ”€โ”€ ๐Ÿ“„ README.md                      # This file
โ”œโ”€โ”€ ๐Ÿ“„ COMPLETION_REPORT.md           # Full project report
โ”œโ”€โ”€ ๐Ÿ“„ HOW_IT_WORKS.md                # Architecture deep dive
โ”œโ”€โ”€ ๐Ÿ“„ CLEANUP_SUMMARY.md             # Cleanup history
โ”œโ”€โ”€ ๐Ÿ“ฆ package.json                   # Dependencies & scripts
โ”œโ”€โ”€ ๐Ÿ”ง tsup.config.ts                 # Build configuration
โ”‚
โ”œโ”€โ”€ ๐Ÿ“‚ src/                           # Source code
โ”‚   โ”œโ”€โ”€ index.ts                      # Entry point
โ”‚   โ”œโ”€โ”€ server.ts                     # MCP server
โ”‚   โ”œโ”€โ”€ tools/index.ts                # MCP tools
โ”‚   โ”œโ”€โ”€ resources/index.ts            # MCP resources
โ”‚   โ”œโ”€โ”€ types/index.ts                # TypeScript types
โ”‚   โ””โ”€โ”€ registry/
โ”‚       โ”œโ”€โ”€ combined-loader.ts        # โญ Dataset loader (NEW)
โ”‚       โ”œโ”€โ”€ enrichments/              # Manual enrichments
โ”‚       โ”‚   โ”œโ”€โ”€ InButtonV2.json
โ”‚       โ”‚   โ”œโ”€โ”€ InDatePickerV2.json
โ”‚       โ”‚   โ””โ”€โ”€ InSelect.json
โ”‚       โ””โ”€โ”€ migrations/               # V1โ†’V2 guides
โ”‚           โ””โ”€โ”€ InDatePicker-to-V2.json
โ”‚
โ”œโ”€โ”€ ๐Ÿ“‚ scripts/                       # Extraction scripts
โ”‚   โ”œโ”€โ”€ extract-components.ts         # Vue component parser
โ”‚   โ”œโ”€โ”€ extract-storybook.ts          # Example extractor
โ”‚   โ”œโ”€โ”€ extract-usage.ts              # Usage analyzer
โ”‚   โ””โ”€โ”€ merge-datasets.ts             # Dataset combiner
โ”‚
โ”œโ”€โ”€ ๐Ÿ“‚ data/                          # Extracted data
โ”‚   โ”œโ”€โ”€ components.json               # 148 KB - Parsed components
โ”‚   โ”œโ”€โ”€ storybook.json                # 1.6 KB - Examples
โ”‚   โ”œโ”€โ”€ usage.json                    # Real usage data
โ”‚   โ””โ”€โ”€ combined.json                 # 209 KB - โญ FINAL DATASET
โ”‚
โ””โ”€โ”€ ๐Ÿ“‚ dist/                          # Build output
    โ”œโ”€โ”€ index.js                      # Bundled MCP server
    โ””โ”€โ”€ data/combined.json            # Runtime dataset

๐Ÿ”„ Update Workflow

When Design System Changes

# 1. Pull latest Design System
cd /path/to/insider-design-system
git pull

# 2. Re-extract metadata
cd /path/to/design-system-mcp
npm run extract:all          # ~5 minutes

# 3. Rebuild MCP server
npm run build

# 4. Test
npm run test:production

# 5. Commit (optional)
git add data/combined.json
git commit -m "chore: update component metadata"
git push

# Claude Desktop will auto-reload! โœ…

Before: 2-3 hours manual work Now: 5 minutes automated! ๐Ÿš€

For more scenarios and detailed workflow guide, see WORKFLOW.md.


๐Ÿ’ก Key Innovations

1. Automated Extraction

No more manual JSON editing. Parser reads Vue files directly.

2. Enum Resolution

// Source: const STYLES = { SOLID: 'solid', GHOST: 'ghost' }
// Extracted: enums: [{ name: "STYLES", values: {...} }]
// Runtime: validValues: ["solid", "ghost", "text"] โœ…

3. Real Usage Intelligence

Scans analytics-fe for common mistakes:

{
  "mistake": "Using number for iconSize",
  "occurrences": 12,
  "fix": "Use string: icon-size=\"24\"",
  "severity": "critical"
}

4. Layered Enrichment

Auto-extracted (100% coverage)
    +
Manual enrichments (critical details)
    =
Best of both worlds! โœ…

๐Ÿ“Š Data Quality

Components: 62 (100% coverage)
Props: 1,087 (with types, defaults, validators)
Enums: 30 (automatically detected)
Emits: 170
Manual Enrichments: 3 (InButtonV2, InDatePickerV2, InSelect)
Migration Guides: 1
File Size: 209 KB (combined.json)

๐ŸŽฏ Benefits

For Developers

  • โœ… Accurate component information

  • โœ… Enum values always correct

  • โœ… Common mistakes documented

  • โœ… Real usage examples

  • โœ… Fast code generation

For Design System Team

  • โœ… Zero manual maintenance

  • โœ… Always synchronized with source

  • โœ… Easy updates (5 minutes)

  • โœ… Automatic mistake detection

Expected Impact

  • Code Generation Accuracy: 30% โ†’ 85%

  • First-Try Correctness: 20% โ†’ 80%

  • Onboarding Time: -70%

  • Design System Questions: -50%


๐Ÿ› ๏ธ Development

Scripts

# Build
npm run build              # Build for production
npm run dev                # Watch mode

# Extraction
npm run extract:components # Extract component metadata
npm run extract:storybook  # Extract examples
npm run extract:usage      # Analyze real usage
npm run extract:merge      # Merge all datasets
npm run extract:all        # Run all extractions

# Testing
npm test                   # Run unit tests
npm run test:coverage      # Coverage report
npm run test:data          # Test dataset validity
npm run test:production    # Test production build

# Code Quality
npm run lint               # Run ESLint
npm run lint:fix           # Fix linting issues
npm run typecheck          # TypeScript check

Adding New Enrichments

Option 1: Use enrichment-maker agent (Recommended)

# Let AI generate enrichment for you
# In Claude Code: "Use enrichment-maker agent to create enrichment for InTooltipV2"

# Agent analyzes component and creates:
# - valueFormat for complex props
# - commonMistakes documentation
# - Real-world examples
# - Helper functions

# Then merge and build:
npm run extract:merge
npm run build

Option 2: Manual creation

# 1. Create enrichment file
touch src/registry/enrichments/InTooltipV2.json

# 2. Add detailed metadata
# (See existing enrichments: InButtonV2, InDatePickerV2, InSelect)

# 3. Rebuild
npm run extract:merge
npm run build

๐Ÿ“š Documentation

  • README.md (this file) - Quick start & overview

  • WORKFLOW.md - โญ When and how to run extraction scripts

  • AGENT_USAGE.md - ๐Ÿค– How to use agents and slash commands

  • HOW_IT_WORKS.md - Architecture deep dive

  • COMPLETION_REPORT.md - Full project report

  • CLEANUP_SUMMARY.md - Cleanup history

  • CLAUDE.md - Instructions for Claude Code


๐Ÿค Contributing

  1. Fork the repository

  2. Create feature branch: git checkout -b feature/amazing

  3. Make changes

  4. Run tests: npm test

  5. Commit: git commit -m "feat: add amazing feature"

  6. Push: git push origin feature/amazing

  7. Submit Pull Request


๐Ÿ“„ License

UNLICENSED - Internal use only (Insider)


๐Ÿ’ฌ Support

For questions and issues:

  • Create GitHub issue

  • Contact Design System team

  • Slack: #design-system


๐ŸŽ‰ Success Stories

"Component metadata is now always accurate. Claude generates correct code on first try!" โ€” Developer using MCP

"We updated 15 components in Design System. Re-extraction took 5 minutes!" โ€” Design System Team


Built with โค๏ธ by the Insider Design System Team

Powered by: Claude Code (Sonnet 4.5)

Available Tools

14 tools
convert-figma-to-vueB

Convert a Figma frame/screen to Vue component code using Design System components

ParametersJSON Schema
NameRequiredDescriptionDefault
frameYesFigma frame data
optionsNo

TDQS

B3.2/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 burden of explaining behavior. It states that conversion happens, but does not disclose whether this is one-way, whether it modifies Figma files, whether mapping to Design System components is required, or what the generated output contains beyond 'Vue component code'.

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 clear sentence with no filler. The main action, input, output, and design-system constraint are all front-loaded and every word earns its place.

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

Completeness2/5

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

The tool has no annotations, no output schema, nested parameters, and several similar sibling tools, so the description needs to carry more weight. It does not explain the return format, generation behavior, prerequisites, or how this differs from related code-generation tools, leaving an agent with meaningful uncertainty.

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?

The description reinforces the primary input (Figma frame) and adds the design-system context, but it adds little detail about the options object. The schema already describes scriptLang, componentName, includeScript, and includeComments; with only 50% schema description coverage, the description offers only marginal compensation for the less-documented option parameter.

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?

The description names a specific verb ('Convert'), a concrete input ('Figma frame/screen'), a concrete output ('Vue component code'), and a distinguishing constraint ('using Design System components'). This clearly differentiates it from siblings like generic generate-code or map-figma-component.

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 gives no guidance on when to choose this tool over alternatives such as generate-code, generate-figma-component, or map-figma-component. It does not state exclusions, prerequisites, or context for appropriate use.

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

generate-codeC

Generate Vue component code with the specified props

ParametersJSON Schema
NameRequiredDescriptionDefault
propsNoProps to set on the component
componentYesComponent name
includeScriptNoInclude script setup section (default: true)

TDQS

C2.9/5.0
Behavior2/5

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

With no annotations provided, the description carries the full burden of behavioral disclosure. It does not state whether the generated code is returned only, whether it has side effects, whether the component must already exist, or what the output format looks like. 'Generate' implies code creation but leaves important behavior unspecified.

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?

The description is a single efficient sentence with no filler or repetition. It front-loads the primary purpose and keeps the core information immediately visible, though it is arguably too terse to fully support the tool's complexity.

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

Completeness2/5

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

There is no output schema and no annotation metadata, so the description must carry more context. It does not state what the tool returns (e.g., code string, file, snippet), how the optional includeScript affects output, or how this tool fits with related component tools. Given three parameters and a nested object, this is incomplete.

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 adequately. The description adds only the phrase 'with the specified props', which confirms the props parameter's purpose but does not meaningfully exceed the schema's own explanations.

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 specific action ('Generate'), a clear resource ('Vue component code'), and a key input ('specified props'). It is not a tautology and conveys the core function. However, it does not explicitly distinguish itself from the similar sibling 'generate-figma-component', so the differentiation is left to inference.

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 guidance is given about when to use this tool versus alternatives such as get-component, get-examples, or generate-figma-component. The description only states what it does, leaving the agent to infer when it is the appropriate choice in a workflow.

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

generate-figma-componentC

Generate Vue code for a single Figma component with specific properties

ParametersJSON Schema
NameRequiredDescriptionDefault
propertiesNoFigma component properties
instanceNameNoInstance name for ID generation
figmaComponentNameYesFigma component name (e.g., "Button/Primary")

TDQS

C2.9/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 burden of behavioral disclosure. It only states that Vue code is generated; it does not mention side effects, output format, dependencies, or whether a Figma mapping is required beforehand.

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?

The description is a single sentence with no filler and the action verb is front-loaded. It is concise and readable, though slightly under-specified; every word earns its place.

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

Completeness2/5

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

With no output schema and no annotations, the description leaves return format, behavior, and invocation context unclear. For a tool with three parameters and thirteen siblings, this one-liner is not sufficient for reliable selection and correct use.

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?

The schema has 100% description coverage for all three parameters, so the baseline is 3. The description adds little beyond the schema; 'with specific properties' loosely corresponds to the properties parameter but does not clarify how figmaComponentName, properties, and instanceName interrelate.

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 uses a specific verb ('Generate') and a clear resource ('Vue code for a single Figma component'), so the core action is understandable. However, it does not distinguish itself from siblings like generate-code or convert-figma-to-vue, leaving potential ambiguity about which tool to choose.

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 guidance about when to use this tool versus nearby alternatives such as generate-code, get-component, or convert-figma-to-vue. The description gives no use-case context, no exclusions, and no selection criteria.

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

get-componentA

Get detailed information about a specific Design System component in Markdown format.

Returns component documentation in human-readable Markdown format with:
- Props with types, defaults, and descriptions
- Events with payloads
- Examples with code snippets
- Common mistakes and best practices
- Related components

Note: Markdown format provides 77% token savings compared to JSON.
ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesComponent name (e.g., InButton, InDatePickerV2)

TDQS

A4/5.0
Behavior4/5

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

With no annotations, the description takes on the full burden of explaining behavior. It clearly discloses the output format (Markdown), the content sections (props, events, examples, mistakes, related components), and the notable behavioral trait of 77% token savings versus JSON. This goes beyond a generic 'get' description and informs the agent of efficiency implications. It does not disclose potential response size or pagination, but the content list and token-savings hint provide strong transparency.

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?

The description is well-structured and front-loaded: the core purpose is in the first sentence, followed by a concise bullet-style list of content, and a final note about token efficiency. Every sentence adds value; 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 single-parameter read tool with no output schema, the description is quite complete. It outlines exactly what the response will contain and even addresses the format/token trade-off. Minor omissions include not mentioning error conditions (e.g., unknown component name) or whether output includes 'when to use' guidance, but these are not significant given the tool's simplicity.

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?

The single parameter 'name' already has a description in the schema with examples (e.g., InButton, InDatePickerV2), so schema coverage is 100%. The tool description adds no extra parameter-level detail beyond what the schema provides, warranting the baseline score of 3.

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, resource, and format: 'Get detailed information about a specific Design System component in Markdown format.' Distinguishes itself from sibling tools like list-components, get-props, get-events, get-examples by emphasizing its comprehensive nature and Markdown output, which is a clear differentiator.

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: call this tool when you need complete component documentation in a single, token-efficient Markdown response. It does not explicitly state when to prefer this over get-props, get-events, or get-examples, nor does it describe when one of those narrower tools would be more appropriate. The token savings note provides some decision context but falls short of explicit routing guidance.

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

get-ds-for-figmaC

Get Design System component information for a Figma component name

ParametersJSON Schema
NameRequiredDescriptionDefault
figmaComponentNameYesFigma component name

TDQS

C2.9/5.0
Behavior2/5

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

No annotations are provided, so the description bears the full burden of behavioral disclosure. It only says 'Get ... information,' which implies a read operation, but it does not describe the return shape, error behavior, or what happens when the component is not found or mapped to a design system.

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?

The description is a single, front-loaded sentence with no redundant words. It is appropriately terse for a one-parameter lookup, though the brevity limits how much context it can provide.

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

Completeness2/5

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

With no output schema and no annotations, the description should clarify what 'Design System component information' includes and how this tool relates to the sibling tools. It does neither, so an agent can invoke it but cannot reliably predict the result or choose it confidently among 13 alternatives.

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 single parameter, figmaComponentName, is already documented as 'Figma component name.' The description adds no additional meaning, examples, constraints, or formatting guidance beyond what the schema provides, so a 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?

The description uses a specific verb 'Get' and a clear resource, 'Design System component information,' with the input being 'a Figma component name.' The 'Design System' qualifier helps distinguish it from the generic sibling get-component, though 'information' remains somewhat vague.

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 guidance about when to use this tool versus the many siblings such as list-components, get-component, search-components, get-props, or get-examples. The description restates the operation but offers no alternatives, exclusions, or selection criteria.

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

get-eventsA

Get all events emitted by a component with their payloads

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesComponent name

TDQS

A3.5/5.0
Behavior3/5

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

With no annotations provided, the description carries the burden of behavioral disclosure. It conveys that this is a read-style operation returning all events with payloads, but it does not mention pagination, ordering, error behavior, or whether any side effects occur.

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?

The description is a single, tight sentence that front-loads the action, resource, and scope. Every word contributes meaning, with 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 tool with one parameter and no output schema, the description is minimally adequate: it states what the tool returns. However, it lacks detail about the output structure, potential empty results, or any constraints beyond the component name, so an agent is left with some ambiguity.

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 single parameter 'name' is already documented as 'Component name'. The tool description adds no additional parameter details, so it stays at the baseline for high schema coverage.

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?

The description uses a specific verb ('Get') with a clear resource ('all events emitted by a component') and adds meaningful scope ('all') and content ('with their payloads'). It is clearly distinct from sibling tools like get-props or get-examples.

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 provides no guidance on when to use this tool versus alternatives such as get-props, get-component, or search-components. There is no mention of conditions, exclusions, or when a sibling tool would be more appropriate.

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

get-examplesC

Get code examples for using a component

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesComponent name

TDQS

C2.9/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 burden of behavioral disclosure. It only says the tool gets code examples; it does not disclose output format, behavior on unknown component names, or whether examples are fetched or generated. The word 'Get' weakly implies a read-only operation but nothing more.

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?

The description is a single, front-loaded sentence with no wasted words. For a tool with one parameter, this is appropriately concise, though it sacrifices useful 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?

Given the low complexity of one parameter, the description is minimally adequate: an agent knows the tool returns code examples for a named component. However, with no output schema and no annotations, a bit more detail about the return format or example selection would make it fully complete.

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%, with the single 'name' parameter already described as 'Component name'. The tool description adds no meaningful parameter semantics beyond that, 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?

The description states a specific verb ('Get') and a clear resource ('code examples for using a component'). It is distinct enough from sibling tools like get-component or get-props, though it does not explicitly contrast itself with generate-code.

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 guidance about when to use this tool versus alternatives such as get-component, get-props, or generate-code. No exclusions, preconditions, or selection criteria are provided, leaving the agent to infer appropriateness from the name alone.

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

get-propsA

Get detailed props information for a component with types, defaults, and descriptions

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesComponent name

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 itself indicates this is a read-only retrieval operation and states the content of the returned props information. However, it does not disclose error behavior, whether component names are exact matches, or any other edge-case handling.

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?

The description is a single focused sentence with no filler. It front-loads the action and resource, then adds useful output details about types, defaults, and descriptions.

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 simple one-parameter getter with no output schema, the description adequately states the purpose and the returned information. It is slightly incomplete in not covering potential errors or exact-match requirements, but the low complexity keeps the gap minor.

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 single 'name' parameter is already documented as 'Component name'. The description adds no further parameter-level detail beyond the schema, meriting the baseline score.

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?

The description uses the specific verb 'Get' with the resource 'detailed props information' and enumerates the contained fields (types, defaults, descriptions). This clearly distinguishes it from sibling tools like get-component, get-events, and get-examples.

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 usage guidance is provided. The description does not state when to prefer this tool over get-component or search-components, nor does it mention any exclusions or alternative conditions.

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

list-componentsB

List all available Design System components, optionally filtered by category

ParametersJSON Schema
NameRequiredDescriptionDefault
categoryNoFilter by component category (e.g., "Form", "Layout", "Feedback")

TDQS

B3.2/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 disclosure burden. It states the operation but reveals nothing about return format, the size of an unfiltered 'all' listing, pagination, or how invalid category values are handled. For an unbounded enumeration, this is a meaningful gap.

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?

One sentence, eleven words, with the verb and scope front-loaded. Every word earns its place and there is zero filler.

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

Completeness2/5

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

With no output schema and no annotations, the description should cover return-value expectations, but it says nothing about what a listing entry looks like or how results are bounded. For a simple one-optional-parameter tool it is adequate for invocation, yet it still leaves an agent guessing about response shape and scale.

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 coverage is 100%: the category parameter already has a clear description with examples. The tool description adds nothing beyond echoing 'optionally filtered by category', so it neither helps nor hurts โ€” 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?

The description uses a specific verb with a clear resource and scope: 'List all available Design System components', with an optional category filter. The name and phrasing distinguish it from siblings like get-component and search-components, but it never explicitly names those alternatives, so differentiation is inferred rather than stated.

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 but not stated: 'List all available...' suggests a catalog-browsing purpose versus search-components for query-based discovery or get-component for a single item. There is no explicit when-to-use/when-not-to-use guidance, and the optional category filter is the only hint at scoping a call.

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

list-figma-mappingsA

List all available Figma component to Design System component mappings

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

A3.8/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 burden of disclosing behavior. It states that the tool lists mappings, which implies a read-only operation, but it does not mention side effects, output format, ordering, or any other behavioral detail.

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?

The description is a single, compact sentence that directly states the tool's purpose without redundancy or filler. It earns its place fully.

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 simple, zero-parameter listing tool, the description is largely complete. It identifies exactly what is listed, though it does not describe the output format since no output schema is present; this is a minor gap given the low complexity.

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 has zero parameters and the schema is vacuous, so there is no parameter meaning to clarify. The baseline of 4 applies because no parameter documentation is needed beyond what the empty schema already conveys.

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?

The description uses a specific verb and resource: it lists mappings between Figma components and Design System components. It is clearly distinguishable from siblings such as list-components and search-components because it names a distinct artifact type, the mapping.

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 the tool is appropriate when an agent needs an overview of existing Figma-to-Design-System mappings. However, it does not explicitly contrast it with list-components or map-figma-component, nor does it state when not to use it.

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

map-figma-componentB

Map a Figma component name to the corresponding Design System component with default props

ParametersJSON Schema
NameRequiredDescriptionDefault
figmaComponentNameYesComponent name from Figma (e.g., "Button/Primary", "DatePicker/Range")

TDQS

B3.3/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 burden. It states the mapping outcome and that default props are included, but it does not disclose behavior for unmapped names, whether the operation is read-only, or what the exact return shape is. This is a meaningful gap for a tool with no safety hints.

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 sentence that is direct, front-loaded, and free of filler. It conveys the core action and expected result without unnecessary 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?

This is a low-complexity tool with one simple parameter and high schema coverage, so less description is needed. However, with no output schema and no behavior around missing mappings or return structure, the description is adequate but not fully complete for an agent to predict all outcomes.

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 single parameter is well documented with examples. The description adds minimal parameter-level meaning beyond the schema, but the baseline remains acceptable because the schema already carries the semantic weight.

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 ('Map') with a clear resource (Figma component name) and outcome (corresponding Design System component with default props). It distinguishes itself from sibling tools like list-figma-mappings by focusing on a single mapping rather than a listing.

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 implies use when a Figma component name needs to be resolved to a Design System component, but it provides no explicit guidance on when to choose this over siblings like get-component, get-props, or list-figma-mappings. No exclusions or alternative conditions are mentioned.

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

optimize-promptA

Transform raw user prompt into MCP-optimized prompt for better Design System integration.

This tool analyzes user intent, identifies components, and generates a structured prompt
that guides Claude to use the right MCP tools in the right order with token awareness.

Example: "bir buton ve dropdown lazฤฑm"
โ†’ Returns optimized prompt with tool sequence, token savings estimates, and clear steps
ParametersJSON Schema
NameRequiredDescriptionDefault
userPromptYesRaw user prompt in Turkish or English

TDQS

A3.7/5.0
Behavior3/5

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

With no annotations provided, the description carries the behavioral burden. It discloses the transformation process, mentions token awareness, and states the output includes tool sequence and savings estimates. However, it does not explicitly state whether the operation is non-mutating, whether it has side effects, or any limitations.

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?

The description is well-structured: a clear one-sentence definition, a brief process explanation, and a concrete example. It is appropriately sized and front-loaded, though the phrase 'for better Design System integration' adds little functional value.

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?

Even without an output schema, the description tells the agent what the tool returns: an optimized prompt with tool sequence, token savings estimates, and clear steps. It positions the tool clearly relative to the sibling set, but lacks explicit guidance on language handling or edge cases.

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?

The schema already documents the userPrompt parameter with 100% coverage, so the baseline is 3. The description adds an example and explains that the parameter should be a raw user prompt, but it does not add significant new meaning beyond what the schema states.

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?

The description uses a specific verb and resource: 'Transform raw user prompt into MCP-optimized prompt'. It also clarifies the tool's role as an orchestrator that guides Claude to use the right MCP tools, which visibly distinguishes it from the sibling component/documentation tools like list-components or generate-code.

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 context is implied: this is for taking a raw user prompt and converting it into a structured, tool-sequenced prompt. The example illustrates a concrete input, but there is no explicit statement about when to choose this tool over alternatives or when not to use it.

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

search-componentsA

Search for Design System components by name, description, or category

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query

TDQS

A4/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 of behavioral disclosure. It does clarify that search matches against name, description, or category, which is useful context. However, it does not disclose whether the tool returns a list, how partial matching works, whether results are paginated, or what happens on an empty result set.

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?

The description is a single sentence that states the action, resource, and search dimensions with zero filler. Every word earns its place, and the most important information is front-loaded.

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 simple one-parameter search tool with no annotations and no output schema, this description is mostly sufficient: the agent knows what to pass and what kind of operation to expect. The main gaps are a lack of explicit result-shape information and no guidance about when to use list-components instead, but the low complexity keeps these gaps minor.

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 schema only describes the 'query' parameter as 'Search query', which is extremely vague. The description adds meaningful semantics by stating that the query applies to component name, description, or category. This goes beyond the schema's coverage and gives the agent a clear idea of what values are appropriate.

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?

The description uses a specific verb ('Search') and resource ('Design System components') and names the exact search dimensions: name, description, or category. This makes it clearly distinguishable from siblings like list-components and get-component, so an agent can tell what this tool does without opening its 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 verb 'search' implies this should be used when an agent needs to find components by free-text query rather than listing all components or fetching a specific one. However, the description never explicitly states when to prefer this over list-components or get-component, nor does it mention exclusions. Usage guidance is implied, not stated.

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

validate-figma-componentA

Check if a Figma component name can be mapped to a Design System component

ParametersJSON Schema
NameRequiredDescriptionDefault
figmaComponentNameYesFigma component name (e.g., "Button/Primary")

TDQS

A3.7/5.0
Behavior3/5

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

With no annotations, the description carries the behavioral burden. 'Check if' strongly implies a non-mutating read-only predicate, but it does not disclose the return format, error behavior, or whether the check is based on static naming rules or live mapping data. These gaps prevent a higher score.

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?

The description is a single clear sentence with no filler or repetition. The core action and target are front-loaded, making it very easy for an agent to parse quickly.

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 validation tool, the description covers the basic purpose and input adequately. However, with no output schema and no usage guidance, it leaves the agent to infer the return value and ideal invocation context, so it is not fully complete.

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?

The single parameter figmaComponentName is 100% covered by the schema's description and example. The tool description adds no extra meaning beyond the schema, 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.

Purpose5/5

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

The description uses a specific verb ('Check if') with a clear resource ('Figma component name') and outcome ('can be mapped to a Design System component'). It clearly distinguishes this validation tool from sibling tools like map-figma-component, which would actually perform the mapping.

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 'Check if ... can be mapped' implies a pre-validation or verification use case, especially alongside map-figma-component. However, it does not explicitly state when to prefer this tool over alternatives, nor does it mention any prerequisites or workflow context.

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. 14 tool updatesv1.0.0
    • First observedconvert-figma-to-vue
    • First observedgenerate-code
    • First observedgenerate-figma-component
    • First observedget-component
    • First observedget-ds-for-figma
    • First observedget-events
    • First observedget-examples
    • First observedget-props
    • First observedlist-components
    • First observedlist-figma-mappings
    • First observedmap-figma-component
    • First observedoptimize-prompt
    • First observedsearch-components
    • First observedvalidate-figma-component

TDQS

B3.4/5.0

Scored across 14 tools

Disambiguation3/5

Most tools have clear verb+object distinctions, but several overlap: get-component versus get-props/get-events/get-examples, get-ds-for-figma versus map-figma-component, and generate-code versus generate-figma-component. Descriptions clarify intent somewhat, but an agent could easily select the wrong tool for a similar task.

Naming Consistency4/5

Tool names uniformly follow lowercase snake_case with a verb-object structure (list/get/search/generate/map/validate/convert). Minor inconsistencies like get-ds-for-figma and the pair generate-figma-component versus convert-figma-to-vue slightly break the pattern but remain predictable.

Tool Count4/5

14 tools is a reasonable count for a design-system documentation and Figma conversion server. However, some tools feel redundant or consolidatable, such as get-ds-for-figma and map-figma-component, making the set slightly heavier than necessary.

Completeness4/5

The server covers component discovery, detailed documentation, props/events/examples, code generation, and Figma mapping/validation/conversion well. Minor gaps like design tokens, theme variables, or component dependency relationships are missing but not critical for the core workflow.

Maintenance

ActivityInactive
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    C
    maintenance
    MCP server that exposes your design system components and tokens to AI agents, preventing duplicate component creation and hardcoded token values.
    9 npm
    9
    MIT
  • F
    license
    Not graded
    quality
    C
    maintenance
    An MCP server that brings an Angular design system built on Storybook into AI tools like Claude and Cursor, providing real-time access to component metadata, APIs, and documentation.
    -
  • A
    license
    A
    quality
    C
    maintenance
    MCP server for the coss ui design system, enabling AI agents to fetch components, props, and design tokens on demand for accurate, low-cost code generation.
    6
    1
    MIT