# product-designer

A skill for user journeys, wireframes, prototypes, design systems, and usability tests. Use it when a coding task needs a structured product-design workflow.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4900 installs · ★ 980
- Author: borghei
- License: LicenseRef-MIT-Commons-Clause · policy=link-only · description only; the file stays with the author
- Source: https://github.com/borghei/Claude-Skills/tree/HEAD/product-team/product-designer/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/product-designer

## What it does

This skill guides product design from user research to developer handoff. It helps clarify the target user, the problem, the intended deliverable, and the stage of work before producing a result. The workflow covers journey mapping, problem framing, information architecture, sketching, wireframing, prototyping, usability testing, and handoff.

The material includes interface principles, accessibility guidance, design-token examples, component structure, and a usability-test outline with tasks and measures. It also describes a 5-day design sprint and prototype fidelity from paper exploration to development handoff. The visible workflow includes checkpoints for the problem statement, information architecture, prototype coverage, documented usability issues, and interaction feasibility.

The skill can be installed for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. For Claude Code, the listed method runs the install command twice and then points to `~/.claude/skills/product-designer/SKILL.md`; check the command output before using the file.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add borghei/Claude-Skills --skill product-designer -a claude-code
```

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

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add borghei/Claude-Skills --skill product-designer -a codex
```

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

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add borghei/Claude-Skills --skill product-designer -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install borghei/Claude-Skills product-designer
```

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

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add borghei/Claude-Skills --skill product-designer -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/borghei/Claude-Skills --path product-team/product-designer
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add borghei/Claude-Skills --skill product-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/borghei/Claude-Skills/tree/HEAD/product-team/product-designer/SKILL.md

## When to use it
- map a user journey
- frame interface requirements
- draft wireframes for a core flow
- plan a usability test
- define tokens and component states

## Example prompts
- Create a user journey map for a checkout flow and identify its pain points.
- Draft wireframes for the main task, including one error state.
- Write a usability-test plan with participant tasks and success measures.

## Similar
- [product-design](https://affpapa.org/en/nevibecode/skills/product-design.md) — skill · 816 installs
- [refero-design](https://affpapa.org/en/nevibecode/skills/refero-design.md) — skill · 12000 installs
- [hooked-ux](https://affpapa.org/en/nevibecode/skills/hooked-ux.md) — skill · 6200 installs
- [measure](https://affpapa.org/en/nevibecode/skills/measure.md) — skill · 2700 installs
- [user-persona](https://affpapa.org/en/nevibecode/skills/user-persona.md) — skill · 2100 installs
- [metrics-definition](https://affpapa.org/en/nevibecode/skills/metrics-definition.md) — skill · 2100 installs

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