@builderos/create-agent-os 0.0.2

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="/vite.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>