# Frontend Design

> Create distinctive, production-grade frontend interfaces with strong visual direction and non-generic UI craft. Use this when redesigning pages, components, apps, or product surfaces that need a memorable design point of view.

- Skill: `1055373165/frontend-design` (Agent Skill, multi-file: 9 files)
- Install (CLI): `npx skillmds@latest add 1055373165/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/1055373165/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: 1055373165 (https://skillmd.com/u/1055373165)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/1055373165/frontend-design

---


# Frontend Design

Use this skill to build frontend work that feels intentionally designed rather than auto-generated. Favor strong hierarchy, disciplined typography, clear interaction cues, and layouts that earn their density.

## Context Check

Before design work, confirm:

- Target audience
- Core jobs to be done
- Brand personality and tone

Look for a `Design Context` section in the current instructions first. If it is not there, read `.impeccable.md` from the project root. If the context is still missing, ask the user instead of guessing from the codebase.

## Working Style

Pick a clear design direction and commit to it:

- Define the purpose of the interface and the emotional tone
- Choose one memorable differentiator
- Match implementation complexity to the visual ambition
- Keep the result functional, accessible, and production-ready

## Core Rules

### Typography

Read `reference/typography.md`.

- Use a deliberate type system with visible contrast between roles
- Prefer a distinctive display voice plus a highly readable body voice
- Use fluid sizing sparingly; product UI should stay spatially stable
- Avoid default-looking font choices that erase personality

### Color

Read `reference/color-and-contrast.md`.

- Use tinted neutrals and a restrained accent palette
- Prefer coherent, branded surfaces over loud gradients
- Keep contrast strong without pure black or pure white
- Never rely on generic cyan, purple, or neon "AI" palettes

### Layout

Read `reference/spatial-design.md`.

- Build rhythm with varied spacing, not one repeated padding value
- Use asymmetry and directional composition when it improves hierarchy
- Flatten hierarchy where possible; not everything needs a card
- Avoid repetitive icon-heading-text grids and nested panels

### Motion

Read `reference/motion-design.md`.

- Use motion to clarify state and sequence
- Favor one strong entry choreography over many tiny flourishes
- Animate transform and opacity instead of layout properties
- Support reduced-motion preferences

### Interaction

Read `reference/interaction-design.md`.

- Make primary actions unmistakable
- Use progressive disclosure for advanced options
- Design empty, loading, and error states as part of the product
- Keep forms generous and low-pressure

### Responsive

Read `reference/responsive-design.md`.

- Start from mobile constraints and scale upward with intent
- Adapt structure for smaller screens instead of hiding key capability
- Use container-aware layouts where useful

### Writing

Read `reference/ux-writing.md`.

- Make labels direct and specific
- Avoid repeating what the heading already says
- Keep helper copy calm, useful, and concise

## Anti-Patterns

Avoid the fingerprints of generic AI UI:

- Interchangeable glow-heavy SaaS visuals
- Purple or cyan gradients used as a shortcut for "intelligence"
- Card inside card inside card
- Gray text on colored surfaces
- Large decorative icons above every section title
- Centered-everything landing-page composition for tool workflows
- Decorative charts, sparkles, and glass effects without product meaning

## Quality Bar

Run a final "AI slop" check:

- Would this feel instantly machine-made because it follows a template?
- Is there one visual choice people will remember?
- Does the hierarchy still work with real content, long text, and mobile width?

If the answer is weak, refine the direction rather than adding more decoration.