cc-flutter-pixel-loop#
Pixel-perfect Flutter UI agentic loop using Figma + Maestro + Dart MCPs (Read → Write → Reload → Capture → Compare)
Pixel-perfect Flutter UI agentic loop powered by three MCPs:
| MCP | Role |
figma |
Reads design tokens, layout, and component overrides directly from Figma. |
dart | Hot-reloads a running Flutter app via Dart Tooling Daemon (DTD). |
maestro | Drives a real device or emulator and takes screenshots. |
The agent runs a Read → Write → Reload → Capture → Compare loop until the rendered Flutter screen matches the Figma design.
Skills#
| 이름 | 설명 |
|
pixel-loop-guide
|
Pixel-perfect Flutter UI implementation/repair via an agentic Read→Write→Reload→Capture→Compare loop |
Commands#
| 이름 | 설명 |
| pixel-loop |
Pixel-perfect Flutter UI agentic loop (Figma + Maestro + Dart). |
| pixel-loop:capture |
Capture a labelled screenshot of the running Flutter app via Maestro MCP, with optional Dart MCP wid |
| pixel-loop:compare |
One-shot visual + structural diff between an existing screenshot and a Figma node (no code changes). |
| pixel-loop:loop |
Run the full Read → Write → Reload → Capture → Compare loop until the rendered Flutter screen matche |
| pixel-loop:setup |
One-time setup: install + register Figma, Maestro, and Dart MCP servers for Claude Code. |
관련 플러그인#
| 플러그인 | 설명 |
| cc-coui |
CoUI Component Library (85 cross-platform components) + composition/extension guidance |
| cc-dev-cycle |
Development cycle automation (Issue Cycle, Bug Cycle, Session, ZenHub, Agent Teams) |
| cc-flutter-dev |
Flutter Development Core (UI Patterns, Feature Creation, BLoC, Testing) |
| cc-flutter-inspector |
Flutter Inspector 디버깅 (Master + 9 전문 Inspectors) |
| cc-flutter-marionette |
Marionette MCP wrapper — widget-tree-level Flutter automation tuned for CoUI components (Widgetbook |
| cc-flutter-mcp-toolkit |
mcp_flutter / mcp_toolkit wrapper (Arenukvern) — app-internal MCP via Dynamic Tools Registration. Le |
| cc-jaspr-web |
Jaspr Web automation + Flutter Web embed verification. Audits CoUI Web pages, drives dual Web↔Flutte |
| cc-serverpod |
Serverpod basics — model/endpoint generation, migrations |
claude plugins install coco-de/skills/plugins/cc-flutter-pixel-loop