Menu
提供设计系统的标准规范，包括设计原则、视觉风格、组件库等。Invoke when designing new features or components for the application.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
简洁风格技能，禁止废话，采用caveman式简短直接的表达方式
个人文档管理技能，管理变更记录、方案设计Spec文档、测试报告等，统一存放在docs目录下
项目启动管理技能，支持Java Spring Boot和Vue项目的启动、重启、关闭操作，保持原有端口不变
方案调研技能，对方案设计、功能实现进行多方案比对分析，至少3个方案，建议5个左右的方案比对，包括业界标杆方案、大厂实现方案等
基于OpenAPI规范生成API文档，支持Swagger UI和ReDoc展示
提供后端单元测试指导和生成能力，支持JUnit 5、Mockito等框架
| 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 | 蓝色背景 | 一般信息 |
通过遵循本设计系统规范，可以确保应用的设计风格一致、用户体验良好，同时提高设计和开发效率。