Build the page exactly as it was designed in Figma.
Overview
The slowest step in most page pipelines is the handoff: design approved in Figma, then rebuilt by hand in the page builder, days gone per page. The agent builds from the design directly, matching layout, type scale, and spacing as drawn, and wires in your real products, brand tokens, and buy box. Share the specific frames rather than the whole file, and expect it to flag anywhere it had to deviate instead of quietly improvising.
Before you start
- The design as Figma frames, exports, or screenshots
- A brand kit set up, so fonts and colors resolve to your real tokens
- Shopify connected, for live product data
The prompt
Paste this into the agent. The bold values are yours to change:
Build this page from my design: [upload the Figma frames or design screenshots].
Match the layout, type scale, and spacing as designed. Wire in the real parts: the [product] buy box, my brand fonts and colors, and live data anywhere the design shows mocked numbers.
Flag every place you had to deviate from the design and why. Keep it a draft until I approve.
What the agent does
- Reads the frames and maps each section of the design to page structure.
- Builds the page with your brand tokens, so type and color come from your brand, not eyeballed hex codes.
- Wires the live parts: product data, buy box, review counts, anything the design mocked.
- Reports every deviation: mobile behavior the design didn't draw, mocked data replaced with real numbers.
- Holds at draft for a side-by-side review against the design.
Try it on your store
The prompt opens in the agent ready to edit, with your store and tools connected.