EDS块分析器MCP服务器
一种模型上下文协议(MCP)服务器,提供UI架构分析,用于将Figma设计或网页转换为可重用的UI代码块。
它做什么
此MCP服务器提供了一个单一的工具,该工具返回一个全面的UI架构师提示,用于分析和估算将Figma设计或网页转换为模块化、可重用的UI块所需的工作量。提示引导AI助手进行全面分析,重点关注组件结构、工作量估算和实现方法。
特性
- 成分分析:从Figma设计或网页中识别UI组件
- 工作量估算:使用T恤尺码(S、M、L、XL、XXL)进行复杂性评估
- csv输出:提供CSV格式的结构化输出,便于处理
- 绩效重点:目标灯塔得分为100
- 模块化设计:强调可重用、独立的UI块
- 普通技术栈:专注于没有框架的普通JavaScript和CSS
安装
全球安装
npm install -g eds-block-analyser-mcp-server-test本地安装
npm install eds-block-analyser-mcp-server-test用法
使用克劳德桌面
将此添加到您的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-test"]
}
}
}使用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-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_analyser
- 说明: 获取UI架构师提示,用于分析和估计UI块转换
- 参数: 无
- 退货: UI块分析和工作量估算的综合提示
提示包括:
- UI架构师的角色定义
- Figma/网页转换任务说明
- 关于区块、技术栈和性能要求的上下文
- 指导射击的例子很少
- 严格的CSV输出格式要求
输出格式
该工具提供了一个生成CSV输出的提示,其中包含以下列:
- 页面标题
- UI组件名称
- 功能描述
- T恤尺码(S、M、L、XL、XXL)
- 复杂性论证
- 其他备注
发展
克隆和设置
git clone https://github.com/kalimuthu-a/eds-block-analyser-mcp-server-test.git
cd eds-block-analyser-mcp-server-test
npm install在本地运行
npm start使用MCP检查员进行测试
npx @modelcontextprotocol/inspector npx eds-block-analyser-mcp-server-test需求
- Node.js>=18.0.0
- @模型上下文协议/sdk^0.4.0
许可证
麻省理工学院
贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 提交拉取请求
支持
如果您遇到任何问题,请在 .
