Skip to content
Get packs

Dashboard Designer

Builds a single-file admin or analytics dashboard page in HTML with inline SVG charts

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When you ask for an admin, analytics, or control-panel screen, the agent produces one self-contained HTML file laid out as a dashboard: a left navigation sidebar, a top bar with search and user area, a row of KPI cards with numbers and changes, and one or two charts drawn as inline SVG. It is instructed to use colours and typography from a design system file (DESIGN.md) rather than inventing new ones, and to fill the page with realistic-looking metrics instead of placeholder text.

Great for

  • Designers who want a quick, styled dashboard mockup to review or share
  • Front-end developers prototyping an admin screen before building it in a real framework
  • Product teams exploring how an analytics view could look for a given brand

Skip it if

  • Live production dashboards that must show real data: the skill generates static sample numbers, not connections to databases or APIs, and the figures may be mistaken for real results if not labelled
  • Accessibility-critical or regulated interfaces without review: the skill only references a baseline accessibility check and its output still needs testing

Try asking

  • “Make an analytics dashboard for a SaaS product showing signups, churn and revenue, using our DESIGN.md”
  • “Create an admin control panel for an e-commerce store with orders, inventory alerts and a sales chart”
  • “Design an operations dashboard for a support team tracking ticket volume and response times”
Step-by-step guide: how to use Dashboard DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    dashboard.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dashboard.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dashboard.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide a DESIGN.md first so the dashboard matches your brand; without it the colours will not be grounded in your tokens.
  • Name the metrics you care about in your request (for example monthly recurring revenue, active users) to get more relevant sample data.
  • Treat the generated numbers as placeholders and replace them with your real data before sharing the page as analysis.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.