실제 회사의 DESIGN.md를 shadcn 스킬에 넣기

짧은 답

oh-my-design.kr에서 Verified v2 레퍼런스를 고르고, 그 DESIGN.md를 프로젝트 루트에 저장한 뒤, npx skills add shadcn/ui로 shadcn 스킬을 설치하고, 에이전트에게 ./DESIGN.md로 디자인 시스템을 만들어 달라고 하면 돼요. OmD 레퍼런스는 Google DESIGN.md 형식이에요. YAML frontmatter에 토큰이 있고 그 아래에 설명이 이어져요. 스킬은 편집을 시작하기 전에 frontmatter, Do's and Don'ts, Known Gaps를 먼저 읽어요.

네 단계

1. 검증된 레퍼런스 고르기

   아카이브에서 Verified v2 표시가 있는 레퍼런스를 고르세요. 값마다 출처가 있고 Known Gaps 목록이 붙어 있어요. partial·legacy 레퍼런스는 토큰이 적고 측정된 공백 기록이 없어서 스킬이 쓸 재료가 줄어요.

2. DESIGN.md 저장하기

   레퍼런스 페이지 위쪽의 'DESIGN.md 복사'나 '내려받기'를 누르세요. 원문 파일을 바로 받아도 돼요. 정본 DESIGN.md 끝에 출처 두 줄이 붙어 있어요.

   $ curl -o DESIGN.md https://oh-my-design.kr/toss/design.md

   복사

3. shadcn 스킬 설치하기

   shadcn 문서에 있는 설치 명령이에요. 스킬 이름은 shadcn이고 슬래시 명령은 없어요. shadcn/ui 디자인 시스템을 요청하거나 DESIGN.md를 언급하면 에이전트가 알아서 불러와요. DESIGN.md 워크플로는 PR #12252(2026-10-09 머지)로 들어왔어요.

   $ npx skills add shadcn/ui

   복사

4. 에이전트에게 요청하기

   평소 말투로 요청하면 돼요. 스킬이 앱을 만들고(스타일 프리셋으로 init, 이어서 add --all), 토큰을 shadcn CSS 변수에 연결하고, 컴포넌트 variant를 고친 뒤 보고서를 써요. 아래 프롬프트는 OmD의 폰트 규칙을 지키라고 덧붙인 거예요.

./DESIGN.md로 shadcn/ui 디자인 시스템을 만들어 줘. shadcn 스킬의 design-system 워크플로를 따라서 frontmatter, Do's and Don'ts, Known Gaps를 먼저 읽고 토큰을 연결해. 직접 추정해서 채운 값은 보고서에 전부 적어. 브랜드 폰트를 다른 폰트로 바꾸지 말고, 설치할 수 없으면 DESIGN.md가 지정한 safe default만 쓰고 fallback이라고 표시해.

그대로 넘어가는 것

2026-10-14에 oh-my-design.kr에서 그대로 내려받은 배포판 토스 파일로 스킬을 처음부터 끝까지 한 번 돌려 측정했어요. 그보다 작은 초안(2026-10-13)으로 앞서 돌린 네 번도 색, radius, 버튼 높이, 대비 공백, 폰트에서 같은 결과였어요.

색

색 역할 전부가 globals.css에 들어가고, 50–900 팔레트 여덟 벌이 모두 토큰으로 등록됨

radius

4~16px 7단계 고정. pill 모양은 16px로 제한

글자

글자 스타일 26개가 px 단위 type-* 유틸리티로 들어감

컨트롤 높이

TDS 버튼 56 / 48 / 38 / 32px가 button.tsx에 반영되고, input·select·tab도 함께 38px로 맞춰짐

상태

눌림 scale(0.96)과 문서에 있는 2겹 focus ring 적용. DESIGN.md대로 기본 버튼에는 hover 없음

Known Gaps

기본 버튼 대비 3.71:1을 고치지 않고 기록된 그대로 보고. 문서의 focus ring이 흰 바탕에서 1.90:1이라는 점도 스킬이 짚음

폰트

"Substitute: none" 유지. Noto Sans·Noto Sans KR을 Toss Product Sans 뒤에 fallback으로 표시해 설치. Inter는 쓰지 않음

한계

• 배포판 파일로 한 번(claude -p로 Claude Sonnet, 15턴, 3분 41초, 0.80달러), 초안으로 네 번 돌렸어요. 실행마다 생기는 차이가 형식 차이보다 컸으니 벤치마크가 아니라 실제 예시로 읽어 주세요.
• 스킬의 마지막 두 단계(쇼케이스 페이지, 브라우저 검증)는 돌리지 않아서 스크린샷은 없어요. 근거는 스킬이 쓴 파일이에요.
• DESIGN.md에 없는 역할(다크 테마, 차트 색, secondary 등)은 스킬이 직접 채우고 보고서에 추정값이라고 표시해요. 이 값은 브랜드가 아니라 에이전트가 고른 거예요.
• 스킬이 판단해서 바꾸는 부분도 있어요. 이번 실행에서는 기본 버튼을 TDS의 56px가 아니라 38px로 잡았고("웹 앱이라서"), 굵기 600을 모든 버튼 크기에 적용했어요. 보고서에 하나씩 적혀 있으니 배포 전에 읽어 보세요.
• Google 린터로 배포된 토스 파일을 읽으면 오류 0개, 경고 110개예요. 어떤 컴포넌트도 쓰지 않는 팔레트 토큰 89개, 스키마 밖의 컴포넌트 속성 20개(type, states, pressed), 그리고 Known Gaps에 이미 적힌 3.71:1 대비 1개예요.
• 브랜드 폰트는 대개 재배포할 수 없어요. 받는 것은 폰트 파일이 아니라 브랜드 폰트의 이름과 fallback 표시가 붙은 safe default예요.
• 이 실행 뒤에 토스 파일이 바뀌었어요. 2026-10-20에 브랜드 폰트의 측정 대체 폰트(라틴 IBM Plex Sans, 한글 Pretendard Variable)가 "substitute — not the brand face" 표시와 함께 들어갔어요. 위의 폰트 결과는 대체 폰트가 없던 10-14 파일 기준이에요.

실제 실행 결과

2026-10-14 배포판 토스 파일 실행에서 shadcn 스킬이 쓴 REPORT.md 일부를 고치지 않고 옮겼어요. 원문이 영어라 영어로 둬요.

- **Fonts:**
  - Stack is `"Toss Product Sans", "Noto Sans Variable", "Noto Sans KR Variable", system`.
  - Substitute: none. The DESIGN.md chose none and says Toss Product Sans can't be redistributed.
  - Noto Sans and Noto Sans KR are the documented safe default. They are a fallback, not the brand face.

## Contrast pairs under 4.5:1
Ratios were computed with the WCAG formula.

| Pair | Ratio | Source |
| --- | --- | --- |
| White on `#3182f6` (primary button, light and dark) | **3.71:1** | The DESIGN.md itself records this in Known Gaps; left as specified. |
| `#8b95a1` muted text on white | **3.04:1** | DESIGN.md "Muted". Applies to descriptions and placeholders. |
| `#8b95a1` muted text on `#f2f4f6` | **2.76:1** | Same. |
| `#e42939` danger on white | **4.49:1** | DESIGN.md danger; just under AA. |
| `#8ac0ff` focus ring on white | 1.90:1 | Below the 3:1 non-text target. The DESIGN.md spec is kept. |

• 이번 실행 기록: 프롬프트, 추출 표, 보고서, 전후 globals.css·button.tsx
• 초안으로 돌린 앞선 네 번의 기록
• shadcn-ui/ui#12252