프롬프트 한 줄로 '당근스러운 화면'을 만드는 Kraft, 디자인 시스템과 AI의 만남

Kraft는 초기 웹 기반 어드민(Admin) 형태로 시작하여, 빠른 화면 생성 및 공유를 지원했다. 하지만, 사용자 맥락(Context) 접근의 한계로 인해 CLI 형태로 전환, 로컬 환경에서의 확장성(Extensibility)을 확보했다. 최종적으로 에이전트(Agent) 형태로 발전하여, 의사결정 자동화(Decision Automation)를 통해 디자인 시스템 SEED의 규칙을 준수하는 화면 생성을 목표로 한다.

Kraft는 프롬프트(Prompt)와 코드(Code) 사이에 DesignSpec JSON이라는 중간 표현을 도입하여, 설계 의도(Design Intent)의 추적성(Traceability)을 확보했다. DesignSpec은 컴포넌트 선택, 토큰 적용, 레이아웃 구조 등 디자인 시스템의 규칙(Design System Rules)을 명시하며, 코드 수정 시 DesignSpec을 먼저 수정하고 코드를 재생성하는 방식으로 수정의 정밀함(Precision of Modification)을 제공한다.

Kraft는 디자인 시스템의 규칙을 스킬(Skill)이라는 마크다운 모듈로 분리하여, 유지보수성(Maintainability)을 향상시켰다. 또한, 11개의 자동 평가 기준(Scorer)을 갖춘 Eval 시스템을 통해 생성된 코드의 품질을 평가하고, 일관된 품질(Consistent Quality)을 유지한다. 코드 기반 7개, LLM 기반 4개의 평가 기준을 통해 디자인 시스템 준수 여부를 검증한다.

Kraft는 크로스세션 디자인 메모리를 통해 에이전트가 이전 세션에서 내린 결정을 기억하고, 다음 세션에 반영하여 학습(Learning) 기능을 제공한다. Decision Log를 누적하고, 반복되는 패턴을 자동으로 도메인별 디자인 원칙으로 승격시켜, 지속적인 개선(Continuous Improvement)을 가능하게 한다. LibSQL 기반 메모리 스토어를 통해 서버 재시작 시에도 작업의 연속성을 유지한다.

Kraft는 실무 워크플로우(Workflow)에 자연스럽게 통합되어, 디자이너와 개발자가 사용하는 기존 흐름에 녹아들도록 하는 것을 목표로 한다. Figma 연동, PR 리뷰 단계에서의 SEED 준수 여부 자동 확인 등 워크플로우 통합(Workflow Integration)을 위한 노력을 기울이고 있다. 또한, 사용자들의 디자인 결정을 DB로 축적하여, 학습형 에이전트(Learning Agent)를 구현하고, 팀의 디자인 의사결정이 누적되는 시스템을 구축하고자 한다.