코딩 에이전트를 위한 디자인 맥락
코드는 이미 잘 씁니다. 이제 디자인 판단에 근거를 더하세요.
품질 등급이 표시된 레퍼런스와 반복 가능한 디자인 작업 흐름을 Claude Code·Codex·OpenCode·Cursor에 설치합니다. 이후에는 만들 화면과 지킬 조건만 말하면 됩니다.
필요한 결과부터 고르세요
스킬 이름을 외울 필요가 없습니다. 만들 화면과 지킬 조건을 말하면 필요한 스킬이 선택됩니다.
디자인 시스템 만들기
제품 설명과 verified_v2 레퍼런스를 프로젝트 소유 DESIGN.md로 바꿉니다. 모르는 사실을 아는 척 채우지 않습니다.
프롬프트
“가족 자산관리 앱에 차분하고 신뢰감 있는 디자인 시스템을 잡아줘. Toss를 참고하되 기존 로고와 카피는 유지해줘.”
결과
DESIGN.md, 에이전트 연결 파일, 명시적인 토큰 차이, 확정된 첫 화면.
완성된 화면 만들기
발견·IA·와이어프레임·컴포넌트·카피·접근성·검증을 체크포인트가 있는 하나의 흐름으로 진행합니다.
프롬프트
“이 앱의 온보딩을 설계하고 구현해줘. 현재 스택을 유지하고 DESIGN.md를 정본으로 사용해줘.”
결과
동작하는 화면, 상태 커버리지, 검증 기록, 저장소 안의 핸드오프 산출물.
기존 UI 개선하기
제품 동작은 보존하면서 위계·리듬·접근성·전형적인 AI UI 패턴을 진단하고 고칩니다.
프롬프트
“URL과 폼 필드명은 바꾸지 말고 가격 페이지를 개선해줘. 영향이 큰 수정부터 적용하고 결과를 검증해줘.”
결과
집중된 코드 수정, 전후 근거, 결정론적 품질 검사.
CLI는 에이전트가 일할 환경을 준비합니다.
번들은 제품 스킬 20개, 에이전트 정의 18개, 품질 등급이 표시된 DESIGN.md 레퍼런스 440개를 담습니다. 현재 verified_v2 141개, partial 159개, legacy snapshot 140개이며 공개 데모에는 verified_v2를 사용합니다. Claude Code·Codex·OpenCode에는 호환되는 스킬·역할·카탈로그가 들어가고, Cursor에는 프로젝트 규칙과 카탈로그가 들어갑니다.
제품 스킬 20개 · 전문 에이전트 18개 · verified_v2 141 / partial 159 / legacy 140 · 설치 중 AI 호출 0회
명령어 한 번, 제품 프롬프트 한 번
프로젝트 루트에서 실행하세요. 설치기가 사용 중인 코딩 에이전트를 감지하고 설치할 채널을 고르게 합니다.
npx oh-my-design-cli@latestnpx oh-my-design-cli@latest doctor에이전트를 재시작하고 doctor를 한 번 실행한 뒤 원하는 화면을 설명하세요. 데몬·API 키·MCP 서버가 필요하지 않습니다.
최근 디자인 스킬 흐름에 OmD가 더하는 것
Taste 계열의 anti-slop 판단을 취향만이 아니라 프로젝트 DESIGN.md에 고정합니다.
Impeccable 계열의 감사 어휘와 결정론적 게이트에 레퍼런스 증거와 멀티 에이전트 실행을 더합니다.
검증되지 않은 브랜드 값은 그럴듯한 폴백으로 채우지 않고 비워 둡니다.
Builder는 시각 레퍼런스 진입점으로 유지하고 CLI는 그 맥락을 사용자의 코드베이스로 옮깁니다.