product-designer — Claude Code skill: what it does, install
A skill for user journeys, wireframes, prototypes, design systems, and usability tests. Use it when a coding task needs a structured product-design workflow.
npx skills add borghei/Claude-Skills --skill product-designer -a claude-codeWhat product-designer 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.
What it helps with
- map a user journey
- frame interface requirements
- draft wireframes for a core flow
- plan a usability test
- define tokens and component states
Example prompts for the agent
- 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.
How to install product-designer
1Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill product-designer -a claude-code2Manually: put the files in place
~/.claude/skills/product-designer/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/product-designer/
1Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill product-designer -a codex2Manually: put the files in place
.agents/skills/product-designer/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill product-designer -a cursor2Manually: put the files in place
.cursor/skills/product-designer/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install borghei/Claude-Skills product-designer2Manually: put the files in place
.github/skills/product-designer/SKILL.md1Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill product-designer -a gemini-cli2Platform CLI
gemini skills install https://github.com/borghei/Claude-Skills --path product-team/product-designerManually: put the files in place
.devin/skills/product-designer/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add borghei/Claude-Skills --skill product-designer -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about product-designer
How do I install product-designer in Claude Code?
Run npx skills add borghei/Claude-Skills --skill product-designer -a claude-code, then run npx skills add borghei/Claude-Skills --skill product-designer -a claude-code again. The skill file is then available at ~/.claude/skills/product-designer/SKILL.md.
What does product-designer do?
It guides user research, journey maps, interface structure, wireframes, prototypes, usability tests, and developer handoff. It also provides material for design tokens and component specifications.
Which platforms support product-designer?
The skill has installation methods for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. Each platform uses its own installation command or skill path.
