Aurelius: Ein React-Framework, entwickelt mit 48 Claude Code Agents und einer Figma-zu-React-Pipeline

Was Aurelius macht

Aurelius ist ein React-Framework, das hierarchisch organisierte Claude-Code-Agenten nutzt, um autonom React-Apps aus Figma-Designs zu erstellen. Anstatt dass ein einzelner KI-Agent Code generiert, verwendet es mehrere Agenten, die sich gegenseitig zur Iteration zwingen, um vollständige App-Builds zu erstellen.

Agenten-Architektur und Pipeline

Das Framework verfügt insgesamt über 48 Agenten in den Bereichen Engineering, Design, Testing, Produkt, Marketing und Operations. Diese Agenten werden von Claude Code automatisch basierend auf Ihrer Tätigkeit ausgewählt, und alle Agentendefinitionen werden in .claude/ gespeichert, sodass Sie sie für Ihre eigenen Projekte lesen, ändern oder wiederverwenden können.

Überwachende Agenten steuern die Pipeline mit spezifischen Anforderungen:

• Tests müssen vor Komponenten geschrieben werden (TDD ist verpflichtend, nicht optional)
• Visuelle QA verwendet Pixel-Differenz-Vergleich mit einer 2%-Schwelle
• Qualitätskontrollen prüfen Abdeckung, TypeScript, Lighthouse-Scores und Design-Token-Compliance, bevor etwas durchläuft

Die Pipeline umfasst 10 Phasen:

1. Figma-Erkennung
2. Design-Token-Extraktion
3. TDD-Kontrolle
4. Komponenten-Erstellung
5. Pixel-Differenz visuelle QA (bis zu 5 Iterationsschleifen)
6. Playwright E2E-Tests
7. Cross-Browser-Screenshots
8. Qualitätskontrolle
9. Responsive-Checks
10. Build-Bericht

Technische Umsetzung

Einige technische Details aus der Quelle:

• Verwendet Vitest + React Testing Library für Unit-/Komponententests
• Playwright für E2E- und Cross-Browser-Tests
• Pixelmatch für visuelle Differenzprüfung
• Design-Tokens sind in einer Lockfile gesperrt, damit keine hartcodierten Werte in Komponenten gelangen können
• Alles ist in .claude/pipeline.config.json konfigurierbar

Das Framework verfügt über App-Typ-Erkennung und kann feststellen, ob Sie eine Standard-Web-App, eine Chrome-Erweiterung (liest manifest.json) oder eine PWA erstellen, und passt die E2E-Strategie entsprechend an. Der Ersteller nutzte es, um eine App von Webflow zu einer Chrome-Erweiterung zu portieren, ohne die Pipeline neu zu konfigurieren.

Projektstatus

Aurelius ist unter MIT-Lizenz mit 118 Commits verfügbar. Das gesamte Framework wurde in etwa zwei Wochen mit Claude Code erstellt, was den Workflow demonstriert, den es automatisiert. Meilensteine sind bis v2.0.0 geplant.