Back to Details

use-design-md

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

use-design-md — consumer skill for the ko/design.md catalog

use-design-md — ko/design.md目录的消费者技能

Mental model

核心逻辑

The ko-design-md catalog (https://getdesign.kr) publishes one 
design.md
per Korean service — a compact, machine-readable description of that brand's visual language: colors in OKLCH, typography, spacing, radius, signature components, and do's & don'ts. This skill is the consumer side: it pulls the right entry and uses it as the design brief for UI work in whatever project you are currently in.
It does three things, in order:
  1. Discover — resolve the brand the user named to a catalog 
    slug
    .
  2. Fetch — download that entry's raw 
    design.md
    (and, if useful, its token sidecar).
  3. Apply — translate that design language into the current project's styling system.
ko-design-md目录（https://getdesign.kr）为每个韩国服务发布一份`design.md`文件——这是一份简洁的、机器可读的品牌视觉语言描述，包含OKLCH格式的颜色、排版、间距、圆角、标志性组件以及注意事项。本技能是**消费者端**：它会拉取对应的条目，并将其作为**当前所在任意项目**中UI工作的设计规范。
它按顺序执行三项操作：
  1. 识别——将用户指定的品牌解析为目录中的
    slug
    。
  2. 获取——下载对应条目的原始
    design.md
    文件（如有需要，还会下载配套的token文件）。
  3. 应用——将该设计语言转换为当前项目的样式系统。

This skill vs. 
design-md
(don't mix them up)

本技能与
design-md
的区别（请勿混淆）

  • use-design-md
    (this skill)     — CONSUME an existing entry. Runs in any repo. "Make my dashboard look like Toss", "apply Karrot's style to this screen".
  • design-md
    (the other skill)     — PRODUCE a new entry, adding a brand to the catalog. Only runs inside the ko-design-md repo.
If the user wants to add or edit a catalog entry, stop and point them at 
design-md
. That is a different job in a different place.
  • use-design-md
    （本技能）    ——使用现有条目。可在任意仓库中运行。 例如：“让我的仪表盘看起来像Toss”“将Karrot的样式应用到这个页面”。
  • design-md
    （另一技能）    ——创建新条目，向目录中添加品牌。 仅在ko-design-md仓库内运行。
如果用户想要添加或编辑目录条目，请停止操作并引导他们使用
design-md
技能。这是不同仓库中的不同工作。

Step 1 — Discover: resolve the brand to a slug

步骤1 — 识别：将品牌解析为slug

Fetch the catalog index (llms.txt format, ~one line per entry):
curl -s https://getdesign.kr/llms.txt
Each entry line looks like:
- [토스](https://getdesign.kr/services/toss/llms.txt): finance — <tagline>
Match the user's mention to a slug. The user may say a Korean name ("토스", "당근"), an English name ("Toss", "Karrot"), a design-system name ("SEED Design", "Vapor UI"), or the slug itself ("seed-design"). Match against the link text (name) AND the slug in the URL; the tagline often names the design system, which helps disambiguate.
Outcomes:
  • One clear match → take its slug, go to Step 2.
  • Several plausible matches → ask which one with 
    AskUserQuestion
    .
  • No match → the brand isn't in the catalog. Tell the user plainly, optionally list a few catalogued brands in the nearest category, and mention that adding it is a separate job (the 
    design-md
    skill, inside the ko-design-md repo). Do not fabricate a design.md for an uncatalogued brand — that defeats the point of citing a real source.
See 
references/endpoints.md
for the full endpoint map and fallbacks.
获取目录索引（llms.txt格式，每条目约占一行）：
curl -s https://getdesign.kr/llms.txt
每个条目行格式如下：
- [토스](https://getdesign.kr/services/toss/llms.txt): finance — <tagline>
将用户提到的内容与slug匹配。用户可能会使用韩语名称（“토스”“당근”）、英文名称（“Toss”“Karrot”）、设计系统名称（“SEED Design”“Vapor UI”）或slug本身（“seed-design”）。需同时匹配链接文本（名称）和URL中的slug；标语通常会提及设计系统名称，有助于消除歧义。
结果处理：
  • 明确匹配到一个条目 → 获取其slug，进入步骤2。
  • 匹配到多个可能条目 → 使用
    AskUserQuestion
    询问用户具体选择哪一个。
  • 无匹配结果 → 该品牌不在目录中。直接告知用户，可选择性列出相近类别中的几个已收录品牌，并说明添加品牌是单独的工作（需使用ko-design-md仓库内的
    design-md
    技能）。请勿为未收录品牌编造design.md文件——这违背了引用真实来源的初衷。
完整的端点映射和备选方案请参考
references/endpoints.md
。

Step 2 — Fetch the design.md (and tokens if needed)

步骤2 — 获取design.md文件（如有需要，同时获取token）

Fetch the raw entry:
curl -s https://getdesign.kr/services/<slug>/llms.txt
Use 
curl
(Bash), not WebFetch, for the entry. WebFetch summarizes and transforms content through a model, which silently drops exact token values — an OKLCH triple, a 13px spacing step, a specific weight. The whole reason to pull from the catalog is fidelity to the brand's real numbers, so fetch the bytes verbatim. WebFetch is an acceptable last resort only when Bash/curl is genuinely unavailable.
If you need tokens as structured data (e.g. to generate a Tailwind theme or a CSS variable block programmatically), also fetch the sidecar from GitHub raw — there is no getdesign.kr endpoint for it yet:
curl -s https://raw.githubusercontent.com/CaesiumY/ko-design-md/main/services/<slug>.tokens.json
Read the design.md fully before applying anything. The prose carries intent — the do's & don'ts, the voice — that the token JSON alone doesn't capture.
拉取原始条目：
curl -s https://getdesign.kr/services/<slug>/llms.txt
请使用
curl
（Bash）而非WebFetch来获取条目。 WebFetch会通过模型对内容进行总结和转换，会悄悄丢失精确的token值——比如OKLCH三色值、13px的间距步长、特定的字重。从目录拉取资源的核心目的是精准还原品牌的真实参数，因此需要原封不动地获取字节内容。只有当Bash/curl确实无法使用时，才可以将WebFetch作为最后的备选方案。
如果需要结构化的token数据（例如，以编程方式生成Tailwind主题或CSS变量块），还需从GitHub raw获取配套文件——目前getdesign.kr尚未提供该端点：
curl -s https://raw.githubusercontent.com/CaesiumY/ko-design-md/main/services/<slug>.tokens.json
在应用任何内容之前，请完整阅读design.md文件。其中的文字内容承载了设计意图——注意事项、风格导向——这些是token JSON文件无法单独体现的。

Step 3 — Apply to the current project

步骤3 — 应用到当前项目

This is the real work, and it's project-specific. Read 
references/apply-guide.md
and follow it. In short:
  1. Detect the target styling system first (Tailwind config, CSS custom properties, CSS-in-JS, plain CSS) before changing anything.
  2. Map tokens onto that system rather than pasting raw values everywhere — change them at the source so the whole surface moves together.
  3. Honor the Do's & Don'ts. They're the brand's guardrails, not decoration.
  4. For a large or structural change, design it first before coding (in Claude Code: 
    superpowers:brainstorming
    ; in other agents, an equivalent brainstorming step); for a small restyle, just go.
  5. Verify the result (preview/screenshot, or the project's tests) before claiming done — evidence before assertions (in Claude Code: 
    superpowers:verification-before-completion
    ).
这是核心工作，且具有项目特异性。请阅读
references/apply-guide.md
并遵循其中的指导。简而言之：
  1. 先检测目标样式系统（Tailwind配置、CSS自定义属性、CSS-in-JS、纯CSS），再进行任何修改。
  2. 将token映射到该系统中，而非在各处粘贴原始值——从源头修改，使整个界面风格保持一致。
  3. 遵守注意事项。这些是品牌的风格准则，而非装饰内容。
  4. 对于大型或结构性变更，先设计再编码（在Claude Code中使用
    superpowers:brainstorming
    ；在其他Agent中使用等效的头脑风暴步骤）；对于小型样式调整，可直接开始操作。
  5. 验证结果（预览/截图，或运行项目测试）后再宣告完成——用证据而非断言证明完成度（在Claude Code中使用
    superpowers:verification-before-completion
    ）。

Scope guardrails

范围限制

  • Don't gate on the current repo — this skill is meant to run anywhere.
  • Don't invent values absent from the fetched design.md. If the user wants something the brand's tokens don't cover, say so and propose a reasonable extension marked as your inference, not the brand's spec.
  • The catalog covers Korean services. A brand that isn't listed simply isn't available here — be honest about that instead of approximating from memory.
  • Stay vendor-neutral: borrow the visual language, not the source design system's own name. Never surface the system's name (
    Vapor UI
    , 
    SEED Design
    , …), its package names, or its class prefixes in the UI you generate — use the user's own product naming. See 
    references/apply-guide.md
    §6.
  • 不要限制当前仓库——本技能旨在可在任意环境运行。
  • 不要编造未在获取的design.md中提及的值。如果用户需要品牌token未涵盖的内容，请告知用户，并提出一个标记为你的推断的合理扩展方案，而非将其作为品牌规范。
  • 目录仅涵盖韩国服务。未列出的品牌无法在此获取——请如实告知，不要凭记忆近似模拟。
  • 保持厂商中立：借鉴视觉语言，而非源设计系统的名称。在生成的UI中，切勿显示源设计系统的名称（
    Vapor UI
    、
    SEED Design
    等）、包名或类前缀——使用用户自身的产品命名规范。详情请参考
    references/apply-guide.md
    第6节。