Menu
提供设计系统的标准规范，包括设计原则、视觉风格、组件库等。Invoke when designing new features or components for the application.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
简洁风格技能，禁止废话，采用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 | 蓝色背景 | 一般信息 |
通过遵循本设计系统规范，可以确保应用的设计风格一致、用户体验良好，同时提高设计和开发效率。