---
name: ck-frontend-design
description: Create polished frontend interfaces from designs, screenshots, or videos. Use for web components, 3D experiences, replicating UI designs, quick prototypes, immersive interfaces, design system work, avoiding generic AI output.
---

# ck-frontend-design

Create distinctive, production-grade frontend interfaces. Implement real working code with exceptional aesthetic attention. Embeds the `ui-ux-designer` agent role.

## When to Use

- Replicating a UI from a screenshot or video
- Building web components from scratch with a strong aesthetic direction
- Creating 3D/WebGL immersive experiences
- Design system creation or audit
- Quick prototypes needing real visual polish
- Any frontend work where "AI slop" aesthetics are unacceptable

## Don't Use When

- Pure backend logic with no visual component
- Simple data display with no design requirements
- Already have a design system and just need to implement components per spec — use `ck-frontend-development`

## Workflow Selection

| Input | Workflow |
|-------|----------|
| Screenshot | Replicate exactly |
| Video | Replicate with animations |
| Screenshot/Video (describe only) | Document for developers |
| 3D/WebGL request | Three.js immersive experience |
| Quick task | Rapid implementation |
| From scratch | Design Thinking process below |

**All workflows:** Activate design intelligence database first for pattern research.

## Screenshot/Video Replication

1. **Analyze** — extract colors, fonts, spacing, effects from the visual
2. **Plan** — dispatch `ck-frontend-design` sub-process to create phased implementation
3. **Implement** — match source precisely
4. **Verify** — compare implementation to original
5. **Document** — update `./docs/design-guidelines.md` if approved

## Design Thinking (From Scratch)

Before coding, commit to a BOLD aesthetic direction:

- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme — brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
- **Constraints**: Technical requirements (framework, performance, accessibility)
- **Differentiation**: What makes this UNFORGETTABLE?

**CRITICAL:** Execute with precision. Bold maximalism and refined minimalism both work — intentionality is key.

## Aesthetics Guidelines

- **Typography**: Avoid Arial/Inter; use distinctive, characterful fonts. Pair display + body fonts.
- **Color**: Commit to cohesive palette. CSS variables. Dominant colors with sharp accents.
- **Motion**: CSS-first animations. Orchestrated page loads > scattered micro-interactions.
- **Spatial**: Unexpected layouts. Asymmetry. Overlap. Negative space OR controlled density.
- **Backgrounds**: Atmosphere over solid colors. Gradients, noise, patterns, shadows, grain.
- **Assets**: Generate with multimodal AI tools when needed

## Anti-Patterns (AI Slop — NEVER use)

- Overused fonts: Inter, Roboto, Arial, Space Grotesk
- Cliched colors: purple gradients on white
- Predictable cookie-cutter layouts
- Generic card grids with drop shadows everywhere

## Design Principles

- **Mobile-First**: Always start with mobile, scale up
- **Accessibility**: WCAG 2.1 AA minimum (4.5:1 contrast for normal text)
- **Consistency**: Maintain design system coherence
- **Performance**: Optimize animations for smooth 60fps
- **Conversion-Focused**: Every design decision serves user goals
- **Trend-Aware**: Stay current while maintaining timeless principles

## Quality Standards

- Responsive across breakpoints (320px+, 768px+, 1024px+)
- Color contrast ratios meet WCAG 2.1 AA
- Interactive elements have clear hover/focus/active states
- Animations respect `prefers-reduced-motion`
- Touch targets minimum 44x44px on mobile
- Line height 1.5–1.6 for body text

## Required Skills (in order)

1. Design intelligence database search for patterns
2. `ck-frontend-design` screenshot/video analysis workflows
3. Web design best practices references
4. Framework-specific patterns (`ck-web-frameworks`)
5. Styling system (shadcn/ui, Tailwind CSS)

## Output

- Production-ready HTML/CSS/JS implementation
- Updated `./docs/design-guidelines.md` with new patterns
- Design rationale documented