Reverse Engineering Interfaces in the Age of Agents
I can now paste a URL into a coding agent, ask it to study the site, and get back a written design system I can build from. It takes minutes. A year ago it took me a week.
Designers have always reverse engineered each other's work. We rebuilt Dribbble shots to learn Figma. We opened DevTools on sites we admired to see their type scale. Every design school teaches some version of "steal like an artist". What is new is not the practice. It is the speed, the fidelity, and the fact that the output is no longer in a designer's head. It is a file that any model or teammate can follow.
That changes what design is worth, who can do it, and where the ethical lines sit. This piece covers the process I use with Claude Code and Opus 5.5, what I think it means for designers, and how to use it without becoming a copy machine.
What Actually Changed
A modern agent can open a live website, read its rendered CSS, take screenshots at different breakpoints, and measure things a human eyeballs: the exact type scale, the spacing rhythm, the colour roles, the corner radii, the shadow recipes, the motion curves. Then it can write all of that down in plain language as a DESIGN.md: a markdown file describing a visual language well enough that another agent can reproduce it.
This is already a product category. Refero's Styles library now publishes over two thousand "AI-readable design systems" extracted from leading product websites, each one available as a DESIGN.md, Tailwind config, CSS variables or design tokens, with a button to connect it straight to your AI tools.
Refero Styles: thousands of sites distilled into DESIGN.md files. Image: styles.refero.design.
Look at what one of these files contains and it is clear how far this has come. It does not just list hex codes. It describes intent: "a high-contrast serif headline font carries nearly all expressive weight against an otherwise achromatic UI." It names colour roles, not just colours. It says what not to do. That is the kind of writing a senior designer does when handing a system over to a team.
A DESIGN.md style reference: principles first, then tokens with roles. Image: styles.refero.design.
My Process
1. Pick three references, never one
One reference produces a copy. Three produce a synthesis. I usually choose one site for typography, one for layout and density, and one from outside my client's industry entirely, for its mood. The tension between them is where something new comes from.
2. Ask the agent to study, not to clone
The prompt matters. I ask for principles before tokens, and I ask the agent to separate what is structural (spacing, scale, grid) from what is brand expression (logos, illustration, signature layouts, copy).
# Prompt I use with Claude Code Study these three sites as design references: - https://reference-one.example (typography) - https://reference-two.example (layout, density) - https://reference-three.example (mood, colour) For each one, write down the principles behind the design before any values: what carries the hierarchy, how colour is rationed, how dense it is and why. Then measure: type families and scale, spacing steps, radii, shadows, motion. Mark anything that is brand expression (logo, illustration, copy, signature layouts) as "do not reuse". Write a single DESIGN.md that synthesises the three into one language for [my product, my audience]. Include a "Don't" section.
3. Edit the DESIGN.md yourself
This is the step people skip, and it is the step where authorship happens. The agent's draft is a starting point. I rewrite the principles in my own words, change the typefaces to ones I have chosen and licensed, cut anything that feels borrowed, and add the rules that make it ours. If the file still reads like a description of someone else's website, I have not finished.
4. Build with real content
I give the agent the edited DESIGN.md and the actual product content, never placeholder text. Real content pushes back on the borrowed structure and forces the layout to become specific to this product.
5. Diverge on purpose
Before anything ships, I make sure at least one major axis is clearly our own: the typeface, the colour system, or the grid. Usually it is more than one. A useful check: put your page next to each reference. If someone would mistake it for the original, keep going.
The DESIGN.md is where taste lives now. The agent can measure anything. It cannot decide what matters. That part is still the job.
Inspiration or Theft?
It is fair to say that art theft has become dramatically easier. A distinctive visual language that took a studio months to develop can now be extracted in minutes and redeployed by someone who never understood why it worked. That is real, and designers are right to be uneasy about it.
But I do not think the line has moved. It has just become more visible. The way I think about it:
- Systems are learnable. A 4px spacing grid, a 1.25 type scale, a restrained neutral palette, pill-shaped buttons. These are shared craft knowledge. Nobody owns them, and studying them is how the field moves forward.
- Expression is not. Logos, illustrations, photography, written copy, a signature layout that people associate with one brand. Copying these is copying, whether a human or an agent does it.
- Assets have owners. A DESIGN.md that names a commercial typeface does not give you a licence to use it. Fonts, icons and images still need to be licensed or replaced.
- Confusion is the test. If a user could mistake your product for the one you studied, you have crossed from inspiration into imitation, and depending on the details, possibly into trade dress territory.
And credit costs nothing. If a project is heavily influenced by someone's work, say so in the case study.
What This Means for Designers
The uncomfortable truth is that execution, the ability to produce a polished interface in a given style, is becoming cheap. If your value is "I can make it look like Linear", an agent can now do that for anyone who can paste a URL.
What is not cheap is judgement: knowing which references fit this problem, which parts to keep and which to break, what this specific audience needs, and when a borrowed style is actively wrong for a product. The agent can extract a language. It cannot tell you whether you should be speaking it.
Design is moving from making artefacts to directing them. The deliverable is increasingly the spec, the principles and the edits, not the pixels.
How to Use It to Your Advantage
- Learn faster. Reverse engineer the sites you admire to understand why they work. Read the DESIGN.md the agent writes and argue with it. It is the best design tutor most people will ever have access to.
- Explore wider. Generate five directions from five different reference sets in an afternoon, then put your time into choosing and refining one. Exploration used to be expensive. Now it is not.
- Write your own DESIGN.md. Every product you design should have one. It makes your system portable across tools and teammates, and it is a far better handoff than a Figma file alone.
- Become a reference. Distinctive work is the work people study. If your site ends up in someone's DESIGN.md, that is a sign of influence. Publish your principles and own the conversation about your style.
- Invest in what is hard to extract. Original illustration and photography, motion with personality, writing with a real voice, and above all product insight. A DESIGN.md can capture how something looks. It cannot capture why users love it.
The Craft Is Moving, Not Disappearing
Every time a tool made copying easier, from tracing paper to the photocopier to right-click Save As, people worried it would end originality. Each time, it raised the bar instead. When anyone can reproduce a style, a style alone stops being impressive, and the people who can create new ones become more valuable.
That is where we are now. Use the agent to study everything. Then do the part it cannot: decide what is worth making.
