Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/buildermethods/design-os/llms.txt

Use this file to discover all available pages before exploring further.

Design OS is built for designing product interfaces before implementation. Here are common use cases and project types where Design OS fits naturally into your workflow.

​
SaaS Applications

Dashboard Tools

Analytics platforms, admin panels, business intelligence tools. Design OS excels at multi-section dashboards with complex data visualization needs and navigation patterns.

Workflow Tools

Project management, CRM, task tracking, team collaboration tools. Define user flows for creating, editing, organizing, and completing work.

Content Management

CMSs, documentation tools, knowledge bases. Design interfaces for creating, organizing, publishing, and managing content structures.

Data Management

Database frontends, inventory systems, record management. Design list views, detail views, forms, and filters for managing structured data.

​
Product Types

B2B Internal Tools

Custom tools for specific business operations—scheduling, resource management, client portals, reporting dashboards.

Marketplace Platforms

Multi-sided platforms where users create listings, browse, transact, and manage accounts. Design seller and buyer experiences.

Social & Community

Forums, social networks, community platforms. Design profiles, feeds, messaging, moderation interfaces.

E-commerce & Ordering

Product catalogs, shopping carts, checkout flows, order management, customer accounts.

​
Common Section Patterns

Use Design OS to design these common section types:
Examples: Customer list → Customer detail, Invoice list → Invoice detail, Product catalog → Product pageDesign the list view with filtering and sorting, then the detail view showing full record information.
Examples: Multi-step onboarding, order checkout, account setup, survey buildersDesign each step of the flow, including validation, progress indicators, and navigation between steps.
Examples: Create new record, edit existing record, bulk import, inline editingDesign form layouts, field types, validation states, and save/cancel patterns.
Examples: Overview dashboard, reporting screens, metrics visualization, performance trackingDesign charts, KPI cards, date range pickers, and drill-down interactions.
Examples: User preferences, team settings, billing management, API configurationDesign tabbed layouts, toggle switches, nested settings groups, and confirmation dialogs.
Examples: Blog post editor, page builder, email composer, design canvasDesign editor interfaces, toolbars, preview modes, auto-save indicators.

​
Team Workflows

Solo Builder

You’re building solo and want to think through your product design before jumping into implementation. Use Design OS to plan, design, then switch to implementation mode with a clear handoff.

Designer + Developer

Designer uses Design OS to create the product vision, design system, and screen designs. Developer receives the export package and implements using the prompts and components.

Product Manager + Team

PM uses Design OS to specify product requirements and user flows. Exports to development team with complete specs, components, and test instructions.

Agency + Client

Agency uses Design OS for discovery and design phase. Client reviews designs in the browser. Export package serves as the implementation handoff.

​
When to Use Design OS

Good Fit

  • Building CRUD interfaces and data management UIs
  • Multi-section products with consistent navigation
  • Projects where you want to separate design from implementation
  • Working with AI coding agents and want better prompts
  • Need to design first, then hand off to developers
  • Want production-ready React components as output

Not Ideal For

  • Marketing websites or landing pages (too simple)
  • Highly interactive games or canvas-based UIs
  • Non-React projects (components export as React only)
  • Projects that need design-to-code sync (export is one-way)
  • Teams that prefer traditional design tools (Figma, Sketch)

​
Getting Started with Your Project

Ready to design your product? Start with the Getting Started guide, then work through:
  1. Product Planning — Define vision, roadmap, and data shape
  2. Designing Sections — Build each feature area
  3. Export — Generate the handoff package
  4. Implementation Guide — Implement with your coding agent
For questions or support, see Community.

Build docs developers (and LLMs) love

Get started for freeTalk to us