oh-my-design

oh-my-design은 67개 실제 기업의 디자인 시스템에서 DESIGN.md를 생성하는 오픈소스 도구입니다. AI 코딩 에이전트가 일관된 UI를 생성할 수 있도록 프로덕션 준비된 DESIGN.md 파일을 내보냅니다. API 키나 AI 호출 없이 모든 과정이 클라이언트 사이드에서 실행됩니다.

What is this?

oh-my-design은 awesome-design-md를 이어받아, 실제 기업의 디자인 시스템을 선택하고 인터랙티브 A/B 위저드를 통해 커스터마이징한 후, AI 코딩 에이전트가 일관된 UI를 생성할 수 있는 production-ready DESIGN.md를 내보냅니다.

Google Stitch의 DESIGN.md 형식 기반
참조 데이터는 VoltAgent/awesome-design-md에서 sourced
웹사이트 스타일을 바로 DESIGN.md로 바꾸는 브리지로 2026-04-20-design-md-chrome가 있다.
API 키 없음, AI 호출 없음, wszystko działa po stronie klienta

Quick Start

Web Builder

cd web && npm install && npm run dev

CLI

# From a config hash (generated by the web builder)
npx github:kwakseongjae/oh-my-design --config=<YOUR_CONFIG_HASH>

프로젝트 루트에서 명령을 실행한 후, AI 어시스턴트에게 DESIGN.md를 사용하여 UI 작업하도록 요청하세요.

How It Works

1. Pick a Reference    Choose from 67 company design systems
        |
2. Style Taste         A/B choices: buttons, tables, headers, cards
        |
3. Design Tokens       Color, radius, dark mode
        |
4. Components          Add/remove from 17 component types
        |
5. Export              DESIGN.md + npx CLI command

67 Supported References

Category	Companies
AI & LLM	Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
Design Tools	Airtable, Clay, Figma, Framer, Miro, Webflow
Developer Tools	Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp
Productivity	Cal.com, freee, Intercom, Linear, Mintlify, Notion, Resend, Zapier
Consumer Tech	Airbnb, Apple, Baemin, Dcard, IBM, Kakao, Karrot, LINE, Mercari, NVIDIA, Pinkoi, Pinterest, SpaceX, Spotify, Uber
Fintech	Coinbase, Kraken, Revolut, Stripe, Toss, Wise
Backend & DevOps	ClickHouse, Composio, Hashicorp, MongoDB, PostHog, Sanity, Sentry, Supabase
Automotive	BMW, Ferrari, Lamborghini, Renault, Tesla
Marketing	Semrush

웹 빌더의 country filter를 사용하여 지역별로 찾아보기 (한국, 대만, 일본, 프랑스, 이탈리아, 독일, 영국, 미국).

Exported DESIGN.md

다음 Google Stitch DESIGN.md format을 따릅니다:

Visual Theme & Atmosphere
Color Palette & Roles
Typography Rules
Component Stylings
Layout Principles
Depth & Elevation
Do’s and Don’ts
Responsive Behavior
Agent Prompt Guide
shadcn/ui Theme (CSS variables)

플러스: Style Preferences, Included Components, Iconography & SVG Guidelines, Document Policies (no-emoji rule).

Live Preview

각 참조에 대한 종합 디자인 시스템 쇼케이스는 다음에서 확인 가능:

https://oh-my-design.kr/reference/<id>

예시: /reference/stripe, /reference/line, /reference/freee.

이 라우트는 각 DESIGN.md의 9개 섹션(Hero, Color Palette, Typography, Buttons, Cards, Forms, Badges & Tabs, Spacing & Radius, Elevation)을 동일한 규정에 따라 렌더링합니다. Per-component radius 처리 덕분에 pill-button 시스템(LINE, Wise, Spotify)이 캡슐 모양의 카드나 대화상자 없이 올바르게 렌더링됩니다.

이전 참조의 정적 preview.html / preview-dark.html 파일은 사용되지 않음으로 표시되지만, 하위 호환성을 위해 파일을 보관합니다.

Project Structure

oh-my-design/
  references/        67 company DESIGN.md files
  src/               CLI core (TypeScript)
  web/               Next.js web builder
    src/app/         Landing + Builder pages
    src/components/  Wizard, Preview, Export
  test/              Vitest tests

Contributing

기여를 환영합니다:

references/에 새로운 회사 참조 추가
컴포넌트 프리뷰 개선
위저드에 새로운 A/B 스타일 선택 추가

cd web && npm install && npm run dev  # Development
npm test                               # Tests

Acknowledgments

참조 디자인 시스템 데이터는 VoltAgent/awesome-design-md에서 제공됩니다. 이는 AI 코딩 에이전트를 위한 놀라운 오픈소스 DESIGN.md 컬렉션입니다. 우리는 인터랙티브 커스터마이징, A/B 스타일 선호, 컴포넌트 선택, CLI 내보내기 도구로 그들의 작업을 확장하고 기반으로 삼았습니다.

License

MIT

LLM Wiki

탐색기