KLIC 디자인 시스템 소개
작은 디테일에서 완성된 화면까지. KLIC은 7 디멘션과 4계층 토큰으로 컴포넌트·블록·모션 레시피·설계 기준을 연결하는 디자인 시스템입니다.
제공 형태와 소스 전달
KLIC은 7개 디자인 디멘션과 4계층 토큰을 공통 기반으로 씁니다. 적용 기준은 다릅니다. 컴포넌트는 개별 조작 요소, 블록은 업무 흐름, 모션은 시간에 따른 전환을 다룹니다. 공개 npm: [email protected]. 소스 후보 [email protected]는 미발행이며 [email protected]가 현재 발행본입니다.
실행 247개 · 준비 80개 · 전체 327개
컴포넌트 109개와 실행 블록 247개는 CLI plan/add로 독립 참고 작업 폴더 356개를 제공합니다. 모션 884개는 source id + pattern 출처와 보존된 고지를 포함한 KLIC 각색 패턴이며 상세 화면·API·CLI motion get에서 HTML/CSS/JavaScript/React 소스를 제공합니다(CSS/React 예제 포함). 미리보기와 JavaScript/React 구현은 같은 런타임을 사용하며 Canvas 재생은 CSS만으로 재현되지 않습니다. 패키지는 components/*·blocks/*·motions/*를 제공하고, 모션 수는 작업 폴더 수와 별도로 집계합니다. 소스 후보 [email protected]는 미발행이며 [email protected]가 현재 발행본입니다.
모션 미리보기·CSS/React 코드 ↗출처·라이선스 안내 · Figma manifest · Figma 이관 가이드
Figma 자료는 수동 전달용입니다. 자동 동기화와 공개 KLIC 저장소 주소는 현재 제공 계약에 등록되어 있지 않습니다.
버전·배포·기준 리비전의 차이현재 제공하는 것
- 컴포넌트
- 109
- 실행 블록 · 변형 포함
- 247
- 공유 구현 모듈
- 61
- 다이어그램 실행 예제
- 28
- CSS/React 모션 레시피
- 884
- CLI 소스 작업 폴더
- 356
항목 수는 현재 공개 레지스트리에서 가져옵니다. 실행 블록에는 같은 구현의 변형이 포함됩니다. 모션은 CSS/React 레시피로 별도 집계하며, 준비 중인 항목은 실행 예제·소스 작업 폴더에서 제외합니다.
원본 레지스트리 확인 ↗7 디멘션
size · typography · color · layout · spacing · surface · interaction
4 계층
Primitive → Brand → Semantic → Component
klic.primitive → klic.brand → klic.semantic → klic.component제공 범위
실행 예제, 프레임워크별 제공 범위, 의존성, DESIGN.md, 토큰 매핑과 소스 계획을 제공합니다. 웹·MCP·CLI·API가 같은 공개 항목 ID를 사용합니다.
MCP · CLI · API ↗제품에서 구현할 것
예제의 데이터와 동작은 로컬 데모입니다. 인증, 서버 권한, DB, 실제 외부 서비스와의 연결 및 운영 접근성 검수는 제품에 맞게 별도 구현·검증해야 합니다. 파일별 라이선스를 유지하세요.
접근성·상태 검수 가이드 ↗자주 묻는 질문
npm으로 설치하는 라이브러리인가요?
[email protected]는 미발행 소스 후보이며 exports는 tokens, theme, motion, motions/runtime, motions/runtime.css, components, blocks, Agent Skill, CSS, TypeScript, CLI입니다. 확인된 공개 발행본: [email protected]. 소스 체크아웃에서 bun run pack:npm를 실행한 뒤 ./artifacts/npm의 tarball로 후보를 검증하세요.
KLIC은 무엇인가요?
7 디멘션과 4계층 디자인 토큰을 바탕으로 컴포넌트, 실행 블록, CSS/React 모션 레시피, 사용 원칙과 소스 전달 경로를 제공하는 디자인 시스템입니다.
어떤 AI와 함께 쓸 수 있나요?
설계 요청서를 복사하거나 Markdown으로 내려받아 텍스트를 받는 AI에 전달할 수 있습니다. URL 읽기와 MCP 지원은 사용 중인 제품에 따라 다릅니다.
실제 제품에 바로 연결되나요?
실행 예제는 샘플 데이터를 사용하는 로컬 동작입니다. 인증, 서버 권한, 데이터베이스와 외부 서비스 연동은 제품에서 별도로 구현해야 합니다.
어떤 소스를 받을 수 있나요?
각 항목에서 실제 프레임워크, 의존성, DESIGN.md와 소스 계획을 확인할 수 있습니다. 원본은 파일별 라이선스를 유지하며, 모든 예제가 모든 프레임워크에 제공되는 것은 아닙니다.