DESIGN.md, OmD, vibe coding

DESIGN.md는 프로젝트 루트에 두는 단일 마크다운 파일로, 브랜드 색·타이포·컴포넌트·voice·페르소나·모션까지 모두 담는 디자인 스펙입니다. AI coding agent가 UI를 만들 때 가장 먼저 읽는 권위 있는 컨텍스트로 동작합니다. Google Stitch의 9-섹션 토큰 포맷에 OmD가 브랜드 철학 6-섹션(§10–15)을 더해 총 15-섹션 구조를 갖습니다.

oh-my-design(OmD)은 DESIGN.md 스펙 + 그 스펙대로 동작하는 skill·sub-agent 번들입니다. `npx oh-my-design-cli install-skills` 한 줄로 Claude Code·Codex·Cursor·OpenCode에 15개 skill + 16개 sub-agent를 설치합니다. /docs 페이지에서 전체 파이프라인을 볼 수 있습니다.

보통의 디자인 시스템은 사람이 읽고 컴포넌트를 직접 구현하기 위한 문서지만, DESIGN.md는 AI agent가 매 prompt마다 읽고 코드로 번역하는 단일 source of truth입니다. 토큰뿐 아니라 voice·tone·persona·motion까지 한 파일에 묶어 agent가 "브랜드 없는 평균 UI"로 회귀하지 않도록 막습니다.

Claude Code, Codex, OpenCode, Cursor가 1차 타깃이고 Gemini CLI도 동작합니다. skill 파일은 agent-agnostic markdown이라 새 agent가 등장해도 동일한 DESIGN.md를 그대로 읽을 수 있도록 설계됐습니다. Cursor는 `.cursor/rules/omd-design.mdc` shim을 통해 진입합니다.

Vibe coding은 정확한 코드 지시 대신 "이런 느낌으로 만들어줘"라는 자연어 의도만 던지고 agent가 알아서 구현하는 흐름을 가리킵니다. 이 방식은 빠르지만 brand context가 없으면 결과물이 평균값에 수렴합니다. DESIGN.md는 vibe coding의 그 "느낌"을 검증 가능한 형태로 고정해 두는 장치입니다.

프로젝트 루트에서 `npx oh-my-design-cli install-skills`만 실행하면 됩니다. skill·sub-agent·hook·100+ reference DESIGN.md가 모두 설치되며 외부 API 호출은 발생하지 않습니다. 설치 후 agent를 한 번 재시작하면 새 skill이 로드됩니다. 자세한 흐름은 /docs를 참조하세요.

네. `install-skills`가 `.cursor/rules/omd-design.mdc` shim을 함께 작성하므로 Cursor가 매 요청마다 DESIGN.md를 읽도록 강제됩니다. skill의 핵심 로직은 SKILL.md markdown이라 Cursor·Claude Code·Codex 모두 동일한 결과를 냅니다.

네. MIT 라이선스 오픈소스이며 npm 패키지 하나로 끝납니다. 유료 tier는 존재하지 않고 만들 계획도 없습니다. 100+ reference는 각 회사 자산이며 교육용 reference로만 수록돼 있습니다.

아니요. OmD는 추론 layer가 아니라 skill·markdown 파일을 사용자 머신에 복사하는 CLI일 뿐입니다. 모든 디자인 생성은 사용자가 이미 쓰고 있는 AI agent(Claude Code, Cursor 등) 안에서 일어나고, OmD 자체는 어떤 텔레메트리도 수집하지 않습니다.

shadcn/ui는 React 컴포넌트를 복사-붙여넣기하는 라이브러리고, brand opinion이 거의 없습니다. DESIGN.md는 컴포넌트가 아니라 "브랜드가 어떻게 생기고·들리고·움직여야 하는가"를 정의하는 스펙입니다. 둘은 충돌하지 않고 함께 씁니다 — shadcn 컴포넌트를 DESIGN.md token으로 채색하는 식이 가장 흔합니다.

v0는 prompt에서 즉석으로 UI snippet을 합성하는 서비스로, 설치되는 spec이 없고 결과물은 prompt마다 휘발됩니다. DESIGN.md는 repo에 영구히 박혀 매 요청마다 같은 brand context를 강제합니다. v0로 만든 결과물을 DESIGN.md token으로 다시 칠하는 워크플로도 가능합니다.

Anima·Locofy는 Figma 디자인을 코드로 변환하는 transcoder입니다. Figma 파일이 source of truth고 코드는 산출물입니다. DESIGN.md는 그 반대로 markdown spec이 source of truth고 코드·Figma·UI 모두 산출물입니다. Figma → 코드 일회성 변환이 아니라 매 요청마다 갱신되는 살아있는 spec입니다.

Google Stitch가 DESIGN.md 포맷(9 sections — color, typography, components 등)을 먼저 제안했고, OmD는 그 위에 §10–15 브랜드 철학 layer 6개 섹션을 더한 superset입니다. Stitch가 만든 DESIGN.md는 그대로 OmD에서도 valid하고, OmD를 쓰면 voice·persona·motion까지 같은 파일 안에서 다룰 수 있습니다.

네. `/omd-add-reference <URL>` skill이 3-tier 검증 파이프라인으로 라이브 사이트를 읽어 `references/<id>/DESIGN.md`를 새로 만듭니다. Tier 1은 공식 design system, Tier 2는 보조 inspect, Tier 3은 cross-check입니다. 자체 brand면 자기 회사 사이트 URL만 넘기면 됩니다.

권장합니다. DESIGN.md는 사람과 agent 모두 읽도록 만든 markdown입니다. 직접 수정한 부분은 `omd-sync`가 보존하고, agent가 새로 생성한 부분만 갱신됩니다. 별도 빌드 단계는 없습니다 — 저장 즉시 다음 prompt부터 반영됩니다.

OmD 자체는 MCP server를 띄우지 않습니다. skill·sub-agent·hook으로 동작하는 게 의도된 아키텍처입니다. 다만 `omd-3d-blender` 같은 일부 sub-agent가 외부 MCP server(blender-mcp 등) 설치를 안내할 수 있습니다.

네. `/omd-harness <task>` 명령이 10-phase 파이프라인을 돌면서 16개 sub-agent를 dispatch하고, Discovery·Components·Handoff 3개 checkpoint에서 사용자 확인을 받습니다. 각 phase의 산출물은 `.omd/runs/<id>/`에 남아 다음 턴에서 그대로 재사용됩니다.

있습니다. `omd-kr-writer` skill이 12개 한국어 voice preset(toss-tech-design / karrot-neighborly / brunch-maker / naver-d2 / biz-report / academic 등)을 가지고 있고, 각 preset마다 9-field voice spec이 정의돼 있습니다. "토스 톤으로", "당근 톤으로" 같은 자연어로 호출하면 됩니다.