Observe.
Adapt.
Make.
Explore visual directions. Turn a reference website into a clear design brief and an actionable implementation prompt. Then make it your own.
Four moves.
One workflow.
From reference to implementation, with a deliberate visual comparison at the end.
Find a compelling reference.
Break down layout, type and motion.
Use your own purpose and assets.
Compare, correct and repeat.
Choose a starting point.
Three original treatments in black, white and red. Select one to update the large preview and the implementation prompt.
Make it yours.
Enter the details of your next project. Your inputs personalise the prompts and stay in this browser tab.
Copy. Paste. Build.
Three useful prompts: the full implementation brief, an asset replacement brief, and the compact Remake command from the article.
Good references.
In one place.
The practical resources from Ruben Hassid's article, with the source project and example websites. External links open in a new tab.