Provides UI architecture analysis for converting Figma designs into reusable, modular UI blocks with effort estimation and CSV output.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@EDS Block Analyser MCP Server Analyze UI blocks for the product page from Figma"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A Model Context Protocol (MCP) server that provides UI architecture analysis for converting Figma designs or web pages into reusable UI code blocks.
This MCP server provides a single tool that returns a comprehensive UI architect prompt for analyzing and estimating the effort required to convert Figma designs or web pages into modular, reusable UI blocks. The prompt guides AI assistants to perform thorough analysis focusing on component structure, effort estimation, and implementation approach.
Related MCP server: Figma MCP Server by Bao To
Component Analysis: Identifies UI components from Figma designs or web pages
Effort Estimation: Uses T-shirt sizing (S, M, L, XL, XXL) for complexity assessment
CSV Output: Provides structured output in CSV format for easy processing
Performance Focus: Targets Lighthouse score of 100
Modular Design: Emphasizes reusable, independent UI blocks
Plain Tech Stack: Focuses on vanilla JavaScript and CSS without frameworks
npm install -g eds-block-analyser-mcp-server-testnpm install eds-block-analyser-mcp-server-testAdd this to your Claude Desktop configuration file:
On macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
On Windows: %APPDATA%/Claude/claude_desktop_config.json
{
"mcpServers": {
"eds-block-analyser": {
"command": "npx",
"args": ["eds-block-analyser-mcp-server-test"]
}
}
}import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
const transport = new StdioClientTransport({
command: 'npx',
args: ['eds-block-analyser-mcp-server-test']
});
const client = new Client({
name: 'my-client',
version: '1.0.0'
}, {
capabilities: {}
});
await client.connect(transport);
// Use the tool
const result = await client.callTool({
name: 'eds_block_analyser'
});
console.log(result.content[0].text);eds_block_analyserDescription: Get a UI architect prompt for analyzing and estimating UI block conversion
Parameters: None
Returns: A comprehensive prompt for UI block analysis and effort estimation
The prompt includes:
Role definition as UI Architect
Task description for Figma/web page conversion
Context about blocks, tech stack, and performance requirements
Few-shot examples for guidance
Strict CSV output format requirements
The tool provides a prompt that generates CSV output with the following columns:
Page Title
UI Component Name
Function description
Tshirt Sizing (S, M, L, XL, XXL)
Complexity justification
Other remarks
git clone https://github.com/kalimuthu-a/eds-block-analyser-mcp-server-test.git
cd eds-block-analyser-mcp-server-test
npm installnpm startnpx @modelcontextprotocol/inspector npx eds-block-analyser-mcp-server-testNode.js >= 18.0.0
@modelcontextprotocol/sdk ^0.4.0
MIT
Fork the repository
Create a feature branch
Make your changes
Submit a pull request
If you encounter any issues, please file them on the GitHub repository.
Get a UI architect prompt for analyzing and estimating UI block conversion from Figma designs or web pages
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
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 only says a prompt is returned; it does not mention whether the operation is read-only, any side effects, or the format/content of the prompt. This is insufficient for a tool with no annotation support.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that is concise and front-loaded. It conveys the core purpose without any fluff or redundant information, making it easy to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple with no parameters and no output schema. The description states what it produces (a prompt), but the term 'UI block conversion' is ambiguous and not explained. Given the lack of additional structure, the description could be slightly more detailed about the nature of the prompt or expected usage, resulting in a minimally adequate score.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, and the schema coverage is 100% (empty). According to the rubric, a 0-parameter tool gets a baseline of 4. The description does not add parameter details, but none are needed given the empty schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb 'Get' and identifies the resource as a 'UI architect prompt' for analyzing and estimating UI block conversion. It clearly states the tool's function, though 'UI block conversion' is somewhat specialized and could be clearer.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit usage guidance is provided, but the purpose is implied: you would use this tool when you need a UI architect prompt for UI block conversion. With no sibling tools or alternatives mentioned, explicit when/when-not guidance is not critical, but it would still be helpful.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.1eds_block_analyserScored across 1 tool
With only one tool, there is no ambiguity or overlap. The tool's purpose is clearly defined and distinct from any potential alternatives.
The single tool name follows a descriptive pattern and has no conflicting conventions. Consistency is trivially maintained with one tool.
The server has only one tool, which feels thin for a typical MCP server. While the tool is non-trivial and serves a specific purpose, the limited scope makes the count borderline.
The tool fully addresses its stated purpose of generating a UI architect prompt for UI block analysis and estimation. There are no obvious gaps or missing operations for this narrow domain.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Score any URL against a real design contract — 42 checks, A-F grade, token + motion validation.
Measured design systems decoded from 588 real products, for coding agents.
