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]
• 测试服务器状态的健康端点

______________________________________________________________________

🎯 黑客马拉松资源

快速链接

• 集成指南: 集成_指南.md
• 前端展示：实时组件演示
• 设计文档: docs/

入门指南

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

编码愉快！