Product Planning

1

Product Vision

/product-vision

Define your product's foundation in a single guided conversation. The AI asks clarifying questions covering three areas:

• Product overview — Name, description, problems solved, key features
• Product roadmap — Breaking your product into 3-5 sections, sequenced by development priority
• Data shape — The core entities in your system and how they relate

Share any notes, ideas, or rough thoughts you have about what you're building. The AI will ask clarifying questions and then generate all three files automatically.

Creates:

• product/product-overview.md
• product/product-roadmap.md
• product/data-shape/data-shape.md

2

Update Product Roadmap

/product-roadmap

Use this command to update the product roadmap that was generated by /product-vision. The AI will show you the current roadmap and ask what you'd like to change.

Each section in your roadmap represents:

• A navigation item in your app's UI
• A self-contained feature area that can be designed and built independently
• A logical phase of your development roadmap

Updates: product/product-roadmap.md

3

Update Data Shape

/data-shape

Use this command to update the data shape that was generated by /product-vision. The AI will show you the current data shape and ask what you'd like to change.

The data shape defines the core entities in your product—the "nouns" of your system. The focus is conceptual, not technical:

• Entity names — User, Project, Invoice, Task, etc.
• Plain-language descriptions — What each entity represents
• Relationships — How entities connect to each other

Don't worry about database schemas or field types. Keep it minimal. The implementation agent will extend the data shape with additional details as needed.

Updates: product/data-shape/data-shape.md

4

Design Tokens

/design-tokens

Choose your visual identity:

Colors

Select from Tailwind's built-in color palette:

• Primary — Main accent for buttons, links, key actions (e.g., blue, indigo, emerald, lime)
• Secondary — Complementary accent for tags, highlights (e.g., violet, amber, teal)
• Neutral — Backgrounds, text, borders (e.g., slate, gray, zinc, stone)

Typography

Select from Google Fonts:

• Heading — For titles and section headers (e.g., DM Sans, Inter, Space Grotesk)
• Body — For paragraphs and UI text (e.g., Inter, Source Sans 3, Nunito Sans)
• Mono — For code and technical content (e.g., JetBrains Mono, Fira Code)

The AI will suggest options based on your product type and help you find a combination that fits.

Creates: product/design-system/colors.json, product/design-system/typography.json

5

Application Shell

/design-shell

Design the persistent navigation and layout that wraps all your sections. Choose from common patterns:

• Sidebar Navigation — Vertical nav on the left, content on the right. Best for dashboard-style tools, admin panels, apps with many sections.
• Top Navigation — Horizontal nav at top, content below. Best for simpler apps, marketing-style products, fewer sections.
• Minimal Header — Just logo + user menu. Best for single-purpose tools, wizard-style flows.

You'll also define:

• User menu placement and contents
• Responsive behavior (how it adapts on mobile)
• Any additional nav items (Settings, Help, etc.)

The shell is implemented as React components that will wrap your section screen designs.

Creates:

• product/shell/spec.md — Shell specification
• src/shell/components/AppShell.tsx — Main shell wrapper
• src/shell/components/MainNav.tsx — Navigation component
• src/shell/components/UserMenu.tsx — User menu component
• src/shell/ShellPreview.tsx — Preview wrapper for Design OS

What's Next

With the foundation established, you're ready to design individual sections.

Continue to Designing Sections