# ui-designer

A skill that picks a deliberate visual direction before writing code, then builds the interface around typography, color, motion and composition.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3600 installs
- Author: daniel-dan-conrad
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/daniel-dan-conrad/ui-designer-skill/tree/HEAD/SKILL.md
- Updated: 2026-05-18
- HTML: https://affpapa.org/en/nevibecode/skills/ui-designer

## What it does

The skill kicks in when you ask for a component, page, dashboard or landing page. It works through four questions first: what the interface is for, what tone it takes, what technical limits apply, and what will make it memorable. Coding starts after that.

A script ships with it: `scripts/find-relevant-image.py`. It scores images from `assets/images.csv` by how many of their tags appear in your description, verifies the decoded file with `file`, and writes the winner into `scripts/outputs/`. The output filename comes from the image metadata, not from you. Run it as `python scripts/find-relevant-image.py "<description>"`.

The script needs Python. The skill also names what to avoid: font stacks like Inter, Roboto and Arial, purple gradients on white, predictable layout templates. If your project already runs on that kind of design system, expect the skill to pull the other way — worth checking before you commit.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install daniel-dan-conrad/ui-designer-skill ui-designer
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/daniel-dan-conrad/ui-designer-skill
```

### Windsurf (Devin Desktop)

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

### OpenCode

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

## When to use it
- build a landing page with an actual visual idea instead of a default grid
- pick a display and body font pair that isn't a system stack
- stagger section reveals with `animation-delay`
- find a contextually fitting image for a page
- lay out a dashboard with asymmetric composition

## Example prompts
- Build a landing page for a coffee shop: dark theme, bold display type, sections that fade in on scroll
- Make a React product card component in a brutalist style, no Inter or system fonts
- Find a background image for a page about Japanese temples using `scripts/find-relevant-image.py`

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/cline-frontend-design.md) — skill · 7300 installs
- [designing-frontend-interfaces](https://affpapa.org/en/nevibecode/skills/designing-frontend-interfaces.md) — skill · 642 installs
- [bencium-impact-designer](https://affpapa.org/en/nevibecode/skills/bencium-impact-designer.md) — skill · 5400 installs
- [hallmark](https://affpapa.org/en/nevibecode/skills/hallmark.md) — skill · 70800 installs
- [frontend-designer](https://affpapa.org/en/nevibecode/skills/frontend-designer.md) — skill · 335 installs
- [ui-craft](https://affpapa.org/en/nevibecode/skills/ui-craft.md) — skill · 1400 installs

## Other versions with the same name
- [ui-designer · daymade](https://affpapa.org/en/nevibecode/skills/daymade-ui-designer.md) — 1600 installs

---
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