Turn a design file into a photography portfolio site
A developer had Claude Code read exact sizes, fonts, colours and photo crops from a Figma design to build a portfolio site; he directed the animation himself.
Done with Claude CodeClaude Opus 5.5
What they did
A developer gave Claude Code, running Claude Opus 5.5, a Figma design file for a photographer's portfolio. Figma is a tool for drawing website layouts. The agent read the exact spacing, fonts, colours and photo crops from the file instead of guessing them. It then built the site. He handled the animation and the speed tuning himself.
How it went
He shared the live site and a video of it. He gives no figures for time or cost.
Worth knowing
The win he highlights is reading values straight from the design file instead of guessing from screenshots. Animation and speed still needed a human to steer.
Try it yourself with Claude Code
Using the Figma file at [Figma file URL], build a [type of site] in [framework, e.g. Next.js]. Read exact spacing, font sizes, colours and image crops from the Figma data rather than estimating from screenshots. First list the pages, components and design tokens you extracted and wait for my approval. Then build it section by section, comparing each against the Figma frame. Leave animations as simple placeholders so I can direct the motion. Don't deploy until I review it locally.
Swap the highlighted [parts] for your own details.
Source: X · @jeff_okoli · Oct 15, 2026
Written with AI assistance from the original post and checked against our editorial guidelines. Results are as reported by the source, not independently verified.
