Eds Block Analyser MCP Server

EDS块分析器MCP服务器

一种模型上下文协议（MCP）服务器，提供UI架构分析，用于将Figma设计或网页转换为可重用的UI代码块。

它做什么

此MCP服务器提供了一个单一的工具，该工具返回一个全面的UI架构师提示，用于分析和估算将Figma设计或网页转换为模块化、可重用的UI块所需的工作量。提示引导AI助手进行全面分析，重点关注组件结构、工作量估算和实现方法。

特性

• 完成工作流编排：从URL收集到工件创建的端到端网站分析
• URL发现和收集：自动发现所有网站网址和智能选择
• 组件结构提取：批量处理URL以提取组件结构和标记
• EDS块收集集成：将组件映射到Adobe的EDS块集合
• 块段变化分析：将相似的块分组为具有适当命名的变体
• 技术命名：为不在集合中的块提供技术名称
• 工作量估算：使用T恤尺码（S-Simple、M-Medium、C-Complex）进行复杂性评估
• 综合文物：创建多个工件，包括CSV、摘要报告和目录
• 质量门：每个阶段的内置质量检查和验证
• 绩效重点：目标灯塔得分为100
• 模块化设计：强调可重用、独立的UI块
• 普通技术栈：专注于没有框架的普通JavaScript和CSS

安装

全球安装

npm install -g eds-block-analyser-mcp-server

本地安装

npm install eds-block-analyser-mcp-server

用法

使用克劳德桌面

将此添加到您的Claude Desktop配置文件中：

在 macOS 上： ~/Library/Application Support/Claude/claude_desktop_config.json 在Windows上： %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "eds-block-analyser": {
      "command": "npx",
      "args": ["eds-block-analyser-mcp-server"]
    }
  }
}

使用MCP客户端

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']
});

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);

可用工具

website_analysis_planner

• 说明： 协调分析网站、提取组件和创建实现工件的完整流程，并进行工作量估算
• 参数： 无
• 退货： 一个全面的网站分析编排框架

该框架包括：

• 第一阶段：URL收集和发现
• 第2阶段：组件结构提取
• 第三期：可用组件分析
• 阶段4：组件映射和变化分析
• 阶段5：工作量估算和T恤尺寸（S-简单、M-中等、C-复杂）
• 第6阶段：验证和质量保证
• 第7阶段：工件创建（仅在验证通过后）
• 质量门和验证标准
• 错误处理和成功指标
• 完整的编排工作流程

eds_block_analyser

• 说明： 获取UI架构师提示，用于分析和估计UI块转换
• 参数： 无
• 退货： UI块分析和工作量估算的综合提示

提示包括：

• UI架构师的角色定义
• Figma/网页转换任务说明
• 关于区块、技术栈和性能要求的上下文
• 指导射击的例子很少
• 严格的CSV输出格式要求

block_variation_analyzer

• 说明： 将相似块分组为变体，并根据EDS块集合或技术命名约定提供适当的命名
• 参数： 无
• 退货： 块变化分析和命名的综合框架

该框架包括：

• 块相似性评估指南
• 源块识别协议
• 命名约定优先级（首先是EDS集合，然后是技术名称）
• 不同组件类型的技术命名指南
• 变异分类系统
• 分析质量标准

框架工具

• self_evaluation_framework：质量评估指标和评分
• error_handling_framework：错误处理和升级协议
• security_guardrails_framework：安保和安全协议
• required_artifacts_framework：所需输出规格

输出格式

该工具提供了一个生成CSV输出的提示，其中包含以下列：

• 页面标题
• UI组件名称
• 功能描述
• T恤尺码（S-简单、M-中号、C-复杂）
• 出现的次数
• 复杂性论证
• 页面URL
• 源代码块名称
• 变异类型
• 其他备注

所需工件

1. CSV分析文件 （'ui_blocks_analytic.csv'）-完整的组件分解
2. 总结报告 （'analysis_summary.md'）-带有URL分析的执行摘要
3. 评估日志 （'evaluation_log.md'）-质量评估和迭代跟踪

发展

克隆和设置

git clone https://github.com/kalimuthu-a/eds-block-analyser-mcp-server.git
cd eds-block-analyser-mcp-server
npm install

在本地运行

npm start

使用MCP检查员进行测试

npx @modelcontextprotocol/inspector npx eds-block-analyser-mcp-server

需求

• Node.js>=18.0.0
• @模型上下文协议/sdk^0.4.0

许可证

麻省理工学院

贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 提交拉取请求

支持

如果您遇到任何问题，请在 .