Agent skill · Security

product-design

Turn a vague product ask ("this page feels wrong", "we need a team view") into a grounded, shippable design by establishing business semantics and the user task before proposing a surface. Use when scoping a new surface, redesigning an existing one, or deciding what a feature should be. Not for auditing a built screen (ux-audit) or choosing visual details (ux).

LobeHub80,937★ · +310/wk · 1 repos on radarProfile →
claude-codeNOASSERTION
Install
npx skills add lobehub/lobehub --skill product-design --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 7
SKILL.md size: 10 KB
Bundled scripts: none
Path: .agents/skills/product-design/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 81,252 · +315 this week
Language: TypeScript
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# Product Design Decide **what to build and why** before arguing about spacing. Two rules are non-negotiable: > **Never design from the surface. Establish what the business actually models > first.** > **Never turn the business model into the information architecture. The domain > constrains what the surface may claim; the user's retrieval and decision task > determines how the surface is organized.** (`P-14`) This skill handles product meaning first. It may hand a grounded frame to `ux` or `design-prototype`, but discovery does not require implementation or a prototype. Strip out every framework, table and component name: if no product insight remains, the finding belongs in an engineering skill. ## Relationship to other skills | Skill | Question | When | | ------------------------------------------------ | --------------------------------------------- | --------------------------- | | **product-design** | What should this surface be, and why? | Before or during framing | | [ux](../ux/SKILL.md) | How should the interaction behave and feel? | While designing or building | | [ux-audit](../ux-audit/SKILL.md) | Does the built surface honor those rules? | After it exists | | [design-pr

What's inside
Steps it walks through
  1. Relationship to other skills
  2. Select the smallest run mode
  3. Step 1 — Ground the business model
  4. Step 2 — Frame the user's view model
  5. Step 3 — Diagnose the structural error
  6. Step 4 — Align decisions by dependency
  7. Step 5 — Prototype when it resolves uncertainty
  8. Step 6 — Scope honestly
  9. Close — record coverage and propose learning
  10. Deliverables
  11. Anti-patterns
Ships with 6 files
  • references/canon.md
  • references/layer-model.md
  • references/pattern-base.md
  • references/trace-schema.md
  • references/worked-example.md
  • templates/design-spec.md
More from lobehub
All skills →
About this skill
What does the product-design skill do?

Turn a vague product ask ("this page feels wrong", "we need a team view") into a grounded, shippable design by establishing business semantics and the user task before proposing a surface. Use when scoping a new surface, redesigning an existing one, or deciding what a feature should be. Not for auditing a built screen (ux-audit) or choosing visual details (ux).

How do I install it?

Run `npx skills add lobehub/lobehub --skill product-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From lobehub/lobehub, a repository with 81,252 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going