Pencil 제작기 (2): AI 디자인 하네스 만들기

요약

Pencil 제작기는 AI 에이전트가 완성도 높은 제품 디자인을 만들 수 있도록 기획, 디자인, 리뷰 단계별로 역할을 나누어 수행하는 'AI 디자인 하네스'의 설계 과정을 다룹니다.
디자인 시스템의 효율적인 전달을 위해 컴포넌트 정보를 정적 파일로 정리하고, 로컬 에이전트와 Slack의 Pencil Hermes Agent로 사용 범위를 확장하고 있습니다.

AI 에이전트에게 디자인 시스템을 알려주는 것만으로 완성도 높은 제품 디자인을 만들 수 있을까? 라는 질문에서 시작
DESIGN.md는 색상·타이포그래피·간격 같은 디자인 토큰과 레이아웃 원칙, 컴포넌트 사용법 등을 에이전트에게 전달할 수 있지만, 어떤 정보를 먼저 보여주고 어떻게 조합할지까지 보장하지는 못함
같은 디자인 시스템과 컴포넌트를 사용해도 정보의 우선순위, 시선의 흐름, 비례와 밀도에 따라 결과물의 완성도가 달라지는 문제를 발견
이를 해결하기 위해 Pencil의 작업 과정을 기획 → 디자인 → 리뷰로 나누고, 각 단계에서 다른 Skill이 역할을 맡도록 하는 AI 디자인 하네스를 설계
기획 단계에서는 화면의 목적과 사용자가 해야 할 일, 정보의 우선순위를 정하고, 디자인 단계에서는 이를 디자인 시스템과 컴포넌트로 구현하며, 리뷰 단계에서는 실제 결과물을 보며 시각적 리듬·강조·사용성 등을 검토
사람이 “뭔가 어색하다”고 느끼는 감각을 그대로 전달하는 대신, 왜 어색한지 → 어떤 요소의 관계가 문제인지 → 어떻게 수정해야 하는지를 구체적인 지침으로 바꾸어 Skill에 반영
Figma MCP를 사용할 때마다 디자인 시스템 전체 맥락을 다시 가져오는 비효율을 줄이기 위해, 컴포넌트의 key와 속성 및 사용 의도를 정적 파일로 미리 정리해 필요한 정보만 에이전트가 활용하도록 구성
현재는 로컬 에이전트에서 깊은 디자인 작업을 수행하고, Slack에서는 가벼운 아이디어를 빠르게 시각화할 수 있도록 Pencil Hermes Agent로 사용 범위를 확장하는 중