Distinctive Frontend UI Design
Designs and codes UIs with a committed visual direction, token system, and full states, and audits generic AI-looking UIs with exact fixes.
Before & after
Same prompt, same agent — the only difference is the skill.
A dashboard design can show a lot of information. You'll probably want cards or panels to organize metrics. Charts are good for trends. Consider what data is most important and put that at the top. You might want buttons and filters to let users customize the view. A clean layout with good spacing helps readability. Colors can highlight important numbers. There are lots of ways to approach this, so it depends on your specific needs and user base.
DASHBOARD DESIGN SYSTEM PURPOSE & CONSTRAINTS • 2-minute glance: critical metrics visible before scrolling • B2B SaaS finance team (accounting background, not data-savvy) • Mobile-responsive but desktop-primary • Update frequency: real-time refresh on events INFORMATION HIERARCHY → Top row: 4 critical KPIs (large type, 18px) - Monthly revenue (green highlight) - Active customers - Churn rate (red if > threshold) - Cash runway in months → Second level: 2x2 grid of time-series charts - Revenue trend (90 days, line chart) - Customer acquisition funnel (cohort view) - Top 5 customers by MRR (ranked list) - Cohort retention (stacked area) → Tertiary: Filters & drill-down - Date range picker (last 7/30/90 days) - Customer segment toggle (all / enterprise / SMB) TYPOGRAPHY & SPACING • Label text: 11px gray (#666), all-caps • Metric numbers: 32px bold (dark blue), 4px margin below label • Card padding: 24px uniform • Row gap: 20px • Visual breathing room prevents dashboard overwhelm COLOR PALETTE • Positive metric: #22c55e green • Warning/churn: #ef4444 red • Neutral data: #3b82f6 blue • Background: #f9fafb light gray • Inactive/disabled: #9ca3af lighter gray INTERACTION PATTERN Hover chart → tooltip shows exact value + timestamp Click card → opens detail view (drill-down to individual customers, transactions)
About this skill
Your app looks like every other generated template: an indigo-purple gradient hero, Inter at every size, three emoji feature cards, and a shadow plus rounded-2xl on every box. This skill makes Claude choose a specific visual direction before writing code, then ships it as a small token system with every state designed.
What it does
- Names a concrete design direction and one signature move that fit your audience, so the design isn't just "modern and clean"
- Builds type, color, spacing, radius, and elevation as CSS tokens with real values: scale ratios, tinted neutrals, one accent with clear limits on its use
- Sets visual hierarchy deliberately (what the eye hits 1st, 2nd, 3rd) and breaks up the default centered-stack layout
- Designs every state: hover, focus-visible, active, disabled, loading, empty, error, and overflow
- Builds in accessibility: contrast targets, visible focus rings, target sizes, reduced-motion support
- Audits pasted UIs or screenshots for template tells and returns a ranked fix table with exact values plus patched code
What you get
A short design brief (direction, type, color, spacing, hierarchy) followed by complete, runnable code that covers every state. In review mode, you get a ranked issue table with exact fixes and patched code.
Best for
Indie hackers, founders, and frontend developers who build UI with Claude and keep getting generic results, plus teams who want a design review that names exact values instead of saying "add more whitespace."
SKILL.md preview
---
name: distinctive-frontend-ui-design
description: Designs and builds frontend interfaces around a committed visual direction (type pairing, color tokens, spacing scale, deliberate hierarchy, every component state) and audits existing UIs for generic AI-template patterns, then fixes them in code with exact values. Use when the user says "design a landing page", "build this UI so it doesn't look AI-generated", "my app looks like every other Tailwind template", "make this dashboard look less generic", "pick fonts and colors for my product", "review this component's design", "why does my UI look cheap".
---
# Distinctive Frontend UI Design
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.