@theproductguy/create-mission-control 1.0.0

package/src/template/design/docs/getting-started.md

@@ -0,0 +1,59 @@
+# Getting Started
+
+## Clone the Repository
+
+```bash
+git clone https://github.com/buildermethods/design-os.git my-project-design
+cd my-project-design
+```
+
+Replace `my-project-design` with whatever you want to name your design workspace.
+
+## Remove the Original Remote
+
+```bash
+git remote remove origin
+```
+
+Now you have a clean local instance ready to use.
+
+## Install Dependencies
+
+```bash
+npm install
+```
+
+## Start the Dev Server
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) in your browser.
+
+## Open Claude Code
+
+In the same project directory, start Claude Code:
+
+```bash
+claude
+```
+
+You're ready to start designing. Run `/product-vision` to begin defining your product.
+
+---
+
+## Optional: Save as Your Own Template
+
+If you want to reuse Design OS for future projects:
+
+1. Push to your own GitHub repository:
+
+```bash
+git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
+git push -u origin main
+```
+
+2. Go to your repository on GitHub, click **Settings**, and check **Template repository**.
+
+Now you can create new instances using GitHub's "Use this template" button.

package/src/template/design/docs/index.md

@@ -0,0 +1,56 @@
+# What is Design OS?
+
+Design OS is the missing step between your product idea and your codebase.
+
+It's a product planning and design tool that helps you define your product vision, structure your data model, design your UI, and export production-ready components for implementation. Rather than jumping straight into code, you work through a guided process that captures what you're building and why—then hands off everything your coding agent needs to build it right.
+
+## The Problem
+
+AI coding tools are incredible at building fast. But the results often miss the mark. You describe what you want, the agent builds *something*, but it's not what you envisioned. The UI looks generic. Features get half-implemented. You spend as much time fixing and redirecting as you would have spent building.
+
+The core issue: we're asking coding agents to figure out what to build *and* build it simultaneously. Design decisions get made on the fly, buried in code, impossible to adjust without starting over. There's no spec. No shared understanding. No source of truth for what "done" looks like.
+
+## The Design OS Process
+
+Design OS powers a guided design and architecture process. You + AI, working together through structured steps:
+
+1. **Product Planning** — Define your vision, break down your roadmap, and model your data
+2. **Design System** — Choose colors, typography, and design your application shell
+3. **Section Design** — For each feature area: specify requirements, generate sample data, and design the screens
+4. **Export** — Generate a complete handoff package for implementation
+
+Each step is a conversation. The AI asks questions, you provide direction, and together you shape a product that matches your vision—before any implementation begins.
+
+## How It Works
+
+Design OS is its own separate codebase—a design environment you use *before* building. When you're done, you export components and assets to import into your actual product's codebase.
+
+You interact with Design OS through slash commands. Each command walks you through a specific part of the process:
+
+- `/product-vision` — Define what you're building and why
+- `/product-roadmap` — Break your product into buildable sections
+- `/data-model` — Define the core entities in your system
+- `/design-tokens` — Choose your color palette and typography
+- `/design-shell` — Design navigation and layout
+- `/shape-section` — Specify a section's scope and requirements
+- `/sample-data` — Generate realistic data for screen designs
+- `/design-screen` — Create production-ready React components
+- `/screenahot-design` — Snap a screenshot of a finished design screen for quick reference
+- `/export-product` — Generate the complete handoff package
+
+See [Usage](usage.md) for the full workflow.
+
+## Who It's For
+
+- **Technical builders** — Full control over architecture and design decisions without doing all the legwork yourself.
+- **Non-technical product builders** — A strong vision for how your product should work, plus the ability to put your imprint on its systems—no technical background required.
+
+## Compatibility
+
+- Works with any AI coding agent: Claude Code, Cursor, Copilot, or anything that can implement from a handoff
+- Your frontend needs React and Tailwind CSS
+- Your backend can be anything—Rails, Laravel, Next.js, Python, whatever
+
+## Open Source
+
+Design OS is free, open source, and runs locally.

package/src/template/design/docs/product-planning.md

@@ -0,0 +1,113 @@
+# Product Planning
+
+The first phase of Design OS establishes the foundation for your product. Complete these steps before designing any screens.
+
+## 1. Product Vision
+
+```
+/product-vision
+```
+
+Define your product's core identity. This is a conversational process where you'll establish:
+
+- **Product name** — A clear, memorable name
+- **Description** — 1-3 sentences capturing the essence
+- **Problems & solutions** — What pain points you're addressing and how
+- **Key features** — The main capabilities that make this possible
+
+Share any notes, ideas, or rough thoughts you have about what you're building. The AI will ask clarifying questions and help you refine everything into a clear product overview.
+
+**Creates:** `product/product-overview.md`
+
+## 2. Product Roadmap
+
+```
+/product-roadmap
+```
+
+Break your product into 3-5 sections. Each section 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
+
+Based on your product overview, the AI will propose sections and discuss ordering. Sections are sequenced by development priority—the first section is your core functionality, with each subsequent section building on it.
+
+**Creates:** `product/product-roadmap.md`
+
+## 3. Data Model
+
+```
+/data-model
+```
+
+Define the core entities in your product—the "nouns" of your system. What are the main things users create, view, and manage?
+
+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 model with additional details as needed.
+
+**Creates:** `product/data-model/data-model.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. See [Designing Sections](design-section.md) for the next steps.

package/src/template/design/docs/requirements.md

@@ -0,0 +1,22 @@
+# Requirements
+
+## Running Design OS
+
+Design OS runs locally on your machine. You'll need:
+
+- **Node.js** (v18 or higher)
+- **npm** (comes with Node.js)
+- **An AI coding assistant** — Design OS uses slash commands to guide the design process. Claude Code is recommended, but you can invoke the Design OS commands from any AI coding tool that supports custom commands or prompts (Cursor, Windsurf, Codex, etc.)
+
+## Installing Your Exported Components
+
+When you export your designs, you get production-ready React components. Your target codebase needs:
+
+### Required
+
+- **React** (v18 or higher)
+- **Tailwind CSS** (v4) — Components use Tailwind utility classes for styling
+
+### Backend
+
+Your backend can be anything—Rails, Laravel, Next.js API routes, Python, Go, whatever. Design OS only handles the frontend design layer.

package/src/template/design/docs/usage.md

@@ -0,0 +1,62 @@
+# Usage
+
+Design OS uses slash commands to guide you through the design process. 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 and why
+2. **Product Roadmap** — Break your product into sections
+3. **Data Model** — Define the core entities in your system
+4. **Design Tokens** — Choose colors and typography
+5. **Application Shell** — Design navigation and layout
+
+See [Product Planning](product-planning.md) for details on each command.
+
+### 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.
+
+See [Designing Sections](design-section.md) for details on each command.
+
+### Phase 3: Export
+
+When all sections are designed:
+
+1. **Export** — Generate the complete handoff package
+
+See [Export](export.md) for details on what's included and how to use it.
+
+## Quick Reference
+
+| Command | Purpose |
+|---------|---------|
+| `/product-vision` | Define product name, description, problems, features |
+| `/product-roadmap` | Break product into sections |
+| `/data-model` | Define core entities and relationships |
+| `/design-tokens` | Choose colors and typography |
+| `/design-shell` | Design navigation and layout |
+| `/shape-section` | Define a section's scope and requirements |
+| `/sample-data` | Generate sample data and TypeScript types |
+| `/design-screen` | Create screen design components |
+| `/screenshot-design` | Capture screenshots |
+| `/export-product` | Generate the complete handoff package |
+
+## 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.

package/src/template/design/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/src/template/design/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500&display=swap"
+    rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Design OS</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

package/src/template/design/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "design-os",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.554.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/src/template/design/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/src/template/design/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="black"/>
+  <path d="M30 50h40M70 50l-10-10M70 50l-10 10" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>

package/src/template/design/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/template/design/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/template/design/src/components/AppLayout.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Layers, ArrowLeft } from 'lucide-react'
+import { PhaseNav } from './PhaseNav'
+import { ThemeToggle } from './ThemeToggle'
+import { Button } from '@/components/ui/button'
+
+interface AppLayoutProps {
+  children: ReactNode
+  /** Optional title shown in the header (for sub-pages) */
+  title?: string
+  /** Optional back navigation path */
+  backTo?: string
+  /** Optional back label */
+  backLabel?: string
+  /** Whether to show the phase nav (default: true) */
+  showPhaseNav?: boolean
+}
+
+export function AppLayout({
+  children,
+  title,
+  backTo,
+  backLabel = 'Back',
+  showPhaseNav = true,
+}: AppLayoutProps) {
+  const navigate = useNavigate()
+
+  // Determine if this is a sub-page (has back navigation)
+  const isSubPage = !!backTo
+
+  return (
+    <div className="min-h-screen bg-background animate-fade-in flex flex-col">
+      {/* Header */}
+      <header className="border-b border-stone-200 dark:border-stone-800 bg-card/80 backdrop-blur-sm sticky top-0 z-20">
+        {/* Headless Theme Listener */}
+        <ThemeToggle headless />
+
+        <div className="px-4 sm:px-6 py-3">
+          {isSubPage ? (
+            /* Sub-page header with back button */
+            <div className="max-w-3xl mx-auto flex items-center gap-4">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => navigate(backTo)}
+                className="text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 -ml-2"
+              >
+                <ArrowLeft className="w-4 h-4 mr-2" strokeWidth={1.5} />
+                {backLabel}
+              </Button>
+              {title && <h1 className="text-lg font-semibold">{title}</h1>}
+              {showPhaseNav && (
+                <div className="flex-1 flex justify-center">
+                  <PhaseNav />
+                </div>
+              )}
+              <div className="w-10 shrink-0" />
+            </div>
+          ) : (
+            /* Main header */
+            <div className="max-w-3xl mx-auto flex items-center justify-between gap-4">
+              <div className="flex items-center gap-4 flex-1">
+                {showPhaseNav && <PhaseNav />}
+              </div>
+              {/* Theme Toggle */}
+              <div className="w-10 shrink-0 flex justify-end" />
+            </div>
+          )}
+        </div>
+      </header>
+
+      {/* Main content */}
+      <main className="flex-1 max-w-3xl mx-auto px-6 py-12 w-full">
+        {children}
+      </main>
+
+      {/* Footer with logo */}
+      <footer className="py-8 flex justify-center">
+        <a
+          href="https://buildermethods.com/design-os"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-stone-400 dark:text-stone-500 hover:text-stone-600 dark:hover:text-stone-400 transition-colors group"
+        >
+          <span className="text-xs">Powered by</span>
+          <div className="w-5 h-5 rounded bg-stone-300 dark:bg-stone-600 flex items-center justify-center transition-colors group-hover:bg-stone-400 dark:group-hover:bg-stone-500">
+            <Layers className="w-3 h-3 text-stone-100 dark:text-stone-900" strokeWidth={1.5} />
+          </div>
+          <span className="text-xs font-medium">Design OS</span>
+        </a>
+      </footer>
+    </div>
+  )
+}

package/src/template/design/src/components/DataCard.tsx

@@ -0,0 +1,139 @@
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { ChevronDown } from 'lucide-react'
+import { EmptyState } from '@/components/EmptyState'
+
+interface DataMeta {
+  models: Record<string, string>
+  relationships: string[]
+}
+
+interface DataCardProps {
+  data: Record<string, unknown> | null
+  sectionTitle?: string
+  sectionId?: string
+}
+
+function extractMeta(data: Record<string, unknown>): DataMeta | null {
+  const meta = data._meta as DataMeta | undefined
+  if (meta && typeof meta === 'object' && meta.models && meta.relationships) {
+    return meta
+  }
+  return null
+}
+
+function getDataWithoutMeta(data: Record<string, unknown>): Record<string, unknown> {
+  const { _meta, ...rest } = data
+  return rest
+}
+
+function countRecords(data: Record<string, unknown>): number {
+  // Count arrays at the top level as record collections (excluding _meta)
+  let count = 0
+  for (const [key, value] of Object.entries(data)) {
+    if (key !== '_meta' && Array.isArray(value)) {
+      count += value.length
+    }
+  }
+  return count
+}
+
+export function DataCard({ data, sectionTitle, sectionId }: DataCardProps) {
+  const [isJsonOpen, setIsJsonOpen] = useState(false)
+
+  // Empty state
+  if (!data) {
+    return <EmptyState type="data" context={sectionTitle} contextId={sectionId} />
+  }
+
+  const meta = extractMeta(data)
+  const dataWithoutMeta = getDataWithoutMeta(data)
+  const recordCount = countRecords(data)
+
+  return (
+    <Card className="border-stone-200 dark:border-stone-700 shadow-sm">
+      <CardHeader className="pb-4">
+        <div className="flex items-center gap-3">
+          <CardTitle className="text-lg font-semibold text-stone-900 dark:text-stone-100">
+            Sample Data
+          </CardTitle>
+          {recordCount > 0 && (
+            <span className="text-xs font-medium text-stone-500 dark:text-stone-400 bg-stone-100 dark:bg-stone-800 px-2 py-0.5 rounded">
+              {recordCount} {recordCount === 1 ? 'record' : 'records'}
+            </span>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0 space-y-4">
+        {/* Data Model Descriptions */}
+        {meta && (
+          <div className="space-y-6">
+            {/* Models - Card Grid */}
+            <div>
+              <h4 className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-3">
+                Data Models
+              </h4>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {Object.entries(meta.models).map(([modelName, description]) => (
+                  <div
+                    key={modelName}
+                    className="bg-stone-50 dark:bg-stone-800/50 rounded-lg p-4"
+                  >
+                    <h3 className="font-semibold text-stone-900 dark:text-stone-100 mb-1">
+                      {modelName}
+                    </h3>
+                    <p className="text-stone-600 dark:text-stone-400 text-sm leading-relaxed">
+                      {description}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Relationships */}
+            {meta.relationships.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-stone-500 dark:text-stone-400 uppercase tracking-wide mb-3">
+                  How They Connect
+                </h4>
+                <ul className="space-y-2">
+                  {meta.relationships.map((relationship, index) => (
+                    <li
+                      key={index}
+                      className="text-stone-700 dark:text-stone-300 flex items-start gap-3"
+                    >
+                      <span className="w-1.5 h-1.5 rounded-full bg-stone-400 dark:bg-stone-500 mt-2 shrink-0" />
+                      {relationship}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Collapsible JSON View */}
+        <Collapsible open={isJsonOpen} onOpenChange={setIsJsonOpen}>
+          <CollapsibleTrigger className="flex items-center gap-2 text-left group">
+            <ChevronDown
+              className={`w-4 h-4 text-stone-400 dark:text-stone-500 transition-transform ${isJsonOpen ? 'rotate-180' : ''
+                }`}
+              strokeWidth={1.5}
+            />
+            <span className="text-xs text-stone-500 dark:text-stone-400 group-hover:text-stone-700 dark:group-hover:text-stone-300 transition-colors">
+              {isJsonOpen ? 'Hide' : 'View'} JSON
+            </span>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="bg-stone-50 dark:bg-stone-900 rounded-md p-4 overflow-x-auto mt-3">
+              <pre className="text-xs font-mono text-stone-700 dark:text-stone-300 whitespace-pre-wrap">
+                {JSON.stringify(dataWithoutMeta, null, 2)}
+              </pre>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </CardContent>
+    </Card>
+  )
+}