mcpField
D
dashboard-design

dashboard-design

github.com/arnavpuri设计与 UI17130 次安装4 周前更新
代码仓库

关于 dashboard-design

dashboard-design 是用于构建响应式仪表盘的设计技能，涵盖布局、图表、表格、状态指示和无障碍设计。它指导设计者和编码 Agent 从设计上下文与令牌规划，直到检查不同屏幕尺寸下的渲染效果。

主要功能

  1. 01选择侧边栏或顶部导航布局
  2. 02按数据类型选择图表
  3. 03应用可复用的设计令牌
  4. 04设计响应式卡片和表格
  5. 05检查无障碍性和渲染截图

适用场景

  1. 01规划运营指标仪表盘
  2. 02为趋势和对比数据选择图表
  3. 03调整移动端表格和导航
  4. 04在多种屏幕宽度下检查生成的仪表盘

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/arnavpuri/designskills --skill dashboard-design

安装后在 Claude Code 中输入/dashboard-design确认已加载。

详细介绍

仪表板设计

开始之前：加载设计上下文

  1. 阅读 .agents/design-context.md（由 design-context 技能编写）。如果文件不存在，请在 tailwind.config.* 或 :root CSS 变量中查找设计令牌。如果没有任何内容，请使用默认值（主色 #2563EB、次要色 #7C3AED、强调色 #F59E0B、Tailwind 灰色中性色、标题和正文使用 Inter、极简风格），并告知用户使用了默认值——建议运行 design-context。
  2. 将设计令牌映射到 CSS 变量一次，之后仅使用这些变量：--color-primary、--color-primary-light、--color-primary-dark、--color-secondary、--color-accent、--color-neutral-50…--color-neutral-900、--color-success/-warning/-error、--font-heading、--font-body、--font-mono、--radius，以及以 4px 为基准的间距比例。
  3. **Tailwind：**将相同的变量公开为 primary、primary-light、primary-dark、secondary、accent、neutral-*、font-heading、font-body（v3 使用 theme.extend，v4 使用 @theme）。以下示例中的 indigo-* / gray-* 类是这些设计令牌的占位符。
  4. **Figma：**如果用户提供 Figma URL，请通过 Figma MCP（get_design_context、get_screenshot）获取设计，并按其实现；对于该设计，Figma 设计优先于上下文文件。
  5. 询问或推断：展示什么数据、谁会使用、他们会执行哪些操作？将成功/警告/错误映射到状态徽标，并根据主色/次要色/强调色推导图表颜色（第 3 节）。

1. 布局模式

模式 A：侧边栏 + 主内容区（最常见）
<div class="flex h-screen bg-gray-50">
  
  
  <aside class="hidden lg:flex w-64 shrink-0 bg-white border-r border-gray-200 flex-col">
    
    <div class="h-16 flex items-center px-6 border-b border-gray-100">
      <img src="/logo.svg" alt="App" class="h-8" />
    </div>
    
    <nav aria-label="Main" class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
      
      <a href="#" aria-current="page" class="flex items-center gap-3 px-3 py-2 rounded-lg
        bg-indigo-50 text-indigo-700 font-medium text-sm">
        <svg class="w-5 h-5" aria-hidden="true"></svg>
        Dashboard
      </a>
      
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg
        text-gray-600 hover:bg-gray-100 hover:text-gray-900 text-sm transition-colors">
        <svg class="w-5 h-5" aria-hidden="true"></svg>
        Analytics
      </a>
      
      <div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">
        Settings
      </div>
    </nav>
    
    <div class="p-4 border-t border-gray-100">
      <div class="flex items-center gap-3">
        <img src="/avatar.jpg" alt="" class="w-8 h-8 rounded-full" />
        <div class="text-sm">
          <div class="font-medium text-gray-900">Jane Doe</div>
          <div class="text-gray-500 text-xs">Admin</div>
        </div>
      </div>
    </div>
  </aside>

  
  <main class="flex-1 min-w-0 overflow-y-auto">
    
    <header class="h-16 bg-white border-b border-gray-200 flex items-center
      justify-between px-6 sticky top-0 z-10">
      <h1 class="text-lg font-semibold text-gray-900">Dashboard</h1>
      <div class="flex items-center gap-4">
        
      </div>
    </header>
    
    <div class="p-6">
      
    </div>
  </main>
</div>
侧边栏行为
  • 桌面端（lg+）：始终可见，宽 240–280px。
  • 平板端（md）：可折叠为仅图标模式（64px），并显示工具提示标签。
  • 移动端（< md）：默认隐藏；点击带标签的菜单按钮后，以带背景遮罩的覆盖式抽屉打开（设置 aria-expanded，将焦点移入抽屉，按 Esc 关闭）。
  • 断点遵循 ui-design 中的 Tailwind 默认值（md 768、lg 1024、xl 1280、2xl 1536）。
模式 B：顶部导航 + 网格
  • 最适用于导航项较少的简单仪表板。
  • 顶部使用水平导航栏，下方内容填满剩余区域。
  • 子部分使用标签页或胶囊式导航。

2. 数据卡片（KPI 磁贴）

标准统计卡片
<div class="bg-white rounded-xl border border-gray-200 p-6">
  <div class="flex items-center justify-between">
    <span class="text-sm font-medium text-gray-500">Total Revenue</span>
    <span class="w-10 h-10 rounded-lg bg-emerald-50 text-emerald-600
      flex items-center justify-center">
      <svg class="w-5 h-5" aria-hidden="true"></svg>
    </span>
  </div>
  <div class="mt-3">
    <span class="text-3xl font-bold text-gray-900">$45,231</span>
  </div>
  <div class="mt-2 flex items-center gap-1.5 text-sm">
    <span class="text-emerald-600 font-medium flex items-center gap-0.5">
      <svg class="w-4 h-4" aria-hidden="true"></svg>
      <span class="sr-only">Up</span> +12.5%
    </span>
    <span class="text-gray-500">vs last month</span>
  </div>
</div>
卡片网格布局
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
  
</div>
卡片变体
  • 带迷你趋势图：在数字下方添加小型内嵌图表。
  • 带进度条：显示目标完成进度。
  • 带迷你表格：在统计数据下方列出排名前 3 的项目。
  • 负向趋势：使用红色、向下箭头和减号，不要只用颜色表示（考虑色盲用户）。
  • 加载中：显示同尺寸的骨架屏卡片，而不是旋转加载图标，避免网格布局发生位移。

3. 图表选择指南

数据类型最佳图表适用场景
随时间变化的趋势折线图按天/月展示收入、用户数、性能
比较条形图比较类别、A/B 测试结果
组成饼图 / 环形图预算明细、流量来源（最多 5 个扇区）
随时间变化的体量面积图带宽、累积指标
分布直方图年龄范围、价格范围
关系散点图两个变量之间的相关性
进度进度条 / 仪表盘目标完成情况、配额
排名横向条形图热门页面、热门产品
图表设计规则
  1. 为每张图表添加标题，说明图表展示的内容，而不是如何阅读图表。
  2. 清晰标注坐标轴。注明单位。
  3. 将颜色限制在最多 5–6 种，并从品牌设计令牌中选取。每个系列的颜色与图表背景之间都需达到 3:1 的对比度（WCAG 1.4.11）；添加直接标签或纹理，避免仅靠颜色传递信息。
  4. 条形图的 Y 轴从零开始。折线图的基线可以不为零。
  5. 添加工具提示，在悬停时显示精确数值。
  6. 谨慎使用网格线——使用浅色虚线，而非实线。
  7. 响应式：图表应调整尺寸，而不是溢出。
图表配色方案
:root {
  /* Lightness ≤ ~65% keeps ≥ 3:1 against white; lighten ~10–15% for dark backgrounds */
  --chart-1: var(--color-primary);
  --chart-2: oklch(58% 0.12 185);  /* teal */
  --chart-3: oklch(58% 0.19 350);  /* pink */
  --chart-4: oklch(64% 0.15 60);   /* amber/orange */
  --chart-5: oklch(55% 0.14 145);  /* green */
}

如果已安装数据可视化技能（例如 dataviz），请按照其规范设置图表标记、图例和工具提示。

4. 表格设计

功能齐全的数据表
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
  
  <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <h2 class="font-semibold text-gray-900">Recent Orders</h2>
      <span class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-full">
        2,847
      </span>
    </div>
    <div class="flex items-center gap-2">
      
      <input type="search" placeholder="Search orders…" aria-label="Search orders"
        class="text-sm border border-gray-300 rounded-lg px-3 py-1.5 w-full sm:w-56
        focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20" />
      
      <button type="button" class="text-sm text-gray-600 border border-gray-300 rounded-lg
        px-3 py-1.5 hover:bg-gray-50 flex items-center gap-1.5">
        <svg class="w-4 h-4" aria-hidden="true"></svg>
        Filters
      </button>
    </div>
  </div>

  
  <div class="overflow-x-auto">
  <table class="w-full text-sm">
    <caption class="sr-only">Recent orders</caption>
    <thead>
      <tr class="border-b border-gray-100 text-left">
        <th scope="col" aria-sort="ascending" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
          <button type="button" class="flex items-center gap-1 hover:text-gray-700">
            Customer
            <svg class="w-3 h-3" aria-hidden="true"></svg>
          </button>
        </th>
        <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
          Status
        </th>
        <th scope="col" class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider
          text-right">
          Amount
        </th>
        <th scope="col" class="px-6 py-3 w-12"><span class="sr-only">Actions</span></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-50">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4">
          <div class="flex items-center gap-3">
            <img src="/avatar.jpg" alt="" class="w-8 h-8 rounded-full" />
            <div>
              <div class="font-medium text-gray-900">Jane Cooper</div>
              <div class="text-gray-500 text-xs">[email protected]</div>
            </div>
          </div>
        </td>
        <td class="px-6 py-4">
          <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full
            text-xs font-medium bg-emerald-50 text-emerald-700">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
            Completed
          </span>
        </td>
        <td class="px-6 py-4 text-right font-medium text-gray-900">$2,500.00</td>
        <td class="px-6 py-4">
          <button type="button" aria-label="Actions for Jane Cooper" aria-haspopup="menu"
            class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100">
            <svg class="w-5 h-5" aria-hidden="true"></svg>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  </div>

  
  <nav aria-label="Pagination" class="px-6 py-4 border-t border-gray-100 flex items-center justify-between text-sm">
    <span class="text-gray-500">Showing 1-10 of 2,847</span>
    <div class="flex gap-1">
      <button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
        hover:bg-gray-50 disabled:opacity-50" disabled>Previous</button>
      <button class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white" aria-current="page">1</button>
      <button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
        hover:bg-gray-50">2</button>
      <button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
        hover:bg-gray-50">Next</button>
    </div>
  </nav>
</div>
表格设计规则
  • 数字右对齐，文本左对齐。
  • 悬停行高亮（hover:bg-gray-50）。
  • 滚动时固定表头（在 <th> 上使用 sticky top-0，并设置纯色背景，否则表头下方的行会透出来）。
  • 可排序列：在 <th> 内放置 <button>，并在已排序的列上设置 aria-sort。
  • 可选用斑马纹；优先使用低调的分隔线。
  • 行操作：使用图标按钮（三个点）打开下拉菜单。

5. 状态指示器

徽标样式

<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-emerald-50 text-emerald-700">
  <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>Active
</span>


<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-amber-50 text-amber-700">
  <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>Pending
</span>


<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-red-50 text-red-700">
  <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>Failed
</span>


<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
  font-medium bg-gray-100 text-gray-600">
  <span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>Draft
</span>
进度条
<div class="w-full bg-gray-100 rounded-full h-2">
  <div class="bg-indigo-600 h-2 rounded-full transition-all duration-500"
    style="width: 65%"></div>
</div>

6. 深色模式仪表盘

监控和运维仪表盘通常会在深色模式下使用。请使用 dark-mode 技能的完整令牌系统中的表面、文本和边框令牌（--bg-base / --bg-surface / --bg-elevated、--text-*、--border），不要在这里定义第二套令牌。

仪表盘专属规则
  • 通过更亮的表面体现层级，而非阴影。
  • 将图表颜色的饱和度降低约 15%，并提高亮度，使数据系列在深色表面上仍达到 3:1 的对比度。
  • 使用半透明边框（oklch(100% 0 0 / 0.08)）。
  • 当前选中的侧边栏项目使用更亮的背景，而非彩色背景。

7. 实时数据指示器

实时脉冲圆点
<span class="relative flex h-2.5 w-2.5" aria-hidden="true">
  <span class="motion-safe:animate-ping absolute inline-flex h-full w-full rounded-full
    bg-emerald-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
</span>
上次更新时间戳
<span class="text-xs text-gray-500 flex items-center gap-1.5" role="status">
  <span class="w-1.5 h-1.5 rounded-full bg-emerald-500" aria-hidden="true"></span>
  Live — Updated 3s ago
</span>
自动刷新模式
  • 刷新前显示低调的倒计时或进度条。
  • 对发生变化的数值添加动画（增加时闪现绿色，减少时闪现红色）。
  • 切勿刷新整个页面，只更新单个数据点。
  • 不要将快速变化的数字放入 aria-live 区域（这会不断播报，干扰屏幕阅读器）；只播报有意义的事件（例如“新增 3 个订单”）。

8. 信息密集而不杂乱

方法
  1. 渐进式披露：显示摘要，展开后查看详情。
  2. 选项卡分区：不要一次显示所有内容。
  3. 可折叠面板：让用户隐藏不需要的内容。
  4. 用于补充说明的工具提示，而非必要标签：工具提示也必须支持键盘聚焦和点击打开。
  5. 保持间距一致：使用 ui-design 中以 4px 为基准的比例（4、8、12、16、24、32、48、64）。
  6. 使用较小的基础字号：仪表盘正文可使用 13–14px（不得小于 12px）。
  7. 数据使用等宽数字：表格和关键绩效指标中的数字使用 tabular-nums，使数字对齐。
.data-table td {
  font-variant-numeric: tabular-nums; /* Tailwind: tabular-nums */
}

9. 响应式仪表盘布局

断点策略
  • 移动端（< 768px）：单列。卡片垂直堆叠。表格改为卡片列表。隐藏侧边栏。
  • 平板端（768–1024px）：两列网格。侧边栏折叠为图标。简化图表。
  • 桌面端（1024px+）：完整布局。展开侧边栏。使用多列网格。
  • 宽屏（1536px+）：增加额外列，而不是拉伸内容；将文字较多的内容宽度限制在约 1440px（使用 max-w-screen-2xl 或类似设置）。
移动端表格替代方案

在 md（768px）以下，隐藏表格（在其包装元素上设置 hidden md:block），并将每一行渲染为卡片：


<dl class="md:hidden bg-white rounded-xl border border-gray-200 p-4 space-y-2 text-sm">
  <div class="flex justify-between">
    <dt class="text-gray-500">Customer</dt>
    <dd class="font-medium text-gray-900">Jane Cooper</dd>
  </div>
  <div class="flex justify-between">
    <dt class="text-gray-500">Status</dt>
    <dd><span class="bg-emerald-50 text-emerald-700 text-xs px-2 py-0.5 rounded-full">Active</span></dd>
  </div>
  <div class="flex justify-between">
    <dt class="text-gray-500">Amount</dt>
    <dd class="font-medium text-gray-900">$2,500.00</dd>
  </div>
</dl>

验证：渲染并检查

不要提交未经检查的代码。生成代码后：

  1. 在移动端和桌面端宽度下截屏，例如运行 npx playwright screenshot --full-page --viewport-size=390,844 file://$PWD/index.html mobile.png，然后使用 --viewport-size=1440,900 再截一次（也可以指定开发服务器 URL）。
  2. 打开两张图片并检查：没有水平滚动或文本裁切、重叠；层级一目了然；品牌令牌已应用；图像按正确的宽高比加载。
  3. 用 Tab 键遍历一次：每个交互元素都应显示可见的焦点环，且顺序合理。
  4. 还要在 768px 下截屏：侧边栏应折叠；表格应可滚动或变为卡片；图表应调整大小而不是溢出。如果构建了深色主题，也要检查。
  5. 修复发现的问题，并在报告完成前重新截屏。

仪表板设计清单

  • 侧边栏导航，具有清晰的活动状态和分组
  • 顶部显示带趋势指标的 KPI 卡片
  • 图表包含标题、标签和工具提示
  • 表格支持排序、搜索、筛选和分页
  • 状态徽章采用一致的颜色编码
  • 响应式设计：适用于平板电脑和手机
  • 为所有异步数据提供加载骨架屏
  • 表格和图表无数据时显示空状态
  • 考虑深色模式（尤其是监控仪表板）
  • 数字使用 tabular-nums 对齐
  • 仅含图标的按钮和搜索输入框具有无障碍名称；趋势不单靠颜色区分
  • 在 390px、768px 和 1440px 下渲染并截图（参见 Verify）

评论

支持 Markdown