use-design-md

Name: use-design-md
Author: CaesiumY

23stars2forks

How to install use-design-md?

caesiumy/ko-design-md/use-design-md

$npx -y skills add CaesiumY/ko-design-md --skill use-design-md

Installs into the current project.

Summary

Pull a Korean brand's published design.md from the ko-design-md catalog (getdesign.kr) and apply its design language — colors, typography, spacing, radius, components, do's & don'ts — to the UI you are building in the CURRENT project. Use this skill whenever the user wants to bui

Files · 1

View on GitHub

SKILL.md

1	# use-design-md — consumer skill for the ko/design.md catalog
2
3	## Mental model
4
5	The ko-design-md catalog (https://getdesign.kr) publishes one `design.md` per Korean
6	service — a compact, machine-readable description of that brand's visual language:
7	colors in OKLCH, typography, spacing, radius, signature components, and do's & don'ts.
8	This skill is the consumer side: it pulls the right entry and uses it as the design
9	brief for UI work in whatever project you are currently in.
10
11	It does three things, in order:
12
13	1. Discover — resolve the brand the user named to a catalog `slug`.
14	2. Fetch — download that entry's raw `design.md` (and, if useful, its token sidecar).
15	3. Apply — translate that design language into the current project's styling system.
16
17	## This skill vs. `design-md` (don't mix them up)
18
19	- `use-design-md` (this skill) — CONSUME an existing entry. Runs in any repo.
20	"Make my dashboard look like Toss", "apply Karrot's style to this screen".
21	- `design-md` (the other skill) — PRODUCE a new entry, adding a brand to the catalog.
22	Only runs inside the ko-design-md repo.
23
24	If the user wants to add or edit a catalog entry, stop and point them at `design-md`.
25	That is a different job in a different place.
26
27	## Step 1 — Discover: resolve the brand to a slug
28
29	Fetch the catalog index (llms.txt format, ~one line per entry):
30
31	```
32	curl -s https://getdesign.kr/llms.txt
33	```
34
35	Each entry line looks like:
36
37	```
38	- [토스](https://getdesign.kr/services/toss/llms.txt): finance — <tagline>
39	```
40
41	Match the user's mention to a slug. The user may say a Korean name ("토스", "당근"), an
42	English name ("Toss", "Karrot"), a design-system name ("SEED Design", "Vapor UI"), or the
43	slug itself ("seed-design"). Match against the link text (name) AND the slug in the URL;
44	the tagline often names the design system, which helps disambiguate.
45
46	Outcomes:
47	- One clear match → take its slug, go to Step 2.
48	- Several plausible matches → ask which one with `AskUserQuestion`.
49	- No match → the brand isn't in the catalog. Tell the user plainly, optionally list a
50	few catalogued brands in the nearest category, and mention that adding it is a
51	separate job (the `design-md` skill, inside the ko-design-md repo). Do not fabricate a
52	design.md for an uncatalogued brand — that defeats the point of citing a real source.
53
54	See `references/endpoints.md` for the full endpoint map and fallbacks.
55
56	## Step 2 — Fetch the design.md (and tokens if needed)
57
58	Fetch the raw entry:
59
60	```
61	curl -s https://getdesign.kr/services/<slug>/llms.txt
62	```
63
64	Use `curl` (Bash), not WebFetch, for the entry. WebFetch summarizes and transforms
65	content through a model, which silently drops exact token values — an OKLCH triple, a
66	13px spacing step, a specific weight. The whole reason to pull from the catalog is
67	fidelity to the brand's real numbers, so fetch the bytes verbatim. WebFetch is an
68	acceptable last resort only when Bash/curl is genuinely unavailable.
69
70	If you need tokens as structured data (e.g. to generate a Tailwind theme or a CSS
71	variable block programmatically), also fetch the sidecar from GitHub raw — there is no
72	getdesign.kr endpoint for it yet:
73
74	```
75	curl -s https://raw.githubusercontent.com/CaesiumY/ko-design-md/main/services/<slug>.tokens.json
76	```
77
78	Read the design.md fully before applying anything. The prose carries intent — the do's &
79	don'ts, the voice — that the token JSON alone doesn't capture.
80
81	## Step 3 — Apply to the current project
82
83	This is the real work, and it's project-specific. Read `references/apply-guide.md` and
84	follow it. In short:
85
86	1. Detect the target styling system first (Tailwind config, CSS custom properties,
87	CSS-in-JS, plain CSS) before changing anything.
88	2. Map tokens onto that system rather than pasting raw values everywhere — change
89	them at the source so the whole surface moves together.
90	3. Honor the Do's & Don'ts. They're the brand's guardrails, not decoration.
91	4. For a large or structural change, design it first before coding (in Claude Code:
92	`superpowers:brainstorming`; in other agents,

People who liked this also viewed

6 picks

Type

use-design-md

23stars2forks

View on GitHub

How to install use-design-md?

caesiumy/ko-design-md/use-design-md

$npx -y skills add CaesiumY/ko-design-md --skill use-design-md

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# use-design-md — consumer skill for the ko/design.md catalog
2
3	## Mental model
4
5	The ko-design-md catalog (https://getdesign.kr) publishes one `design.md` per Korean
6	service — a compact, machine-readable description of that brand's visual language:
7	colors in OKLCH, typography, spacing, radius, signature components, and do's & don'ts.
8	This skill is the consumer side: it pulls the right entry and uses it as the design
9	brief for UI work in whatever project you are currently in.
10
11	It does three things, in order:
12
13	1. Discover — resolve the brand the user named to a catalog `slug`.
14	2. Fetch — download that entry's raw `design.md` (and, if useful, its token sidecar).
15	3. Apply — translate that design language into the current project's styling system.
16
17	## This skill vs. `design-md` (don't mix them up)
18
19	- `use-design-md` (this skill) — CONSUME an existing entry. Runs in any repo.
20	"Make my dashboard look like Toss", "apply Karrot's style to this screen".
21	- `design-md` (the other skill) — PRODUCE a new entry, adding a brand to the catalog.
22	Only runs inside the ko-design-md repo.
23
24	If the user wants to add or edit a catalog entry, stop and point them at `design-md`.
25	That is a different job in a different place.
26
27	## Step 1 — Discover: resolve the brand to a slug
28
29	Fetch the catalog index (llms.txt format, ~one line per entry):
30
31	```
32	curl -s https://getdesign.kr/llms.txt
33	```
34
35	Each entry line looks like:
36
37	```
38	- [토스](https://getdesign.kr/services/toss/llms.txt): finance — <tagline>
39	```
40
41	Match the user's mention to a slug. The user may say a Korean name ("토스", "당근"), an
42	English name ("Toss", "Karrot"), a design-system name ("SEED Design", "Vapor UI"), or the
43	slug itself ("seed-design"). Match against the link text (name) AND the slug in the URL;
44	the tagline often names the design system, which helps disambiguate.
45
46	Outcomes:
47	- One clear match → take its slug, go to Step 2.
48	- Several plausible matches → ask which one with `AskUserQuestion`.
49	- No match → the brand isn't in the catalog. Tell the user plainly, optionally list a
50	few catalogued brands in the nearest category, and mention that adding it is a
51	separate job (the `design-md` skill, inside the ko-design-md repo). Do not fabricate a
52	design.md for an uncatalogued brand — that defeats the point of citing a real source.
53
54	See `references/endpoints.md` for the full endpoint map and fallbacks.
55
56	## Step 2 — Fetch the design.md (and tokens if needed)
57
58	Fetch the raw entry:
59
60	```
61	curl -s https://getdesign.kr/services/<slug>/llms.txt
62	```
63
64	Use `curl` (Bash), not WebFetch, for the entry. WebFetch summarizes and transforms
65	content through a model, which silently drops exact token values — an OKLCH triple, a
66	13px spacing step, a specific weight. The whole reason to pull from the catalog is
67	fidelity to the brand's real numbers, so fetch the bytes verbatim. WebFetch is an
68	acceptable last resort only when Bash/curl is genuinely unavailable.
69
70	If you need tokens as structured data (e.g. to generate a Tailwind theme or a CSS
71	variable block programmatically), also fetch the sidecar from GitHub raw — there is no
72	getdesign.kr endpoint for it yet:
73
74	```
75	curl -s https://raw.githubusercontent.com/CaesiumY/ko-design-md/main/services/<slug>.tokens.json
76	```
77
78	Read the design.md fully before applying anything. The prose carries intent — the do's &
79	don'ts, the voice — that the token JSON alone doesn't capture.
80
81	## Step 3 — Apply to the current project
82
83	This is the real work, and it's project-specific. Read `references/apply-guide.md` and
84	follow it. In short:
85
86	1. Detect the target styling system first (Tailwind config, CSS custom properties,
87	CSS-in-JS, plain CSS) before changing anything.
88	2. Map tokens onto that system rather than pasting raw values everywhere — change
89	them at the source so the whole surface moves together.
90	3. Honor the Do's & Don'ts. They're the brand's guardrails, not decoration.
91	4. For a large or structural change, design it first before coding (in Claude Code:
92	`superpowers:brainstorming`; in other agents,

People who liked this also viewed

6 picks

Type