From design-studio
Guided product planning workflow. Define your product (overview + roadmap), model data entities, specify the app shell, and create feature sections — all through interactive conversation that produces viewer-compatible structured markdown.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-studio:product-planningThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill provides the complete lifecycle for defining a product before design exploration begins. Through interactive conversation, agents help users define what they're building, model the data, plan the navigation, and spec out each feature section. All output is structured markdown that the design-studio-app viewer reads and displays.
This skill provides the complete lifecycle for defining a product before design exploration begins. Through interactive conversation, agents help users define what they're building, model the data, plan the navigation, and spec out each feature section. All output is structured markdown that the design-studio-app viewer reads and displays.
PRODUCT (/ds:product) → DATA SHAPE (/ds:data-shape) → SHELL (/ds:shell) → SECTIONS (/ds:section)
Product planning feeds into the existing design system workflow:
PRODUCT PLANNING → BRAND (optional) → EXPLORE → DECIDE → SHIP
/design-studio:ds:product uses the product-planner agent to define:
Outputs:
.design/product/product-overview.md.design/product/product-roadmap.md/design-studio:ds:data-shape uses the data-shape-planner agent to define:
Output:
.design/product/data-shape/data-shape.md/design-studio:ds:shell uses the shell-planner agent to define:
Output:
.design/product/shell/spec.md/design-studio:ds:section uses the section-planner agent to define individual feature sections:
Output per section:
.design/product/sections/{id}/spec.mdThe viewer tracks progress across 5 phases:
| Phase | Requirement | Command |
|---|---|---|
| Product | product-overview.md + product-roadmap.md exist | ds:product |
| Data Shape | data-shape/data-shape.md exists | ds:data-shape |
| Design System | tokens.json exists | ds:brand or ds:design-pick |
| Shell | shell/spec.md exists | ds:shell |
| Sections | At least one section directory under sections/ | ds:section |
Use /design-studio:ds:design-status to see current phase progress.
.design/
product/
product-overview.md # Product name, description, problems, features
product-roadmap.md # Ordered section list
data-shape/
data-shape.md # Entities + relationships
shell/
spec.md # App shell, navigation, layout
sections/
{section-id}/
spec.md # Section spec (title, overview, flows, requirements)
data.json # Optional sample data
screen-designs/ # Optional screen design HTML files
{name}.html
references/product-overview-schema.md — product-overview.md format, parser behavior, field rulesreferences/product-roadmap-schema.md — product-roadmap.md format, slugification rules, size guidelinesreferences/data-shape-schema.md — data-shape.md format, entity/relationship patternsreferences/shell-spec-schema.md — shell spec.md format, navigation and layout guidelinesreferences/section-spec-schema.md — section spec.md format, directory structure, matching roadmap entriesnpx claudepluginhub dlabs/claude-marketplace --plugin design-studioOrchestrates interactive product/feature design from fuzzy ideas to structured briefs via adaptive phases, collaborative refinement, and HTML/CSS visual prototypes. Use before coding.
Orchestrates interactive workflows to transform fuzzy product/feature ideas into structured development briefs. Adaptive phases handle complexity; generates HTML/CSS visual prototypes.
Guides users through structured interview to create Product Requirements Documents (PRDs) for apps, features, or projects, outputting markdown PRD and build milestones.