Frontend Design (Anti-AI-Slop UI Generator)

Name: Frontend Design (Anti-AI-Slop UI Generator)
Brand: AgentVolt
Availability: InStock

Design UI that avoids AI slop by forcing Claude through a design thinking pass on purpose, tone, constraints, and differentiation before writing any code.

Design / UIdesignui

by AgentVoltv1.0.0Published 1y ago1 install

Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Design a dashboard UI for displaying customer metrics and analytics”

Beforegeneric AI agent

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.

Afterwith Frontend Design (Anti-AI-Slop UI Generator)

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

name: frontend-design description: Use when designing or reviewing frontend interfaces — layout, hierarchy, spacing, color, and interaction patterns.

Frontend Design

Use when designing or reviewing frontend interfaces. Invoke for layout and visual hierarchy decisions, spacing and typography systems, color palettes, component states, and interaction patterns — grounded in widely-taught frontend design conventions.

What you get

A structured SKILL.md that guides Claude through frontend design reviews and build-outs.

Best for

Developers and designers who want consistent, well-reasoned UI decisions from Claude.

SKILL.md preview

SKILL.md

---
name: frontend-design
description: Use this skill when designing or reviewing a frontend interface, so layout, tone, and differentiation decisions are made deliberately instead of defaulting to generic AI-generated UI patterns.
version: 1.0.0
category: Design / UI
author: AgentVolt
license: proprietary
tags:
  - design
  - ui
  - p1
---

# Frontend Design (Anti-AI-Slop UI Generator)

Forces a deliberate design-thinking pass — purpose, tone, constraints, differentiation — before any UI code is written.

## When to use

… (sign up to view the full skill)