Screenshot To Figma

1. Identify device frame — mobile (390-430px) vs tablet vs desktop. Note status bar style (iOS/Android).
2. Map layout sections top-to-bottom:
   • Status bar (time, signal, wifi, battery)
   • Header/navigation (tabs, filters, actions)
   • Content area (grid type, card shapes, scroll behavior)
   • Bottom navigation (icon count, active state)
   • Branding/footer elements
3. Catalog every icon — list each icon by purpose (e.g., "filter button = magic wand with sparkles", "nav tab 1 = open envelope"). Be specific about the visual, don't guess.
4. Note spacing patterns — padding, gaps between columns, card corner radii, relative card heights in masonry layouts.

Step 2: Discover the Figma File

Before creating anything:

1. get_metadata on the target node to understand existing content.
2. search_design_system for components, variables, and styles. Run multiple queries (buttons, cards, colors, spacing, text styles).
3. use_figma to list pages and top-level frames — understand file conventions.
4. Reuse design system assets when available. Only build from scratch when the design system doesn't cover what you need.

Step 3: Fetch Icons from Lucide

Never hand-draw SVG icons. Always fetch from Lucide.

1. Reason about each icon — match the visual in the screenshot to a Lucide icon name:

   Visual in Screenshot	Lucide Icon Name
   Magic wand with stars	wand-sparkles
   Three horizontal dots	ellipsis
   Magnifying glass	search
   Person silhouette	user
   Chat bubble	message-circle
   Plus sign	plus
   Open envelope	mail-open
   Signal bars	signal
   WiFi arcs	wifi

2. Fetch SVG data from https://lucide.dev/api/icons/{icon-name} using WebFetch.

3. All Lucide icons use viewBox 0 0 24 24, stroke-width="2", stroke-linecap="round", stroke-linejoin="round".

4. For filled/active icons, add fill="black" to the SVG element.

Step 4: Build Incrementally in Figma

One section per use_figma call. Never build the entire screen in one script.

Call 1: Create wrapper frame (device size, auto-layout VERTICAL, clip content)
        → return wrapperId

Call 2: Build status bar (time text + signal/wifi/battery icons via SVG)
        → return sectionId

Call 3: Build header (tabs + filter icon)
        → return sectionId

Call 4: Build content area (grid columns, cards with placeholder fills)
        → return sectionId

Call 5: Build bottom nav (Lucide icon SVGs in auto-layout)
        → return sectionId

Key patterns:

• Use figma.createNodeFromSvg(svgString) to insert Lucide icons
• Use auto-layout with spacers (layoutSizingHorizontal = "FILL") to push elements apart
• Set layoutSizingHorizontal = "FILL" AFTER parent.appendChild(child)
• Use placeholder solid fills for image cards (match approximate tones from screenshot)
• Return all created node IDs from every call

Step 5: Validate After Each Section

After each use_figma call:

1. get_screenshot of the section node — check for:
   • Clipped/cropped text
   • Overlapping elements
   • Wrong icon rendering
   • Incorrect spacing
2. get_screenshot of the full wrapper — check overall composition.
3. Fix issues with targeted use_figma calls — don't rebuild entire sections.

Step 6: Spacing and Layout Review

After all sections are built, do a final comparison:

1. Screenshot the full mockup.
2. Compare side-by-side with the reference image mentally.
3. Check:
   • Status bar: time on far left, indicators on far right
   • Header: tabs left-aligned, action button right-aligned
   • Content grid: consistent gutters, card radii, masonry stagger
   • Bottom nav: icons evenly distributed
4. Fix any spacing issues (padding, FILL spacers, itemSpacing).

iOS Status Bar Pattern

For iOS-style status bars, build these elements:

Use SPACE_BETWEEN or a FILL spacer to push time left and indicators right.

Common Mistakes