Skill

visual-verify

Visual verification of Flutter output against Figma reference screenshots using Claude Vision

npx claudepluginhub clearclown/figma2flutter

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/figma2flutter:visual-verify

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

Compare Figma reference screenshots with Flutter golden test outputs to ensure pixel-level design fidelity.

SKILL.md

69 lines · ~565 tokens

Similar Skills

visual-review

Use when a backpressured loop has a front-end/UI change and needs to compare the rendered result against its design reference (a Figma frame or images on a Linear ticket) — catching layout, spacing, contrast, and visual-consistency defects automated tests and happy-path clicking miss.

backpressured

make-precise-ui

Implements pixel-perfect UIs from Figma designs, mockups, or specs by extracting exact dimensions, colors, typography, shadows, and assets for zero-deviation code reproduction.

creative

figma-check-design-parity

Compares a Figma node's actual specs against a codeSpec to produce a 0–100 parity score, discrepancy list, and fix suggestions. Detects design-to-code drift.

2 files

figma-console-mcp-skills

Stats

Stars0

MaintenanceExcellent

Last CommitMar 10, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Stats

Actions

Help us improve

Share bugs, ideas, or general feedback.

Visual Verification Skill

Compare Figma reference screenshots with Flutter golden test outputs to ensure pixel-level design fidelity.

When to Use

After running golden tests and encountering failures

When you want to verify that generated Flutter code matches the Figma design

To analyze specific visual differences between design and implementation

During code review to validate design accuracy

Workflow

1. Identify the widget to verify

Find the corresponding files:

Figma reference: test/goldens/figma_ref/{widget_name}_figma_ref.png

Flutter golden: test/goldens/ci/{widget_name}.png or run golden tests to generate

IR JSON: output/ir/{widget_name}.ir.json or test/fixtures/{widget_name}.ir.json

2. Run verification

# Basic comparison node dist/verify-visual.js test/goldens/figma_ref/card_figma_ref.png test/goldens/ci/card.png # With IR context for better analysis node dist/verify-visual.js ref.png golden.png --ir design.ir.json # JSON output for CI integration node dist/verify-visual.js ref.png golden.png --json

3. Analyze results

The verification produces:

Fidelity score (1-10): 8+ is passing

Categorized differences: color, spacing, font, layout, border-radius

Severity levels: low (cosmetic), medium (noticeable), high (breaking)

Fix suggestions: Specific guidance on what to change

4. Fix differences

Common fixes by category:

Color: Check token mappings in figma2flutter.config.json and src/compiler/emitters/container-emitter.ts

Spacing: Check padding/margin emission in src/compiler/emitters/flex-emitter.ts

Font: Check typography token resolution in src/compiler/emitters/text-emitter.ts

Layout: Check layout mode handling in src/compiler/flutter-compiler.ts

Border radius: Check border radius emission in container/image emitters

Environment Setup

Requires ANTHROPIC_API_KEY environment variable.

export ANTHROPIC_API_KEY=your-key-here

Visual Verification Skill

Compare Figma reference screenshots with Flutter golden test outputs to ensure pixel-level design fidelity.

When to Use

After running golden tests and encountering failures
When you want to verify that generated Flutter code matches the Figma design
To analyze specific visual differences between design and implementation
During code review to validate design accuracy

Workflow

1. Identify the widget to verify

Find the corresponding files:

Figma reference: test/goldens/figma_ref/{widget_name}_figma_ref.png
Flutter golden: test/goldens/ci/{widget_name}.png or run golden tests to generate
IR JSON: output/ir/{widget_name}.ir.json or test/fixtures/{widget_name}.ir.json

2. Run verification

# Basic comparison
node dist/verify-visual.js test/goldens/figma_ref/card_figma_ref.png test/goldens/ci/card.png

# With IR context for better analysis
node dist/verify-visual.js ref.png golden.png --ir design.ir.json

# JSON output for CI integration
node dist/verify-visual.js ref.png golden.png --json

3. Analyze results

The verification produces:

Fidelity score (1-10): 8+ is passing
Categorized differences: color, spacing, font, layout, border-radius
Severity levels: low (cosmetic), medium (noticeable), high (breaking)
Fix suggestions: Specific guidance on what to change

4. Fix differences

Common fixes by category:

Color: Check token mappings in figma2flutter.config.json and src/compiler/emitters/container-emitter.ts
Spacing: Check padding/margin emission in src/compiler/emitters/flex-emitter.ts
Font: Check typography token resolution in src/compiler/emitters/text-emitter.ts
Layout: Check layout mode handling in src/compiler/flutter-compiler.ts
Border radius: Check border radius emission in container/image emitters

Environment Setup

Requires ANTHROPIC_API_KEY environment variable.

export ANTHROPIC_API_KEY=your-key-here

visual-verify

Invocation

Context Preview

SKILL.md

Similar Skills

Help us improve

Help us improve

Find plugins for your project

visual-verify

Invocation

Context Preview

SKILL.md

Visual Verification Skill

When to Use

Workflow

1. Identify the widget to verify

2. Run verification

3. Analyze results

4. Fix differences

Environment Setup

Similar Skills

Help us improve

Visual Verification Skill

When to Use

Workflow

1. Identify the widget to verify

2. Run verification

3. Analyze results

4. Fix differences

Environment Setup