概要
https://techblog.roxx.co.jp/entry/2025/11/17/181521
詳細内容
## Figma出力の生成コードをAIとReact原理主義で粛清するAI指示テンプレート公開：React/Tailwind/shadcn向け整形テンプレート
https://techblog.roxx.co.jp/entry/2025/11/17/181521
ROXXがFigmaから自動生成されたコードをAIとReactの原則に基づいてプロダクション品質に整形するための指示テンプレートを公開しました。
**Content Type**: Tools
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 86/100 | **Annex Potential**: 84/100 | **Overall**: 84/100
**Topics**: [[AIコーディング, Figma to Code, React開発, コード自動生成, 開発ワークフロー改善]]
本記事は、Figmaから出力される自動生成コードを、AIエージェントとReactのベストプラクティスを用いてプロダクションレベルに「粛清」する具体的な指示テンプレートと、その活用方法を詳細に解説しています。ROXXのエンジニアリングチームは、Figmaのコード出力がそのままでは実用性に欠けるという課題に直面しており、その解決策としてAIエージェント（CursorやClaudeCodeなどを想定）を用いた整形プロセスを確立しました。
なぜこのアプローチが重要なのかというと、Figmaからの出力はデザイン通りでも無駄なスタイルや構造の煩雑さがあり、手作業での修正には時間がかかり、結果的に品質の低いコードが蓄積されがちだからです。このテンプレートは、特にReact/Tailwind/shadcnスタックを利用するWebアプリケーションエンジニアにとって、開発ワークフローを劇的に効率化する実用的な価値を提供します。
公開された指示テンプレートは、以下の5つのステップで構成され、それぞれのステップに明確な「なぜ」が込められています。
1. **スタイリングの修正**: Figmaプラグインが生成する無駄なスタイル（CSSのデフォルト値と同じもの、親要素から継承されるものなど）を削除し、共通定義CSSへの置き換えを指示します。これにより、冗長なコードを排除し、コードの軽量化と保守性向上を図ります。
2. **コンポーネントライブラリへの差し替え**: Figma生成コード内に``のようなコメントでコンポーネント使用指示を埋め込むことで、AIが既存のUIコンポーネントライブラリ（例: shadcn/ui）を適切に適用するように促します。これは、デザインシステムが整備されたプロジェクトにおいて、UIの一貫性を保ちつつ開発効率を高める上で極めて重要です。
3. **変数の整理**: コンポーネントに渡される値や埋め込まれたテキストをすべてローカル変数として定義し、繰り返し構造は`map`展開に変換、そして「Reactの流儀」（Thinking in React）の原則に基づき変数を正規化します。このステップは、生成されたコードの再利用性、テストのしやすさ、そしてAPIデータとの連携のスムーズさを担保するために最も重要だと著者は強調しています。
4. **state定義とコンポーネント分割**: 再び「Reactの流儀」に基づき、適切なstate管理階層とコンポーネント分割を実施します。これにより、Reactアプリケーションの構造が論理的かつ保守しやすいものになります。
5. **Lintなど修正**: 静的解析エラーや警告の修正を指示し、コード品質の最終チェックを行います。
著者は、このテンプレートがFigmaコード出力の品質課題に対する実践的な解決策を提供し、特に「変数の整理」によって、テストファーストなコーディングやAPI連携が格段に容易になると説明しています。また、Figmaファイル側でのAutoLayoutの徹底も、AI整形を円滑に進めるための重要な事前準備として注意喚起されており、AI活用におけるデザインと開発の連携の重要性を示唆しています。