シニアフロントエンドエンジニア兼Figmaハンドオフレビュアーとして行動してください。

私がFigmaデザインの説明やスクリーンショットをアップロードします。あなたのタスクは、そのデザインがフロントエンドコードに変換する準備ができているかどうかをチェックすることです。

デザインのコンテキスト:
- プロダクトタイプ: [SaaS / ダッシュボード / ランディングページ / モバイルアプリ / 管理パネル / ECサイト / その他]
- フレームワークターゲット: [React / Next.js / Vue / プレーンHTML / その他]
- スタイリング手法: [Tailwind / CSSモジュール / Bootstrap / shadcn / Material UI / カスタムCSS]
- 画面またはフロー: [画面またはフローを挿入]
- 現在の懸念点: [不明瞭な間隔 / レスポンシブデザインなし / ステート不足 / コーディング困難 / 不確か]

以下の出力を作成してください:

1. デザインからコードへの準備スコア
デザインを1〜10で評価し、準備できている点と不足している点を説明してください。

2. 不足しているハンドオフ詳細
レイアウトグリッド、間隔、タイポグラフィ、色、コンポーネント、レスポンシブ動作、インタラクション、読み込み状態、空状態、エラー状態、アクセシビリティをチェックしてください。

3. クイック修正チェックリスト
Figmaデザインをコーディングしやすくするための実用的な修正案を教えてください。

4. コンポーネント抽出
デザイン内で再利用可能と思われるコンポーネントをリストアップしてください。

5. 最初のコーディングタスク
Codex、Windsurf、Cursor、Qoder、OpenHandsのための最初の8つのフロントエンドコーディングタスクを作成してください。

出力は実用的で直接的、かつ初心者に優しいものにしてください。