AI 에이전트가 디자인 시스템을 계속 지키게 하려면

Intent 웹사이트에서 AI 에이전트에게 버튼을 추가하라고 하면 기존 Button 구성요소와 스타일을 재사용한다. 사람이 디자인 문서를 찾아볼 필요가 없다.

이 글은 AI 에이전트가 코드 대부분을 작성하는 환경에서 디자인 시스템을 에이전트의 작업을 이끄는 지침으로 삼아야 한다는 주장이다. 여러 팀원이 각자 웹사이트를 바꾸더라도 브랜드와 디자인을 일관되게 유지하려는 팀에 참고가 될 수 있다.

AI 에이전트는 웹사이트에 새 페이지를 만들거나 기존 페이지를 수정할 수 있다. 마케팅팀이 랜딩 페이지를 추가하고, 엔지니어링팀이 문서를 만들고, 제품 관리자가 가격 페이지를 고치는 식이다. 공통 지침이 없으면 각 에이전트가 서로 다른 말투와 색상, 간격을 적용할 수 있다.

디자인 시스템을 어떻게 쓰나

이 글에서 말하는 ‘협력적 조정’은 디자인 리드와 프런트엔드 리드가 격자, 글꼴, 색상, 간격, 구성요소를 한 번 정하고 모든 팀원의 에이전트가 이를 따르게 하는 방식이다. 디자인 시스템은 웹사이트의 디자인과 프런트엔드 코드를 이끄는 지침이 된다.

Intent 웹사이트에서는 AGENTS.md 파일이 에이전트에게 전역 스타일시트의 테마 클래스와 CSS 변수를 재사용하라고 안내한다. 색상이나 글꼴, 격자 값을 각자 다시 정의하지 않도록 하는 지침이다. 전역 스타일시트에는 색상, 글꼴, 글자 크기, 반응형 격자, 밝은 테마와 어두운 테마가 디자인 토큰(사이트 전체에서 공유하는 이름 붙은 값)으로 정의돼 있다. 디자인 시스템 페이지에서는 에이전트가 이를 실제 예시로 살펴볼 수 있다.

버튼을 추가할 때는 기존 Button 구성요소와 스타일을 재사용한다. 해당 스타일은 어두운 테마에도 자동으로 맞춰진다.

사이트가 바뀌면 기준도 어떻게 갱신하나

Intent의 디자인 시스템은 처음에 Figma 명세를 바탕으로 만들어졌다. Figma와 모델 컨텍스트 프로토콜(MCP)을 연결해 명세를 코드로 자동 변환했다. 이후에는 코드가 기준이 됐고, 사이트가 바뀌면서 본문 글꼴과 반응형 레이아웃, 어두운 테마 등을 코드에서 갱신했다. 에이전트가 변경 사항을 원래 Figma 파일에 되돌려 쓰기도 했지만, 코드가 기준이므로 실제 작업에서는 그럴 필요가 없었다고 설명한다.

Sol과 Aria의 웹사이트도 같은 방식을 쓴다. 각 사이트에는 디자인 토큰과 에이전트 지침이 있고, 사이트와 같은 코드에서 만들어지는 디자인 시스템 페이지가 있다. 이 글은 이런 페이지가 사이트와 함께 바뀌기 때문에 최신 상태를 유지한다고 설명한다.

디자인 시스템 문서를 사람들이 읽게 하는 데 여러 해를 들였지만, 에이전트는 작업할 때마다 문서를 읽는다는 것이 글의 결론이다. 다만 원문은 이 사례들의 적용 범위나 유지 비용, 에이전트가 지침을 따르지 않을 때의 대응 방식은 밝히지 않는다.