Dashboard Design Skill — 让 AI Agent 具备资深产品设计师的数据看板品味

技能简介

Dashboard Design 是一个 Claude Code 技能，专门用来「建、改、评」数据看板：KPI 卡片、图表、对比周期、排行榜、日期选择器、筛选器、洞察卡片、空状态，以及宽屏与手机布局。它把资深产品设计师的判断沉淀成一套可执行的步骤与规则，并且强制在每次任务结束时做截图 QA——让 Agent 评判屏幕上真正显示的东西，而不是它写在代码里的东西。技能提炼自 127 个已上线的看板界面、对一个营收分析产品的完整拆解，以及一次「每条规则都被违反过一次、再逐条截图抓出来修正」的真实改版。

核心能力

• 成对的反模式修正：不是抽象地说「要好看」，而是给出明确的替换规则——列表行背后的染色块 → 行边 3px 细分享条；选中卡片的底部下划线 → 柔和填充 + 淡描边；原生日期输入 → 带区间色带与「12 天」+ 应用按钮的弹出日历；1 单变 0 单时的红色 -100% → 灰色「原为 1」；2,103 / 1,402 的刻度 → 0 / 1k / 2k 的整数刻度。
• 组件规格库：KPI 卡、增减量、迷你趋势线、图表、排行榜、日期选择器、筛选器、洞察、表格、实时数据与各种状态，全部给出可落地的视觉与文案规范。
• 布局与响应式：页面顺序、宽屏模式、栅格、手机布局、字号体系与深色模式。
• 设计令牌：亮/暗两套颜色令牌（Tailwind v4 @theme）与基于令牌的染色方法。
• 可复用代码片段：整数刻度、数字格式、增减徽标、对比窗口、KPI 卡、细分享条行、无依赖区间日历、防陈旧响应守卫。
• 截图 QA 协议：已知总量核对、3440 / 1440 / 375 三档宽度截图、一致性检查与异味清单。
• SwiftUI 分支：同一套模式的 SwiftUI + Swift Charts 实现，并在模拟器里按设备尺寸、最大动态字体、深色模式、减弱动效做一轮 QA。
• 案例与来源索引：40+ 产品与设计系统各自「最值得学的一点」，外加一个营收分析产品的完整案例。

安装配置

1. 作为 Claude Code 插件安装：/plugin marketplace add abdiraimov-otabek/dashboard-design-skill，再 /plugin install dashboard-design@dashboard-design-skill。
2. 作为普通技能安装：克隆仓库后 cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/。
3. 其它 Agent（Codex、Cursor 等只读 Markdown 的工具）：在 AGENTS.md 或规则文件里指向 skills/dashboard-design/SKILL.md，引用文件会随之加载。

使用步骤

1. 正常描述需求即可，例如「帮这个应用做一个分析看板：访客、注册、按来源的营收」，技能会在识别到看板任务时自动触发。
2. 想评审现有界面时，附上截图问「这个设计好吗」，会得到结论、可保留之处，以及按危害排序的问题清单（先核查互相矛盾的数字）。
3. 也可直接下指令：「重做日期区间选择器」「把 KPI 卡做干净一点」「对 /dashboard 跑一遍看板 QA」。
4. 每个步骤都以可核验的「done when」收尾，最后一步必须交出截图：网页三档宽度，SwiftUI 则是模拟器各设备尺寸加辅助功能设置。
5. 若不想保留技能末尾的作者签名行，删除 SKILL.md 里的 Sign-off 段落即可。

适用场景

• 从零搭建数据看板：SaaS 指标、增长分析、营收分析、运营监控。
• 旧看板改版：把「能看」升级成「一眼看懂且诚实」。
• 设计评审：拿截图换取结构化的问题清单，而不是主观意见。
• 跨端一致性：同一套规则同时落到 Web（React + Tailwind）与 SwiftUI。
• 团队设计基线：把 KPI 卡、刻度、日期选择器等模式固化为团队规范。

适用人群

• 前端工程师与全栈开发者
• 产品设计师与设计系统维护者
• 需要自己做数据产品的独立开发者
• 写 SwiftUI 的 iOS 开发者
• 用 Claude Code 做数据侧交付的数据/BI 工程师

工作原理

技能由一份 SKILL.md（步骤、评审格式、通用规则、内部风格）与八个引用文件组成：components、layout、tokens、snippets、qa、swiftui、sources 与 case-study。Agent 在读任务时按需加载引用文件，把「该怎么画」和「怎么判断画对了」分开：前者是规范，后者是截图 QA 与数字一致性核对。核心原则只有四条——首屏一问一屏三秒答、安静（一个强调色，其余用灰，颜色只在有意义处出现）、诚实（同一个数字处处一致、估算要标注、小基数不喊叫）、形状优先于文字（图表、条形、标签先行，定义放提示里）。

官方链接

• GitHub：https://github.com/abdiraimov-otabek/dashboard-design-skill
• 协议：MIT