Design Token 기반 제약 설계를 통한 AI UI 생성 일관성 확보

Context

AI 도구를 통한 UI 코드 생성 시 개발자마다 혹은 화면마다 서로 다른 Pixel 값과 Hex Color가 적용되는 일관성 결여 문제 발생. 무제한적인 수치 입력 방식이 AI의 무작위적인 선택을 유도하여 유지보수 비용을 증가시키는 구조적 한계 노출.

Technical Solution

• Pixel 단위의 하드코딩을 배제하고 유한한 집합의 Named Token으로 시각적 속성을 제한하는 Token-driven 설계 도입
• TypeScript Union Type을 통한 속성 제약으로 AI가 정의된 Vocabulary 범위 내에서만 값을 선택하도록 강제
• OKLCH 색채 과학 기반의 salt-theme-gen을 구축하여 단일 Hex Color로부터 수학적으로 정밀한 Light/Dark 테마 자동 생성
• intent, size, variant라는 통일된 Prop 컨벤션을 119개 컴포넌트에 일괄 적용하여 AI의 학습 및 예측 가능성 극대화
• README와 Type 정의서를 AI의 Style Guide로 활용하여 프롬프트 엔지니어링 없이도 일관된 코드 생성 유도