저는 생계형으로 디자인 시스템을 만듭니다. 육아휴직 중 Claude Code를 깊이 파고들다가 제가 항상 갖고 싶었던 도구를 만들게 되었습니다. 이 도구는 무료이며, Claude Code 플러그인이고, 아키텍처가 흥미롭기 때문에 어떻게 구성했는지 공유하고 싶었습니다.

이것이 해결하는 문제: 디자인 시스템은 서로 일치하지 않는 두 곳에 존재합니다. 바로 Figma 파일과 코드베이스입니다. 이 둘을 동기화 상태로 유지하는 것은 전업 직업 수준의 일이 됩니다. 게다가 실제 시스템이 이를 공급해주지 않으면, 코딩 에이전트의 UI 출력은 일반적인 경향을 띨 수밖에 없습니다. 이는 의도를 따르기보다는 장인 정신을 추측하는 것에 가깝습니다.

작동 방식: /throughline:start를 입력하면 Figma와 코드베이스를 스캔한 다음, 개인화된 계획을 구축합니다. 최종 결과물은 토큰 동기화(token sync), Storybook, Chromatic CI가 구성된 GitHub의 Turborepo 모노레포에 동기화된 프로덕션급 디자인 시스템이 Figma로 구현됩니다. 빈 캔버스부터 시작하거나 기존의 복잡한 구조를 개조할 수 있습니다.

실제로 'Claude로 구축'하는 데 사용된 부분들:

1. 상태 기계로서의 스킬(Skills): 12개의 순차적 스킬과 10개의 공유 참고 문서, 그리고 메모리 역할을 하는 design-system.json 매니페스트가 있습니다. 각 스킬은 선행 조건(prerequisites)을 알고 있으며, 매니페스트를 읽어 무엇이 이미 완료되었는지 파악합니다. 두 번 실행하면 동일한 구조를 얻게 됩니다.

2. Figma 구축의 정확성을 위한 참고 문서(Reference docs): 이 부분이 가장 어려웠습니다. 에이전트가 Figma에서 제대로 작동하도록 만드는 것(토큰 바인딩, 오토 레이아웃, 인스턴스 스왑, 변형(variants), 상태 어포던스(state affordances), a11y)에는 엄청난 양의 지침이 필요했습니다. 대부분의 참고 문서는 이 컨텍스트를 유지하기 위해 존재하며, 모든 스킬이 이를 상속받습니다.

3. 비용을 위한 모델 계층화(Model tiering): 아키텍처적 결정은 가장 강력한 모델에 맡깁니다. 기계적이거나 절차적인 실행은 더 저렴한 모델의 서브 에이전트에게 분리합니다. 이것이 '멋진 데모'와 '예산 계획으로 실제로 운영할 수 있는 무언가'를 가르는 차이였습니다.

4. 인간 검토 지점(Human checkpoints): 대규모 구현에 토큰을 소모하기 전에 멈추고 확인하는 단계입니다.

당신이 디자인 결정을 내리고, 이것(플러그인)이 실제 작업을 수행하며, 매일의 변경 사항은 검토 가능한 PR로 배포됩니다. 솔직히 말씀드리자면, 아직 초기 단계입니다. Figma MCP와 콘솔 브릿지에 의존하기 때문에 설정 과정에 몇 가지 단계가 필요합니다. 구조에 대해 의견이 강한(opinionated) 편이며, 실제로 디자인 판단력을 가지고 기여할 수 있는 경우에 가장 잘 작동합니다. 이것은 디자이너라기보다는 실행자입니다. 이 플러그인을 사용해 전체 샘플 시스템(빈 캔버스에서 동기화된 빌드 준비 라이브러리까지)을 약 두 시간 만에 구축했습니다. 실제 결과물을 직접 확인하고 싶다면, 샘플 Figma 파일, 실시간 Storybook, 그리고 동기화된 리포지토리가 모두 사이트에서 연결되어 있습니다. 스킬 설정, 모델 계층화 논리, 또는 Figma MCP 처리 과정에 대해 궁금한 점이 있다면 기꺼이 답변해 드리겠습니다. 마지막 하나(Figma MCP)는 저를 거의 망하게 할 뻔했습니다. 웹사이트와 링크: radicool.studio/throughline 출처: github.com/jrpease/throughline 미디엄 아티클은 여기👇 https://medium.com/@jordanpease/i-spent-my-paternity-leave-building-an-agentic-design-team-you-can-have-one-too-62d5117077be?sharedUserId=jordanpease /u/jerpes1에 의해 제출됨 [링크] [댓글]