# aesthetic

A skill that walks your coding agent through interface design: reading other people's layouts, generating design images, and iterating until they hold up.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 714 installs · ★ 2228
- Author: mrgoonie
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/aesthetic/SKILL.md
- Updated: 2026-04-03
- HTML: https://affpapa.org/en/nevibecode/skills/aesthetic

## What it does

The skill gives the agent a four-stage frame. BEAUTIFUL comes first: study existing work and pull out the principles — visual hierarchy, typography, colour, white space. Then RIGHT: component systems and accessibility requirements. SATISFYING covers micro-interactions, with 150–300ms timing and ease-out on entry, ease-in on exit. PEAK closes it out with parallax, particles and scroll-driven narrative, tempered by a note about restraint.

Two workflows ship with it. The first captures a screenshot of an inspiration site using the `chrome-devtools` skill, then hands it to `ai-multimodal` for analysis: style, grid, typography with an attempt to name the actual Google Font rather than defaulting to Inter or Poppins, hex palette, component patterns, and a 1–10 rating. The second generates design images through the Gemini API, scores them with `ai-multimodal`, and rewrites the prompt until the score reaches 7/10. Image edits go through `media-processing`; implementation leans on `ui-styling` and `web-frameworks`.

The constraint is baked into the skill itself: AI has no aesthetic sense, so the standard has to come from human examples. Skip that step and you get something average. Image generation needs a Gemini API key, and screenshot capture depends on `chrome-devtools`. Findings land in `./docs/design-guideline.md` and `./docs/design-story.md` — if your project already keeps a design guideline, decide which one wins before you run it.

## Requirements
- Works with: Chrome

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/aesthetic/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/aesthetic/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/aesthetic/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/aesthetic/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mrgoonie/claudekit-skills aesthetic
```

2. **Manually: put the files in place**
- File: `.github/skills/aesthetic/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/aesthetic
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/aesthetic/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/aesthetic/SKILL.md

## When to use it
- pull a palette and grid out of a reference layout
- pick a font pairing that isn't Inter or Poppins again
- add micro-interactions with deliberate timing
- check a design against accessibility rules before coding it
- generate several design directions and compare them

## Example prompts
- Analyze this screenshot and write up a guideline: style, grid, fonts, hex palette
- Generate three landing page directions and rate each one out of ten
- Spec the micro-interactions for these cards, including timing and easing

## Similar
- [empty-state](https://affpapa.org/en/nevibecode/skills/empty-state.md) — skill · 552 installs
- [ui-design](https://affpapa.org/en/nevibecode/skills/frappe-ui-design.md) — skill · 832 installs
- [avoid-ai-design](https://affpapa.org/en/nevibecode/skills/avoid-ai-design.md) — skill · 641 installs
- [bencium-innovative-ux-designer](https://affpapa.org/en/nevibecode/skills/bencium-innovative-ux-designer.md) — skill · 7500 installs
- [frontend-design](https://affpapa.org/en/nevibecode/skills/mager-frontend-design.md) — skill · 1700 installs
- [aesthetic-usability](https://affpapa.org/en/nevibecode/skills/aesthetic-usability.md) — skill · 1900 installs

From the same set: [mrgoonie/claudekit-skills](https://affpapa.org/en/nevibecode/by/mrgoonie/claudekit-skills.md) — 21 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md