MySwallow/flutter-visual-loop

flutter-visual-loop は何をしますか？

Claude Code を使用して、Figma/PNG から Flutter UI への復元を自動化するループ。デバッグ専用の HTTP 制御 SDK と Claude Code スキルを含みます。

概要

このスキルは、Figma や PNG 画像などのビジュアルデザインを Flutter の UI コードに自動変換するためのワークフローを提供します。Claude Code が中心となり、以下の機能を実行します。

• Figma デザインの解析: Figma の API からデザインデータを取得し、Flutter ウィジェットに変換します。
• PNG 画像からの UI 生成: スクリーンショットやデザイン画像を入力として、対応する Flutter コードを生成します。
• 自動復元ループ: デザインの変更を検出し、コードを自動的に更新して同期を維持します。
• デバッグ HTTP 制御 SDK: 開発中の UI 状態を外部から操作可能にする HTTP エンドポイントを提供します。

使用方法

1. claude.md にこのスキルの設定を追加します。
2. Figma のアクセストークンや画像ファイルへのパスを環境変数で指定します。
3. Claude Code を起動し、例えば「Figma デザインから Flutter コードを生成して」と指示します。
4. スキルが自動的にループを開始し、デザインとコードの同期を維持します。

設定

スキルを使用するには、以下の環境変数を設定します。

• FIGMA_ACCESS_TOKEN: Figma API のアクセストークン
• FLUTTER_PROJECT_PATH: 対象の Flutter プロジェクトのパス
• DEBUG_HTTP_PORT: デバッグ HTTP サーバーのポート番号（デフォルト: 8080）

デバッグ HTTP 制御 SDK

デバッグビルドでのみ有効な HTTP エンドポイントを使用して、Flutter アプリの UI 状態を外部から制御できます。

• GET /debug/status: 現在の UI 状態を取得
• POST /debug/refresh: UI を強制リフレッシュ
• POST /debug/update: 特定のウィジェットのパラメータを更新

例

// 生成された Flutter コードの例
import 'package:flutter/material.dart';

class GeneratedUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          Text('Hello from Figma!', style: TextStyle(fontSize: 24)),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {},
            child: Text('ボタン'),
          ),
        ],
      ),
    );
  }
}

注意事項

• このスキルはデバッグ環境を前提としており、本番ビルドでは HTTP 制御 SDK は無効化されます。
• Figma のデザイントークンは環境変数で管理し、コードに直接埋め込まないでください。
• 自動生成されたコードは必ずレビューし、適宜手動で調整してください。