DESIGN.md

Vortex의 AI-readable 디자인 카탈로그입니다. getdesign.md 표준 9섹션을 따르며, Foundation 베이스라인과 Cals/iCignal 브랜드 오버레이를 단일 파일에 담습니다.

AI 코딩 에이전트(Claude, Cursor 등)가 이 파일을 읽으면 Vortex 스타일로 UI를 생성할 수 있는 전체 맥락을 얻습니다.

두 파일 구조

파일	용도	사용 시점
`vortex.md`	스타일 지문 (9섹션, 6 카테고리)	AI가 첫 fetch — 대부분의 생성 작업
`vortex-components.md`	전체 컴포넌트 레퍼런스	특정 컴포넌트의 variant/token 깊이 필요 시

이는 llms.txt 표준 의 llms.txt + llms-full.txt 2-layer 패턴을 디자인 시스템 도메인에 적용한 구조입니다.

AI 에이전트에서 사용하기

Cursor / Claude Code (자동 인식)

프로젝트 루트에 DESIGN.md 파일을 다운로드하면 AI가 자동으로 컨텍스트에 포함시킵니다.


npx @vortex/cli design-md

이 명령은 현재 cwd에 DESIGN.md를 쓰고, 필요하면 vortex-components.md도 함께 받습니다.

직접 URL로 fetch

AI에게 URL만 전달해도 됩니다.


https://vortexui.com/design-md/vortex.md
https://vortexui.com/design-md/vortex-components.md

라이브 프리뷰

라이트/다크 모드는 preview-dark.html에서 확인할 수 있습니다.

9섹션 개요

Visual Theme & Atmosphere — Vortex의 시각적 철학과 분위기
Color Palette & Roles — 시맨틱 토큰 + Brand Overlay 델타
Typography Rules — 폰트 패밀리, 계층, 스케일
Component Stylings — 6 카테고리 대표 컴포넌트 (Buttons / Cards / Inputs / Badges / Navigation / Distinctive)
Layout Principles — 그리드, 스페이싱, 여백 철학
Depth & Elevation — 섀도우 스케일, 반경 스케일
Do’s and Don’ts — 실전 가이드라인
Responsive Behavior — 브레이크포인트와 collapse 전략
Agent Prompt Guide — AI 에이전트용 프롬프트 예시

생성 파이프라인

@vortex/design-md 패키지가 Foundation/Cals/iCignal 소스 CSS 토큰과 CVA variant 정의를 파싱해 자동 생성합니다. 소스는 packages/design-md/src/prose/의 수작업 프로즈와 각 UI 패키지의 CSS 토큰, 두 갈래를 결합합니다.

빌드 시점: docs 사이트의 prebuild에 편승 (apps/docs/scripts/copy-design-md.js)
배포 경로: 이 페이지와 같은 도메인 /design-md/*
버저닝: 파일 상단 HTML 주석에 generated_at, source_versions 자동 삽입