# Nextjs UI Designer

> Design and implement distinctive, production-grade Next.js (App Router) UIs—pages, layouts, and components—with bold aesthetic direction (typography, color, motion, layout), Tailwind/CSS variables, next/font, accessibility, and polished interaction details; use when building or beautifying any Next.js/React frontend (landing pages, dashboards, marketing sites, design systems).

- Skill: `spindizzy5/nextjs-ui-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add spindizzy5/nextjs-ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/spindizzy5/nextjs-ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: spindizzy5 (https://skillmd.com/u/spindizzy5)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/spindizzy5/nextjs-ui-designer

---


# Next.js UI Designer

Build memorable, production-grade Next.js interfaces that avoid generic “AI template” aesthetics. Make one strong, intentional design choice and execute it with precision.

## Workflow (run every time)

1. Clarify context (ask only what’s missing):
   - Purpose + primary user
   - Brand constraints (fonts/colors/voice), or “no brand yet”
   - Target device(s) and content density (marketing vs. app UI)
   - Stack constraints: Tailwind vs CSS Modules, shadcn/ui or not, App Router vs Pages Router
2. Commit to a bold aesthetic direction:
   - Pick one clear “tone” (brutally minimal, editorial, retro-futuristic, luxury, playful, brutalist, art deco, organic, industrial, etc.)
   - Define a signature detail someone will remember (e.g., typographic treatment, border system, textured background, unusual grid break, one hero motion moment)
3. Translate into a Next.js plan:
   - Identify routes (`app/.../page.tsx`), shared layout (`app/layout.tsx`), and any reusable components (`components/…`)
   - Keep Server Components by default; isolate interactivity into small `use client` components
4. Implement with restraint + polish:
   - Design tokens (CSS variables), typography system, layout grid, interactive states, dark mode (if appropriate)
5. QA pass:
   - Keyboard/focus states, contrast, responsive behavior, `prefers-reduced-motion`, and basic performance (avoid heavy effects everywhere)

## Next.js implementation rules

- Default to Next.js App Router conventions unless the repo uses Pages Router.
- Use `next/font` for fonts (Google or local). Prefer pairing a distinctive display face with a quieter body face.
- Use `next/image` for imagery; avoid layout shift; provide `sizes` and meaningful `alt`.
- Prefer CSS variables for theme tokens in `app/globals.css`, optionally mapped into Tailwind via `tailwind.config`.
- Avoid adding new dependencies unless the user asks; for motion, prefer CSS-first and upgrade to Framer Motion only when it materially improves the result.
- Respect existing repo patterns (Tailwind setup, component library, lint rules, import aliases).
- Never ship inaccessible UI: semantic HTML, visible focus, reduced-motion support, reasonable contrast.

## Aesthetic guidelines (avoid “AI slop”)

### Typography

- Avoid defaulting to overused choices (system fonts, Arial, Roboto, Inter). Use Inter only if the product already uses it.
- Choose a typographic “idea” (e.g., high-contrast serif headlines + utilitarian grotesk body; mono captions + editorial body).
- Be precise with scale and rhythm: consistent line-height, deliberate letter-spacing, and intentional hierarchy.

### Color & theme

- Commit to a palette: a strong base + 1–2 sharp accents beats timid, evenly-distributed color.
- Use tokens (example set): `--bg`, `--fg`, `--muted`, `--card`, `--border`, `--accent`, `--accent-2`, `--shadow`.
- Prefer controlled neutrals; let accents do the work.
- If doing dark mode, make it designed (not inverted): adjust saturation, shadows, and borders accordingly.

### Motion

- Use motion sparingly but intentionally: one orchestrated load moment (staggered reveals) is better than constant motion everywhere.
- Support reduced motion: gate non-essential animations behind `@media (prefers-reduced-motion: reduce)`.
- Favor micro-interactions with meaning (hover/focus, state changes, page transitions) over decorative jitter.

### Spatial composition

- Use layout to express the concept: asymmetry, overlap, deliberate density, and grid breaks—without harming readability.
- Use generous whitespace for refined minimalism; use tight systems and repeated motifs for maximalism.

### Backgrounds & visual detail

- Create atmosphere: gradient meshes, subtle noise, geometric patterns, layered transparencies, or a distinctive border/shadow language.
- Avoid clichés (especially “purple gradient on white”, generic glassmorphism everywhere, cookie-cutter cards).

## Output expectations (when you implement UI)

- Start with a 5–8 line design brief: tone, palette, type pairing, signature detail, motion plan.
- Make changes as real, runnable Next.js code (TSX + CSS/Tailwind), not mockups.
- Include key states: hover, focus, disabled, loading/skeleton when relevant.
- Keep changes localized and consistent with the repo’s structure; list touched files.