🎨 UI 设计风格分析
kiro-unified-manager 的 UI 特点：

现代简约风格 - 使用 Tailwind CSS，干净的卡片布局
专业的管理后台风格 - 类似企业级 SaaS 产品
优雅的动画效果 - 淡入淡出、滑动过渡
响应式设计 - 适配不同屏幕尺寸
直观的状态指示 - 颜色编码的状态标签
丰富的交互反馈 - 悬停效果、加载状态
📝 UI 提示词模板
基础风格提示词
请设计一个现代化的管理后台界面，具有以下特点：

**整体风格：**
- 使用简约现代的设计语言，类似 Tailwind CSS 风格
- 采用卡片式布局，白色背景配合浅灰色边框
- 整体配色以蓝色系为主色调（#3b82f6），搭配灰色系辅助色
- 界面干净整洁，留白充足，视觉层次清晰

**布局结构：**
- 顶部导航栏：白色背景，包含 Logo、导航标签和用户信息
- 主内容区域：浅灰色背景（#f9fafb），居中布局，最大宽度限制
- 卡片容器：白色背景，圆角边框，轻微阴影效果

**交互元素：**
- 按钮：圆角设计，主要按钮使用蓝色，次要按钮使用灰色
- 表格：斑马纹效果，悬停高亮
- 表单：简洁的输入框，聚焦时蓝色边框
- 状态标签：彩色圆角标签，不同状态使用不同颜色

**动画效果：**
- 页面切换使用淡入淡出效果
- 按钮悬停有颜色过渡
- 模态框弹出有缩放动画
- 通知消息从右上角滑入

**响应式设计：**
- 移动端友好，自适应布局
- 表格在小屏幕上可横向滚动
- 导航在移动端可折叠
具体组件提示词
**导航栏设计：**
创建一个顶部导航栏，白色背景，高度64px，包含：
- 左侧：品牌 Logo + 图标，使用蓝色主题
- 中间：水平导航标签，激活状态有蓝色下边框
- 右侧：用户头像 + 下拉菜单

**数据表格设计：**
设计一个现代化数据表格：
- 表头使用浅灰色背景
- 行间隔使用斑马纹效果
- 悬停行高亮显示
- 状态列使用彩色圆角标签
- 操作列包含彩色文字链接

**模态框设计：**
创建优雅的模态框：
- 半透明黑色遮罩背景
- 白色圆角内容区域
- 顶部标题栏带关闭按钮
- 底部操作按钮区域
- 弹出时有缩放动画效果

**通知消息设计：**
设计右上角通知组件：
- 固定定位在右上角
- 彩色背景（成功绿色、错误红色、信息蓝色）
- 白色文字，包含图标
- 自动消失，滑入滑出动画

**按钮系统：**
- 主要按钮：蓝色背景，白色文字，悬停变深蓝
- 次要按钮：灰色边框，灰色文字，悬停背景变浅灰
- 危险按钮：红色背景，用于删除等操作
- 禁用状态：50% 透明度，不可点击
颜色系统提示词
**配色方案：**
- 主色调：蓝色系 (#3b82f6, #2563eb, #1d4ed8)
- 成功色：绿色系 (#10b981, #059669)
- 警告色：黄色系 (#f59e0b, #d97706)
- 错误色：红色系 (#ef4444, #dc2626)
- 中性色：灰色系 (#6b7280, #4b5563, #374151)
- 背景色：浅灰色 (#f9fafb, #f3f4f6)
- 文字色：深灰色 (#111827, #374151, #6b7280)
动画效果提示词
**动画系统：**
- 页面过渡：300ms 淡入淡出效果
- 按钮悬停：200ms 颜色过渡
- 模态框：弹出时 0.3s 缩放动画，从 0.95 到 1.0
- 通知消息：从右侧滑入，3秒后自动滑出
- 加载状态：旋转动画的 spinner 图标
- 表格行悬停：背景色平滑过渡
🚀 使用建议
当你要创建类似风格的网站时，可以这样使用提示词：

基础搭建：先使用"基础风格提示词"建立整体框架
组件细化：根据需要使用"具体组件提示词"
样式调整：参考"颜色系统"和"动画效果"进行微调
技术栈：建议使用 Tailwind CSS + Vue.js 或 React