MCPcopy
hub / github.com/buildermethods/design-os

github.com/buildermethods/design-os @2026.2.9 sqlite

repository ↗ · DeepWiki ↗ · release 2026.2.9 ↗
192 symbols 442 edges 47 files 10 documented · 5%
README

Design OS

The missing design process between your idea and your codebase.

Design OS is a product planning and design tool that helps you define your product vision, sketch out your data shape, 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.


Documentation & Installation

Docs, installation, usage, & best practices 👉 It's all here


Support, Training & Community

For official support, training, and community as you use Design OS—for yourself or with your team, consider joining Builder Methods Pro. You'll get access to Brian Casel (the creator) for questions, a community of builders using Design OS, plus all Builder Methods workshops and training on AI-first development.

👉 Join Builder Methods Pro


Follow updates & releases

Read the changelog

Subscribe to be notified of major new releases of Design OS


Created by Brian Casel @ Builder Methods

Created by Brian Casel, the creator of Builder Methods, where Brian helps professional software developers and teams build with AI.

Get Brian's free resources on building with AI: - Builder Briefing newsletter - YouTube

Extension points exported contracts — how you extend this code

SectionData (Interface)
(no doc)
src/types/section.ts
SpecCardProps (Interface)
(no doc)
src/components/SpecCard.tsx
ParsedSpec (Interface)
(no doc)
src/types/section.ts
ProductOverviewCardProps (Interface)
(no doc)
src/components/ProductOverviewCard.tsx
ScreenDesignInfo (Interface)
(no doc)
src/types/section.ts
EmptyStateProps (Interface)
(no doc)
src/components/EmptyState.tsx
ScreenshotInfo (Interface)
(no doc)
src/types/section.ts
SectionsCardProps (Interface)
(no doc)
src/components/SectionsCard.tsx

Core symbols most depended-on inside this repo

cn
called by 52
src/lib/utils.ts
loadProductData
called by 9
src/lib/product-loader.ts
getSectionScreenDesigns
called by 4
src/lib/section-loader.ts
hasShellComponents
called by 3
src/lib/shell-loader.ts
applyTheme
called by 2
src/components/ScreenDesignPage.tsx
applyTheme
called by 2
src/components/ShellDesignPage.tsx
applyTheme
called by 2
src/components/ThemeToggle.tsx
loadShellInfo
called by 2
src/lib/shell-loader.ts

Shape

Function 157
Interface 35

Languages

TypeScript100%

Modules by API surface

src/components/ui/dropdown-menu.tsx15 symbols
src/lib/section-loader.ts13 symbols
src/types/product.ts12 symbols
src/components/ui/sheet.tsx10 symbols
src/components/ui/dialog.tsx10 symbols
src/lib/shell-loader.ts9 symbols
src/lib/product-loader.ts8 symbols
src/components/ui/table.tsx8 symbols
src/components/ui/card.tsx7 symbols
src/components/ScreenDesignPage.tsx7 symbols
src/lib/design-system-loader.ts6 symbols
src/components/ShellDesignPage.tsx6 symbols

Dependencies from manifests, versioned

@eslint/js9.39.1 · 1×
@radix-ui/react-avatar1.1.11 · 1×
@radix-ui/react-collapsible1.1.12 · 1×
@radix-ui/react-dialog1.1.15 · 1×
@radix-ui/react-dropdown-menu2.1.16 · 1×
@radix-ui/react-label2.1.8 · 1×
@radix-ui/react-separator1.1.8 · 1×
@radix-ui/react-slot1.2.4 · 1×
@tailwindcss/vite4.1.17 · 1×
@types/node24.10.1 · 1×
@types/react19.2.5 · 1×

For agents

$ claude mcp add design-os \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact