Workflow Overview

Each command is a conversation—the AI asks questions, you provide direction, and together you shape your product.

The Design Workflow

Design OS follows a structured sequence. Each step builds on the previous one.

Phase 1: Product Planning

Before designing any screens, establish the foundation:

1. Product Vision — Define what you’re building, break it into sections, and shape your data
2. Design Tokens — Choose colors and typography
3. Application Shell — Design navigation and layout

Learn more about Product Planning

Phase 2: Section Design

Once the foundation is set, work through each section:

1. Shape the Section — Define scope and requirements
2. Create Sample Data — Generate realistic data and types
3. Design the Screen — Build the actual React components
4. Capture Screenshots — Document the design (optional)

Repeat for each section in your roadmap.

Learn more about Designing Sections

Phase 3: Export

When all sections are designed:

1. Export — Generate the complete handoff package

Learn more about Export

Quick Reference

Tips

• Follow the sequence — Each step builds on the previous. Don’t skip ahead.
• Be specific — The more detail you provide, the better the output.
• Iterate — Each command is a conversation. Refine until you’re happy.
• Restart the dev server — After creating new components, restart to see changes.