Skip to main content
Glama
MananSingh2001

@manansiingh/figma-react-mcp-server

Server Quality Checklist

67%
Profile completionA complete profile improves this server's visibility in search results.
  • Latest release: v1.0.7

  • Disambiguation5/5

    Each tool targets a distinct output: React component, design tokens, and micro-frontend module. There is no overlap in purpose, so agents can easily select the correct tool.

    Naming Consistency5/5

    All tool names follow a consistent verb_noun pattern: generate_react_component, extract_design_tokens, generate_mfe_module. The naming is uniform and predictable.

    Tool Count5/5

    With 3 tools, the server is tightly scoped to its purpose of Figma-to-code conversion. Each tool covers a distinct and necessary capability without bloat.

    Completeness4/5

    The set covers the core workflows: component generation, token extraction, and MFE creation. Minor omissions like asset export or project scaffolding exist, but agents can likely accomplish most tasks with these tools.

  • Average 3.5/5 across 3 of 3 tools scored.

    See the Tool Scores section below for per-tool breakdowns.

    • No community issues in the last 6 months
    • 0 commits in the last 12 weeks
    • No stable releases found
    • No critical vulnerability alerts
    • No high-severity vulnerability alerts
    • No code scanning findings
    • CI status not available
  • This repository is licensed under MIT License.

  • This repository includes a README.md file.

  • No tool usage detected in the last 30 days. Usage tracking helps demonstrate server value.

    Tip: use the "Try in Browser" feature on the server page to seed initial usage.

  • Add a glama.json file to provide metadata about your server.

  • If you are the author, simply .

    If the server belongs to an organization, first add glama.json to the root of your repository:

    {
      "$schema": "https://glama.ai/mcp/schemas/server.json",
      "maintainers": [
        "your-github-username"
      ]
    }

    Then . Browse examples.

  • Add related servers to improve discoverability.

How to sync the server with GitHub?

Servers are automatically synced at least once per day, but you can also sync manually at any time to instantly update the server profile.

To manually sync the server, click the "Sync Server" button in the MCP server admin interface.

How is the quality score calculated?

The overall quality score combines two components: Tool Definition Quality (70%) and Server Coherence (30%).

Tool Definition Quality measures how well each tool describes itself to AI agents. Every tool is scored 1–5 across six dimensions: Purpose Clarity (25%), Usage Guidelines (20%), Behavioral Transparency (20%), Parameter Semantics (15%), Conciseness & Structure (10%), and Contextual Completeness (10%). The server-level definition quality score is calculated as 60% mean TDQS + 40% minimum TDQS, so a single poorly described tool pulls the score down.

Server Coherence evaluates how well the tools work together as a set, scoring four dimensions equally: Disambiguation (can agents tell tools apart?), Naming Consistency, Tool Count Appropriateness, and Completeness (are there gaps in the tool surface?).

Tiers are derived from the overall score: A (≥3.5), B (≥3.0), C (≥2.0), D (≥1.0), F (<1.0). B and above is considered passing.

Tool Scores

  • 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 mentions outputs (lifecycle hooks, registry entry) but does not disclose side effects, required permissions beyond the token parameter, whether files are written, or any limitations. This is insufficient for a code generation tool.

    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, information-dense sentence with no fluff. It efficiently conveys the purpose and key features. Slightly long but still concise and structured effectively.

    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?

    Despite having parameters and a detailed purpose, the description lacks contextual completeness. It does not explain what happens after generation (e.g., output format, file creation), nor does it provide guidance on when to choose this over sibling tools. The absence of an output schema and annotations further reduces the agent's ability to fully understand the tool's behavior.

    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 each parameter has a clear definition. The description does not add syntax, defaults, or usage nuances beyond the schema, but since the schema already documents all parameters, 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 ('Generate') and a specific artifact ('self-contained micro-frontend module from a Figma node'), with additional detail about lifecycle hooks and widget registry entry. This clearly distinguishes it from siblings like generate_react_component, which would not include these MFE-specific features.

    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 explicit when-to-use or when-not-to-use guidance is provided. The description implies use for generating micro-frontend modules, but does not contrast with the sibling generate_react_component, leaving the agent to infer the appropriate context. No prerequisites or exclusions are mentioned.

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

  • Behavior2/5

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

    With no annotations provided, the description must convey safety/behavior itself. It says 'Extract... into a reusable TypeScript tokens file' which implies reading from Figma and writing a file, but it does not disclose potential side effects like file overwriting, required permissions (beyond the figmaToken parameter), rate limits, or whether the operation is idempotent. This lack of behavioral detail is a gap for a tool that creates output.

    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, concise sentence that front-loads the verb and resource, then specifies the output. Every word earns its place with no redundancy or filler.

    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?

    The description covers the core purpose and parameters, and no output schema exists so return details aren't required. However, it lacks information about the generated file's location, naming, overwrite behavior, or how the token categories map to the TypeScript structure. For a tool that writes files, this is a meaningful incompleteness.

    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 input schema covers all three parameters with descriptions (100% coverage). The description's mention of token categories adds some semantic nuance but does not materially alter parameter understanding. Baseline of 3 is appropriate because the schema does the heavy lifting.

    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 clearly states the verb 'Extract' and the resource 'design tokens from a Figma node tree', with a specific output ('reusable TypeScript tokens file'). It also enumerates the token types (colors, spacing, typography, radii), which distinguishes it from sibling tools like generate_react_component.

    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?

    The description provides clear context on when to use the tool (when you need to extract design tokens from Figma into TypeScript). It does not explicitly exclude or mention alternatives, but the purpose is specific enough that siblings are obviously different. No explicit when-not-to-use guidance, but context is clear.

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

  • 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 discloses the conversion behaviors (Flexbox, fills, typography, strokes, border radius) but does not state whether the operation is read-only, what Figma token scopes are required, or what the return value looks like. This is a moderate disclosure but lacks important context.

    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 purpose and lists the key conversion mappings, making it concise and well-structured.

    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?

    The tool has no output schema, so the description should clarify the return format. It explains the conversion process but omits what the agent will receive (e.g., code string, file), potential error scenarios, and any prerequisites beyond the parameters. Sibling tool differentiation is also not addressed.

    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%, so the baseline is 3. The description mentions 'Figma node' which maps to nodeId, but it does not add extra detail about parameter formats, constraints, or relationships beyond the schema's short descriptions.

    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 clearly states the tool fetches a Figma node and converts it into a production React component, listing specific conversion mappings (Auto Layout → Flexbox, fills, typography, strokes, border radius). This specific verb+resource+output structure distinguishes it from sibling tools like extract_design_tokens and generate_mfe_module.

    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 when a Figma node needs to be turned into a React component, but it does not explicitly state when not to use it or compare it with the sibling tools. Without explicit exclusions or alternative references, the agent must rely on the tool name and description alone.

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

GitHub Badge

Glama performs regular codebase and documentation scans to:

  • Confirm that the MCP server is working as expected.
  • Confirm that there are no obvious security issues.
  • Evaluate tool definition quality.

Our badge communicates server capabilities, safety, and installation instructions.

Card Badge

figma-react-mcp-server MCP server

Copy to your README.md:

Score Badge

figma-react-mcp-server MCP server

Copy to your README.md:

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/MananSingh2001/figma-react-mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server