Development
Plugin
design-os
The missing design process between your product idea and your codebase.
Plugin Signal56/100Fair
maintained54
capable52
documented55
adopted69
Install
$ npx -y skills add buildermethods/design-os --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
1,836
Stars
349
Forks
Maintained
Maintenance
TypeScript
Language
MIT
License
3mo ago
Last commit
7mo ago
Created
Repo: buildermethods/design-os
What's inside
Commands
10/data-shapeYou are helping the user create or update the general shape of their product's data — the core entities ("nouns") and how they relate to each other. This creates a shared vocabulary that ensures consistency across sections when generating sample data and screen designs. This is/design-screenYou are helping the user create a screen design for a section of their product. The screen design will be a props-based React component that can be exported and integrated into any React codebase./design-shellYou are helping the user design the application shell — the persistent navigation and layout that wraps all sections. This is a screen design, not implementation code./design-tokensYou are helping the user choose colors and typography for their product. These design tokens will be used consistently across all screen designs and the application shell./export-productYou are helping the user export their complete product design as a handoff package for implementation. This generates all files needed to integrate the UI designs into a real codebase./product-roadmapYou are helping the user create or update their product roadmap for Design OS.
Show all 10 commandsShow fewer
/product-visionYou are helping the user define their product vision for Design OS. This is a conversational process that results in three files: the product overview, product roadmap, and data shape./sample-dataYou are helping the user create or update realistic sample data for a section of their product. This data will be used to populate screen designs. You will also generate TypeScript types based on the data structure./screenshot-designYou are helping the user capture a screenshot of a screen design they've created. The screenshot will be saved to the product folder for documentation purposes./shape-sectionYou are helping the user define the specification for a section of their product. This is a conversational process to establish the scope of functionality, user flows, and UI requirements — then automatically generate the spec and sample data.
Badges
1README
1The 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:
- Product Planning — Define your vision, break down your roadmap, and model your data
- Design System — Choose colors, typography, and design your application shell
- Section Design — For each feature area: specify requirements, generate sample data, and design the screens
- 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.
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:
File tree
93buildermethods/design-osView on GitHub
.claude/
commands/
design-os/
data-shape.md
design-screen.md
design-shell.md
design-tokens.md
export-product.md
product-roadmap.md
product-vision.md
sample-data.md
screenshot-design.md
shape-section.md
skills/
frontend-design/
SKILL.md
.github/
CODE_OF_CONDUCT.md
CONTRIBUTING.md
ISSUE_TEMPLATE/
config.yml
PULL_REQUEST_TEMPLATE.md
SECURITY.yml
SUPPORT.md
workflows/
pr-decline.yml
stale.yml
.gitignore
agents.md
CHANGELOG.md
claude.md
components.json
docs/
codebase-implementation.md
design-section.md
export.md
getting-started.md
index.md
product-planning.md
requirements.md
usage.md
eslint.config.js
index.html
LICENSE
package-lock.json
package.json
public/
vite.svg
README.md
src/
.DS_Store
assets/
react.svg
components/
.DS_Store
AppLayout.tsx
DataCard.tsx
DataShapePage.tsx
DesignPage.tsx
EmptyState.tsx
ExportPage.tsx
NextPhaseButton.tsx
PhaseNav.tsx
PhaseWarningBanner.tsx
ProductOverviewCard.tsx
ProductPage.tsx
ScreenDesignPage.tsx
ScreenDesignsCard.tsx
SectionPage.tsx
SectionsCard.tsx
SectionsPage.tsx
ShellCard.tsx
ShellDesignPage.tsx
SpecCard.tsx
StepIndicator.tsx
ThemeToggle.tsx
ui/
avatar.tsx
badge.tsx
button.tsx
card.tsx
collapsible.tsx
dialog.tsx
dropdown-menu.tsx
input.tsx
label.tsx
separator.tsx
sheet.tsx
skeleton.tsx
table.tsx
tabs.tsx
index.css
lib/
data-shape-loader.ts
design-system-loader.ts
product-loader.ts
router.tsx
section-loader.ts
shell-loader.ts
utils.ts
main.tsx
sections/
.gitkeep
types/
product.ts
section.ts
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.tsFAQ
design-os is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes frontend-design. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is design-os?
- The missing design process between your product idea and your codebase.
- How do I install design-os?
- Run these in Claude Code: npx -y skills add buildermethods/design-os --agent claude-code. Then prompt normally.
- Does design-os auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is design-os free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.