Dashboard Design System Generator
Generate production-ready dashboard design systems with specs and components
What You Can Do
You can generate a complete, production-ready dashboard design system by defining your core constraints—data types, user personas, and platform targets. Claude produces detailed component specifications, data visualization patterns, interaction rules, responsive layout frameworks, and accessibility standards that your entire design team can implement consistently. This accelerates design velocity by 40-60% and eliminates guesswork during developer handoff.
Features
Generate detailed specs for dashboard UI elements (charts, tables, filters, controls) with visual hierarchy and interaction states
Define chart types, color systems, and annotation standards optimized for your specific data domains
Create grid-based frameworks and breakpoint rules that adapt dashboards across desktop, tablet, and mobile
Embed WCAG compliance, keyboard navigation, color contrast ratios, and screen reader considerations into the system
Document hover states, loading states, error handling, and real-time data update patterns
Generate consistent rhythm systems, font scales, and whitespace guidelines across all components
Produce 3-5 complete dashboard page templates using the system to validate scalability
Example Output
Financial Dashboard System Example:
- Component library: KPI card (4 variations), trend chart (6 types), data table (5 configurations), filter panel
- Data visualization: Time-series line charts with dual-axis support, categorical bar charts with overflow handling, heatmaps for correlation matrices
- Responsive rules: Desktop 1440px (4-column grid), Tablet 768px (2-column), Mobile 375px (stacked)
- Accessibility: AA contrast ratios, ARIA labels for charts, keyboard-navigable tables, focus indicators
- Example layouts: Executive overview dashboard, detailed drill-down view, mobile alert dashboard
Analytics Platform System Example:
- Components: Metric blocks, mini-charts, segment pickers, date range controls, export buttons
- Patterns: Comparative visualization (YoY, period-over-period), funnel diagrams, cohort analysis tables
- Mobile behavior: Touch-friendly tap targets (48px minimum), swipeable chart gallery, collapsible filters
- Templates: Marketing funnel dashboard, product engagement dashboard, real-time monitoring dashboard
What's Included
- SKILL.md: Complete skill instructions and system generation framework
- Design system template: Master specifications file with component definitions, color/typography scales, spacing rules
- Component library checklist: Inventory of 15+ dashboard components with variation matrix
- Accessibility audit checklist: WCAG 2.1 AA compliance requirements and testing guidelines
- Responsive breakpoint framework: Mobile-first CSS grid and flexbox patterns with documented behavior at each breakpoint
- Data visualization pattern library: Chart type recommendations by use case (time-series, categorical, hierarchical, geospatial)
- Developer handoff template: Structured specifications file ready for design-to-dev workflows
Who It's For
- UX/UI designers building or scaling dashboard products across multiple teams
- Design systems engineers establishing component libraries for data-heavy applications
- Product designers launching analytics platforms, admin panels, or monitoring tools
- Design team leads ensuring consistency across multiple dashboard implementations
- Design-to-dev coordinators creating specification documents for developer handoff
Best For
- Creating design systems for financial dashboards, analytics platforms, and business intelligence tools
- Documenting responsive behavior and accessibility standards before development begins
- Generating reusable component libraries for multi-product dashboard ecosystems
- Establishing data visualization patterns for domain-specific dashboards (marketing, operations, engineering)
- Scaling design consistency when multiple designers work on the same dashboard product
You might also like
You'll conduct structured culture audits that go beyond surface-level observations to identify root causes of dysfunction in design teams. Using organizational psychology research, you can analyze team feedback patterns, map collaboration barriers across disciplines, and design targeted interventions that address psychological safety gaps, siloed workflows, and retention risks. Claude helps you transform culture diagnostics into measurable improvement plans tied to specific team performance outcomes.
by calesthio
Analyze raw usability testing data—transcripts, session notes, task completion rates, and participant feedback—to surface recurring patterns and user behaviors. Claude identifies the highest-impact issues, extracts testable insights about user mental models, and generates prioritized recommendations ranked by severity, frequency, and business impact. This cuts manual synthesis time from hours to minutes while maintaining analytical rigor.
by calesthio
You can systematically evaluate UX/UI design candidates across multiple disciplines—UX researchers, UI designers, product designers, design systems engineers, and coordinators—using role-specific competency frameworks. The skill converts vague impressions into defensible scoring systems that account for cross-functional collaboration capability, process maturity, and systems-thinking critical to design ops success. You'll compare candidates across seniority levels, document evaluation decisions for compliance, and build consistent hiring rubrics your entire design team can deploy.
by calesthio
You can write clean, maintainable Tailwind CSS directly in React JSX using utility-first principles. This skill helps you compose responsive layouts, implement dark mode themes, extract reusable component patterns, convert existing CSS to Tailwind, and troubleshoot Tailwind configuration issues. It's optimized for dashboards, forms, cards, modals, and other typical application interfaces.
by calesthio
You can systematically design reusable responsive grid systems, establish spacing scales and breakpoint strategies, and document component layout behaviors for seamless developer handoff. This skill generates technical layout specifications that reduce design-to-development friction and ensure accessibility compliance from the design phase, enabling teams to build consistent, scalable web interfaces across all devices.
by calesthio
This skill guides you through creating strategic content frameworks that go beyond tone and voice guidelines. You'll synthesize user research with business goals, define content principles, structure information architecture, and document messaging frameworks that teams can reference repeatedly. The result is a comprehensive strategy that ensures every piece of UX content—from microcopy to help documentation—serves both users and business outcomes.
by calesthio
You can generate, test, and iterate on onboarding microcopy that handles the unique constraints of first-run experiences: zero product knowledge assumptions, anxiety management around data entry and permissions, and sequential task dependencies. Claude helps you stress-test copy variants against user objections, anticipate drop-off points, and create messaging that balances education, reassurance, and motivation in minimal word count.
by calesthio
You can generate detailed interaction specifications for complex user flows and component behaviors that eliminate ambiguity in handoff. The skill produces structured documentation including state diagrams, transition tables, animation timing, keyboard navigation patterns, error handling workflows, and accessibility requirements—all formatted for both designers and developers to reference.
by calesthio