面向仪表板设计的 Agent Skills
仪表盘设计 Skill 帮助 Agent 把原始数据变成决策界面，而不是一堆图块。本主题的 Skill 涵盖指标——选择少数驱动行动的数值，而非虚荣计数——以及布局与层级，让最重要的对比成为眼睛首先看到的内容。它们还涉及图表选择，把问题（比较、趋势、部分与整体）匹配到能回答它的图表，以及交互，让查看者能从总览逐层下钻到解释该数值的那一行。告警与异常 Skill 让异常状态醒目，而不是把每个图块都当作同等紧急；颜色与无障碍 Skill 把颜色视为必须能在无色调情况下工作的通道。使用排名列表时，先扫描你最薄弱的子主题，再选择描述与该缺口匹配的 Skill。
7 个先看38 个推荐选项
从这些开始。
A dashboard is a decision surface: pick the few measures that matter, give them a hierarchy, choose honest charts, and make exceptions obvious.
这些是和这项工作最接近的结果。从第一条开始，打开后即可安装。
- 排名 01查看 Agent Skill直接匹配
kpi-dashboard-design
设计有效的 KPI 仪表盘，包括指标选择、可视化最佳实践、层级和实时监控模式，涵盖指标治理和故障排查。直接涵盖仪表盘指标、布局和图表选择。
15,222 · 受欢迎程度 - 排名 02查看 Agent Skill直接匹配
dashboarding
通过 HTTP API 以 JSON 形式构建、修改和发布 Grafana 仪表板，涵盖面板类型、gridPos 布局、单位、阈值、模板变量、转换和注释。直接涉及仪表板的设计与实现。
6,605 · 受欢迎程度 - 排名 03查看 Agent Skill直接匹配
build-dashboard
构建带 KPI 卡片、图表、筛选器和表格的交互式 HTML 仪表板，作为可独立在浏览器中打开的文件。直接涵盖仪表板布局、图表选择和交互。
8,700 · 受欢迎程度 - 排名 04查看 Agent Skill直接匹配
interface-design
面向仪表盘、管理面板、SaaS 应用和数据界面的工艺优先界面设计，涵盖视觉层级、令牌、状态和设计系统一致性。明确限定于仪表盘和数据界面设计。
28,822 · 受欢迎程度 - 排名 05查看 Agent Skill直接匹配
grafana-dashboards
创建和管理用于实时系统和应用指标的生产级 Grafana 仪表盘，涵盖层级、RED/USE 方法、面板类型和告警。直接关于用于监控的仪表盘设计。
12,605 · 受欢迎程度 - 排名 06查看 Agent Skill直接匹配
dashboard-builder
为 Grafana、SigNoz 及类似平台构建监控仪表盘，回答运营者的问题，涵盖健康、延迟、吞吐量和饱和度面板。直接涉及运营仪表盘设计。
8,163 · 受欢迎程度 - 排名 07查看 Agent Skill直接匹配
chart-designer
设计有效的数据可视化和图表，推荐图表类型并生成 ECharts/Chart.js 配置，提供仪表板布局和最佳实践指导。直接涵盖图表选择和仪表板设计。
5,061 · 受欢迎程度
展开另外 31 个 Agent Skills
- 排名 09查看 Agent Skill可能匹配
impeccable
前端界面设计 skill，涵盖仪表盘、产品 UI、层级、无障碍、主题化和设计系统，并采用注重工艺的工作流。与仪表盘设计广泛相关，但并非专门针对仪表盘。
声明的前提（自述）: Node.js
319,215 · 受欢迎程度 - 排名 10查看 Agent Skill可能匹配
mies
设计品味 Skill，专注于面向用户界面（包括仪表盘）的极致精简与工艺，涉及 token、层级、状态和动效。与仪表盘工艺相关，但属于通用界面设计。
8,548 · 受欢迎程度 - 排名 11查看 Agent Skill可能匹配
penpot-uiux-design
Penpot 综合 UI/UX 设计指南，涵盖设计系统、仪表盘、表单、导航、无障碍性和平台指南。可以设计仪表盘，但属于通用 Penpot UI/UX 指南。
12,684 · 受欢迎程度 - 排名 12查看 Agent Skill可能匹配
web-design-engineer
使用 HTML/CSS/JS/React 构建精美的浏览器渲染视觉产物，包括仪表盘、原型和数据可视化。可以构建仪表盘，但属于广泛的网页设计工程技能。
7,763 · 受欢迎程度 - 排名 13查看 Agent Skill可能匹配
frontend-design-direction
为包括仪表盘在内的生产 UI 设定前端设计方向，涵盖层级、排版、色彩、动效和反通用模式。与仪表盘视觉方向相关，但属于通用前端设计。
6,663 · 受欢迎程度 - 排名 14查看 Agent Skill可能匹配
frontend-design
官方在构建新 UI 或重塑现有 UI 时，提供打造独特、有意图的视觉设计的指导。帮助确定美学方向、排版，并做出不显得像模板化默认选项的选择。
765,703 · 受欢迎程度 - 排名 15查看 Agent Skill可能匹配
industrial-brutalist-ui
工业粗野主义与战术遥测 UI 设计系统，采用刚性网格、极端字号层级和实用主义色彩，适用于数据密集型仪表盘。直接针对仪表盘美学，但属于特定视觉风格。
363,309 · 受欢迎程度 - 排名 16查看 Agent Skill可能匹配
baseline-ui
强制执行有主见的 UI 基线，修复间距、层级、排版和布局问题，防止 AI 生成的界面粗制滥造。与仪表盘打磨和层级相关，但属于通用 UI 清理。
21,809 · 受欢迎程度 - 排名 17查看 Agent Skill可能匹配
observability-and-instrumentation
为代码添加日志、指标、追踪和告警埋点，让生产环境行为可见。与仪表盘的指标和告警方面相关，但属于埋点，而非仪表盘设计。
41,282 · 受欢迎程度 - 排名 18查看 Agent Skill可能匹配
golang-observability
Go 可观测性，涵盖结构化日志、Prometheus 指标、OpenTelemetry 追踪、告警和 Grafana 仪表盘。与指标和告警方面相关，但专属于 Go 且聚焦于埋点。
36,747 · 受欢迎程度 - 排名 19查看 Agent Skill可能匹配
startup-metrics-framework
跟踪并计算 MRR、流失率、CAC/LTV 和烧钱率等创业 KPI，用于投资者和董事会仪表盘。与仪表盘的指标维度相关，但属于指标框架，而非仪表盘设计。
10,732 · 受欢迎程度 - 排名 20查看 Agent Skill可能匹配
firecrawl-dashboard-reporting
使用 Firecrawl 浏览器从分析仪表盘和内部 Web 工具拉取指标，生成结构化指标摘要。适用于提取仪表盘数据，但不涉及仪表盘设计。
31,338 · 受欢迎程度 - 排名 21查看 Agent Skill可能匹配
nuxt-ui
使用 Nuxt UI v4 组件和 Tailwind 主题构建 UI，包括带侧边栏和面板的仪表盘布局。与仪表盘实现相关，但属于组件库技能。
6,727 · 受欢迎程度 - 排名 22查看 Agent Skill可能匹配
figma-generate-design
官方当任务涉及将应用页面、视图或多板块布局转换到 Figma 时，请将此 skill 与 figma-use 搭配使用。触发条件：'write to Figma'、'create in Figma from code'、'push page to Figma'、'take this app/page and build it in Figma'、'create a screen'、'build a landing page in Figma'、'update the Figma screen to match code'。当用户希望根据代码或描述在 Figma 中构建或更新完整页面、屏幕或视图时，这是首选的工作流 skill。它通过 search_design_system 发现设计系统组件、变量和样式，将其导入，并使用设计系统 token 而非硬编码值，逐板块增量组装屏幕。
- 排名 23查看 Agent Skill可能匹配
figma
官方使用 Figma MCP server 从 Figma 获取设计上下文、截图、变量和资源，并将 Figma 节点转换为生产代码。当任务涉及 Figma URL、节点 ID、设计到代码的实现，或 Figma MCP 设置与故障排除时触发。
声明的前提（自述）: Node.js
- 排名 24查看 Agent Skill可能匹配
figma-create-design-system-rules
官方为用户代码库生成自定义设计系统规则。当用户说“创建设计系统规则”“为我的项目生成规则”“设置设计规则”“自定义设计系统指南”，或希望为 Figma 转代码工作流建立项目专属约定时使用。需要 Figma MCP 服务器连接。
声明的前提（自述）: MCP server
- 排名 25查看 Agent Skill可能匹配
figma-implement-design
官方将 Figma 设计转化为生产级应用代码，实现 1:1 视觉还原。适用于根据 Figma 文件实现 UI 代码、用户提到“实现设计”“生成代码”“实现组件”、提供 Figma URL，或要求构建与 Figma 规格匹配的组件时。若要通过 `use_figma` 写入 Figma 画布，请使用 `figma-use`。
声明的前提（自述）: Node.js
- 排名 26查看 Agent Skill可能匹配
penpot-design-md
官方从 Penpot 文件中提取 DESIGN.md 设计文档文件：采用 design-md 格式的可移植 markdown 规范（YAML frontmatter 包含颜色/字体/圆角/间距/组件 token 映射 + 文字章节：Overview、Colors、Typography、Layout、Shapes、Components、Do's & Don'ts、Iteration Guide、Known Gaps），基于文件的真实 token、库资产和采样的组件样式——绝不虚构。对画布只读；写入一个本地 markdown 文件。触发词：'generate DESIGN.md'、'create a design.md'、'document the design system as markdown'、'export design guidelines'、'extract design documentation'、'design system spec file'、'make a style guide file from this design'。
- 排名 27查看 Agent Skill可能匹配
penpot-design-to-code-review
官方对照已实现的代码（源组件或 Storybook story）审查 Penpot 设计，并输出结构化的 DRIFT 报告。适用于工程师需要确认构建与设计一致时：从选区提取 HTML/CSS，将其 token/结构/状态映射到代码组件，进行差异比对，并列出双方各自缺失的内容及严重程度和调和方案。未提供代码源时，可优雅降级为设计系统 token 检查。触发词：'design to code review'、'does my code match the design'、'design code parity'、'compare Penpot to my component'、'check this against Storybook'、'extract HTML/CSS from this selection'、'find design drift'、'design implementation diff'。
- 排名 28查看 Agent Skill可能匹配
penpot-audit-tokens
官方审计 Penpot 设计中的设计系统 / token 治理问题（区别于无障碍）：存在 token 却硬编码颜色、偏离网格的间距、孤立/未解析/未使用的 token、重复值，以及本应是组件实例的分离部件。生成严重程度报告并建议语义 token 替换。触发词：'audit tokens'、'find hardcoded colors'、'token governance'、'check design system consistency'、'find off-grid spacing'、'detect raw values'、'are we using tokens correctly'。
- 排名 29查看 Agent Skill可能匹配
theme-factory
官方用主题为制品设置样式的工具包。这些制品可以是幻灯片、文档、报告、HTML 落地页等。有 10 个预设主题（含颜色/字体），可应用于任何已创建的制品，也可即时生成新主题。
- 排名 30查看 Agent Skill可能匹配
brand-guidelines
官方将 Anthropic 官方品牌配色和字体应用于任何可能受益于 Anthropic 外观风格的产物。当适用品牌配色或风格指南、视觉格式或公司设计标准时使用。
- 排名 31查看 Agent Skill可能匹配
huawei-cloud-monitoring-query
通过只读脚本查询华为云监控资源，包括告警规则、告警历史和仪表盘。与监控仪表盘相关，但为华为专用且仅限查询。
14,449 · 受欢迎程度 - 排名 32查看 Agent Skill可能匹配
cloud-monitoring-chart-generation
官方>- 根据已解析的 PromQL 或 ListTimeSeries 查询，生成 Google Cloud Monitoring Server-Driven UI (SDUI) Widget 和 XyChart Protocol Buffer textproto。适用场景：- 生成有效的 google.monitoring.dashboard.v1.Widget textproto，其中包含 PrometheusQuery 或 TimeSeriesFilter 数据集，用于 Cloud Monitoring Dashboards API、gcloud CLI 或声明式仪表板定义。- 为 Prometheus 或 ListTimeSeries 查询合成 Server-Driven UI (SDUI) widget 标题、轴标签和绘图类型。不适用场景：- 指标发现或 PromQL 查询生成。这些任务请使用 cloud-monitoring-metric-selection 或 cloud-monitoring-promql-query 技能。
- 排名 33查看 Agent Skill可能匹配
frontend-design-review
官方> 审查和创建独特、生产级的前端界面，具有高设计质量和设计系统合规性。使用三个支柱进行评估：无摩擦的从洞察到行动、高质量工艺和可信赖的构建。适用于：PR 审查、设计审查、可访问性审计、设计系统合规性检查、创意前端设计、UI 代码审查、组件审查、响应式设计检查、主题测试和创建令人难忘的 UI。不适用于：后端 API 审查、数据库模式审查、基础设施或 DevOps 工作、无 UI 的纯业务逻辑或非前端代码。
- 排名 34查看 Agent Skill可能匹配
penpot-build-screen
官方像资深视觉设计师一样，根据简要说明在 Penpot 中设计生产级界面——复用现有设计系统（tokens + 组件），逐区块组装，绝不一次性完成。用于根据描述创建界面/页面/落地页/仪表盘。不适用于翻译现有代码（请使用 penpot-build-from-code）。触发词：'design a dashboard'、'create a landing page'、'design this app screen'、'build a UI from this brief'、'design a settings page'、'mock up a screen in Penpot'。
- 排名 35查看 Agent Skill可能匹配
web-design-guidelines
官方审查 UI 代码是否符合 Web Interface Guidelines。当被要求“review my UI”“check accessibility”“audit design”“review UX”或“check my site against best practices”时使用。
- 排名 36查看 Agent Skill可能匹配
antfu-design
精选antfu 风格设计约定，范围更广。以 UnoCSS 优先，基于类的语义 token，为工具和 devtools UI 提供明暗双主题，并为落地页和产品界面提供设计解读、反粗制滥造和微交互打磨。在使用 UnoCSS 构建或重构任何界面时使用。
- 排名 37查看 Agent Skill可能匹配
cloud-monitoring-metric-selection
官方>- 检索、查询并识别 GCP 服务或资源（如 Compute Engine、Spanner、BigQuery、Cloud Run、Cloud SQL、Pub/Sub、Cloud Storage 等）相关的 Google Cloud Monitoring 指标描述符。当被要求查找、列出、搜索或发现 GCP 指标类型、名称、kind/value 模式或描述符时使用。
- 排名 38查看 Agent Skill可能匹配
penpot-audit-accessibility
官方根据 WCAG 2.1/2.2 AA（可选 AAA）审核 Penpot 设计，并生成结构化严重性报告：颜色对比度、触摸/目标尺寸、文本替代、标题层级和键盘/焦点顺序。提出修复建议——不会自动应用。还充当 brief-to-screen 循环中的 Evaluator。触发词：'check accessibility'、'accessibility audit'、'WCAG check'、'contrast audit'、'a11y review'、'check color contrast'、'is this accessible'。
- 排名 39查看 Agent Skill可能匹配
apple-design
精选Apple 的界面设计方法以及流畅、符合物理规律的运动，为 Web 而转译。适用于构建或审查手势驱动的 UI、弹簧动画、拖拽/滑动/面板交互、动量与可中断过渡、半透明材质与层次、排版（光学尺寸、字距、行距）、减弱动态效果，或 Apple 风格界面背后的设计基础（反馈、空间一致性、克制）。
144,605 · 受欢迎程度
这个话题涵盖什么
每个子主题对应一类具体场景下的 Agent Skills。
- Metrics
- Which numbers belong on the screen, and which are vanity.
- Layout & hierarchy
- The most important comparison should be the first thing the eye hits.
- Chart choice
- Match the question (compare, trend, part-to-whole) to a chart that answers it.
- Interaction
- How a viewer narrows from overview into the row that explains the number.
- Alerting & exceptions
- Make the unusual state loud; do not make every tile equally urgent.
- Color & access
- Color is a channel, not decoration — and it has to work without hue.
常见问题
- 这个列表是如何排序的？
- 该列表按观察到的搜索需求排序。与主题直接匹配的排在前面，并且对任何单一发布者可占据的 Skill 数量设有上限。
- 仪表盘技能与通用图表技能的区别是什么？
- 仪表盘技能将屏幕视为决策界面：它们挑选少数真正重要的度量，赋予其层级，并让异常显而易见。图表技能专注于渲染单个图表，而非组合整个视图。
- 我应该从哪个子主题开始？
- 如果你的仪表盘已经存在但没人据此行动，先从指标和布局入手，因为错误的数字和平铺的层级通常是原因所在。当结构合理但某个具体问题得不到解答时，再求助于图表选择、交互、告警或颜色与访问。
- 我可以组合使用其中几个 Skill 吗？
- 是的。这些子主题是互补的：指标决定屏幕上显示什么，布局和层级决定眼睛先看到什么，而图表选择、交互、告警和颜色则决定观看者如何解读并采取行动。
如何安装 Agent Skill
从本页第一条开始。Claude Code 会读取放进 skills 目录的 SKILL.md：
- Claude Code——把 kpi-dashboard-design 的 SKILL.md 复制到 ~/.claude/skills/kpi-dashboard-design/（个人使用），或 .claude/skills/kpi-dashboard-design/（随项目共享）。
- 从 registry 安装——运行 npx skills add wshobson/agents@kpi-dashboard-design。
- 或者从 kpi-dashboard-design 的来源下载 SKILL.md，放进上面的目录。
如何挑选 安装前先看出处和技能自身的说明。Official 与 Notable 标签描述的是技能来源。