mcpField
U
use-design-md

use-design-md

github.com/caesiumy设计与 UI67236 次安装今天更新
代码仓库

关于 use-design-md

use-design-md 是一项技能,可将目录中的韩国品牌 DESIGN.md 用作 UI 设计 brief。它会获取并检查完整条目,再指导项目修改,并避免虚构品牌规范。

主要功能

  1. 01查找目录中的品牌条目
  2. 02下载完整设计文档
  3. 03将设计规则用于项目 UI
  4. 04检查已知缺口与约束
  5. 05完成前验证修改

适用场景

  1. 01将目录品牌设计应用于项目 UI
  2. 02实现前查阅品牌设计系统

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/caesiumy/ko-design-md --skill use-design-md

安装后在 Claude Code 中输入/use-design-md确认已加载。

附带文件references/apply-guide.mdreferences/endpoints.md

详细介绍

use-design-md — ko/design.md 目录的使用者技能

ko-design-md 目录(https://www.getdesign.kr)为每个韩国品牌发布一份 DESIGN.md,内容包括 OKLCH 颜色、排版、间距、圆角、组件以及注意事项。此技能会提取合适的条目,并将其用作当前项目 UI 工作的设计简报。按名称调用时,它是 /use-design-md(skills.sh)或 /ko-design-md:use-design-md(Claude Code 插件市场)。

获取内容 — 文件、失败情况和完整文档

所有目录内容获取(索引、条目、令牌附属文件、GitHub raw 备用源)都遵循以下规则。使用 curl 获取,它会逐字节将响应正文写入文件。会将页面传给模型的网页读取工具(Claude Code:WebFetch)会进行摘要并丢弃精确值(例如一个 OKLCH 三元组、一个 13px 的间距级别);只有在完全无法使用 shell 时才使用此类工具。

  1. 保存到文件,不要打印到终端。 条目长度可达数万字节,而 shell 工具会限制其返回的输出(Claude Code:约 30,000 个字符),并静默丢弃后半部分——包括组件、注意事项和已知缺口。下载到每用户缓存目录 "${XDG_CACHE_HOME:-$HOME/.cache}/use-design-md/"(不要放在用户项目目录或共享的 /tmp 中);--create-dirs 会创建目录,因此每次获取都只需一条普通的 curl 命令(在只允许运行 curl 的环境中,复合命令 mkdir …; curl … 会被拒绝)。
  2. 确保 HTTP 错误会导致失败。 使用 curl -fsSL --create-dirs -o <file> <url>。-f 会将 404/5xx 转为非零退出状态——否则,缺失 slug 时返回的一行 Not found: <slug> 正文会被当作文档。非零退出后并未成功获取文件;磁盘上的内容可能过期或不完整——不要读取。
  3. 读取文件直至末尾。 检查文件大小(wc -lc <file>),然后使用文件读取工具读取。该工具也可能限制单次读取,因此若一次读取未到末尾,就分块读取剩余内容(Claude Code:offset/limit)。看到 wc -l 报告的最后一行行号后,才算完成。如果文件读取工具要求的路径格式与 shell 输出的不同,请转换格式(Windows 上的 Git Bash:cygpath -w <file>)。

此技能引用的 references/ 文件与其放在同一目录。如果你只有此文件(例如从 getdesign.kr 的 /.well-known/agent-skills/ 加载),请以相同方式从 https://raw.githubusercontent.com/CaesiumY/ko-design-md/main/.claude/skills/use-design-md/references/<name>.md 获取这些文件。

步骤 1 — 发现:将品牌解析为 slug

curl -fsSL --create-dirs -o "${XDG_CACHE_HOME:-$HOME/.cache}/use-design-md/index.txt" https://www.getdesign.kr/llms.txt

如果此操作失败,说明你没有索引——这不属于没有匹配项。使用 references/endpoints.md 中的索引备用源;如果这些也失败,请告诉用户你无法访问目录——不要报告品牌缺失。

每个条目行的格式如下:

- [당근](https://www.getdesign.kr/services/seed-design/llms.txt): community · SEED Design — <tagline>

发布设计系统名称的条目会像上面那样将其列在类别之后;未发布设计系统名称的条目则只有类别(: finance — <tagline>)。将用户提及的内容与链接文本(名称)、设计系统名称以及 URL 中的 slug 进行匹配。多数名称为韩文,有些 slug 是设计系统名称(당근 → seed-design、구름 → vapor-ui),因此应先将英文品牌名转换为韩文名称(Karrot → 당근)。

  • 一个明确匹配项 → 步骤 2。
  • 多个可能的匹配项 → 询问用户指的是哪一个(Claude Code:AskUserQuestion)。
  • 没有匹配项 → 明确告知用户该品牌不在目录中,可以列出几个最接近类别的目录品牌,并说明添加品牌属于 design-md 技能的职责(参见范围限制)。

第 2 步 — 获取 DESIGN.md

curl -fsSL --create-dirs -o "${XDG_CACHE_HOME:-$HOME/.cache}/use-design-md/<slug>.md" https://www.getdesign.kr/services/<slug>/llms.txt
  • 404 → 该 slug 不在目录中:选择 无匹配项路径,不要猜测其他 slug。
  • 任何其他失败(网络错误、5xx、403/429)都不能说明目录中是否有该条目:尝试 references/endpoints.md 中的 GitHub raw 备用方案;如果也失败了,告诉用户你无法获取该条目——不要报告该品牌缺失。

在应用任何内容之前,先读到文档的最后一行——其中的说明承载着设计意图(注意事项、已知缺失),而这些并非仅靠设计令牌就能了解。如果需要将设计令牌作为结构化数据(以编程方式生成主题),请用相同方式获取 JSON 旁文件——它在 GitHub raw 上,不在 getdesign.kr(references/endpoints.md §3)。

第 3 步 — 应用到当前项目

开始任何编辑之前,先阅读 references/apply-guide.md 并遵循其中的说明。有三项要求绝不可省略:先处理条目的已知缺失(apply-guide §2);其注意事项和禁忌是硬性约束;完成后,在宣布工作结束前验证结果(apply-guide §5)。

范围限制

  • 不要根据当前仓库来限制适用范围——此技能可在任何地方运行。
  • 添加或编辑目录条目是 design-md 生产者技能的工作,应在 ko-design-md 仓库中进行。请停止操作并引导用户前往该仓库。
  • 不要凭空设计。 未列出的品牌在此处不可用——请如实说明,而不是为其编写 DESIGN.md,或凭记忆近似还原。对于已列出的品牌,不要编造其 DESIGN.md 中没有的值:如需扩展,请标明这是你的推断,而不是该品牌的规范。
  • 加载此技能是为了制作仅需体现品牌语气的页面(“토스 앱처럼 깔끔한 퀴즈”)?仍然要获取对应条目,不要凭记忆近似还原品牌。
  • **保持供应商中立:**不要在生成的 UI 中出现来源名称——无论是品牌还是设计系统(references/apply-guide.md §6)。

评论

支持 Markdown