create-design-md작성자 Julien Thibeaut

Create Design MD 스킬.

브랜드 및 디자인 시스템 작업을 위한 Claude Code 및 Codex skill: 기존 제품 리포지토리 또는 공개 웹사이트에서 DESIGN.md를 생성하거나 업데이트합니다.

Brand & Design Systems
DESIGN.md

ibelick/ui-skills · skills/create-design-md/SKILL.mdSKILL.md

--- name: create-design-md description: Create or update a DESIGN.md from an existing product repository or public website. Use when asked to document an interface's design language, reconstruct its visual system, extract design tokens and guidance from current evidence, or give coding agents persistent UI context. Do not modify product source or promote accidental implementation patterns into design decisions. --- ## Boundaries ## 1. Choose the mode ## Shared evidence pipeline ## 2. Trace the evidence ## 3. Decide what belongs ## 4. Write the document

업스트림 파일에서 읽은 전문 및 섹션 제목 (2026-09-14) · 전체 16,176자

01 기능

create-design-md 스킬이 Claude Code와 Codex에서 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

기존 제품을 문서화된 디자인 계약으로 전환합니다. 저장소 모드에서는 로컬 제품의 토큰, 테마, 공유 프리미티브 및 렌더링된 라우트를 감사하여 해당 제품 루트에 DESIGN.md를 작성하며, URL 모드에서는 데스크톱과 모바일 너비에서의 DOM, 계산된 스타일, 로드된 스타일시트를 바탕으로 초안을 재구성합니다.

두 모드는 역할, 값, 소스, 범위, 재현성, 신뢰도라는 하나의 근거 파이프라인과 하나의 평평한 토큰 스키마를 공유하며, css-tailwind, json-tailwind 또는 dtcg 내보내기 대상을 지원합니다. 값은 근거가 되는 소스가 명시하거나 3중 증명 게이트를 통과한 경우에만 유지되며, 문서는 린트와 내보내기가 모두 성공해야 배포됩니다. 이 작업은 DESIGN.md 외에는 어떤 것도 변경하지 않습니다.

산출물

URL 모드에서 현재 작업 공간에 작성된 재구성된 DESIGN.md 초안으로, 초안임이 표시되어 있습니다.
모드와 감사된 제품 또는 URL, 사용된 근거 소스, 문서에서 제외된 충돌 사항이나 근거 부족 영역을 나열한 보고서입니다.
문서가 반환되기 전에 반드시 통과해야 하는 최종 린트 및 내보내기 결과입니다.

예시 프롬프트 보기 ↗

작동 방식

01
모드 선택
로컬 제품 저장소를 사용할 수 있는 경우에는 저장소 모드를 사용하여 해당 제품 루트에 DESIGN.md를 작성하고, 공개 URL만 제공된 경우에는 URL 모드를 사용하여 현재 작업 공간에 재구성된 초안을 생성합니다.
02
근거 수집 및 출처 기록
모든 후보는 정규화되기 전에 소스, 범위, 재현성과 함께 기록되므로 두 모드 모두 동일한 기록 파이프라인으로 이어집니다.
03
DESIGN.md 스키마로 정규화
불확실하거나, 계약 없이 로컬에만 존재하거나, 구현과 관련이 없는 후보는 제외되며, 나머지는 표준 평면 토큰 스키마로 매핑됩니다.
04
검증을 통과한 초안만 진행
마크다운은 파싱된 프런트매터가 형식 검사를 통과한 후에만 작성되므로, 본문이 먼저 작성되고 이후에 YAML에 맞춰 수정되는 일은 없습니다.
05
린트 및 내보내기
구조적 린트가 먼저 실행된 다음, 선택한 대상으로 한 번의 호환성 내보내기가 실행되며, 채워진 모든 카테고리는 출력에 반드시 나타나야 합니다.
06
모드, 소스 및 공백 보고
보고서는 모드와 감사된 제품 또는 URL, 사용된 근거 소스, 근거 부족으로 제외된 항목, 린트 및 내보내기 결과를 명시합니다.

02 적합성 확인

create-design-md Skill 사용 시점

이러한 종류의 브랜드 및 디자인 시스템 작업일 때 Claude Code 또는 Codex에서 create-design-md 스킬을 사용합니다. 적합성과 한계는 스킬 자체 파일에서 가져왔습니다.

적합한 경우

인터페이스의 디자인 언어를 문서화하고 코드베이스의 현재 근거로부터 시각적 시스템을 재구성합니다.
작업마다 디자인 결정을 반복하는 대신 코딩 에이전트에게 지속적인 UI 컨텍스트를 제공합니다.
소스를 사용할 수 없는 공개 사이트로, DOM, 계산된 스타일 및 로드된 CSS로부터 재구성된 초안이 허용되는 경우입니다.

한계 인지하기

문서화된 디자인에 맞춰 제품 소스, 종속성 또는 구성을 편집하는 것 — DESIGN.md 파일만이 범위 내에 있습니다.
라이브 웹사이트에서 내부 토큰 이름, 컴포넌트 소유권 또는 문서화되지 않은 의도를 읽어내는 것 — URL 근거로는 이를 확립할 수 없습니다.
렌더링된 브라우저 검사 없이 작업하는 것 — 카피나 HTML로부터 추론하는 대신 스크린샷이나 소스 파일을 요청해야 합니다.
발견된 모든 토큰이나 컴포넌트를 나열하는 것 — 전수 목록 작성은 명시적으로 범위 밖입니다.

제공할 사항

어떤 제품인지, 저장소가 여러 개를 포함하는 경우사용자는 문서화 대상이 되는 배포 가능한 제품을 명시해야 하며, 소유 관계가 모호한 경우 스킬은 작성 전에 먼저 질문합니다.
공개 URL과 렌더링된 브라우저 접근URL 모드는 데스크톱과 모바일 너비에서 DOM, 계산된 스타일, 공개적으로 로드된 스타일시트를 검사합니다. 스크린샷만으로는 정확한 값을 확정할 수 없습니다.
기본값이 아닌 내보내기 대상(있는 경우)URL 출력은 사용자가 다른 대상을 지정하지 않는 한 css-tailwind를 기본값으로 사용하며, 토큰 이름은 이 대상에 대해 유효해야 합니다.

03 스킬 내부

create-design-md 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트에게 설정하는 8가지 구체적인 지시, 기본값, 제한 — 결과를 바꾸는 파일의 부분입니다.

문서만 다루기
저장소 모드는 제품 소스, 의존성, 구성 또는 생성된 파일을 변경해서는 안 되며, 우발적인 구현 패턴을 설계 결정으로 승격시켜서도 안 됩니다.
저장소 근거를 우선하기
소스를 사용할 수 있는 경우 항상 저장소 모드가 선택됩니다. 제공된 URL은 렌더링된 표현을 검증할 수 있지만 저장소 근거를 대체하지는 않습니다.
하나의 스키마, 매핑 형태만 허용
토큰 그룹은 시퀀스가 아니라 매핑이어야 하며, 두 모드 모두 동일한 플랫 토큰 이름을 사용해야 하고 두 번째 스키마를 도입해서는 안 됩니다.
작성 전에 내보내기 대상 선택하기
Tailwind v4에는 css-tailwind, Tailwind v3에는 json-tailwind, 그 외에는 dtcg를 사용합니다. 토큰 이름은 선택된 대상에 대해 유효해야 합니다.
URL 주장에 대한 세 가지 증거
URL 모드의 주장에는 관찰, 근거, 결과가 필요합니다. 이 중 하나라도 없으면 추측하는 대신 해당 주장을 생략합니다.
regex에 유효한 토큰 이름만 출력하기
출력되는 모든 토큰 이름은 ^[a-zA-Z0-9][a-zA-Z0-9-]*$와 일치해야 하며, 이를 충족하지 못하는 키는 거부되어 재작성됩니다.
단일 group-level 토큰 정규화하기
--radius와 같은 단일 소스 토큰은 rounded.base가 됩니다. sm, md, lg, xl은 유틸리티 클래스나 반복되는 값에서 도출되지 않습니다.
검증 실패 시 릴리스 없음
린트 또는 내보내기가 실패한 상태에서는 문서가 반환되지 않으며, 내보내기에서 누락된 채워진 카테고리는 스키마 실패로 처리됩니다.

04 활용하기

Claude Code 또는 Codex에 create-design-md 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자 Agent에 create-design-md 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

skills/create-design-md/SKILL.md에 대한 일반적인 skills CLI 형태이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 브랜드 및 design-system 작업 과제를 제공합니다

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Here's the repo for [product] — please document its design language in a DESIGN.md at the root. Pull the token names, typography scales and radius values out of our theme file, and leave out anything our shared components don't actually render. We ship on Tailwind v4, so keep the export compatibility in mind.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

앞서 선택한 대상으로 호환성 내보내기를 정확히 한 번 실행하고 출력을 검사합니다.
css-tailwind의 경우 colors는 --color-, family는 --font-, size는 --text-, rounded는 --radius-, spacing은 --spacing-로 매핑되는지 확인합니다. 채워진 typography 블록이 --font-나 --text-* 중 어느 것도 출력하지 않는다면 문서를 다시 작성해야 합니다.
저장하기 전에 파싱된 frontmatter를 다시 읽고, 스칼라 typography 하위 항목이나 근거 소스에 없는 rounded 키를 스스로 거부합니다.
기존 문서를 업데이트할 때는 원본 내용을 임시로 유지하고 새 파일과 비교(diff)하여, 삭제된 채택 결정 사항을 복원합니다.
테마 모드를 인코딩하기 전에 설치된 스펙을 확인하고, 모드가 지원되지 않는 경우에만 Themes 테이블로 대체합니다.

OpenDesign에서 SKILL.md 링크에서 create-design-md를 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Julien Thibeaut
Repository: github.com/ibelick/ui-skills 브랜치 main
스킬 파일: skills/create-design-md/SKILL.md 검증 시 기록된 콘텐츠 체크섬, 커밋 79081ab
License: MIT LICENSE에서 확인
리포지토리 스타: 8,402 2026-09-14에 촬영된 GitHub 스냅샷으로, 이 카탈로그에 5개의 스킬을 포함하는 전체 ibelick/ui-skills 저장소에 대한 것입니다. create-design-md에 대한 평가 또는 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

경계DESIGN.md 변경만 해당하며, 경쟁 스키마를 만들거나 발견된 모든 토큰을 쏟아내지 않습니다.
1. 모드 선택저장소 모드와 URL 모드, 각각이 증명할 수 있는 것, 먼저 물어야 할 때.
공유 증거 파이프라인두 모드 모두 준수해야 하는 6단계 기록 파이프라인과 누락 게이트.
2. 증거 추적저장소용 검사 순서; URL용 샘플링 목록, 증거, 증거 원장.
3. 포함할 내용 결정스키마 구성, 내보내기 대상 선택, 테마 처리, 서술로 주장할 수 있는 내용.
4. 문서 작성최소한의 프런트매터, 허용된 섹션 순서, 저장 전 삭제해야 할 항목.
5. 검증린트, 단일 내보내기, 카테고리 확인, 업데이트된 문서와의 비교(diff).
6. 보고반환할 내용: 모드, 검사한 대상, 소스, 누락 사항, 검증 결과.

스킬 자체 설명

"기존 제품 저장소 또는 공개 웹사이트에서 DESIGN.md를 생성하거나 업데이트합니다. 인터페이스의 디자인 언어를 문서화하거나, 시각적 시스템을 재구성하거나, 현재 증거에서 디자인 토큰과 가이드를 추출하거나, 코딩 에이전트에게 지속적인 UI 컨텍스트를 제공하도록 요청받았을 때 사용합니다. 제품 소스를 수정하거나 우발적인 구현 패턴을 디자인 결정으로 승격하지 마십시오."

SKILL.md의 전문 설명입니다. 전체 파일은 약 16,176자입니다. GitHub에서 전체 파일 읽기.

Create Design MD

실제 브랜드 및 디자인 시스템 작업에 create-design-md 실행하기.

OpenDesign을 다운로드하고, SKILL.md 링크에서 create-design-md를 가져오고, 위의 프롬프트를 붙여넣고, 결과 전에 계획을 읽으십시오.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/ibelick/ui-skills --skill create-design-md

create-design-md 스킬이 Claude Code와 Codex에서 하는 일

스킬 자체의 표현으로

작동 방식

create-design-md Skill 사용 시점

적합한 경우

한계 인지하기

제공할 사항

create-design-md 스킬이 Claude Code와 Codex에 부여하는 규칙

문서만 다루기

저장소 근거를 우선하기

하나의 스키마, 매핑 형태만 허용

작성 전에 내보내기 대상 선택하기

URL 주장에 대한 세 가지 증거

regex에 유효한 토큰 이름만 출력하기

단일 group-level 토큰 정규화하기

검증 실패 시 릴리스 없음