A real company's DESIGN.md, applied by shadcn's skill.

The short answer

Pick a Verified v2 reference on oh-my-design.kr, save its DESIGN.md in your project root, install shadcn's skill with npx skills add shadcn/ui, and ask your agent to build a design system from ./DESIGN.md. OmD references use the Google DESIGN.md format: tokens in YAML frontmatter, then prose. The skill reads the frontmatter, the Do's and Don'ts and the Known Gaps before it edits anything.

Four steps

1. Pick a verified reference

   Open the archive and choose a reference marked Verified v2. Those carry a source for each value and a Known Gaps list. Partial and legacy references have fewer tokens and no measured gaps, so the skill has less to work with.

2. Save its DESIGN.md

   At the top of the reference page, use Copy DESIGN.md or Download. Or fetch the raw file: it is the canonical DESIGN.md plus a two-line source footer.

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

   Copy

3. Install shadcn's skill

   This is shadcn's documented install. The skill is called shadcn and has no slash command; your agent loads it when you ask for a shadcn/ui design system or mention a DESIGN.md. Its DESIGN.md workflow arrived in PR #12252 (merged 2026-10-09).

   $ npx skills add shadcn/ui

   Copy

4. Ask your agent

   Use plain language. The skill scaffolds the app (init with a style preset, then add --all), maps the tokens to shadcn's CSS variables, restyles component variants and writes a report. The prompt below asks it to keep OmD's font rule.

Build a shadcn/ui design system from ./DESIGN.md. Follow the shadcn skill's design-system workflow: read the frontmatter, Do's and Don'ts and Known Gaps first, map the tokens, and list every value you had to derive in your report. Do not substitute the brand font; if it cannot be installed, use only the safe default DESIGN.md names and label it as a fallback.

What carries over

Measured on 2026-10-14 in one end-to-end run of the skill on the released Toss file, downloaded from oh-my-design.kr unchanged. Four earlier runs on a smaller draft (2026-10-13) agreed on colors, radius, button heights, the contrast gap and fonts.

Colors

Every color role mapped into globals.css, and all eight 50–900 palettes registered as tokens

Radius

7 steps pinned, 4 to 16px; pills capped at 16px

Type

26 type styles as type-* utilities, in px

Control heights

TDS buttons 56 / 48 / 38 / 32px in button.tsx; inputs, selects and tabs moved to 38px with them

States

Pressed scale(0.96) and the documented two-layer focus ring applied; no hover on the primary button, as the DESIGN.md says

Known Gaps

The 3.71:1 primary-button contrast reported as recorded, not adjusted; the skill also flagged that the documented focus ring is 1.90:1 on white

Fonts

"Substitute: none" kept; Noto Sans and Noto Sans KR installed as a labelled fallback behind Toss Product Sans; Inter never used

Limits

• One run on the released file (Claude Sonnet through claude -p: 15 turns, 3 min 41 s, $0.80) and four on the draft. Run-to-run differences were larger than format differences, so read this as a worked example, not a benchmark.
• The skill's last two steps (the showcase page and browser checks) were not run, so there are no screenshots here; the evidence is the files it wrote.
• The skill fills roles a DESIGN.md leaves empty, such as a dark theme, chart colors and secondary, and marks them as derived in its report. Those values are the agent's choices, not the brand's.
• It also makes judgment calls: in this run the default button became 38px instead of TDS's 56px ("a web app"), and weight 600 went on every button size. The report lists each one; read it before you ship.
• Google's linter reads the released Toss file with 0 errors and 110 warnings: 89 palette tokens no component uses, 20 component properties outside its schema (type, states, pressed), and the same 3.71:1 contrast already listed in Known Gaps.
• Brand fonts are usually not redistributable. You get the brand face's name and a labelled safe default, not the font itself.
• The Toss file has changed since this run. On 2026-10-20 it gained measured substitutes for its brand face (IBM Plex Sans for Latin, Pretendard Variable for Hangul), each labelled "substitute — not the brand face". The font results above come from the 10-14 file, which named none.

From a real run

Unedited passages from REPORT.md, written by the shadcn skill in the 2026-10-14 run on the released Toss file.

- **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. |

• This run: prompt, extraction table, report, globals.css and button.tsx before and after
• The four earlier runs on the draft
• shadcn-ui/ui#12252