Skip to main content
The data shape defines the core entities (“nouns”) users will work with and how they relate to each other. This creates a shared vocabulary that ensures consistency across all sections.
The data shape is typically created as part of /product-vision. Use /data-shape to update it later or create it separately if needed.

What Is Data Shape?

The data shape is a conceptual model that identifies:
  • Entity names - The main “things” in your product (User, Project, Invoice, etc.)
  • Plain-language descriptions - What each entity represents from the user’s perspective
  • Relationships - How entities connect to each other
This is NOT a database schema. It’s a high-level vocabulary that:
  • Helps maintain consistent naming across sections
  • Informs sample data generation
  • Provides context for screen designs
  • Documents the core concepts of your product

Creating Data Shape

1

Check Prerequisites

You need product overview and roadmap defined first. If missing, run /product-vision.
2

Analyze Product

The AI reviews your product overview and roadmap to identify the core entities users will interact with.
3

Generate Data Shape

The AI creates product/data-shape/data-shape.md with entities and relationships. No approval needed - you’ll review after.
4

Review and Refine

Review the generated data shape and request changes if needed.

Example Data Shape

Here’s what a data shape file looks like for a CRM:
product/data-shape/data-shape.md
# Data Shape

## Entities

### User
A team member who manages clients, creates deals, and tracks activities.

### Client
A person or company that the team is building a relationship with. Includes contact information and interaction history.

### Deal
A potential sale or contract with a specific value, stage, and expected close date.

### Activity
An interaction with a client, such as a call, email, meeting, or note.

### Task
A to-do item assigned to a user, often related to a client or deal.

## Relationships

- User can manage many Clients
- Client has many Deals
- Deal belongs to Client
- Client has many Activities
- Activity belongs to Client
- Deal has many Tasks
- Task belongs to Deal
- Task is assigned to User
```plaintext

## Writing Guidelines

### Entity Names

- Use singular form (User, not Users)
- Use capitalized nouns (Project, Invoice, Comment)
- Keep names simple and recognizable
- Avoid technical jargon

### Descriptions

- Explain what the entity represents from the user's perspective
- Focus on purpose, not implementation details
- Keep it to 1-2 sentences
- Use plain language anyone could understand

### Relationships

- Use simple phrases: "has many", "belongs to", "has one"
- Express from the user's mental model, not database structure
- Include the most important relationships
- Don't worry about being exhaustive

<Warning>
Do NOT define detailed schemas, field types, validation rules, or database structure. The implementation agent will handle those decisions.
</Warning>

## What About Fields?

You might wonder: what fields does a Task have? What's on an Invoice?

The data shape intentionally avoids this level of detail. Here's why:

- **Field lists change frequently** as you design screens
- **Different sections need different fields** from the same entity
- **Implementation decisions** (what's required, what's calculated) come later

Instead, when you run `/shape-section` for each section, you'll define the specific data that section needs. The data shape just establishes the entity names and basic relationships.

## Updating Data Shape

To update your data shape:

```bash
/data-shape
```plaintext

<Steps>
  <Step title="Review Current State">
    The AI shows your current entities and relationships.
  </Step>

  <Step title="Describe Changes">
    Tell the AI what you want to add, remove, or modify.
  </Step>

  <Step title="File Updated">
    The AI updates `product/data-shape/data-shape.md` immediately.
  </Step>
</Steps>

## How It's Used

The data shape influences several other parts of Design OS:

### Sample Data Generation

When you run `/shape-section` or `/sample-data`, the AI references the data shape to:

- Use consistent entity names
- Generate relationships that make sense
- Create realistic example data

### Screen Design

When designing screens with `/design-screen`, the data shape helps the AI:

- Understand what data the screen displays
- Choose appropriate UI patterns
- Maintain consistency across sections

### Type Generation

The data shape informs TypeScript interface generation in `types.ts` files, though specific fields come from section specs.

### Export Package

The data shape is included in the export package at `product-plan/data-shapes/` to give the implementation agent context.

## Example: E-commerce Platform

```markdown
# Data Shape

## Entities

### Product
An item available for purchase with details like name, description, price, and images.

### Order
A customer's purchase containing one or more products, shipping details, and payment information.

### Customer
A user account with order history, saved addresses, and payment methods.

### Category
A grouping used to organize products for browsing and navigation.

### Review
Customer feedback on a product including a rating and written comment.

## Relationships

- Product belongs to many Categories
- Product has many Reviews
- Review belongs to Product
- Review is written by Customer
- Order belongs to Customer
- Order contains many Products
- Customer has many Orders
```plaintext

## Common Patterns

### Users and Content

- User creates many [Content Items]
- [Content Item] belongs to User

Example: Blog posts, projects, documents

### Containers and Items

- [Container] has many [Items]
- [Item] belongs to [Container]

Example: Projects and tasks, albums and photos, courses and lessons

### Many-to-Many

- [Entity1] belongs to many [Entity2]
- [Entity2] has many [Entity1]

Example: Students and courses, tags and articles

### Hierarchical

- [Entity] has many child [Entity]
- [Entity] belongs to parent [Entity]

Example: Categories, folders, org structure

## Next Steps

With your data shape defined:

1. Run `/design-tokens` to choose colors and typography
2. Run `/design-shell` to design your application shell
3. Run `/shape-section` to define specifications for individual sections

Build docs developers (and LLMs) love