Describe what the page needs: target audience, key sections, copy, and any reference pages to match. Drop the brief in Slack or as a doc. The more specific the brief, the fewer revision cycles.
Claude Code builds the page as production HTML and deploys it to a live Vercel preview URL. This is the real page — not a mockup. It's responsive and functional from the first draft.
Using the html.to.design Figma plugin, the live URL is imported as editable Figma layers. A comment with the live preview link is pinned to the frame. This gives design real layers to work with — not a flat screenshot.
Open the live Vercel URL in your browser. This is what you're reviewing — the real page, with real responsive behavior, real fonts, real interactions. Check it at desktop and mobile widths. The Figma frame is your annotation canvas, not the source of truth.
Two ways to give feedback — use whichever is faster:
Option A: Comments. Drop Figma comments on the frame pointing to specific areas. Be specific: "Increase spacing between hero and trust bar to ~40px" is better than "needs more breathing room."
Option B: Direct edits. Move, resize, or restyle elements directly on the Figma layers. Change copy, swap colors, adjust spacing. Engineering will pull the updated design and apply changes to the HTML.
Engineering reads Figma comments and inspects any design edits directly from the Figma file — no handoff doc needed. Changes are applied to the HTML and redeployed. The Figma frame is re-imported if needed for the next round.
Review the updated live URL. If approved, the page goes to production. Resolve all Figma comments to keep the file clean.