数据分析仪表盘
构建响应式数据分析仪表盘，包含固定侧边栏、带搜索和用户头像的顶部栏，以及主内容区。顶部放置 4 张 KPI 指标卡，分别展示收入、用户数、转化率和活跃会话；下方提供用于趋势分析的大型面积图、用于数据对比的柱状图，以及最近活动数据表。使用白色背景、低对比灰色边框和专业的中性色板，所有模块之间保持清晰一致的间距。仪表盘设计提示词
仪表盘设计的核心在于将复杂数据以直觉化、可扫视的布局呈现。优秀的仪表盘通过清晰的视觉层级、一致的间距、有意义的色彩编码帮助用户快速理解指标并采取行动。现代仪表盘 UI 通常包含固定侧边栏导航、顶部搜索与用户操作栏，以及由卡片、图表和数据表组成的主内容区。
v0 管理面板
使用 shadcn/ui 组件创建后台管理仪表盘。包含带图标和文字标签的可折叠侧边栏、面包屑导航、4 张带 sparkline 的统计卡、支持排序、筛选和分页的数据表，以及通知下拉菜单。使用 Tailwind CSS 和中性灰色板；布局必须响应式，移动端侧边栏收起后仅显示图标。Cursor 仪表盘
使用 Next.js、Tailwind CSS 和 Recharts 构建仪表盘页面。左侧为 240px 固定侧边栏，包含 logo、带图标的导航链接和底部用户资料；主区域顶部放置页面标题与日期范围选择器。内容网格第一行是 4 张指标卡，第二行是占 60% 宽度的折线图和占 40% 宽度的环形图，第三行是数据表。使用 Inter、16px 基础网格和暖中性色板。Claude 仪表盘
生成完整的 React + TypeScript 仪表盘组件。使用 CSS Grid 构建响应式布局，通过 CSS 自定义属性支持深色与浅色主题；侧边栏包含嵌套菜单，指标卡使用上升/下降箭头和百分比表示趋势，图表使用 Recharts，并提供可排序数据表。使用正确的 ARIA role 和语义标记满足可访问性要求，样式使用 Tailwind CSS。深色侧边栏金融仪表盘
设计财务仪表盘，使用深色侧边栏 (#0f172a) 和浅色内容区 (#f8fafc)。侧边栏宽 256px，导航文字使用 #94a3b8，当前项使用完整的 1px #3b82f6 边框和 #1e293b 背景。内容区包含余额、收入、支出和储蓄率 4 张 KPI 卡，每张卡显示 12 个数据点的 sparkline。数值使用 28px semibold 和 tabular-nums；正向变化用 #16a34a，负向变化用 #dc2626，并始终配合箭头图标，避免只依赖颜色传达状态。卡片为白色，使用 1px #e2e8f0 边框和 24px padding，网格 gap 为 24px。加入交易表，使用 #f1f5f9 斑马纹行并将金额右对齐。v0 移动优先分析面板
使用 shadcn/ui 创建 mobile-first 数据分析仪表盘。移动端使用包含 4 项的底部 tab bar，高 56px，触摸目标至少 44px；指标卡全宽纵向排列，图表卡支持横向滚动和 scroll-snap。到 md 断点后切换为 12 列网格，并显示可折叠左侧边栏。背景使用 #fafafa，卡片使用 #ffffff 和 #e5e5e5 边框，当前状态与图表线统一使用靛蓝 #4f46e5。排版使用 Inter、14px 正文和 24px 指标值。图表轴标签必须以 12px #737373 清晰显示，所有文字达到 4.5:1 对比度。Cursor 实时运维仪表盘
使用 Next.js、Tailwind 和 Recharts 构建实时运维仪表盘。深色主题背景为 #09090b，面板为 #131316，并使用 1px #26262b 边框和 8px radius。状态语义为正常 #22c55e、性能下降 #f59e0b、离线 #ef4444，每种状态都必须同时显示圆点与文字标签，不能只依赖颜色。布局包含由 6 个服务卡组成的顶部状态区、显示最近 60 秒数据的大型实时折线图，以及使用 13px JetBrains Mono 的日志流，时间戳颜色为 #a1a1aa。日志流设置 aria-live=polite，网格 gap 为 16px；脉冲圆点动画仅改变 transform 和 opacity。Claude 人事管理后台
生成 React + TypeScript 的 HR 后台面板。布局包含 240px 侧边栏，导航按 People、Payroll、Settings 分组，分组标签使用 11px uppercase #6b7280；内容区使用 sticky header，放置面包屑与搜索框。员工表显示头像、姓名、部门 badge 和状态 pill；在职状态使用 #dcfce7 背景与 #166534 文字，离职流程中使用 #fee2e2 背景与 #991b1b 文字，确保 4.5:1 对比度。行高 56px，单元格 padding 16px，表头背景 #f9fafb。添加宽 480px 的侧滑详情 drawer，字段组遵循 24px 垂直节奏。全局使用 Inter。常见问题
什么是好的仪表盘 UI 设计？
好的仪表盘设计注重可扫视性：将最重要的 KPI 放在顶部，使用一致的卡片尺寸，限制色板为 3-5 个有意义的颜色，确保图表有清晰标签，并在各区块间保持充足的留白。导航应常驻（侧边栏或顶部栏），让用户始终清楚当前位置。
如何用 Tailwind CSS 创建仪表盘？
通过 Tailwind 工具类使用 CSS Grid 或 Flexbox：主布局用 'grid grid-cols-12 gap-6'，侧边栏用 'col-span-3'，内容区用 'col-span-9'。指标卡片用 shadcn/ui Card 组件，数据可视化用 Recharts 或 Chart.js，固定头部用 Tailwind 的 'sticky top-0'。UI Library 提供现成的仪表盘 design tokens 和组件配方。
哪些 AI 工具可以生成仪表盘设计？
Vercel 的 v0 可以通过文字提示生成完整的仪表盘 UI（基于 shadcn/ui）。Cursor 和 Claude 能生成包含图表和表格的完整仪表盘代码。UI Library 通过提供 design tokens 和风格规则来增强所有这些工具，确保生成组件的视觉一致性。
仪表盘最佳布局是什么？
最常见且有效的布局是固定侧边栏（200-280px）搭配可滚动的主内容区。内容区使用 12 列网格，第一行放指标卡片（每个占 3-4 列），第二行放图表，底部放全宽数据表。该模式在侧边栏在移动端折叠为图标时，能在各种屏幕尺寸下良好运行。
仪表盘一次应该展示多少个指标？
首屏展示 4-6 个核心 KPI 即可；可扫视性研究表明用户一眼最多能可靠比较 5-7 个数值。每张卡片只放一个 24-32px 的主数字，趋势变化作为 13-14px 的次要文字。其余内容应放在下方的图表或表格中，或收进日期范围、分群筛选器里。如果需求方要 15 个指标，用标签页分组（概览、营收、活跃）而不是缩小卡片——每个数字都很小的仪表盘，等于没有数字被真正读到。
仪表盘的图表配色如何选择？
主数据系列使用一个品牌强调色（如 #3b82f6），分类色在保持相近明度的前提下旋转色相派生，每张图表最多 6 个系列。顺序型数据（热力图）应变化单一色相的明度而非混用多个色相。红色和绿色严格保留给负向/正向语义，并始终搭配图标或文字标签照顾色盲用户。网格线和坐标轴要低调：浅色主题下用 #e5e7eb 线条配 #6b7280 标签。所有文字与色块的组合都要通过 WCAG AA 的 4.5:1 对比度检测。