菜单
MCP Apps项目规范 - 后端驱动UI渲染架构。所有页面由后端生成HTML通过MCP协议返回渲染。Invoke when developing or maintaining MCP Apps projects, especially when creating new pages, tools, or stores.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
UI设计规范技能，提供设计系统、配色方案、排版规则、无障碍标准等专业UI设计指导
项目规范技能，提供项目结构、文档管理、代码忽略等方面的标准和最佳实践
简洁风格技能，禁止废话，采用caveman式简短直接的表达方式
个人文档管理技能，管理变更记录、方案设计Spec文档、测试报告等，统一存放在docs目录下
项目启动管理技能，支持Java Spring Boot和Vue项目的启动、重启、关闭操作，保持原有端口不变
方案调研技能，对方案设计、功能实现进行多方案比对分析，至少3个方案，建议5个左右的方案比对，包括业界标杆方案、大厂实现方案等
| name | mcp-apps-project-standard |
| description | MCP Apps项目规范 - 后端驱动UI渲染架构。所有页面由后端生成HTML通过MCP协议返回渲染。Invoke when developing or maintaining MCP Apps projects, especially when creating new pages, tools, or stores. |
用户操作 → iframe → postMessage → MCP Host → MCP Tool Call → 后端处理 → 返回结果
│
▼
更新数据/生成新UI
│
▼
返回UI Resource → 重新渲染iframe
src/
├── components/ # 前端组件（仅Host）
│ └── MCPHost.tsx # MCP客户端Host
├── server/ # 后端服务
│ ├── tools/ # MCP工具定义
│ ├── ui/ # UI页面生成器（HTML模板）
│ ├── stores/ # 数据存储层
│ └── index.ts # 服务器入口
├── shared/ # 共享类型定义
├── App.tsx # 前端入口
└── main.tsx # React挂载点
| 工具类型 | 命名格式 | 示例 |
|---|---|---|
| UI获取 | get{PageName}UI | getFamilyTreeUI, getMemberManageUI |
| 数据查询 | list{Entity}, get{Entity} | listFamilies, getMemberById |
| 数据创建 | create{Entity} | createFamily, createMember |
| 数据更新 | update{Entity} | updateFamily, updateMember |
| 数据删除 | delete{Entity} | deleteFamily, deleteMember |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>/* 自定义样式 */</style>
</head>
<body class="bg-gray-100 min-h-screen p-4">
<!-- 页面内容 -->
<script>
function mcpCallTool(toolName, params) {
return new Promise((resolve, reject) => {
const messageId = 'msg-' + Date.now() + '-' + Math.random();
const handler = (event) => {
if (event.data && event.data.messageId === messageId) {
window.removeEventListener('message', handler);
if (event.data.error) {
reject(new Error(event.data.error));
} else {
resolve(event.data.response);
}
}
};
window.addEventListener('message', handler);
window.parent.postMessage({
messageId: messageId,
type: 'tool',
payload: { toolName, params }
}, '*');
});
}
</script>
</body>
</html>
#10B981)#3B82F6)#10B981#F59E0B#EF4444