# oh-my-design

> Generate DESIGN.md files from 67 real company design systems with an interactive wizard, zero AI calls, and a brand-philosophy layer for AI coding agents.

**oh-my-design (OmD)** is an open-source CLI and web tool that generates `DESIGN.md` files from 67 real company design systems, giving AI coding agents enough brand context to produce on-brand UI instead of generic defaults. It extends the Google Stitch DESIGN.md format with the OmD v0.1 Philosophy Layer — six additional sections covering Voice, Narrative, Principles, Personas, States, and Motion. Everything runs client-side with no API keys and zero AI calls required.

- **67 Reference Design Systems** — *browse real-company `DESIGN.md` files from companies like Stripe, Figma, Apple, Notion, Toss, and more, organized by category and region.*
- **OmD v0.1 Philosophy Layer** — *adds sections 10–15 (Voice & Tone, Brand Narrative, Principles, Personas, States, Motion & Easing) on top of Google Stitch's base 9 sections for richer brand context.*
- **Interactive Builder** — *pick a reference, tune colors, border radius, dark mode, and components, then export a ready-to-use `DESIGN.md` in seconds.*
- **Claude Code Skill** — *a bundled `.claude/skills/omd/SKILL.md` that auto-applies the OmD spec as a hard constraint when generating UI in Claude Code.*
- **Design Systems Directory** — *34 of the 67 references link to verified public design system or brand-guidelines pages with live thumbnails.*
- **Personal Curation Quiz** — *a short MBTI-style survey that maps your design personality to one of the 67 references and preloads the builder with that reference.*
- **CLI Export Pipeline** — *TypeScript CLI with a Vitest suite of 370 tests covering unit and per-reference smoke tests, plus 88 web tests.*
- **Zero AI Calls** — *the entire generation pipeline runs locally; no external API keys or network requests are needed.*
- **MIT Licensed** — *free to use, modify, and distribute; contributions via pull requests are welcome.*

## Features
- Generate DESIGN.md from 67 real company design systems
- OmD v0.1 Philosophy Layer (Voice, Narrative, Principles, Personas, States, Motion)
- Interactive web builder with color, radius, and dark mode tuning
- Claude Code skill bundle for on-brand UI generation
- Design Systems Directory with 34 verified public design system links
- Personal curation quiz mapping design personality to references
- CLI export pipeline with TypeScript
- Zero AI calls — fully client-side
- Country/region filter for references
- Component selection and A/B style preferences
- Vitest test suite (370 CLI + 88 web tests)
- MIT licensed open-source

## Integrations
Claude Code, Google Stitch, Next.js, Tailwind CSS, shadcn/ui, Vitest

## Platforms
WEB, API, CLI

## Pricing
Open Source

## Version
0.1

## Links
- Website: https://oh-my-design.kr
- Documentation: https://github.com/kwakseongjae/oh-my-design#readme
- Repository: https://github.com/kwakseongjae/oh-my-design
- EveryDev.ai: https://www.everydev.ai/tools/oh-my-design