Get an AI to build your design — then judge it
Take a screen you have designed in Figma (from any past project) and use an AI tool to turn it into a working web page. Document faithfully where the build diverges from the design.
Steps
- Pick one screen you designed and care about. Something with real layout, not a splash page.
- Generate it. Feed it to an AI tool — screenshot + description, Figma link, or Figma Make/MCP if available.
- Diff it like a designer. Put design and build side by side. List every divergence: spacing, type scale, colour, alignment, missing states.
- Iterate with words only. Fix the top 5 divergences using prompts, not code editing. Note which design intentions are easy vs impossible to communicate.
- Check it responsive. Your Figma frame had one width. What did the AI decide for mobile? Was it right?
Things to keep in mind
- The gap between design and build is where designer-developer collaboration lives. You are experiencing handoff from both sides at once.
- "It ignored my 8px grid" is a finding, not a failure. Collect these.
Submission
- Side-by-side of design vs final build, your divergence list, and the prompt log. Short crit in class.