# ui-design

A skill that gives the agent design rules for layout, type, color and spacing. Useful when no product design-system skill exists.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 832 installs · ★ 158
- Author: frappe
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/frappe/skills/tree/HEAD/skills/ui-design/SKILL.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/frappe-ui-design

## What it does

The skill tells the agent how to behave while building interfaces. It asks for restraint: fewer elements, more white space, no reflex borders around every block. One primary action per page. Style and clarity sit in different registers, so a marketing page and a productivity panel get different treatment.

Inside are sections on typography, color and layout mechanics. Text below 12px is discouraged outside dense productivity UIs and all-caps labels. Color is meant to stay scarce — indicators, badges, secondary information. Layout leans on flexbox with padding and gap rather than margins. Repeated rows need fixed-width slots with `flex-shrink: 0`, otherwise icons and trailing actions drift between rows. Icons should be SVG; emoji as icons are out.

One rule stands out: every new project or feature gets a floating tweak panel docked bottom-right, with toggles for variations such as spacing density or content presentation. The toggle set is chosen per project, not shipped as a fixed list. A review checklist covers spacing, typography, contrast, alignment, clipping and grid sameness; the agent runs it at each checkpoint and gives a one-line verdict. For Frappe UI the skill defers to `frappe-app-dev` and existing `frappe-ui` patterns, so on Frappe projects it hands over to the specialised skills.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add frappe/skills --skill ui-design -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add frappe/skills --skill ui-design -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add frappe/skills --skill ui-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install frappe/skills ui-design
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add frappe/skills --skill ui-design -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/frappe/skills --path skills/ui-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add frappe/skills --skill ui-design -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/frappe/skills/tree/HEAD/skills/ui-design/SKILL.md

## When to use it
- set a visual hierarchy on a page without a designer
- strip decorative borders and boxes from blocks
- align icons and actions along vertical lanes in lists
- pick font sizes and line heights that stay readable
- run a layout review before shipping

## Example prompts
- build the profile settings page following the ui-design rules
- review this list against the ui-design checklist and fix the issues
- add a bottom-right tweak panel with spacing density toggles

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/mager-frontend-design.md) — skill · 1700 installs
- [aesthetic](https://affpapa.org/en/nevibecode/skills/aesthetic.md) — skill · 714 installs
- [bolder](https://affpapa.org/en/nevibecode/skills/bolder.md) — skill · 535 installs
- [design-like-im-5](https://affpapa.org/en/nevibecode/skills/design-like-im-5.md) — skill · 304 installs
- [impeccable](https://affpapa.org/en/nevibecode/skills/impeccable.md) — skill · 361300 installs
- [design-better](https://affpapa.org/en/nevibecode/skills/design-better.md) — skill · 1100 installs

## Other versions with the same name
- [ui-design · mblode](https://affpapa.org/en/nevibecode/skills/mblode-ui-design.md) — 1400 installs
- [ui-design · tencentcloudbase](https://affpapa.org/en/nevibecode/skills/ui-design.md) — 1800 installs
- [ui-design · pymodel](https://affpapa.org/en/nevibecode/skills/pymodel-ui-design.md) — 513 installs
- [ui-design · mindrally](https://affpapa.org/en/nevibecode/skills/mindrally-ui-design.md) — 981 installs

From the same set: [frappe/skills](https://affpapa.org/en/nevibecode/by/frappe/skills.md) — 5 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