<div align="center">

<a href="https://getdesign.kr"> <img src="./docs/catalog-home.png" alt="ko-design-md — 한국 서비스의 시그니처 디자인을 LLM 컨텍스트로" width="100%"> </a>

# ko-design-md

**한국 브랜드 디자인 시스템을 Stitch v0.1 마크다운으로 정리한 오픈 카탈로그**

[](./LICENSE) [](./LICENSE-CONTENT) [](https://github.com/CaesiumY/ko-design-md/actions/workflows/ci.yml) [](https://github.com/CaesiumY/ko-design-md/stargazers) [](https://github.com/CaesiumY/ko-design-md/commits/main)

**🔗 라이브 카탈로그 → [getdesign.kr](https://getdesign.kr)**

</div>

---

## ko-design-md란?

한국에서 운영되는 브랜드/서비스의 디자인 시스템(컬러·타이포그래피·컴포넌트·인터랙션 원칙)을 **Stitch v0.1** 구조화 마크다운으로 정리한 오픈 카탈로그입니다. 흩어지고, 비교하기 어렵고, 시간이 지나면 사라지는 디자인 시스템 자료를 다음 세 원칙으로 한곳에 모읍니다.

- **단일 형식** — 모든 항목이 동일한 frontmatter + 섹션 구조라 비교·검색·임베딩이 쉬움 - **자동화된 기여 흐름** — AI 코딩 에이전트용 [`/design-md` 스킬](#새-항목-기여)이 13단계 파이프라인으로 새 항목을 자동 생성 - **시각적 검증** — 항목마다 light/dark 프리뷰 HTML과 OG 이미지를 함께 보관

대상은 디자인 시스템을 **다루는** 디자이너·엔지니어, 그리고 한국 브랜드의 디자인 결정을 **연구하는** 사람입니다.

## 겉모습은 빌리되, 비즈니스는 베끼지 마세요

각 항목은 브랜드의 **시각/디자인 언어**(색·타이포·간격·컴포넌트의 *시각 패턴*)를 기술합니다. design.md를 AI 코딩 에이전트에 넣어 자기 제품을 만들 때는, 그 시각 패턴을 **자기 도메인에 맞게 번안**하세요.

- ✅ **차용**: 색 팔레트, 타이포 스케일, 간격 리듬, 컴포넌트의 시각 처리(둥글기·그림자·밀도) - ❌ **이식 금지**: 출처 브랜드의 제품 개념·플로우·카피 — 예) 토스의 송금 흐름, 배민의 ETA 의미를 성격이 다른 앱에 그대로 가져오기

`## Components`가 도메인 특화 이름(`button-cta`="구매하기", `EtaBanner`)을 쓰는 것은 출처를 정확히 기록하기 위함이지, 그 도메인을 함께 복사하라는 뜻이 아닙니다.

## 카탈로그를 코딩 에이전트에서 바로 쓰기 — `use-design-md` 스킬

호환되는 AI 코딩 에이전트라면 위 "차용" 과정을 [`use-design-md` 스킬](./.claude/skills/use-design-md/SKILL.md)로 자동화할 수 있습니다. 브랜드명만 주면 카탈로그에서 해당 `design.md`를 찾아 받아와 **지금 작업 중인 프로젝트**