アウレリウス：48のクロードコードエージェントと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で設定可能です

このフレームワークはアプリタイプを認識し、標準的なWebアプリ、Chrome拡張機能（manifest.jsonを読み取る）、またはPWAのいずれを構築しているかを検出し、それに応じてE2E戦略を調整します。作成者は、パイプラインを再設定することなく、WebflowからChrome拡張機能にアプリを移植するためにこれを使用しました。

プロジェクト状況

AureliusはMITライセンスで、118のコミットがあります。このフレームワーク全体は約2週間でClaude Codeを使用して構築され、自動化するワークフローを実証しています。マイルストーンはv2.0.0まで計画されています。