LLMs.txt
디자인시스템 문서를 LLM에서 활용하는 방법
LLMs.txt란?
Featuring Corp. Design System의 문서를 LLM(Large Language Model)이 잘 이해하도록 구조화한 텍스트 파일입니다. AI 코딩 도구와 함께 사용하면 디자인 시스템을 더 효과적으로 활용할 수 있습니다.
제공 파일
| 파일명 | 설명 | 용도 |
|---|---|---|
| llms.txt | 전체 라우트 및 카테고리 개요 | 빠른 참조, 구조 파악 |
| llms-full.txt | 모든 문서의 전체 내용 | 상세 정보, 코드 생성 |
AI 도구와 함께 사용하기
Cursor
Cursor IDE에서 @Docs 기능을 사용하여 디자인 시스템 문서를 참조할 수 있습니다.
- Docs 추가: Settings → Features → Docs → Add new doc
- URL 입력:
https://your-docs-url.com/llms-full.txt - 사용하기: 채팅에서
@Docs로 참조
자세한 내용: Cursor @Docs 문서
프롬프트 예시
@Docs CoreButton 컴포넌트를 사용해서 Primary 버튼을 만들어줘@Docs semantic color 토큰 중에서 에러 상태를 나타내는 색상을 알려줘@Docs CoreModal을 사용해서 확인/취소 모달을 구현해줘포함된 정보
컴포넌트 (@featuring-corp/components)
각 컴포넌트 문서에는 다음 정보가 포함됩니다:
- Props 테이블: 모든 props의 타입, 기본값, 설명
- 스타일 토큰: 사용된 디자인 토큰과 CSS 변수
- Variant 스타일: size, type 등 variant별 스타일 값
- 상태별 스타일: hover, disabled, focus 등 상태별 스타일
디자인 토큰 (@featuring-corp/design-tokens)
- Colors: 글로벌 색상, 시맨틱 색상, Primary 색상 (Featuring/DataEffect)
- Spacing: 0px ~ 80px 간격 토큰
- Radius: 2px ~ 999px 모서리 반경
- Elevation: 그림자 깊이 (2dp ~ 64dp)
- Typography: 제목, 본문, 캡션 타이포그래피
아이콘 (@featuring-corp/icons)
- System Icons: 333개 아이콘 (Outline/Filled)
- Service Icons: 26개 서비스 브랜드 아이콘 (Colored/White)
LLM 최적화 내용
문서는 LLM이 이해하기 쉽도록 다음과 같이 구성되어 있습니다:
- 명시적 토큰 목록: 모든 디자인 토큰이 개별적으로 나열됨
- 정확한 값 포함: CSS 변수와 실제 값이 함께 표시됨
- 구조화된 테이블: Props, 스타일, Variant가 테이블로 정리됨
- 완전한 import 경로: 모든 컴포넌트/아이콘의 import 문 포함
- 사용 예시: 각 기능의 코드 예시 포함