Aurelius: 48개의 Claude 코드 에이전트와 Figma-to-React 파이프라인으로 구축된 React 프레임워크

Aurelius의 기능

Aurelius는 Figma 디자인에서 React 앱을 자율적으로 구축하기 위해 계층적으로 구성된 Claude Code 에이전트를 사용하는 React 프레임워크입니다. 단일 AI 에이전트가 코드를 생성하는 대신, 전체 앱 구축을 위해 서로 반복적으로 검증하는 여러 에이전트를 사용합니다.

에이전트 아키텍처와 파이프라인

이 프레임워크는 엔지니어링, 디자인, 테스팅, 제품, 마케팅, 운영 분야에 총 48개의 에이전트가 있습니다. 이러한 에이전트는 사용자가 수행하는 작업에 따라 Claude Code가 자동으로 선택하며, 모든 에이전트 정의는 .claude/ 디렉토리에 저장되어 사용자가 읽고, 수정하거나 자신의 프로젝트에 재사용할 수 있습니다.

감독 에이전트는 파이프라인을 특정 요구사항으로 통제합니다:

• 컴포넌트 작성 전에 테스트가 작성되어야 함(TDD는 필수이며 선택 사항이 아님)
• 시각적 QA는 2% 임계값을 가진 픽셀 차이 비교를 사용
• 품질 게이트는 커버리지, TypeScript, Lighthouse 점수, 디자인 토큰 준수를 확인한 후에만 통과 허용

파이프라인은 10단계로 구성됩니다:

1. Figma 탐색
2. 디자인 토큰 추출
3. TDD 게이트
4. 컴포넌트 구축
5. 픽셀 차이 시각적 QA(최대 5회 반복 루프)
6. Playwright E2E 테스트
7. 크로스 브라우저 스크린샷
8. 품질 게이트
9. 반응형 검사
10. 빌드 리포트

기술적 구현

소스에서 확인한 몇 가지 기술적 세부사항:

• 단위/컴포넌트 테스트에 Vitest + React Testing Library 사용
• E2E 및 크로스 브라우저 테스트에 Playwright 사용
• 시각적 차이 비교에 Pixelmatch 사용
• 디자인 토큰은 잠금 파일에 고정되어 하드코딩된 값이 컴포넌트에 유출되지 않음
• 모든 설정은 .claude/pipeline.config.json에서 구성 가능

이 프레임워크는 앱 유형 인식을 갖추고 있으며, 표준 웹 앱, Chrome 확장 프로그램(manifest.json 읽음), 또는 PWA를 구축 중인지 감지하여 E2E 전략을 조정합니다. 제작자는 파이프라인을 재구성하지 않고 Webflow 앱을 Chrome 확장 프로그램으로 포팅하는 데 사용했습니다.

프로젝트 현황

Aurelius는 MIT 라이선스로 118개의 커밋이 있습니다. 전체 프레임워크는 Claude Code를 사용하여 약 2주 만에 구축되었으며, 이는 자동화하는 워크플로우를 입증합니다. v2.0.0까지의 마일스톤이 계획되어 있습니다.