AI导哈

设计系统管理服务器

SabPaisa设计系统MCP服务器为14+金融科技产品提供云端托管的令牌、组件和模式资源。

  • by payvilla
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 payvilla/sabpaisa-design-system-aws

使用说明

SabPaisa设计系统MCP服务器

云托管的MCP服务器为14多种金融科技产品提供SabPaisa设计系统令牌、组件和模式。

部署在AWS Lambda+S3/CloudFront上，通过Claude Code和其他MCP兼容工具实时访问设计系统资源。

🚀 实时端点

  • MCP服务器: https://suanrlo9yc.execute-api.ap-south-1.amazonaws.com/mcp （通过Lambda部署）
  • 前端登录页面: http://sabpaisa-design-system-frontend-428169664322.s3-website.ap-south-1.amazonaws.com （通过S3部署）
  • 健康检查: https://suanrlo9yc.execute-api.ap-south-1.amazonaws.com/health

📦 包含什么

MCP服务器

  • 28资源：完整的设计系统访问权限

    • 设计符号（颜色、排版、间距、阴影）
    • 组件规格（按钮、卡、输入）
    • 金融科技模式（结算、对账、KYC、退款/退单）
    • 数据格式指南（货币、日期时间、掩码、验证）
    • 指南（可访问性、品牌）
    • 模板（新）：6个具有完整源代码的生产就绪模板
      • 加载动画（蛇旋转器、弹跳点）
      • 启动画面（淡入淡出和缩放）
      • 页面布局（仪表板布局）
      • 金融科技工作流程（付款结算）
      • 表单（多步骤向导）

  • 6工具:

    • search_design_system -搜索所有设计系统资源
    • find_color -查找带有辅助功能信息的颜色
    • convert_color -在颜色格式之间转换
    • validate_contrast -检查WCAG合规性
    • generate_component -生成组件代码
    • view_analytics -服务器使用统计

前端展示

  • 交互式设计系统文档
  • 实时组件预览
  • 调色板资源管理器
  • 排版样本
  • 模式演示
  • 模板库：浏览并复制6个生产就绪模板
    • 带有动画的实时预览
    • 带复制按钮的完整源代码
    • 安装说明
    • 道具文档
    • 使用示例

🛠️ 建筑

┌─────────────────────────────────────────────────┐
│  GitHub Repository                              │
│  ├── src/              (MCP Server)             │
│  ├── frontend/         (React Showcase)         │
│  ├── data/             (Design Tokens)          │
│  └── .github/workflows (Auto-deployment)        │
└─────────────────────────────────────────────────┘
                      │
                      │ git push (triggers)
                      ▼
┌─────────────────────────────────────────────────┐
│  GitHub Actions                                 │
│  ├── Build TypeScript                           │
│  ├── Deploy to Lambda (Serverless Framework)   │
│  ├── Build React app                            │
│  └── Deploy to S3 + CloudFront                  │
└─────────────────────────────────────────────────┘
                      │
                      ▼
┌──────────────────┐          ┌──────────────────┐
│  AWS Lambda      │          │  S3 + CloudFront │
│  (MCP Server)    │          │  (Frontend)      │
│  + API Gateway   │          │                  │
└──────────────────┘          └──────────────────┘

💻 地方发展

MCP服务器

# Install dependencies
npm install

# Build TypeScript
npm run build

# Run locally (stdio mode)
npm start

# Test health check (if running HTTP handler)
curl http://localhost:3000/health

前端

cd frontend

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npm run build

🚢 部署

先决条件

  1. 已配置凭据的AWS帐户
  2. 带有秘密的GitHub存储库：
    • AWS_ACCESS_KEY_ID
    • AWS_SECRET_ACCESS_KEY
    • S3_BUCKET_NAME
    • CLOUDFRONT_DISTRIBUTION_ID

自动部署

推到 main 分支触发自动部署：

git add .
git commit -m "Update design system"
git push origin main

GitHub操作将：

  1. 构建MCP服务器并将其部署到Lambda
  2. 构建前端并将其部署到S3/CloudFront
  3. 使CloudFront缓存无效以进行即时更新

手动部署

MCP服务器：

npm run build
serverless deploy

前端：

cd frontend
npm run build
aws s3 sync dist/ s3://your-bucket-name
aws cloudfront create-invalidation --distribution-id YOUR_ID --paths "/*"

📚 集成指南

看 集成_指南.md 有关将此MCP服务器集成到以下内容的详细说明：

  • 克劳德代码项目
  • 其他MCP兼容工具
  • 定制应用

🏗️ 存储库结构

sabpaisa-design-system-aws/
├── src/
│   ├── index.ts              # Main MCP server (stdio)
│   ├── index-http.ts         # Lambda HTTP handler
│   ├── resources.ts          # Resource handlers
│   ├── tools.ts              # Tool handlers
│   ├── logger.ts             # Logging utility
│   └── analytics.ts          # Usage analytics
├── data/
│   ├── design-system.json
│   ├── fintech-patterns.json
│   ├── data-formatting-guide.json
│   └── design-templates.json     # 6 templates with code
├── data-enhanced/            # 36 modular JSON files
├── frontend/
│   ├── src/                  # React app source
│   ├── public/               # Static assets
│   └── package.json
├── docs/
│   ├── SABPAISA_DESIGN_SYSTEM_COMPLETE.md
│   └── TYPOGRAPHY.md
├── .github/
│   └── workflows/
│       └── deploy.yml        # Auto-deployment workflow
├── serverless.yml            # Lambda config
├── package.json
└── tsconfig.json

🔧 配置

无服务器框架(serverless.yml)

  • 运行时：Node.js 20.x
  • 内存：512 MB
  • 超时：30秒
  • 地区：美国东部-1

环境变量

  • NODE_ENV：生产
  • DEBUG: 0

📊 成本估算

每月AWS成本（估计）：

  • Lambda：约3美元/月（假设使用量适中）
  • API网关：包含在Lambda成本中
  • S3：约0.50美元/月
  • 云前端：~0.50美元/月
  • 总计：~4-5美元/月

免费版涵盖了大多数开发/测试用途。

🧪 测试

健康检查

curl https://[your-api-gateway-url]/health

预期响应：

{
  "status": "healthy",
  "version": "1.0.0",
  "server": "@sabpaisa/design-system-mcp",
  "resources": 20,
  "tools": 6,
  "timestamp": "2025-12-05T..."
}

MCP请求

curl -X POST https://[your-api-gateway-url]/mcp \
  -H "Content-Type: application/json" \
  -d '{
    "jsonrpc": "2.0",
    "id": 1,
    "method": "resources/list",
    "params": {}
  }'

🤝 贡献

  1. 复刻仓库
  2. 创建特征分支(git checkout -b feature/amazing-feature)
  3. 提交更改(git commit -m 'Add amazing feature')
  4. 推送到分支(git push origin feature/amazing-feature)
  5. 打开拉取请求

📄 许可证

专有-Sabaisa设计系统

🆘 支持

关于黑客马拉松的支持：

  • 检查 集成_指南.md
  • 查看前端展示 https://[your-cloudfront-url]
  • 测试服务器状态的健康端点

🎯 黑客马拉松资源

快速链接

入门指南

  1. 将MCP服务器添加到Claude Code配置中
  2. 探索可用的资源和工具
  3. 使用 search_design_system 查找组件
  4. 使用生成组件代码 generate_component

编码愉快！

相关 MCP