LLM 친화적인 디자인 시스템 'Orbit' 구축기

섹션별 상세

LLM은 CSS 클래스를 유창하게 작성하지만, 디자인 시스템의 의도를 이해하지 못해 임의의 값이나 일관성 없는 스타일을 생성한다.

'Orbit'은 디자인 의도를 토큰화하여 'background-card'와 같이 명확한 명칭을 사용하고, 이를 통해 LLM이 스타일 값을 직접 선택하는 대신 정의된 디자인 결정을 따르도록 유도한다.

StyleX를 도입하여 타입 안전성을 확보하고, 'Box' 컴포넌트를 통해 정의된 토큰만 props로 전달받도록 설계하여 스타일의 임의성을 제거한다.

원시 HTML 태그('div', 'span' 등) 사용을 ESLint 규칙으로 금지하여, 개발자나 LLM이 디자인 시스템을 우회하는 'escape hatch'를 사용하지 못하도록 강제한다.

light-dark() CSS 함수를 활용하여 다크 모드 처리를 자동화함으로써, LLM이 테마별 스타일을 별도로 작성하다 발생하는 오류를 원천 차단한다.