99 lines
3.7 KiB
Markdown
99 lines
3.7 KiB
Markdown
🎨 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 |