Command
data-shape
You are helping the user create or update the general shape of their product's data — the core entities ("nouns") and how they relate to each other. This…
@buildermethodsView CommandDevelopment
Command
/product-roadmap
You are helping the user create or update their product roadmap for Design OS.
How it fires
How this command gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/product-roadmap
Context preview
What this command does when you run it.
You are helping the user create or update their product roadmap for Design OS.
Command definition
product-roadmap.mdProduct Roadmap
You are helping the user create or update their product roadmap for Design OS.
Step 1: Check Current State
First, check if `/product/product-roadmap.md` exists.
---
If Roadmap Already Exists (Updating)
Read both:
- `/product/product-overview.md`
- `/product/product-roadmap.md`
Present the current state and ask what to change:
"Your product roadmap currently has [N] sections:
1. **[Section 1]** — [Description] 2. **[Section 2]** — [Description] 3. **[Section 3]** — [Description]
What would you like to change about the sections?"
Wait for the user's response describing what they want changed. Once you receive their notes, **immediately proceed** to update `product/product-roadmap.md` based on their requested changes — do not present a draft for approval.
After updating, inform the user:
"I've updated the product roadmap based on your feedback. Review the changes and let me know if you'd like further adjustments."
Stop here — the remaining steps below are for generating a new roadmap from scratch.
---
If No Roadmap Exists (Creating New)
Check Prerequisites
Read `/product/product-overview.md`. If it doesn't exist:
"Before creating a product roadmap, you'll need to define your product vision. Please run `/product-vision` first."
Stop here if the product overview is missing.
Analyze and Generate
Read the product overview and analyze:
- The core description
- The problems being solved
- The key features listed
**Immediately proceed** to create `/product/product-roadmap.md` — do not present a draft for approval. Generate 3-5 sections that represent:
- **Navigation items** - main areas of the product UI
- **Roadmap phases** - logical order for building
- **Self-contained feature areas** - each can be designed and built independently
Use this exact format:
# Product Roadmap
## Sections
### 1. [Section Title]
[One sentence description]
### 2. [Section Title]
[One sentence description]
### 3. [Section Title]
[One sentence description]
Confirm
"I've created your product roadmap at `/product/product-roadmap.md` with [N] sections:
1. **[Section 1]** — [Description] 2. **[Section 2]** — [Description] 3. **[Section 3]** — [Description]
Review the sections and let me know if you'd like to adjust anything. When you're ready, run `/data-shape` to sketch out the general shape of your product's data."
---
Important Notes
- Sections should be ordered by development priority
- Each section should be self-contained enough to design and build independently
- Section titles become navigation items in the app
- The numbered format (`### 1. Title`) is required for parsing
- Keep descriptions to one sentence - concise and clear
- Don't create too many sections (3-5 is ideal)
- Do NOT present a draft for approval — generate the file immediately and let the user review after
- If the user requests changes after reviewing, update the file immediately
Read more
Product Roadmap
You are helping the user create or update their product roadmap for Design OS.
Step 1: Check Current State
First, check if `/product/product-roadmap.md` exists.
---
If Roadmap Already Exists (Updating)
Read both:
- `/product/product-overview.md`
- `/product/product-roadmap.md`
Present the current state and ask what to change:
"Your product roadmap currently has [N] sections:
1. **[Section 1]** — [Description] 2. **[Section 2]** — [Description] 3. **[Section 3]** — [Description]
What would you like to change about the sections?"
Wait for the user's response describing what they want changed. Once you receive their notes, **immediately proceed** to update `product/product-roadmap.md` based on their requested changes — do not present a draft for approval.
After updating, inform the user:
"I've updated the product roadmap based on your feedback. Review the changes and let me know if you'd like further adjustments."
Stop here — the remaining steps below are for generating a new roadmap from scratch.
---
If No Roadmap Exists (Creating New)
Check Prerequisites
Read `/product/product-overview.md`. If it doesn't exist:
"Before creating a product roadmap, you'll need to define your product vision. Please run `/product-vision` first."
Stop here if the product overview is missing.
Analyze and Generate
Read the product overview and analyze:
- The core description
- The problems being solved
- The key features listed
**Immediately proceed** to create `/product/product-roadmap.md` — do not present a draft for approval. Generate 3-5 sections that represent:
- **Navigation items** - main areas of the product UI
- **Roadmap phases** - logical order for building
- **Self-contained feature areas** - each can be designed and built independently
Use this exact format:
# Product Roadmap ## Sections ### 1. [Section Title] [One sentence description] ### 2. [Section Title] [One sentence description] ### 3. [Section Title] [One sentence description]
Confirm
"I've created your product roadmap at `/product/product-roadmap.md` with [N] sections:
1. **[Section 1]** — [Description] 2. **[Section 2]** — [Description] 3. **[Section 3]** — [Description]
Review the sections and let me know if you'd like to adjust anything. When you're ready, run `/data-shape` to sketch out the general shape of your product's data."
---
Important Notes
- Sections should be ordered by development priority
- Each section should be self-contained enough to design and build independently
- Section titles become navigation items in the app
- The numbered format (`### 1. Title`) is required for parsing
- Keep descriptions to one sentence - concise and clear
- Don't create too many sections (3-5 is ideal)
- Do NOT present a draft for approval — generate the file immediately and let the user review after
- If the user requests changes after reviewing, update the file immediately
Ships withdesign-os
The missing design process between your product idea and your codebase.
Get the whole plugin
Stats
1,855
Stars
342
Forks
Active
Maintenance
TypeScript
Language
MIT
License
21d ago
Last commit
9mo ago
Created
Repo: buildermethods/design-os
Other commands on design-os.
@buildermethodsView CommandCommand
design-screen
You are helping the user create a screen design for a section of their product. The screen design will be a props-based React component that can be exported…
@buildermethodsView CommandCommand
design-shell
You are helping the user design the application shell — the persistent navigation and layout that wraps all sections. This is a screen design, not…
@buildermethodsView CommandCommand
design-tokens
You are helping the user choose colors and typography for their product. These design tokens will be used consistently across all screen designs and the…
@buildermethodsView CommandCommand
export-product
You are helping the user export their complete product design as a handoff package for implementation. This generates all files needed to integrate the UI…
@buildermethodsView CommandCommand
product-vision
You are helping the user define their product vision for Design OS. This is a conversational process that results in three files: the product overview, product…
@buildermethodsView Command