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.
Guides product planning through interactive conversation to define overview, data models, app shell, and feature sections.
npx claudepluginhub dlabs/claude-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/data-shape-schema.mdreferences/product-overview-schema.mdreferences/product-roadmap-schema.mdreferences/section-spec-schema.mdreferences/shell-spec-schema.mdThis 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 entriesYou MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.