メニュー
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