# Frontend Design

> Activates when building web interfaces, design systems, or styling components with high visual quality

- **Type:** Skill
- **Install:** `agentstack add skill-drag88-claude-dev-framework-frontend-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [drag88](https://agentstack.voostack.com/s/drag88)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [drag88](https://github.com/drag88)
- **Source:** https://github.com/drag88/claude-dev-framework/tree/main/skills/frontend-design

## Install

```sh
agentstack add skill-drag88-claude-dev-framework-frontend-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Frontend Design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. The goal is to implement real working code with exceptional attention to aesthetic details and creative choices.

## When to Activate

- Building web components, pages, or applications
- Creating landing pages or marketing sites
- Designing dashboards or admin interfaces
- Styling or beautifying any web UI
- Creating HTML/CSS layouts or React components
- When visual design quality matters

---

## User Preferences (Default Style)

Unless explicitly overridden, apply these preferences:

| Preference | Direction |
|------------|-----------|
| **Typography** | Helvetica (or Helvetica Neue) as primary font |
| **Aesthetic** | Minimalist — clean, restrained, essential |
| **Visual Style** | Glassmorphism — frosted glass, backdrop blur, subtle transparency |
| **Approach** | Less is more — every element must earn its place |

### Minimalist Execution

- **Whitespace as design element** — generous, intentional negative space
- **Limited color palette** — 2-3 colors maximum, one accent
- **Typography-driven hierarchy** — size and weight, not decoration
- **Subtle depth** — glassmorphism over heavy shadows
- **Refined details** — precision in spacing, alignment, micro-interactions
- **No visual clutter** — remove anything that doesn't serve a purpose

### Glassmorphism Implementation

```css
/* Glass card pattern */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

/* Dark variant */
.glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
```

Key glassmorphism principles:
- Subtle blur (8-16px) — not overwhelming
- Low-opacity backgrounds (0.1-0.3)
- Thin, semi-transparent borders
- Works best with colorful or image backgrounds behind
- Maintain text contrast for accessibility

---

## The AI Slop Problem

LLMs generate UI by sampling from training data patterns. Without explicit guidance, outputs converge toward the statistical median: **generic, safe, forgettable**.

### The AI Slop Signature (Reject These Patterns)

| Category | Generic Pattern | Why It's Slop |
|----------|-----------------|---------------|
| **Typography** | Inter, Roboto, Arial, Open Sans, Lato | Every tutorial default |
| **Colors** | Purple/indigo gradients on white | SaaS template cliche |
| **Layout** | 3-column grid with icon boxes | Tailwind tutorial median |
| **Hero** | Centered text + gradient blob + "Get Started" CTA | Every landing page ever |
| **Corners** | `rounded-xl` on everything | "Safe" modern look |
| **Spacing** | Timid, evenly-distributed | Avoids bold decisions |
| **Motion** | None, or generic fade-in | Performance "safety" |
| **Backgrounds** | Solid white or gray | Zero creative risk |
| **Decorations** | Blob SVGs, abstract shapes | Lazy visual filler |

### Specific Elements to NEVER Use

- Three icon boxes arranged in a symmetric grid
- Centered hero with gradient blob behind headline
- Purple-to-blue diagonal gradients
- Tailwind default colors (`indigo-500`, `purple-600`, `blue-500`)
- "Get Started" or "Learn More" as CTA text
- Blob SVG decorations from blobmaker
- `rounded-xl` or `rounded-2xl` on every element
- Stock illustration style (Undraw, Humaaans)

---

## Design Thinking

Before coding, understand the context and commit to a **BOLD aesthetic direction**.

### Key Considerations

- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick a distinctive aesthetic direction (see below)
- **Constraints**: Technical requirements (framework, performance, accessibility)
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

### Aesthetic Directions

Choose a direction and commit fully—these are starting points, not limits:

| Direction | Character |
|-----------|-----------|
| **Minimalist (Default)** | Clean, restrained, essential, glassmorphism |
| Brutally minimal | Stark, severe, almost empty |
| Maximalist chaos | Dense, layered, overwhelming |
| Retro-futuristic | Vintage meets tomorrow |
| Organic/natural | Flowing, living, imperfect |
| Luxury/refined | Premium, sophisticated, elegant |
| Playful/toy-like | Fun, bouncy, joyful |
| Editorial/magazine | Typography-forward, print-inspired |
| Brutalist/raw | Exposed structure, anti-design |
| Art deco/geometric | Bold shapes, symmetry, gold accents |
| Soft/pastel | Gentle, approachable, calming |
| Industrial/utilitarian | Functional, no-nonsense, exposed |
| Dark/moody | Deep colors, dramatic contrast |
| Lo-fi/zine | Raw, handmade, photocopied |
| Handcrafted/artisanal | Warm, human, imperfect |

### Critical Principle

**Choose a clear conceptual direction and execute it with precision.** Bold maximalism and refined minimalism both work—the key is intentionality, not intensity.

> See `references/typography.md` for font selection tables by aesthetic, contrast rules, and banned fonts.

> See `references/visual-system.md` for color/theme palettes, spatial composition, motion/animation, and backgrounds.

---

## Implementation Requirements

Implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

- **Production-grade** and functional
- **Visually striking** and memorable
- **Cohesive** with a clear aesthetic point-of-view
- **Responsive** across viewport sizes
- **Accessible** with proper contrast and focus states
- **Meticulously refined** in every detail

---

## Accessibility Requirements

Non-negotiable baseline:

| Requirement | Standard |
|-------------|----------|
| **Color contrast** | 4.5:1 for body text, 3:1 for large text (WCAG AA) |
| **Focus states** | Visible keyboard focus on all interactive elements |
| **Touch targets** | Minimum 44x44px for mobile |
| **Alt text** | Descriptive for images, empty for decorative |
| **Semantic HTML** | Proper headings, landmarks, form labels |

---

## Form & Interactive States

Design all states, not just default:

| State | Design Consideration |
|-------|---------------------|
| **Default** | Clear affordance, visible labels |
| **Hover** | Subtle feedback, cursor change |
| **Focus** | Prominent ring, high contrast |
| **Active/Pressed** | Tactile feedback |
| **Disabled** | Reduced opacity, no pointer |
| **Error** | Red accent, icon, helpful message |
| **Success** | Green accent, confirmation |
| **Loading** | Spinner or skeleton, disable submit |

---

## Process

1. **Understand** the context, purpose, and audience
2. **Reject** AI slop patterns explicitly
3. **Commit** to a bold aesthetic direction
4. **Select** distinctive typography and color palette
5. **Implement** with meticulous attention to detail
6. **Verify** accessibility (contrast, focus, touch targets)
7. **Refine** motion, spacing, and micro-interactions
8. **Confirm** the design feels distinctive, not generic

---

## Final Reminder

**Claude is capable of extraordinary creative work.** The default patterns exist because they're statistically common—not because they're good. Reject the median. Make bold choices. Execute with precision.

Every design decision is an opportunity to create something memorable instead of forgettable.

## Suggested Commands
- `/cdf:implement` — Build interfaces with design skill guidance
- `/cdf:design` — Design UI components and pages

Opus 4.7 plays the frontend-engineer role from the Role line in CLAUDE.md when given visual design context — no dedicated frontend-architect agent needed.

## Reference Files

| File | Contents |
|------|----------|
| `references/typography.md` | Font selection by aesthetic, contrast rules, banned fonts |
| `references/visual-system.md` | Color/theme, spatial composition, motion/animation, backgrounds |

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [drag88](https://github.com/drag88)
- **Source:** [drag88/claude-dev-framework](https://github.com/drag88/claude-dev-framework)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-drag88-claude-dev-framework-frontend-design
- Seller: https://agentstack.voostack.com/s/drag88
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.