← Back to Skills / Marketplace / saas-dashboard
SKL · 13PRO

SaaS Dashboard.

A purpose-built design style for analytics and performance tracking interfaces — a spacious, editorial light layout with soft tinted panels, a single lime accent, and crisp mono numerals. Data-dense, but never overwhelming.

UNLOCK WITH PRO →
● Live preview · SaaS Dashboard demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

SaaS Dashboard is a purpose-built design style for analytics and performance tracking interfaces — the kind of dashboard a real SaaS business uses to track revenue, active users, conversion, and churn all in one place. It pairs a spacious, editorial light canvas with soft green and blue tinted panels, a single lime accent that draws the eye to what matters most, and a Plus Jakarta Sans + DM Mono type pairing that keeps every metric razor-sharp. Data-dense but never overwhelming, with each chart and KPI card designed to communicate one thing clearly before moving to the next. If you're building an internal tool, a client-facing analytics view, or the core product screen of a SaaS app, this is the skill.

● Looks Like
Stripe's analytics dashboardHubSpot's reporting viewSalesforce dashboards done rightThe kind of internal tool that a well-funded startup builds for their ops teamAny B2B SaaS product page that makes investors nod approvingly
02 · Best For / Avoid If
＋ Best For
+SaaS product dashboards showing revenue, growth, or performance metrics
+CRM and sales analytics tools
+Marketing campaign performance views
+Internal business intelligence tools
+Client-facing reporting dashboards
+Any product where the primary screen is a data overview
× Avoid If
×Your product is consumer-facing and needs warmth or personality — this aesthetic is professional and data-first
×You're building a content or media product where charts and metrics aren't the main event
×Your audience isn't used to reading dashboards — the density requires some data literacy to feel comfortable
03 · Design Philosophy
01

One featured metric anchors the whole screen

Every good dashboard has a hero number — the one thing that matters most, given more visual weight than everything else. A darker card, a larger type size, or a bolder treatment separates the primary KPI from the supporting metrics and gives users an immediate place to look when they land on the page.

02

Charts show trends, numbers show status

Area and line charts are for showing direction over time. Circular progress rings and percentage badges are for showing current status against a target. Using the right visualization type for each data type is what makes a dashboard feel designed rather than assembled.

03

Color carries meaning

One accent color for primary data and interactive elements. Green for positive performance. Red for negative. That's the whole palette. Every color on the screen means something specific, so users build a mental model fast and don't have to re-learn the interface every time they open it.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Too many chart types on one screen
Pick two or three visualization types and use them consistently — mixing six different chart formats makes the dashboard look like a demo, not a product.
! WARNING
Metrics without context
A number on its own means nothing. Every KPI needs either a comparison (vs. last week, vs. target) or a trend indicator. Ask Claude to include these alongside every metric card.
! WARNING
Ignoring the negative states
Dashboards spend a lot of time showing bad news — down percentages, missed targets, low completion rates. Make sure the red/negative states are designed as carefully as the green ones. They're what users see on their worst days.
! WARNING
Missing the "View All" escape hatch
Dense data sections need a way out. Every table or list that could have more rows, every chart that covers a limited date range — all of them need a clearly labeled link to the full view. Tell Claude to include these on every section header.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →