Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By clearclown
Convert Figma designs to Flutter widgets through a TDD pipeline with design token extraction and golden test validation
npx claudepluginhub clearclown/figma2flutterConvert Figma IR JSON to Flutter widget code via TDD pipeline
Run or update golden tests for generated Flutter widgets.
Sync design tokens from Figma IR to Dart theme classes
Validate that generated Flutter widget code correctly implements the Figma design.
Verify Flutter output matches Figma design using Claude Vision
You are an autonomous Figma-to-Flutter conversion agent. Convert Figma design IR JSON into production-quality Flutter widget code through a strict TDD pipeline.
You are a visual consistency validation agent for Flutter golden testing. Ensure generated widgets visually match their Figma design specifications.
Compares Figma reference screenshots with Flutter golden images using Claude Vision to identify visual differences and suggest fixes
This skill should be used when the user asks to "extract tokens", "update theme", "sync design tokens", "generate dart theme", "figma tokens to dart", "create color palette", "typography scale", or mentions design token JSON, ThemeData, ThemeExtension, DesignTokens class, or updating the Dart theme from Figma exports.
This skill should be used when the user asks to "convert figma to flutter", "generate flutter code from figma", "figma to dart", "convert design to widget", "generate widget from design", "figma codegen", "IR to flutter", or mentions converting Figma designs, nodes, or components into Flutter widgets. Provides the complete pipeline for transforming Figma plugin IR output into production-quality Flutter code.
This skill should be used when the user asks to "run golden tests", "update goldens", "visual regression", "golden test failing", "capture golden image", "compare screenshots", or mentions golden testing, visual comparison, or widget screenshot testing for Flutter.
Visual verification of Flutter output against Figma reference screenshots using Claude Vision
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Flutter UI design and implementation agents. Includes UI Designer (design analysis), UI Implementer (code generation), UI Comparison (pixel-perfect validation), and Design Iteration Coordinator (complete design-to-implementation workflow).
Flutter app development with widget creation and platform channels
Use this agent when you need expert assistance with Flutter mobile development tasks, including code analysis, widget creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a Flutter app and faces issues with navigation. user: 'My Navigator.push isn't updating the UI correctly when moving to a new screen' assistant: 'Let me use the flutter-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a Flutter-specific navigation issue, use the flutter-dev agent to provide expert guidance on Navigator problems.</commentary></example> <example>Context: User wants to create a custom widget that aligns with their app's design system. user: 'I need to create a custom button widget that matches our app's design system' assistant: 'I'll use the flutter-dev agent to create a button widget that aligns with your existing codebase structure and design patterns' <commentary>The user needs a Flutter widget that follows existing patterns, so use the flutter-dev agent.</commentary></example>
Best-practice skills for Flutter and Dart covering accessibility, BLoC, testing, theming, navigation, security, internationalization, and architecture — plus automated dart analyze and format hooks.
Flutter MCP toolkit for Claude Code: inspect, live-edit, and interact with running Flutter apps via the Dart VM Service. Bundles skills, a subagent, and MCP server registration.
Use this agent when you need expert assistance with Flutter mobile development tasks, including code analysis, widget creation, debugging, performance optimization, or architectural decisions. Examples: <example>Context: User is working on a Flutter app and faces issues with navigation. user: 'My Navigator.push isn't updating the UI correctly when moving to a new screen' assistant: 'Let me use the flutter-dev agent to analyze your navigation setup and provide a solution' <commentary>Since this is a Flutter-specific navigation issue, use the flutter-dev agent to provide expert guidance on Navigator problems.</commentary></example> <example>Context: User wants to create a custom widget that aligns with their app's design system. user: 'I need to create a custom button widget that matches our app's design system' assistant: 'I'll use the flutter-dev agent to create a button widget that aligns with your existing codebase structure and design patterns' <commentary>The user needs a Flutter widget that follows existing patterns, so use the flutter-dev agent.</commentary></example>
Has parse errors
Has parse errors
Some configuration could not be fully parsed
Some configuration could not be fully parsed
Share bugs, ideas, or general feedback.
Figma デザインを Flutter ウィジェットコードに変換する デザイン忠実性保証システム。
Figma Dev Mode のコード生成プラグインとして動作し、IR (Intermediate Representation) を介した構造的変換と、3層の検証パイプラインでピクセル単位の忠実性を保証します。
FIGMA PLUGIN (Dev Mode)
│
├── Node Extractors (async) → IR JSON (構造データ)
│ ├── style, layout, text
│ ├── token (color, typography)
│ ├── vector (SVG export)
│ └── screenshot (PNG @2x)
│
├── IR → Flutter/Dart Compiler → Widget Code
│ ├── container-emitter (RECTANGLE → Container)
│ ├── text-emitter (TEXT → Text/RichText)
│ ├── flex-emitter (FRAME → Row/Column/Wrap)
│ ├── stack-emitter (GROUP/FRAME(NONE) → Stack)
│ ├── image-emitter (IMAGE → ClipRRect + Image.asset)
│ ├── component-emitter (COMPONENT → StatelessWidget)
│ └── vector-emitter (VECTOR → SvgPicture/CustomPaint)
│
└── 3-Layer Verification
Layer 1: Structural (vitest snapshot)
Layer 2: Visual (Figma PNG vs Flutter golden)
Layer 3: AI (Claude Vision analysis)
npm install
# Figma プラグイン
npm run build
# CLI ツール
npm run build:cli
# ビジュアル検証 CLI
npm run build:verify
# 全テスト実行 (46 tests)
npm test
# TypeScript 型チェック
npm run typecheck
# 基本変換
node dist/cli.js design.ir.json
# 出力先指定
node dist/cli.js design.ir.json --out-dir ./lib/generated
# スクリーンショット付き
node dist/cli.js design.ir.json --with-screenshots
# IR検証のみ
node dist/cli.js design.ir.json --validate-only
Figma参照スクリーンショットとFlutterゴールデンをClaude Vision APIで比較:
export ANTHROPIC_API_KEY=your-key-here
# 基本比較
node dist/verify-visual.js figma_ref.png flutter_golden.png
# IR コンテキスト付き
node dist/verify-visual.js figma_ref.png flutter_golden.png --ir design.ir.json
# JSON出力 (CI向け)
node dist/verify-visual.js figma_ref.png flutter_golden.png --json
src/
├── ir/
│ ├── schema.ts # IR型定義 (8ノードタイプ + スクリーンショット)
│ └── ir-validator.ts # トークン参照・範囲検証
├── compiler/
│ ├── flutter-compiler.ts # IR → Dart コンパイラ
│ ├── test-emitter.ts # テスト生成 (golden + structural + screenshot)
│ ├── token-emitter.ts # トークンDartクラス生成
│ ├── dart-formatter.ts # Dartコードフォーマット
│ └── emitters/ # 7つのウィジェットエミッタ
├── plugin/
│ ├── main.ts # Figma codegenハンドラ (async)
│ ├── extractor/ # ノード抽出 (style, layout, text, token, screenshot)
│ └── utils/ # カラーユーティリティ
├── cli/
│ ├── convert.ts # 変換CLI
│ └── verify-visual.ts # Claude Vision検証CLI
└── shared/
├── constants.ts # バージョン・インデント定数
└── types.ts # 設定型定義
test/
├── fixtures/ # 16 IR JSONテストフィクスチャ
├── expected/ # 15 期待出力Dartファイル
├── compiler/ # コンパイラ・テストエミッタテスト
└── ir/ # IRバリデータテスト
agents/ # Claude Code エージェント
commands/ # Claude Code コマンド
skills/ # Claude Code スキル
hooks/ # Claude Code フック
figma2flutter.config.json でターゲットFlutterプロジェクトとトークンマッピングを設定:
{
"targetFlutterProject": "~/Projects/tabechao/mobile",
"generatedDir": "lib/generated",
"testDir": "test/golden/generated",
"goldenDir": "test/goldens/ci",
"tokenConfig": {
"colorClassName": "DesignTokens",
"colorImport": "package:mobile/core/theme/design_tokens.dart",
"generateTokenFiles": false
},
"screenshotConfig": {
"scale": 2,
"referenceDir": "test/goldens/figma_ref",
"tolerance": 0.03
},
"verificationConfig": {
"enabled": true,
"anthropicModel": "claude-sonnet-4-20250514",
"autoVerifyOnFailure": true
}
}
GitHub Actionsで自動検証:
| Figma | IR Type | Flutter Widget |
|---|---|---|
| Frame (auto-layout) | FRAME | Row / Column / Wrap |
| Frame (free-form) | FRAME | Stack + Positioned |
| Text | TEXT | Text / RichText + TextSpan |
| Rectangle | RECTANGLE | Container + BoxDecoration |
| Rectangle (image fill) | IMAGE | ClipRRect + Image.asset |
| Component | COMPONENT | StatelessWidget class |
| Instance | INSTANCE | (same as Frame) |
| Group | GROUP | Stack + Positioned |
| Vector | VECTOR | SvgPicture.string / CustomPaint |
MIT