Turn a Figma design into a working page

What you will make

The page follows the source design and remains usable across screen sizes and input methods.

Before you start

Access to the source design, permission to use its assets, and a running web app.

1. Inspect the actual design

Choose one frame and inspect its layout, typography, tokens, assets, and interactive states. Use the available Figma integration or an explicit handoff; do not infer exact values from a thumbnail.

2. Map to components

Match the design to existing app primitives. Record intentional differences, responsive behavior, and asset sources. Establish shared content width and gutters before positioning sections.

3. Implement one page

Build semantic sections and interactive controls. Use shared tokens for spacing, colors, and type. Keep decorative assets separate from meaningful images and give meaningful images appropriate alternative text.

4. Compare and refine

Compare the running page at the design viewport, then test phone and tablet sizes, keyboard focus, long text, and empty states. Fix structural mismatches before small visual details.

Give your agent a clear task

Implement this Figma frame in the existing app. Inspect the real layout and assets, map it to our existing components, and preserve shared gutters and content width. Verify desktop, tablet, phone, keyboard focus, and long text. List any design details you could not inspect.

Check the result

The page follows the source design and remains usable across screen sizes and input methods.