Redesigns often go wrong because the team tries to be original at the structure level. That is where originality matters least. People already know how a good services page or product page is laid out, and they find things faster when yours works the way they expect.
What I mean
I pick a reference: a site whose layout does the job yours has to do, for the same kind of audience. I work out why it works. Then I rebuild the page around your brand, your content and your priorities. The layout is borrowed. The identity and the message are yours.
How I run it
- I start with the goal. What should a visitor do on this page? A reference only makes sense against a goal.
- I choose one to three references with the same audience and the same task. Mobbin helps here, because I can see how real products structure the same section.
- I read each reference like an editor: the order of the sections, how much each one says, where the proof sits and where the button is.
- I match your content to the slots. If I have nothing to put in a slot, the slot goes.
- I apply your brand: colour, type, images and tone. This is where the site becomes yours.
- I build it in Figma and then in code. Claude Code works from the approved Figma design through the Figma MCP, so the build matches.
Borrow the structure, not the content
I never copy wording or images. If the result looks like the reference, I skipped the brand step and I go back.
Handing it over
The last step matters as much as the design. Your developer gets a structured codebase as a GitHub pull request, with notes that explain the decisions, so they can review it, merge it and keep going.
What you get
The redesigned pages in Figma, a structured codebase, a pull request and handoff notes.
Where it goes wrong
Copying too much, and ignoring your own goal. A layout that works for a competitor's goal may not work for yours. Pick references that match what you need, not the ones you like most.
All writing