// 提供设计系统的标准规范，包括设计原则、视觉风格、组件库等。Invoke when designing new features or components for the application.
异常分析核心功能。当用户需要分析线上故障、排查错误原因时使用此技能。
MCP 工具创建器。当用户需要为异常分析系统添加新的 MCP 工具时使用此技能。
计划执行器。当用户需要自定义分析计划或执行特定分析步骤时使用此技能。
为项目创建 MCP（Model Context Protocol）工具。当用户想要添加新的 MCP 工具或集成外部 MCP 服务时使用此技能。
为多模型支持创建新的 AI 模型提供商。当用户想要添加对新的 AI 模型（OpenAI、Claude 等）的支持时使用此技能。
集成 Spring AI 聊天功能。当用户想要与 AI 模型对话、创建聊天端点或处理 AI 对话流程时使用此技能。
| name | design-system |
| description | 提供设计系统的标准规范，包括设计原则、视觉风格、组件库等。Invoke when designing new features or components for the application. |
#10B981 - #059669）#3B82F6 - #2563EB）、紫色系列（#8B5CF6 - #7C3AED）#F9FAFB - #111827）#10B981）#F59E0B）#EF4444）#3B82F6）Inter 或系统默认无衬线字体text-2xl（24px）、text-xl（20px）、text-lg（18px）text-base（16px）text-sm（14px）、text-xs（12px）font-bold（700）font-medium（500）font-normal（400）p-4（16px）、m-4（16px）、space-x-4（16px）shadow-smshadowshadow-lg、shadow-xlrounded（4px）rounded-md（6px）rounded-lg（8px）、rounded-xl（12px）bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md shadow hover:shadow-lg transition-all duration-200w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparentborder-red-500 focus:ring-red-500bg-gray-100 cursor-not-allowedw-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparentbg-white p-6 rounded-lg shadowhover:shadow-lg transition-all duration-200min-w-full divide-y divide-gray-200bg-gray-50bg-white divide-y divide-gray-200hover:bg-gray-50max-w-7xl mx-auto px-4 sm:px-6 lg:px-8w-full px-4grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4flex items-center justify-betweenflex flex-colbg-white shadow h-16flex items-center justify-betweenw-64 bg-white shadow-mdpx-4 py-3 hover:bg-gray-100bg-green-100 text-green-800 p-4 rounded-mdbg-red-100 text-red-800 p-4 rounded-mdbg-yellow-100 text-yellow-800 p-4 rounded-mdbg-blue-100 text-blue-800 p-4 rounded-mdflex justify-center items-centermax-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8所有页面应遵循统一的布局结构：
┌─────────────────────────────────────────────────────────────┐
│ Header (统一头部导航) │
│ - 返回按钮 + 页面标题 + 操作按钮 + 用户信息 │
├─────────────────────────────────────────────────────────────┤
│ │
│ Main Content (主内容区) │
│ - 统一容器: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 │
│ - 背景色: bg-gray-50 │
│ │
├─────────────────────────────────────────────────────────────┤
│ Footer (可选) │
└─────────────────────────────────────────────────────────────┘
| 按钮类型 | Tailwind 类名 |
|---|---|
| 主要按钮 | px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 shadow-md hover:shadow-lg transition-all duration-200 |
| 次要按钮 | px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 shadow-md hover:shadow-lg transition-all duration-200 |
| 危险按钮 | px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 shadow-md hover:shadow-lg transition-all duration-200 |
| 元素 | Tailwind 类名 |
|---|---|
| 输入框 | w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent |
| 选择框 | w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent |
| 错误状态 | border-red-500 focus:ring-red-500 |
| 元素 | Tailwind 类名 |
|---|---|
| 基础卡片 | bg-white p-6 rounded-lg shadow |
| 悬停卡片 | bg-white p-6 rounded-lg shadow hover:shadow-lg transition-all duration-200 |
| 选中卡片 | border-2 border-green-500 bg-green-50 |
| 元素 | Tailwind 类名 |
|---|---|
| 表格容器 | min-w-full divide-y divide-gray-200 |
| 表头 | bg-gray-50 |
| 行悬停 | hover:bg-gray-50 |
| 页面类别 | 包含页面 | 统一内容 |
|---|---|---|
| 认证页面 | 登录页、注册页 | 表单样式、按钮样式、错误提示 |
| 首页 | 首页 | 卡片样式、导航交互 |
| 家族管理 | 家族管理页、家族树页 | 家族选择器、操作按钮、数据展示 |
| 成员管理 | 成员列表页、成员详情页、成员搜索页 | 成员卡片、列表样式、编辑表单 |
| 关系管理 | 关系管理页 | 关系选择器、表单布局 |
| 历史记录 | 历史记录页、成员大事件页 | 时间轴样式、事件卡片 |
| 多媒体 | 多媒体库页 | 网格布局、媒体卡片、上传交互 |
| 系统管理 | 操作日志页、项目进度页 | 表格样式、筛选器 |
| AI功能 | AI关系分析页、家族故事页、图片导入页 | 结果展示、加载状态 |
| 地图功能 | 成员位置页 | 地图容器、标记样式 |
| 个人中心 | 个人信息页 | 表单样式、头像上传 |
| 场景 | 样式 |
|---|---|
| 页面加载 | flex justify-center py-8 + 旋转动画 |
| 旋转动画 | animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 |
| 类型 | 颜色 | 用途 |
|---|---|---|
| success | 绿色背景 | 操作成功 |
| error | 红色背景 | 操作失败 |
| warning | 黄色背景 | 警告信息 |
| info | 蓝色背景 | 一般信息 |
通过遵循本设计系统规范，可以确保应用的设计风格一致、用户体验良好，同时提高设计和开发效率。