Flutter UI Builder
Transforms Figma designs and mockups into pixel-faithful Flutter UI by mapping visual attributes directly to your project's existing design tokens.
The flutter-ui skill automates the implementation of Flutter user interfaces from Figma MCP links or visual screenshots while rigorously maintaining design system integrity. Before generating any Dart code, it analyzes your codebase for existing colors, typography, spacing tokens, reusable widgets, and state management patterns. It creates a complete token mapping table, structures screens using private widget classes, adheres to project asset conventions, and runs self-verification checks to guarantee zero hard-coded styling values.
Características Principales
01Extracts Figma frames or visual screenshots into structured widget layouts
02Detects and adopts existing state management libraries and reusable custom widgets
03Enforces strict code quality with automated verification against hard-coded values and inline methods
0423 GitHub stars
05Scans codebase for colors, typography, dimensions, and theme token registries before generating code
06Generates comprehensive token mapping tables and halts if unmapped styles appear
Casos de Uso
01Rebuilding UI mockups from screenshots while strictly preserving existing theme tokens
02Converting Figma component frames and artboards directly into Flutter screen files
03Enforcing design system consistency across Flutter teams by eliminating hard-coded values