Alternatives
oh-my-design compared
shadcn/ui, v0.dev, Anima, Locofy, getdesign.md과 oh-my-design은 같은 layer가 아닙니다. 각 도구가 하는 일과, oh-my-design을 함께 쓰는 경우를 나란히 정리했습니다.
oh-my-design vs shadcn/ui
shadcn/ui는 React 컴포넌트를 npm으로 install하지 않고 CLI로 직접 코드를 프로젝트에 복사해 넣는 라이브러리입니다. 디자인 톤은 Radix 기반의 neutral 한 default이고, 별도의 brand opinion을 강제하지 않습니다.
| 기준 | oh-my-design | shadcn/ui |
|---|---|---|
| 목적 | AI agent가 매 요청마다 읽는 brand spec | Reusable React component primitives |
| Output | DESIGN.md (markdown spec) | TSX 파일을 사용자 repo에 복사 |
| AI agent integration | Claude Code · Codex · Cursor · OpenCode 직결 | Indirect (코드 sample을 보고 흉내냄) |
| Brand voice | Core의 Content & Locales와 구조화 graph에서 명시 | Neutral default — brand 없음 |
| Install | `npx oh-my-design-cli@latest` | `npx shadcn add button` 등 CLI per-component |
| Price | Free · MIT | Free · MIT |
| Open source | Yes (MIT) | Yes (MIT) |
When to use shadcn/ui
- React + Tailwind 스택에서 검증된 컴포넌트 primitives가 필요할 때
- Radix 접근성·키보드 동작을 그대로 받고 싶을 때
- 디자인은 직접 정하고 컴포넌트만 빠르게 짜고 싶을 때
When to use oh-my-design
- AI agent가 매 prompt마다 같은 brand context를 읽길 원할 때
- Voice·persona·motion까지 한 파일에서 다루고 싶을 때
- shadcn 컴포넌트를 DESIGN.md token으로 채색하고 싶을 때 — 둘은 같이 씁니다
정리. shadcn/ui과 oh-my-design은 같은 layer가 아닙니다. shadcn/ui이 reusable react component primitives 쪽이라면, oh-my-design은 그 도구가 매번 같은 brand context로 동작하도록 만드는 spec입니다. 둘은 either/or가 아니라 함께 쓸 수 있습니다.
shadcn/ui 공식oh-my-design vs v0.dev
v0는 prompt를 입력하면 즉석으로 React + Tailwind 컴포넌트를 합성하는 클라우드 서비스입니다. 결과물은 미리 잘 튜닝된 internal model이 만들어 주지만, repo에 설치되는 spec이 없고 prompt마다 결과가 휘발됩니다.
| 기준 | oh-my-design | v0.dev |
|---|---|---|
| 목적 | AI agent가 매 요청마다 읽는 brand spec | One-shot UI snippet generation from a prompt |
| Output | DESIGN.md (markdown spec) | TSX snippet (브라우저에서 복사) |
| AI agent integration | Claude Code · Codex · Cursor · OpenCode 직결 | v0 자체가 agent (Vercel 호스팅) |
| Brand voice | Core의 Content & Locales와 구조화 graph에서 명시 | Prompt마다 다름 — 매번 재합성 |
| Install | `npx oh-my-design-cli@latest` | Browser tool, 가입 필요 |
| Price | Free · MIT | Freemium · 사용량 기반 유료 |
| Open source | Yes (MIT) | No (proprietary) |
When to use v0.dev
- 프로토타입 한 컷을 빠르게 합성하고 싶을 때
- Tailwind 기반 React 코드만 필요하고 brand consistency가 중요하지 않을 때
- Vercel 인프라와 통합된 hosting이 필요할 때
When to use oh-my-design
- repo에 영구히 박힌 brand spec이 필요할 때
- Claude Code · Cursor · Codex · OpenCode 등 자기가 쓰던 agent를 그대로 쓰고 싶을 때
- v0로 만든 결과를 DESIGN.md token으로 다시 칠해 일관성을 강제하고 싶을 때 (병행 가능)
정리. v0.dev과 oh-my-design은 같은 layer가 아닙니다. v0.dev이 one-shot ui snippet generation from a prompt 쪽이라면, oh-my-design은 그 도구가 매번 같은 brand context로 동작하도록 만드는 spec입니다. 둘은 either/or가 아니라 함께 쓸 수 있습니다.
v0.dev 공식oh-my-design vs Anima
Anima는 Figma 디자인을 HTML/CSS/React 코드로 변환하는 transcoder입니다. Figma 파일이 source of truth고, 디자이너가 Figma에서 수정하면 다시 export하는 흐름을 전제로 합니다.
| 기준 | oh-my-design | Anima |
|---|---|---|
| 목적 | AI agent가 매 요청마다 읽는 brand spec | Figma → production code conversion |
| Output | DESIGN.md (markdown spec) | HTML/CSS/React (Figma 구조 기반) |
| AI agent integration | Claude Code · Codex · Cursor · OpenCode 직결 | Plugin · Figma 안에서 동작 |
| Brand voice | Core의 Content & Locales와 구조화 graph에서 명시 | Figma 파일에 그려진 visual 그대로 |
| Install | `npx oh-my-design-cli@latest` | Figma plugin + 웹 dashboard |
| Price | Free · MIT | Freemium · 팀당 유료 |
| Open source | Yes (MIT) | No (proprietary) |
When to use Anima
- 디자이너가 이미 Figma로 완성된 시안을 가지고 있을 때
- Figma → 코드 일회성 변환이 주된 과업일 때
- 디자이너-개발자 handoff가 병목인 팀
When to use oh-my-design
- Figma 없이 spec → 코드 흐름이 필요할 때
- Voice·persona·motion까지 같은 파일에서 강제하고 싶을 때
- Spec이 Figma 파일보다 더 오래 살아남아야 할 때 — markdown은 stack-agnostic
정리. Anima과 oh-my-design은 같은 layer가 아닙니다. Anima이 figma → production code conversion 쪽이라면, oh-my-design은 그 도구가 매번 같은 brand context로 동작하도록 만드는 spec입니다. 둘은 either/or가 아니라 함께 쓸 수 있습니다.
Anima 공식oh-my-design vs Locofy
Locofy도 Figma 디자인을 코드로 바꾸는 도구지만, Anima보다 "production-ready"를 강조하며 responsive·state·props 추출에 무게를 둡니다. 여전히 Figma가 source고 코드가 산출물입니다.
| 기준 | oh-my-design | Locofy |
|---|---|---|
| 목적 | AI agent가 매 요청마다 읽는 brand spec | Figma → production-grade code (props/state 포함) |
| Output | DESIGN.md (markdown spec) | React/Next/Vue/HTML |
| AI agent integration | Claude Code · Codex · Cursor · OpenCode 직결 | Plugin · Figma 안에서 동작 |
| Brand voice | Core의 Content & Locales와 구조화 graph에서 명시 | Figma 시안 그대로 |
| Install | `npx oh-my-design-cli@latest` | Figma plugin (`Locofy Lightning`) |
| Price | Free · MIT | Freemium · seat 기반 유료 |
| Open source | Yes (MIT) | No (proprietary) |
When to use Locofy
- Figma 시안을 responsive React 코드로 정밀히 옮겨야 할 때
- 디자이너가 prop/state까지 Figma에서 정의해두는 팀
- Pixel-perfect 변환이 우선순위일 때
When to use oh-my-design
- Figma가 아예 없거나, 시안보다 spec이 먼저인 흐름일 때
- AI agent가 매 요청마다 spec을 읽고 새 화면을 자율 생성하길 원할 때
- 코드뿐 아니라 voice·copy·motion까지 같은 spec으로 통제하고 싶을 때
정리. Locofy과 oh-my-design은 같은 layer가 아닙니다. Locofy이 figma → production-grade code (props/state 포함) 쪽이라면, oh-my-design은 그 도구가 매번 같은 brand context로 동작하도록 만드는 spec입니다. 둘은 either/or가 아니라 함께 쓸 수 있습니다.
Locofy 공식oh-my-design vs getdesign.md
getdesign.md는 약 71개 브랜드의 DESIGN.md를 모아 둔 무료 큐레이션 웹 카탈로그입니다. 사이트에서 브랜드를 골라 미리 보고 복사해 쓰는 단순하고 빠른 browse → copy 경험이 핵심이며, 영어·서구 브랜드(Apple, BMW, Stripe, Shopify, Figma, Tesla 등) 중심이라 한국 브랜드는 거의 없습니다. OmD가 README에서 출발점으로 인용하는 VoltAgent/awesome-design-md 오픈소스 컬렉션(GitHub 85.8k, MIT)과 뿌리를 공유하며, 사실상 그 컬렉션을 호스팅한 browse/copy 프런트엔드에 가깝습니다.
| 기준 | oh-my-design | getdesign.md |
|---|---|---|
| 목적 | AI agent가 매 요청마다 읽는 brand spec | 이미 만들어진 브랜드 DESIGN.md를 빠르게 찾아보고 복사하는 큐레이션 카탈로그. 생성기나 유료 SaaS가 아니라, 검증된 서구 브랜드의 디자인 시스템 문서를 모아 둔 무료 참고 라이브러리입니다. |
| Output | DESIGN.md (markdown spec) | 9-section Google Stitch 스키마 기반의 브랜드별 DESIGN.md 문서. 웹에서 미리 보고 클립보드로 복사. |
| AI agent integration | Claude Code · Codex · Cursor · OpenCode 직결 | 없음. 설치형 에이전트 레이어 없이 브라우즈와 복사만 제공하는 순수 웹 카탈로그입니다. (OmD는 skills omd:init/apply/harness/sync + 서브에이전트를 설치해 워크플로에 상주시킵니다.) |
| Brand voice | Core의 Content & Locales와 구조화 graph에서 명시 | 영어 우선. 사이트 UI와 문서 모두 영어 기준이며 한국어 대응은 사실상 없습니다. |
| Install | `npx oh-my-design-cli@latest` | 설치 불필요. 웹사이트 접속 → 브랜드 선택 → 미리 보기 → 복사. (sign-in 링크가 있어 브라우징은 일부 열려 있습니다.) |
| Price | Free · MIT | Free |
| Open source | Yes (MIT) | 컬렉션의 뿌리는 오픈소스 — VoltAgent/awesome-design-md(MIT, GitHub 85.8k)와 뿌리를 공유하며, OmD README도 같은 컬렉션을 출발점으로 인용합니다. getdesign.md는 그 컬렉션을 호스팅한 browse/copy 프런트엔드 성격입니다. |
When to use getdesign.md
- 서구 브랜드(Apple, BMW, Stripe, Shopify, Tesla, Figma, Spotify, Nike 등) 레퍼런스가 바로 필요할 때 — 이쪽 브랜드 셋이 두텁습니다.
- 설치·설정 없이 웹에서 한 브랜드 DESIGN.md를 빠르게 미리 보고 복사만 하면 되는 가벼운 작업.
- 'DESIGN.md가 뭔지' 처음 둘러볼 때 — 'DESIGN.md = getdesign.md'로 먼저 알려진 first-mover라 진입이 쉽습니다.
When to use oh-my-design
- 한국 브랜드 depth가 필요할 때 — Toss·당근·배민·카카오·네이버·쿠팡·무신사·뱅크샐러드·29CM·컬리 등은 getdesign.md에 거의 없고 OmD가 두텁게 다룹니다.
- 복사로 끝나는 카탈로그가 아니라 한 번 설치해 두는 에이전트 레이어가 필요할 때 — skills(omd:init/apply/harness/sync)와 서브에이전트가 워크플로에 상주합니다.
- 토큰 목록보다 깊고 portable한 프로젝트 계약이 필요할 때 — OmD Core v2는 Experience, Foundations, Typography/Assets, Components/States, Layout/Platforms, Content/Locales, Governance를 한 문서에 담고, 한국어 네이티브 워크플로와 선택적 System Graph를 제공합니다.
정리. getdesign.md과 oh-my-design은 같은 layer가 아닙니다. getdesign.md이 이미 만들어진 브랜드 design.md를 빠르게 찾아보고 복사하는 큐레이션 카탈로그. 생성기나 유료 saas가 아니라, 검증된 서구 브랜드의 디자인 시스템 문서를 모아 둔 무료 참고 라이브러리입니다. 쪽이라면, oh-my-design은 그 도구가 매번 같은 brand context로 동작하도록 만드는 spec입니다. 둘은 either/or가 아니라 함께 쓸 수 있습니다.
getdesign.md 공식