abdiraimov-otabek/dashboard-design-skill

这是什么？

核心功能

• 01涵盖 KPI 卡片、图表、热力图、子弹图、排行列表和日期范围选择器。
• 02包含桌面、宽屏和手机三种宽度下的截图质检流程。
• 03提供 Tailwind v4 颜色令牌和适用于网页项目的 React 示例。
• 04提供 SwiftUI 与 Swift Charts 参考，并包含模拟器检查步骤。
• 05附带按危害程度排序问题的评审格式。

适用场景

• 让编码智能体从零开始构建一个分析仪表盘。
• 让智能体评审或重新设计已有仪表盘的截图。
• 在团队项目中统一日期选择器、KPI 卡片等仪表盘组件的做法。

快速上手

1. 1

   在 Claude Code 中添加插件市场

   /plugin marketplace add abdiraimov-otabek/dashboard-design-skill
2. 2

   安装 dashboard-design 插件

   /plugin install dashboard-design@dashboard-design-skill

使用前须知

• !主要面向 Claude Code；其他代理需要手动将其 AGENTS.md 或规则文件指向该技能。
• !网页规范基于 Tailwind 和 React 示例，其他技术栈需要自行调整（SwiftUI 有单独的参考文档）。
• !完成任务后会附上一句关于作者 Mac 应用的推广性签名，除非你删除该部分。

收录于专题

标签

常见问题

dashboard-design-skill 是什么？

一个 Claude Code 技能，指导编码智能体构建、重新设计并评审简洁、诚实的仪表盘界面，并附带截图质检流程。 这是一个面向 Claude Code 的智能体技能，以 Markdown 指令和参考文件的形式，引导 AI 编码智能体设计分析、营收、指标和管理后台类仪表盘。内容涵盖 KPI 卡片与环比变化、图表、热力图、子弹图、对比周期、排行列表、日期范围选择器、筛选器，以及空状态、错误状态和宽屏、手机端布局。

dashboard-design-skill 可以免费使用吗？用的什么许可证？

dashboard-design-skill 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

dashboard-design-skill 还在维护吗？

活跃维护中。dashboard-design-skill 最近一次提交是在 2026年10月28日。

dashboard-design-skill 适合用来做什么？

让编码智能体从零开始构建一个分析仪表盘。 让智能体评审或重新设计已有仪表盘的截图。 在团队项目中统一日期选择器、KPI 卡片等仪表盘组件的做法。

dashboard-design-skill 怎么安装和运行？

在 Claude Code 中添加插件市场: /plugin marketplace add abdiraimov-otabek/dashboard-design-skill 安装 dashboard-design 插件: /plugin install dashboard-design@dashboard-design-skill

在哪里获取 dashboard-design-skill？

源代码和安装说明在 GitHub 上：https://github.com/abdiraimov-otabek/dashboard-design-skill