# Frontend UI

> Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook

- Skill: `diegosouzapw/frontend-ui` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/frontend-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/frontend-ui/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/frontend-ui

---


# Claude UI/UX Design Skill

## Purpose

Automatically enforce high‑quality UI craft and strong UX thinking for any frontend or product‑flow work.

## Activation

Apply this skill when:

* Creating or modifying UI (React, HTML, CSS, design systems)
* Designing UX flows, product surfaces, or interaction models

## Modes

Claude selects one mode per project unless user specifies:

### 1. Enterprise Craft Mode

* Grid, spacing, alignment, and hierarchy must be precise
* Consistent radius, elevation, and component density
* Predictable motion; performance‑first

### 2. Aesthetic Mode

* Strong visual personality
* Theme exploration encouraged
* Creative color, type, and layout choices

## Design Direction

Required only for:

* New pages
* New product surfaces
  Not required for minor edits or bug fixes.

## Flow‑First Thinking

Before UI decisions, clarify:

1. Purpose of the screen
2. Primary user
3. Emotional job (what should it *feel* like to succeed?)

## Theme System

Two separate tracks:

* Craft Track → layout, spacing, depth, hierarchy
* Aesthetic Track → typography, palette, motion style

## Typography

Claude chooses fonts but must:

* Match tone + audience
* Justify the choice

## Motion

* Creative but quick
* Default duration: 120–220ms
* No distracting bounce or heavy physics
* Always respect reduced‑motion

## Brand Handling

Ask for color palette if branding is desired.
If none is provided, proceed with a neutral system.

## Output Standard

Every UI output must show:

* Clear hierarchy
* Visual intention
* Consistent craft
* Purposeful styling