メニュー
Implement a Flutter screen or widget from a Figma URL with design-perfect accuracy. Extracts exact numerical values via Figma MCP and translates them 1-to-1 into Flutter code. No guessing, no rounding, no approximation.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Run a comprehensive code review using available AI tools in parallel. Analyzes architecture, code quality, security, and test coverage. Dynamically detects and leverages available MCP servers for multi-perspective review. Use after implementation or refactoring, before creating a PR.
Run a comprehensive code review using available AI tools in parallel. Analyzes architecture, code quality, security, and test coverage. Dynamically detects and leverages available MCP servers for multi-perspective review. Use when reviewing code changes, before merging PRs, or for quality audits.
Run iterative refactoring on changed files (minimum 3 rounds). Round 1: structural improvements (DRY, method extraction). Round 2: readability (naming, nesting reduction). Round 3: convention compliance. Continues until no improvements found. Generates a before/after report. Use after implementation, before code review.
Run the full development workflow end-to-end: specify → implement → refactor → code-review → pr-summary. Pauses after specify for user confirmation before proceeding. Pass a feature description to start from specification, or a feature name to resume from implementation.
Start implementation based on a specification document (order.md). Processes tasks from todo.md sequentially. Supports TDD (Red-Green-Refactor) or standard implementation workflow. Auto-detects project's test framework, lint tools, and coding conventions. Use after /specify.
Auto-generate a pull request description from git changes. Analyzes commits, diffs, and code structure to produce a comprehensive PR summary. Automatically detects and follows your project's PR template if present. Use after completing implementation, before creating a PR.
| name | figma-to-flutter |
| description | Implement a Flutter screen or widget from a Figma URL with design-perfect accuracy. Extracts exact numerical values via Figma MCP and translates them 1-to-1 into Flutter code. No guessing, no rounding, no approximation. |
| argument-hint | ["figma-url-or-node"] |
| compatibility | Requires Figma MCP (get_design_context, get_screenshot, get_metadata, get_variable_defs, get_code_connect_map). Requires a Flutter project. Gemini MCP recommended for post-implementation review. |
Implement the Flutter screen or widget from $ARGUMENTS.
Every value, every color, every font weight — extracted from Figma, not guessed. This skill's entire purpose is eliminating the gap between design and implementation.
Before touching any code:
node-id=1-2 to 1:2. Confirm the target variant/state.This is the critical phase. All implementation decisions flow from data collected here.
get_design_context — structure, dimensions, styles, spacing, typography, colorsget_screenshot — visual ground truthget_metadata — when context is truncated or insufficient, drill into child nodesget_variable_defs — when design tokens or variables are referencedget_code_connect_map — when existing component mappings existFollow refs/design-spec-extraction.md. Every section gets a written spec with exact values. This spec becomes the contract — code must match it exactly.
Section: ProfileHeader (node-id: 42:891)
Layout: Column, padding: EdgeInsets.fromLTRB(16, 24, 16, 20), gap: 12
Title: fontSize: 18, fontWeight: w600, height: 1.33, letterSpacing: -0.27, color: 0xFF1A1A1A
Subtitle: fontSize: 14, fontWeight: w400, height: 1.43, color: 0xFF6B7280
Background: 0xFFF9FAFB, borderRadius: 12
If a value is missing or unclear — re-fetch from Figma MCP. Never fill in a gap with a guess.
Work section by section. Never implement the full screen at once.
For each section:
Layout:
Auto Layout horizontal → Row · vertical → Column · Fixed frame → SizedBox · Padding → EdgeInsets.fromLTRB with exact LTRB · Gap → SizedBox(height: N) or SizedBox(width: N) · Wrap → Wrap(spacing: N, runSpacing: N)
Color:
#RRGGBB → Color(0xFFRRGGBB) · with opacity → compute exact alpha byte · Project color constant → use only when it matches exactly
Typography: fontSize, fontWeight, height (= lineHeight / fontSize), letterSpacing — all from Figma. Project TextStyle → use only when every property matches. If you'd override more than one property, don't use the theme style.
Decoration: borderRadius exact values · BoxShadow with exact offset, blur, spread, color · Gradient with exact stops and colors
Assets: Download from Figma, verify format, register in pubspec.yaml. Never reference Figma temporary URLs. Use project's existing image/icon patterns.
Text content: Character-for-character match. Full-width/half-width, punctuation, spaces, line breaks — all exact.
Run flutter analyze and dart format --set-exit-if-changed . to verify zero errors and consistent formatting.
Use mcp__gemini__gemini-analyze-code to verify the implementation. Pass the recorded spec from Phase 2 alongside the code and ask Gemini to use extended thinking:
Review prompt:
Compare the following Figma design spec against the Flutter implementation code. Use extended thinking to thoroughly verify every numerical value (colors, font sizes, font weights, line heights, letter spacing, padding, gap, border radius, shadow values) matches exactly. Flag any value that differs, any value that appears to be guessed or approximated, and any Figma structure that was incorrectly simplified. Also check that the code follows Flutter/Dart best practices and project conventions.
Fix every discrepancy found.
Use mcp__gemini__gemini-analyze-code for a second pass focused on code quality:
Review this Flutter code for: widget tree efficiency, unnecessary rebuilds, proper const usage, correct widget lifecycle, accessibility basics (semantics labels on interactive elements), and adherence to the project's existing patterns. Use extended thinking.
flutter analyze reports zero errors