AO

abdiraimov-otabek/dashboard-design-skill

开发工具

本页由 AI 翻译,技术细节请以原文为准。 查看原文

224 stars 质量 62 趋势 58MIT

一个Claude Code技能,用于清洁,诚实的仪表板UI:KPI平板,图表,取日期器,排名列表,状态,布局和截图QA出道. 从127个运走的仪表板上蒸发.

概览

赋予您高级产品设计师在数据屏幕,网络或斯威夫特UI的口味. 这种技能教导它建造,重新设计和分析,收入和衡量仪表板:KPI平板,图表,比较期,分级分解,取日期范围者,过滤器,洞察力,空虚状态,宽度和电话布局. 它以截图QA口令来结束每一项工作,因此它判断屏幕上的内容而不是代码中的内容. 它被从(分析工具、收入仪表板、设计系统、设计画廊)中提炼出来, 完全撕毁一个收入分析产品, 并真正地重新设计了这里的每一条规则, 一次被打破,一次被截取,一次被固定。 (Codex, Cursor, 任何读取 Markdown 的文件): 将您的 AGENTS.md 或规则文件指向技能/dashboard-design/SKILL.md; 从那里引用的负载. 当你在仪表板上工作时,它会自己触发. 或者直接问: - "为这个应用程序建造了一个分析仪表板:来访者、注册者、按来源分列的收入.

概述(AI 翻译)

赋予您高级产品设计师在数据屏幕,网络或斯威夫特UI的口味. 这个 技术教它建设, 重新设计和** critic** 分析、收入和计量仪表板:KPI平板、图表、比较期、排名 分解,取出日期范围,过滤,洞察,空位状态,宽度和电话布局. 它结束每份工作 截图QA传出,所以它判断屏幕上的内容而不是代码中的内容.

它从127发运的仪表板屏幕 (分析工具、收入仪表板、设计系统、 设计画廊, 完全撕毁一个收入分析产品, 和真正的重新设计 在那里,这里的所有规则是 断了一次 被截图拍了 修好了

∮它会改变∮

=========================================================================================================================================================================================== (======== (==================================== (==== (================ |-|-|-. 每行后面一个有锡的块 沿着一行的边缘 一条3 px 共享栏 标记所选瓷砖的下划线 以微弱环表示的软锡填充 QQ 原生 [T0] 日期输入 QQ 弹出日历:软带,固态结束日,“12天” + 应用 QQ 宽显示器上浮起的狭长一列 宽模式,随着屏幕的增长而增加一列

本页由 AI 翻译,技术细节请以原文为准。

README

以下为原文 README 节选,完整内容请查看原文。

Dashboard Design: a Claude Code skill for clean, honest dashboards

Give your coding agent the taste of a senior product designer for data screens, on the web or in SwiftUI. This skill teaches it to build, redesign and critique analytics, revenue, metrics and admin dashboards: KPI cards, charts, heatmaps, bullet graphs, comparison periods, ranked breakdowns, date range pickers, filters, empty states, wide and phone layouts. Pages that speak for themselves: numbers and shapes on the screen, every explanation in a tooltip. It ends every job with a screenshot QA pass, so it judges what is on the screen rather than what is in the code.

It was distilled from 127 shipped dashboard screens (analytics tools, revenue dashboards, design systems, design galleries), the field’s classics (Stephen Few, Edward Tufte, Cole Nussbaumer Knaflic, Cleveland & McGill, Nielsen Norman Group, the WCAG), six of Apple’s WWDC sessions on charts, chart accessibility and interface writing, two full teardowns, and real redesigns where every rule here was broken once, caught on a screenshot, and fixed.

New in 2.0

  • Wordless: a sentence under every KPI and a row of “insights” sentences are gone. Numbers, shapes and one-word baselines on the screen; explanations in tooltips. The QA pass counts sentences; the target is zero.
  • Monitor: overview → what needs attention → closer look → act. Problems are flagged on the data itself, and the action sits on the flag (a not-marked heatmap cell is the remind button).
  • Perception reference: the encoding ladder, Few’s colour rules, sequential / diverging / classed scales, the inverted-salience trap, bullet graphs, sparklines, WCAG for charts, Few’s thirteen mistakes as a checklist.
  • New components: heatmap of number pills with classed tiers, bullet graph, segmented share bar, one tooltip system, people rows that fold on phones instead of truncating.
  • Apple’s chart guidance: glance → interactive → expanded with continuity, fixed vs dynamic axes, gridlines at intuitive steps, spoken values context first, audio graphs, colours distinct by name, the words that remain (specific action labels, guiding empty states, errors with a fix).
  • QA: a words audit, a salience test (“where does the eye land first?”), real-data and colour-blindness checks, and twelve new smells.
  • Case study: a school’s home dashboard in three versions, including the one its owner rejected for being a page of sentences.

What it changes

Instead of The agent builds
A tinted block behind every list row A slim 3 px share bar along the row’s edge
An underline marking the selected tile A soft tinted fill with a faint ring
Native 21/09/2026 📅 date inputs A popover calendar: soft band, solid end days, “12 days” + Apply
在 GitHub 查看完整 README

推荐工具

换一个关键词,或者移除筛选条件。

安装

npx skillfish add abdiraimov-otabek/dashboard-design-skill
新手?先看 mcpskill.org 教程 →