Figma MCPとClaude CodeでAndroidのUI構築を高速化

echo 'export FIGMA_TOKEN="あなたのPAT"' >> ~/.zshrc
source ~/.zshrc

echo 'export FIGMA_FILE_KEY="コピーしたリンク"' >> ~/.zshrc
source ~/.zshrc

目的：
Figma MCP を使い、Figma のデザインデータを直接参照して Jetpack Compose の UI コードを生成してください。

前提：
- FIGMA_TOKEN（環境変数）
- FIGMA_FILE_KEY（環境変数）

■ デザイン情報
- Figma に存在する色・Typography のみ使用し、未定義の値は追加しない
- 以下のファイルに分割して実装
  - Color.kt
  - Type.kt
  - Theme.kt
- 上記テーマを使って Screen.kt を実装
- @Preview を追加
- 不明点は推測せず、Figma MCP が取得したデータを使用する

■ 画像アセットの扱い
- SVG の場合：
  - Figma MCP から取得したファイルを基に、正確に Android VectorDrawable（.xml）へ変換して配置
- PNG の場合：
  - Figma の Export 設定に従う  
  - Export 設定がなければ以下 5 種類の密度で PNG を生成して配置  
    - mdpi / hdpi / xhdpi / xxhdpi / xxxhdpi
- アセット名は Figma 名を Android の命名規則（lower_snake_case）へ変換して作成する

Image(
    painter = painterResource(id = R.drawable.ic_avatar_large),
    contentDescription = "メインアバター",
    modifier = Modifier
        .size(106.dp)
        .clip(CircleShape),
    contentScale = ContentScale.Crop
)

// ドライバー名
Text(
    text = driverName,
    style = KintoTheme.typography.labelLarge,
    color = KintoTheme.colors.textPrimary
)

var selectedField by remember { mutableStateOf<SelectedField>(SelectedField.BirthYear) }
// 入力フィールド
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(14.dp)
) {
    // 生年月
    InputField(
        label = "生年月",
        value = birthYear,
        isSelected = selectedField == SelectedField.BirthYear,
        onClick = { selectedField = SelectedField.BirthYear },
        modifier = Modifier.weight(1f)
    )

    // 普段の起床時刻
    InputField(
        label = "普段の起床時刻",
        value = wakeUpTime,
        isSelected = selectedField == SelectedField.WakeUpTime,
        onClick = { selectedField = SelectedField.WakeUpTime },
        modifier = Modifier.weight(1f)
    )
}

@Composable
private fun InputField(
    label: String,
    value: String,
    isSelected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(modifier = modifier) {
        // ラベル
        Text(
            text = label,
            style = KintoTheme.typography.labelMedium,
            color = KintoTheme.colors.textPrimary
        )

        Spacer(modifier = Modifier.height(8.dp))

        // 入力ボックス
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(53.dp)
                .border(
                    width = if (isSelected) 2.dp else 1.dp,
                    color = if (isSelected) KintoTheme.colors.borderFocused else KintoTheme.colors.borderDefault,
                    shape = RoundedCornerShape(8.dp)
                )
                .clickable { onClick() }
                .padding(horizontal = 16.dp),
            contentAlignment = Alignment.CenterStart
        ) {
            Text(
                text = value,
                style = TextStyle(
                    fontFamily = FontFamily.SansSerif,
                    fontWeight = FontWeight.Normal,
                    fontSize = 16.sp,
                    lineHeight = 21.sp
                ),
                color = KintoTheme.colors.textPrimary
            )
        }
    }
}