oh-my-design

DESIGN.md 카탈로그 · 기업 521곳 · 18개국

값마다 근거 캡처를 확인한 디자인 시스템 299개

코딩 에이전트가 그대로 따르는 DESIGN.md입니다. 하나 골라 빌더에서 열어 보세요.

빌더에서 많이 고른 순· 실시간 집계

전체 521개 →
  1. 01TossKR검증
  2. 02AppleUS검증
  3. 03KarrotKR검증
  4. 04BaeminKR검증
  5. 05KakaoKR검증
  6. 06KRDSKR검증
  7. 07삼성전자KR검증
  8. 08NaverKR검증
  9. 09BanksaladKR검증
  10. 10여기어때 (GoodChoice)KR검증

빌더에서 열립니다

미리보기: toss / DESIGN.md

검증

에이전트가 만들 화면 예시

이 레퍼런스의 토큰만으로 색과 모양을 입혔습니다.

계속하기
  • primary #3182f6
  • on-primary #ffffff
  • canvas #ffffff
  • surface #f2f4f6
  • foreground #191f28
rounded.md
6px
label on primary
3.71:1 · 24px · on-primary

Toss Product Sans 글꼴은 불러오지 않아 이 페이지 글꼴로 표시합니다.

Toss 빌더에서 열기
미리 볼 브랜드

이렇게 씁니다

  1. 01

    레퍼런스 고르기

    검색하거나 많이 고른 순에서 시작하세요. 검증 레퍼런스는 값마다 근거를 보여 줍니다.

  2. 02

    빌더에서 다듬기

    색, 글꼴, 컴포넌트를 바꾸면 미리보기가 바로 따라옵니다.

  3. 03

    에이전트에게 DESIGN.md 넘기기

    파일을 내려받아 Claude Code, Codex, Cursor, OpenCode에 넣으세요. 빌더가 써 준 첫 프롬프트도 함께 쓰면 됩니다.

에이전트가 일하는 곳에 바로 설치

명령 하나로 스킬 28개와 오프라인 카탈로그가 Claude Code, Codex, Cursor, OpenCode에 들어갑니다. 설치하는 동안 AI를 호출하지 않습니다.

npx oh-my-design-cli@latest

스킬 전체 보기 →

  • omd:init

    프로젝트에 맞는 카탈로그 레퍼런스로 DESIGN.md를 세팅합니다.

  • omd:apply

    평소 UI 수정이 DESIGN.md를 벗어나지 않게 합니다.

  • omd:autopilot

    프롬프트 하나로 새 화면을 설계하고 구현합니다.

  • omd:harness

    단계마다 멈춰서 검토를 받는 안내형 디자인 작업입니다.

  • omd:feel

    수치로 정한 규칙으로 인터페이스 디테일을 적용하거나 점검합니다.

  • omd:remember

    고쳐 준 내용을 기록해 다음 수정부터 반영합니다.

검증 레퍼런스의 대표색, 색상순

브랜드 색 299개. 각 레퍼런스 페이지에 나오는 대표색 그대로입니다.

521개 전체 보기 →