3.7 KiB
3.7 KiB
🎨 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