screenshot-to-flutterPixel-perfect Flutter widget replication from a screenshot. Use when the user provides a UI screenshot and asks to replicate, clone, implement, or build it in Flutter. Enforces design system tokens (ColorScheme tokens, AppSpacing, TextTheme) — never raw hex or hardcoded values. Triggers: screenshot to flutter, replicate this screen, clone this UI, build thi…
Independent GitHub snapshot · Automated classification · Original documentation governs
NEVER output raw hex codes, hardcoded font sizes, or raw spacing values. ALL colors → Theme.of(context).colorScheme.*, ALL spacing → AppSpacing.*, ALL typography → Theme.of(context).textTheme.*. Pixel-perfect means visually identical, not token-violating.
Replicate a UI screenshot as a production-ready Flutter widget with pixel-perfect visual accuracy, while staying compliant with your project's design system.
Extract these properties visually from the screenshot. Document them before coding.
□ Layout type: Column / Row / Stack / CustomScrollView / GridView
□ Scrollable? Yes / No — if yes, which axis
□ Has AppBar / navigation bar? → describe exactly
□ Has bottom navigation? → describe tabs/icons
□ Has FAB? → position and style
□ Has bottom sheet or modal? → note handle style
□ Background color → map to: surface / background / surfaceVariant
□ Primary accent → map to: primary / secondary / tertiary
□ Card background → map to: surfaceContainer / surfaceContainerHigh
□ Text (heading) → map to: onSurface / onBackground
□ Text (body) → map to: onSurface / onSurfaceVariant
□ Icon color → map to: onSurfaceVariant / primary
□ Divider color → map to: outlineVariant
□ Error state → map to: error / onError
Token mapping rule: If the screenshot uses a color that doesn't map cleanly to a token, use the closest semantic token and note the approximation in a // Design note: comment.
□ Heading size → headlineLarge / headlineMedium / headlineSmall
□ Title size → titleLarge / titleMedium / titleSmall
□ Body size → bodyLarge / bodyMedium / bodySmall
□ Caption size → labelLarge / labelMedium / labelSmall
□ Font weight → FontWeight.w400 / w500 / w600 / w700
□ Letter spacing → note if visually different from default
□ Outer padding → AppSpacing.md (16) / AppSpacing.lg (24) / AppSpacing.xl (32)
□ Inner card padding → AppSpacing.sm (8) / AppSpacing.md (16)
□ Gap between items → AppSpacing.xs (4) / AppSpacing.sm (8) / AppSpacing.md (16)
□ Section spacing → AppSpacing.lg (24) / AppSpacing.xl (32)
□ Buttons: count, type (filled/outlined/text/icon), border radius
□ Cards: count, elevation, border radius, border presence
□ Input fields: count, decoration style, placeholder presence
□ List items: spacing, leading/trailing widgets, divider style
□ Images/avatars: size, shape (circle/rounded/square), placeholder needed
□ Icons: which icon set (Material / Cupertino), sizes
□ Chips/badges: style, colors
property_detail_screen.dart)lib/features/<feature>/presentation/screens/ or lib/features/<feature>/presentation/widgets/ConsumerWidget if the screen needs Riverpod state, StatelessWidget if pure display| Screenshot Element | Flutter Implementation |
|---|---|
| Column layout | Column with crossAxisAlignment matching visual alignment |
| Scrollable content | SingleChildScrollView + Column OR ListView.builder |
| Card | Card with elevation, shape: RoundedRectangleBorder(borderRadius: ...) |
| List items | ListTile or custom widget — match leading/trailing/spacing exactly |
| Navigation bar | NavigationBar (Material 3) — match selected/unselected states |
| AppBar | AppBar with backgroundColor, elevation, titleTextStyle from theme |
| Bottom sheet | BottomSheet with DraggableScrollableSheet if scrollable |
| Input field | TextFormField with InputDecoration matching border style |
| Filled button | FilledButton — do not use ElevatedButton for Material 3 screens |
| Outlined button | OutlinedButton |
| Text button | TextButton |
| Avatar | CircleAvatar with backgroundImage: NetworkImage(placeholder) |
| Chip | Chip or FilterChip depending on interactivity |
| Divider | Divider(color: theme.colorScheme.outlineVariant) |
| Shadow | BoxDecoration(boxShadow: [...]) — match blur radius visually |
// Pressed state — use InkWell or GestureDetector, not onTap only
InkWell(
onTap: () {},
borderRadius: BorderRadius.circular(N),
child: ...,
)
// Scroll behavior — always clip properly
ClipRRect(
borderRadius: ...,
child: SingleChildScrollView(...)
)
// Colors — from theme, never hardcoded
final cs = Theme.of(context).colorScheme;
cs.primary // primary accent
cs.surface // card/screen background
cs.onSurface // body text
cs.onSurfaceVariant // secondary text, icons
cs.outlineVariant // dividers, borders
cs.error // error states
// Typography — from theme, never hardcoded
final tt = Theme.of(context).textTheme;
tt.headlineMedium // screen title
tt.titleLarge // section header
tt.bodyMedium // body text
tt.labelSmall // caption, badge text
// Spacing — from AppSpacing, never hardcoded px
AppSpacing.xs // 4
AppSpacing.sm // 8
AppSpacing.md // 16
AppSpacing.lg // 24
AppSpacing.xl // 32
AppSpacing.xxl // 48
## Screenshot Analysis
- Layout: [type]
- Components found: [list]
- Color mapping: [screenshot color → token]
- Typography mapping: [size → TextTheme style]
- Approximations: [anything that couldn't map cleanly, with reason]
## Widget Tree
[Mermaid or indented tree showing widget hierarchy]
## Implementation
[Complete .dart file — production-ready, no TODOs, no stubs]
## Design Notes
[Any visual approximations made, placeholder images used, tokens chosen]
fontSize, padding, or spacing numbersInkWell / GestureDetector)placeholder pattern (not missing or broken)flutter analyze would pass (no obvious type errors, no unused imports)ConsumerWidget used only if Riverpod state is actually neededmobile-design first if the screen requires MFRI assessment (new feature, not pure replication)riverpod-patterns if the screen needs state management wired upui-standards-tokens for full AppSpacing / TextTheme token reference