### Install Project Dependencies Source: https://github.com/buildermethods/design-os/blob/main/docs/getting-started.md Install all necessary Node.js dependencies for the project using npm. ```bash npm install ``` -------------------------------- ### Start Development Server Source: https://github.com/buildermethods/design-os/blob/main/docs/getting-started.md Start the local development server. Access the application at http://localhost:5173 in your browser. ```bash npm run dev ``` -------------------------------- ### Launch Claude Code Source: https://github.com/buildermethods/design-os/blob/main/docs/getting-started.md Start Claude Code from the project directory to begin designing. Use the `/product-vision` command to start defining your product. ```bash claude ``` -------------------------------- ### Capture Screenshot for Design Source: https://github.com/buildermethods/design-os/blob/main/docs/design-section.md Optionally capture screenshots of your screen designs for documentation and reference. This command automates starting the dev server, navigating to the design, and capturing the screen. ```bash /screenshot-design ``` -------------------------------- ### Exported Prompt Files Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md These markdown files contain pre-written prompts to guide your coding agent. Use `one-shot-prompt.md` for full implementation or `section-prompt.md` for section-by-section development. ```markdown product-plan/prompts/ ├── one-shot-prompt.md # Prompt for full implementation └── section-prompt.md # Prompt template for section-by-section ``` -------------------------------- ### Exported Design System Files Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md These files define your product's design system, including tokens, color configurations, and font setup. They ensure visual consistency across the implementation. ```markdown product-plan/design-system/ ├── tokens.css # CSS custom properties ├── tailwind-colors.md # Tailwind configuration guide └── fonts.md # Google Fonts setup ``` -------------------------------- ### Component Usage Example Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md Exported components are props-based and designed for portability. They expect data and callbacks via props, requiring the implementation agent to wire them up to routing, API calls, and handle states. ```tsx // Components expect data and callbacks as props navigate(`/invoices/${id}`)} onEdit={(id) => navigate(`/invoices/${id}/edit`)} onDelete={(id) => confirmDelete(id)} onCreate={() => navigate('/invoices/new')} /> ``` -------------------------------- ### Exported Instruction Files Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md These markdown files provide detailed instructions for implementation. `product-overview.md` is always included, while `one-shot-instructions.md` and `incremental/` offer different implementation strategies. ```markdown product-plan/ ├── product-overview.md # Product summary (always provide) └── instructions/ ├── one-shot-instructions.md # All milestones combined └── incremental/ # Milestone-by-milestone implementation ├── 01-shell.md # Design tokens + application shell ├── 02-[section-id].md # One per section (e.g., 02-invoices.md) └── ... ``` -------------------------------- ### Run Product Export Command Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md Execute this command in your terminal to initiate the export process. It checks prerequisites, gathers assets, and generates implementation and test instructions. ```bash /export-product ``` -------------------------------- ### Set Up New Git Remote and Push Source: https://github.com/buildermethods/design-os/blob/main/docs/getting-started.md Add your own GitHub repository as the remote origin and push your project to it. This is the first step to saving your project as a reusable template. ```bash git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git git push -u origin main ``` -------------------------------- ### Clone Design OS Repository Source: https://github.com/buildermethods/design-os/blob/main/docs/getting-started.md Clone the Design OS repository to your local machine and navigate into the project directory. Replace `my-project-design` with your desired project name. ```bash git clone https://github.com/buildermethods/design-os.git my-project-design cd my-project-design ``` -------------------------------- ### Design Screen Components Source: https://github.com/buildermethods/design-os/blob/main/docs/design-section.md Build React components for a section using the generated spec and sample data. This command creates exportable components and a preview wrapper for Design OS. ```bash /design-screen ``` ```tsx // Example: Components accept props, never import data directly export function InvoiceList({ invoices, onView, onEdit, onDelete, onCreate }: InvoiceListProps) { // ... } ``` -------------------------------- ### Update Sample Data Source: https://github.com/buildermethods/design-os/blob/main/docs/design-section.md Run this command to modify the data structure or sample records for a section after its initial creation. ```bash /sample-data ``` -------------------------------- ### Exported Section Component Structure Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md Each section includes its own directory with feature overviews, test specifications, components, types, and sample data. This modular structure facilitates section-by-section implementation. ```markdown product-plan/sections/[section-id]/ ├── README.md # Feature overview, user flows ├── tests.md # UI behavior test specs ├── components/ │ ├── [Component].tsx # Exportable components │ └── index.ts # Exports ├── types.ts # TypeScript interfaces ├── sample-data.json # Test data └── screenshot.png # Visual reference (if captured) ``` -------------------------------- ### Exported Shell Components Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md The shell components form the main layout and navigation of your application. `AppShell.tsx` is the primary layout wrapper, and `MainNav.tsx` handles navigation. ```typescript product-plan/shell/ ├── README.md # Design intent ├── components/ │ ├── AppShell.tsx # Main layout wrapper │ ├── MainNav.tsx # Navigation │ ├── UserMenu.tsx # User menu │ └── index.ts # Exports └── screenshot.png # Visual reference (if captured) ``` -------------------------------- ### Shape Section Definition Source: https://github.com/buildermethods/design-os/blob/main/docs/design-section.md Use this command to define a section's purpose, user flows, UI requirements, and scope boundaries. It generates a section specification, sample data, and TypeScript types. ```bash /shape-section ``` -------------------------------- ### Exported Data Shape Definitions Source: https://github.com/buildermethods/design-os/blob/main/docs/export.md This directory contains the TypeScript interfaces for your product's data structures. `overview.ts` provides a combined type reference for all sections. ```typescript product-plan/data-shapes/ ├── README.md # UI data contracts overview └── overview.ts # Combined type reference (all sections) ``` -------------------------------- ### Remove Original Git Remote Source: https://github.com/buildermethods/design-os/blob/main/docs/getting-started.md Remove the default Git remote origin to ensure a clean local instance for your new project. ```bash git remote remove origin ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.