什么是仪表板设计？
Dashboard Design 是一项 Claude Code 技能，为编码代理提供分析、收入和指标界面的实用设计指导。它可以构建新的仪表板、重新设计现有页面，或评审截图并按严重程度排列问题。
这些指导总结自 127 个已上线的仪表板页面、对一款收入分析产品的详细拆解，以及一次真实的重新设计过程。该技能不仅关注代码质量，还会通过截图质量检查完成完整任务，让代理评估用户实际看到的内容。
该技能涵盖常见的仪表板元素，例如 KPI 卡片、图表、对比周期、排名列表、筛选器、日期范围选择器、洞察、空状态、响应式布局和手机端导航。其规范使用 Tailwind 和 React 术语来描述 Web 项目，同时还提供单独的参考文档，说明对应的 SwiftUI 和 Swift Charts 模式。
核心设计原则
该项目围绕四项原则组织建议：
- 一眼看懂：每个页面都应在大约三秒内回答一个主要问题。
- 安静：使用一种强调色，让辅助元素保持灰色，并且只在颜色能够传达含义时使用颜色。
- 诚实：保持界面中的数值一致，标注估算值，并避免基于极小样本展示戏剧性的百分比变化。
- 形胜于文：优先使用图表、条形图和标签来帮助用户快速理解，同时将定义放入工具提示。
这些原则会带来具体的改变。选中的 KPI 卡片使用柔和的浅色填充和淡淡的环形边框，而不是简单的下划线。排名行使用纤细的占比条，而不是大面积的浅色背景。图表坐标轴使用易读的整刻度，例如 0、1k 和 2k，而不是 1,402 这类不自然的数值。
响应式布局，而非固定列
围绕狭窄中央列设计的仪表板会浪费大屏幕上的空间。Dashboard Design 指导代理随着视口扩大增加有用的列数，同时为小屏幕重新组织控件和导航。
之前
之后
在手机上，该技能避免依赖需要横向滚动的导航标签。它建议使用菜单网格等布局，并让标签缩小以适应可用空间。
安装
选项 1：作为 Claude Code 插件安装
在 Claude Code 中，将该项目添加为插件市场，然后安装此技能：
/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill当 Claude Code 是你的主要编码代理时，这是最直接的安装方式。
选项 2：作为普通 Claude 技能安装
克隆代码仓库，并将其技能目录复制到本地 Claude 技能文件夹：
git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/复制后的目录包含该技能所需的主要说明和全部支持性参考资料。
选项 3：与其他编码代理配合使用
该项目也可以与 Codex、Cursor 或其他能够读取 Markdown 指令文件的代理配合使用。将代理的 AGENTS.md 或规则文件指向：
skills/dashboard-design/SKILL.md主技能文档会指导代理使用适当的参考资料。由于这些规则描述的是通用界面模式，因此也可以适配 React、Tailwind 和 SwiftUI 以外的技术栈。
了解技能文件
该代码仓库将工作流程与详细参考资料分开：
SKILL.md包含工作流程、评审格式、通用规则、统一风格和完成检查。references/components.md涵盖 KPI 磁贴、变化值、迷你图、图表、排名列表、筛选器、表格、空状态、实时视图和营收可信度提示。references/layout.md介绍页面顺序、网格、宽屏显示器、手机、排版和深色模式。references/tokens.md使用 Tailwind v4@theme提供浅色和深色颜色令牌，并附有着色指导。references/snippets.md包含圆形坐标轴刻度、数字格式化、变化值徽章、对比时间窗口、KPI 磁贴、细条行、范围日历和过期响应防护的实现。references/qa.md定义截图尺寸、已知总额检查、一致性检查和常见设计问题。references/swiftui.md将这些模式转换为 SwiftUI 和 Swift Charts，并介绍模拟器质量检查。references/sources.md记录了 40 多个经过研究的产品和设计系统。references/case-study-datafast.md记录了一个营收分析产品中的模式和权衡。
工作流程的每个阶段都会以可检查的完成定义结束。这使该技能不仅可用于获取灵感，也可作为可重复的评审流程。
基本用法
安装后，当你处理与仪表板相关的代码时，该技能可以自动触发。你也可以通过明确而聚焦的请求来调用它的行为。
构建仪表板
描述产品，并明确屏幕需要传达的指标：
为这个应用构建一个分析仪表板：访客数、注册数、按来源划分的营收。有效的请求会向代理提供清晰的主题和一小组关键指标。这有助于落实项目的首屏信息原则，让代理确定屏幕应回答的首要问题。
评审现有设计
提供截图并请求评估：
这是一个好的设计吗？评审格式会给出结论、指出有效之处，并按危害程度排列问题。数据完整性优先，因此应先报告相互矛盾的数字，再处理次要的视觉问题。
重新设计一个组件
你不必请求完整的仪表板重新设计，也可以只针对单个组件：
重新设计日期范围选择器。让 KPI 磁贴更简洁。例如，该技能更倾向于使用带有选定日期之间柔和色带、实心端点、持续时长和“应用”操作的范围日历，而不是直接展示普通的原生日期输入框。
执行质量检查
若要检查已实现的路由，请请求专门的仪表板评审：
对 /dashboard 执行仪表板质量检查。对于 Web 项目，文档记录的截图流程会检查三种视口宽度：3440、1440 和 375 像素。这可以发现超宽布局问题、常规桌面端问题以及手机端特有的故障。
该技能帮助强制执行的模式
使用诚实的对比
当前一个数值很小时，百分比变化可能会造成误导。如果一笔销售从 1 降至 0，显示醒目的红色 −100% 会夸大变化的重要性。该技能建议改用低调的说明，例如 原为 1。
一致性同样重要。如果 KPI 磁贴、图表和表格表示同一个总额，这些数值就应保持一致。质量检查流程包含已知总额和一致性检查，用于发现不匹配。
保持时间窗口一致
迷你图应表示与主图或对比上下文相同的时间段。如果迷你图显示 60 天且大部分为空，而主图使用更短的活跃时间段，就可能扭曲趋势的直观表现。
只展示有用的洞察
洞察卡片应提供解释，而不是重复 KPI 磁贴。如果它没有告诉用户任何新信息，该技能建议省略它，以保持视觉上的简洁。
为不同屏幕尺寸的增长做好设计
不要只是在更大的显示器上居中放置固定宽度的仪表板。如果这样有助于比较，应让宽屏显示更多列。在手机上，应确保控件和导航能够重新组织，而不是依赖水平滚动。
高级技巧
请求结构化构建和评审
你可以在一个请求中结合实现和评估，同时明确预期的完成标准：
构建营收仪表板，确认重复出现的总额彼此一致，并以仪表板截图质量检查结束。这会使任务符合该技能的预期工作流程：实现界面、验证数据呈现、检查多种屏幕尺寸，并评判渲染结果。
直接使用相关参考文件
当任务范围较小时，可以将代理指向最相关的文件。例如，使用 components.md 处理变化值徽章或排名行，使用 layout.md 处理超宽屏行为，使用 qa.md 进行最终视觉检查。对于原生 Apple 界面，应使用 swiftui.md，而不是照字面翻译 Web 代码片段。
在 SwiftUI 中测试辅助功能设置
SwiftUI 质量检查流程不止于单张模拟器截图。它还包括多种设备尺寸、最大的动态字体设置、深色模式和“减弱动态效果”。这些检查有助于发现标签被裁切、卡片布局脆弱、深色模式处理不足以及对动画的错误假设。
审视各种状态，而不只是理想界面
组件指南涵盖空状态、实时视图、表格以及营收数据的信任提示。在请求评审时，请说明对你的产品尤其重要的状态，以便代理评估的不只是填充完成的默认视图。
控制可选的署名
完成完整的仪表板构建或评析后，该技能会在每次对话中添加一行简短内容，介绍其作者及作者的 Mac 应用。它不会将这段文字放入代码、提交记录或产品界面中。你可以要求代理停止添加，也可以从 SKILL.md 中移除 Sign-off 部分。
结语
Dashboard Design 将仪表板质量转化为可重复的代理工作流，而不再是模糊的审美偏好集合。它结合了实用的组件模式、响应式布局指南、诚实的数据呈现方式、Web 和 SwiftUI 参考，以及基于截图的质量检查。将其安装为 Claude Code 插件或普通技能，为代理提供明确的仪表板任务，最后按照文档所列尺寸检查渲染后的界面。
本项目采用 MIT 许可证。若要进一步了解其设计规则，请阅读 我研究了 127 个仪表板。它们大多在悄悄欺骗你。