デザイン・トゥ・コード翻訳ツール

[デザイン仕様、ワイヤーフレーム、またはコンポーネント仕様] 技術スタック: [REACT/VUE/SVELTE/NEXT.JS/TAILWIND/ETC.] 成果物: 1. コンポーネントアーキテクチャ - コンポーネント階層ツリー - Propsインターフェース定義（TypeScript） - 状態管理戦略 - データフロー図 2. プロダクションコード - 完全なコピーペースト可能なコンポーネントコード - レスポンシブ実装（モバイルファースト） - アクセシビリティ属性（ARIAラベル、ロール、状態） - エラーバウンダリとローディング状態 - アニメーション/トランジション実装 3. スタイリング仕様 - デザイントークンマッピング付きCSS/Tailwindクラス - テーマ設定用CSS変数 - ダークモード実装 - レスポンシブブレークポイント - ホバー/フォーカス/アクティブ状態 4. デザイントークン統合 - CSS変数にマッピングされたカラートークン - タイポグラフィトークン（フォントサイズ、ウェイト、行間） - スペーシングトークン（パディング、マージン、ギャップ） - シャドウ/エレベーショントークン - ボーダー半径トークン 5. アセット最適化 - 遅延ロード付き画像コンポーネント - SVG最適化戦略 - アイコンシステム（SVGスプライトまたはアイコンライブラリ） - フォントローディング戦略 6. パフォーマンス考慮事項 - コード分割の推奨事項 - バンドルサイズ最適化 - レンダリング最適化（React.memo、useMemoなど） - 画像最適化（next/imageまたは同等のもの） 7. テスト戦略 - ユニットテストケース（React Testing Library） - ビジュアルリグレッションテストシナリオ - アクセシビリティテスト（axe-core） - レスポンシブテストケース 8. ドキュメント - 全PropsのJSDocコメント - 使用例（3バリエーション） - 推奨事項と非推奨事項 - チェンジログテンプレート デザインの意図を説明する「デザイナーズインテント」コメントを含め、特定のコード決定がデザインビジョンをどのように保持するかを説明してください。