실행 플레이북

AI-First 디자인 시스템은 "정답 설계"보다 실행 루프가 먼저입니다. 이 문서는 이미 디자인 시스템 경험이 있는 팀이 0 -> 1을 빠르게 통과하기 위한 플레이북입니다.

목표(Definition of Done)

아래 5가지를 만족하면 "AI가 디자인 시스템을 제대로 쓸 수 있는 상태"에 도달합니다.

1. 토큰이 단일 소스로 관리되고(Ch1), 코드/문서로 배포된다.
2. 핵심 컴포넌트 5~10개가 명세 기반으로 구현되어 있다(Ch2).
3. 접근성 규칙이 컴포넌트에 내장되어 있고(Ch3), 자동 검증 루틴이 있다.
4. AI가 참고할 수 있는 문서/예제가 구조화되어 있다(Ch4, Ch7).
5. 변경 관리와 품질 게이트가 운영된다(Ch12).

1주차: 토큰(Ch1)부터 고정

토큰이 흔들리면 컴포넌트/문서/AI 프롬프트가 전부 같이 흔들립니다.

• 토큰 계층 설계: /books/design-systems-ai/token-architecture

1주차 산출물

• 토큰 분류 체계(semantic vs base) 문서 1개
• 토큰 JSON(또는 TS) 파일 + 빌드/배포 파이프라인 1개
• “하드코딩 금지” 규칙(린트/리뷰) 1개

2주차: 컴포넌트 명세 + 접근성(Ch2~3)

2주차는 "몇 개를 만들었는가"보다 명세가 일관되는가가 더 중요합니다.

• 컴포넌트 명세: /books/design-systems-ai/component-spec
• 접근성 내장: /books/design-systems-ai/accessibility

2주차 산출물

• Button, Input, Select, Dialog, FormField 같은 코어 5개
• 각 컴포넌트에:
  • Props 스키마(타입 + 제약 + 기본값)
  • 상태 모델(loading/disabled/error 등)
  • 접근성 규칙(ARIA/키보드/focus)

3주차: AI가 읽는 문서(Ch4, Ch7)

AI가 잘 쓰는 디자인 시스템은 "설명"보다 예제/제약이 잘 정리되어 있습니다.

• 프롬프트 인터페이스: /books/design-systems-ai/prompt-interface
• 컨텍스트 주입: /books/design-systems-ai/context-injection

3주차 산출물

• “컴포넌트 카탈로그” 1개(검색 가능):
  • 이름/의도/금지 패턴/필수 접근성/예제
• “컨텍스트 팩” 1개:
  • 토큰 맵(색/타이포/간격)
  • 컴포넌트 목록 + 사용 금지 규칙
  • 대표 UI 패턴(폼/테이블/모달)

4주차: 품질 게이트 + 변경 관리(Ch11~13)

AI가 코드를 생성하기 시작하면, 품질 저하는 “기술 부채”가 아니라 “운영 부채”로 누적됩니다.

• 워크플로우: /books/design-systems-ai/workflow-strategies
• 마이그레이션: /books/design-systems-ai/migration
• 거버넌스: /books/design-systems-ai/governance

4주차 산출물

• Golden Prompt Suite(대표 프롬프트 세트) 10~20개
• Record/Replay(기록/재생) 검증 루틴 1개
• RFC/PR 프로세스 + 버저닝 규칙 1개

추천 폴더 구조(예시)

design-system/
├── tokens/            # 단일 소스(semantic/base)
├── components/        # 구현(명세 기반)
├── docs/              # 사람용 문서(검색/예제)
└── ai/
    ├── cases/         # Golden prompts 입력
    ├── fixtures/      # record 출력(코드/스크린샷)
    └── assertions/    # 검증 로직(타입/a11y/규칙)