Generate design-system admin dashboards
dashboardskillsetup L1★41,165
nexu-io/open-design ↗What it does
Generate single-screen admin analytics dashboard
Best for
Fast, design-system-compliant admin dashboards when the design tokens and layout requirements are pre-specified in DESIGN.md.
Inputs
- · DESIGN.md with color/typography/spacing tokens
- · dashboard classification (sales, traffic, usage, incidents, ops)
- · KPI labels and values
- · time-series data for charts
Outputs
- · self-contained HTML dashboard (DOCTYPE through </html>)
- · inline CSS + semantic HTML (aside, header, main, section)
- · inline SVG line/bar/area charts
Preconditions
- · Active DESIGN.md injected with DS tokens
- · Brief specifying dashboard type and context
Failure modes
- · Inventing color tokens not in DESIGN.md (violates spec)
- · Using external JS chart libraries instead of inline SVG
- · Accent color used more than twice (visual hierarchy broken)
- · Sidebar/top bar not sticky while main scrolls
- · Density doesn't match DS mood (too loose or too tight)
Trust signals
- · Explicit workflow with 6 numbered steps
- · Technical constraints (sidebar 220–260px, row structure Row 1/2/3, data-od-id tagging)
- · Self-check section with 4 validation rules
- · Output contract specifies artifact tag format
- · No invented tokens, semantic HTML, CSS Grid + Flexbox