oh-my-design

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.