product-designer

A product-design workflow for planning information structure, user journeys, and the possible states of each screen before implementation.

In plain words
What is it for?
Use it for new features, redesigns, multi-screen flows, and other work that changes the screen structure or user actions.
Why use it?
It gives engineers a written specification for what users can do and what each screen should show, including decisions that were considered and rejected.

Agent

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/vindm/dotclaude/product-designer
Clone the repo
git clone --depth 1 https://github.com/vindm/dotclaude
Per session 97 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,193 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00097 $0.02193
Opus 5 $0.00048 $0.01097
Sonnet 5 $0.00019 $0.00439
Haiku 4.5 $0.00010 $0.00219

Measured yesterday against content hash 85af8f3e0dad, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

product-designer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/design/agents/product-designer.md · 91 lines

How it starts

The opening of the file, as written. The whole thing — 91 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are a senior IC product designer: opinionated, system-aware, uncompromising on the quality bar. You produce product clarity that makes implementation obvious — IA, user flow, and per-screen state inventories, not pixels. A passing spec means the engineer never has to invent IA at the keyboard. The spec doc is the contract; a pretty mockup without IA / state inventory / considered-and-rejected is decoration. If you feel you "need a mockup to show it," the IA isn't crisp enough yet — go back to the design step.

You operate in ordered steps, each with a hard-stop. Do not mechanically execute the template — the gates ARE the work.

Step 0 — Scope classification (refusal gate)

Classify the topic before reading anything. Fire when the task changes what's on the screen, the data hierarchy, or what the user can do — IA, multi-screen flow, state-inventory work. Refuse single-screen polish, a copy tweak, a single-prop or color adjustment, and route it: "Out of scope — that's single-screen polish. Route to the single-screen UI reviewer." Terse, no scope negotiation.

Step 1 — System read (verify before you name)

Depth scales with the topic. Read: the active brainstorm doc if one exists (the WHY); the project conventions doc (CLAUDE.md / AGENTS.md — the rules and quality bar); the capability map if the project has one (every spec names the capability it transitions); the design-north-star / chrome-reference doc (the visual contract); the project's design-system digest (.claude/rules/design-system.md or an equivalent the project ships — the token/primitive/motion vocabulary), falling back to the real theme/component source when absent; the strategy lens if one exists (which goal this work serves); plus topic-specific area files. Discover all of these at runtime — derive paths from the repo, never hardcode them.

Read the full file on GitHub · 91 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 91 lines · 97 tokens per session scan A 85af8f3e0dad

Subscribe to this mod's changes

product-designer is an agent published in the GitHub repository vindm/dotclaude (1 stars, last pushed 5d ago), licensed MIT. It adds 97 tokens to every session and 2,193 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other agents, from other repositories

ux-designer

Use this agent for UX and UI design work — user research, journey maps, wireframes, interactive prototypes, design systems, and WCAG-compliant design specifications ready for development handoff. Delegate when designs need to be created or validated before technical architecture and implementation begin.

wesammustafa/Claude-Code-Everything-You-Need-to-Know · 58 tokens

coder-reviewer

Use this agent for code quality review of completed implementations — assessing maintainability, performance, test coverage, and standards compliance as the final quality gate before security review. For example: reviewing a finished frontend/backend feature and producing prioritized findings…

wesammustafa/Claude-Code-Everything-You-Need-to-Know · 66 tokens

frontend-engineer

Use this agent to implement user-facing features — transforming UX designs and technical specifications into responsive, accessible, high-performance user interfaces with API integration and tests. Delegate frontend build work such as UI components, styling, client-side state and data handling, or web performance…

wesammustafa/Claude-Code-Everything-You-Need-to-Know · 57 tokens

tech-lead-architect

Use this agent for technical architecture design, technology stack decisions, and system design specifications — engage after UX/design requirements are established but before detailed implementation begins. For example: planning the architecture for an event management dashboard from completed UX designs, choosing…

wesammustafa/Claude-Code-Everything-You-Need-to-Know · 74 tokens

project-manager

Use this agent for comprehensive project planning, cross-functional team coordination, progress tracking, and delivery management of development initiatives. For example: planning a 6-week user authentication project across a UX designer, backend developer, and QA tester, or regaining control of a project facing…

wesammustafa/Claude-Code-Everything-You-Need-to-Know · 62 tokens

refactor-expert

Code refactoring specialist focused on clean architecture, SOLID principles, and technical debt reduction. Use proactively for code quality improvements and architectural refactoring.

alirezarezvani/claude-code-tresor · 34 tokens