How to legally steal any website's best design decisions using AI
The 10 prompts that let you reverse-engineer any site's design system
Every great designer steals. The difference now is that AI lets you steal faster, cleaner and with enough technical output that a developer can build from it the same day.
This article is a technical tutorial. You’ll learn how to take any website or app you admire, feed it to Claude, and extract the design system, layout logic, component structure and copy patterns behind it. Not vague inspiration. Actual reusable output.
Ten prompts. Real examples. You’ll have the first one done before you finish reading the setup.
What “replication” actually means here
This isn’t about copying someone’s code or lifting their assets. It’s about reverse-engineering the decisions behind a design: the spacing system, the typographic hierarchy, the colour logic, the way they handle empty states and CTAs.
Those decisions are learnable. And once you’ve learned them from a site you admire, you can apply them to something entirely your own.
Claude can’t browse live websites on its own, so the workflow here uses screenshots, copied HTML, and your own observations as the raw material. Each prompt below explains exactly what to feed in.
Prompt #1: Visual audit from a screenshot
What it does: Takes a screenshot of any page and extracts the full design system behind it: colours, type scale, spacing, layout grid and visual hierarchy.
When to use it: Start every replication project here. This is your reconnaissance pass.
The prompt:
I'm going to share a screenshot of a website or app screen. Analyse it as a senior
UI designer reverse-engineering someone else's work.
Extract and document the following:
1. Colour system: primary, secondary, accent, background and text colours.
Give hex values where you can estimate them. Note any gradients.
2. Typography: identify heading sizes relative to each other, body text size,
font weight usage, line height feel (tight/normal/loose) and any obvious
font personality (geometric sans, humanist, serif, etc.)
3. Spacing system: what increment does the spacing appear to be based on?
(4px, 8px, 12px?) Estimate padding inside components and margins between them.
4. Layout grid: how many columns? Is there a max-width container? How wide
are the gutters?
5. Visual hierarchy: what does the eye go to first, second, third? What
techniques create that order (size, colour, weight, whitespace, position)?
6. Component inventory: list every distinct UI component visible in the screenshot.
Screenshot: [PASTE OR ATTACH SCREENSHOT]How to use it:
Take a full-page screenshot of the site or app screen you want to study
Paste it directly into Claude or attach it as an image
Save the output as your “design brief” for everything that follows
Example input: Screenshot of Stripe’s homepage hero section.
What you’ll get: A structured breakdown covering Stripe’s near-black backgrounds, the specific purple accent logic, the 8px spacing increment, the two-column split layout with a max-width around 1100px, and a component list including nav, hero headline block, code preview card and gradient mesh background.
Advanced note: Run this on three pages of the same site (homepage, pricing, docs) and ask Claude to identify which design decisions are consistent across all three. That consistency is the actual design system. The variations are the exceptions.
Prompt #2: CSS variable extraction from HTML
What it does: Takes pasted HTML/CSS source and extracts a clean, usable set of CSS custom properties that capture the design token layer of any site.
When to use it: When you want actual code output, not just observations. Use right-click > Inspect > copy the relevant CSS from a site you’re studying.
The prompt:
I'm going to paste HTML and CSS from a website I'm studying. Your job is to extract
and reconstruct the design token layer as CSS custom properties I can drop into my
own project.
Output a clean :root { } block containing:
- All colour values as --color-[name] variables
- Font family, size scale and weight as --font-[property] variables
- Spacing scale as --space-[size] variables (--space-1 through --space-10 or similar)
- Border radius values as --radius-[name] variables
- Shadow values as --shadow-[name] variables
- Any transition/animation timing values as --transition-[name] variables
Where the source uses hardcoded values instead of variables, infer the likely token
from the pattern. Name everything consistently.
After the :root block, write a one-paragraph summary of what kind of design system
this appears to be (e.g. "minimal 8px grid system with a monochromatic dark palette
and a single accent colour").
Here is the HTML/CSS:
[PASTE SOURCE CODE]How to use it:
Open browser DevTools on the site you’re studying (F12 or right-click > Inspect)
Go to the Elements tab, find the
<head>or a key component, copy the relevant CSSPaste into Claude with this prompt
Drop the output
--variablesdirectly into your own project’s stylesheet
Example input: CSS from Linear’s app interface, including their component styles.
What you’ll get: A complete :root block with tokens like --color-surface-primary, --space-4: 16px, --radius-md: 8px and --shadow-card: 0 1px 3px rgba(0,0,0,0.12), plus a summary identifying it as a compact 4px-base grid with a near-black surface palette and tightly controlled border radius consistency.
Advanced note: Paste the token output back in and ask Claude to generate a Tailwind config object from it. You get a custom Tailwind theme calibrated to the design system you just extracted, ready to paste into tailwind.config.js.
Prompt #3: Layout structure reverse-engineer
What it does: Takes a screenshot or HTML and maps out the full layout architecture: grid system, section structure, component nesting and responsive breakpoint logic.
When to use it: Before building any page that has a layout you want to understand or replicate structurally.
The prompt:
Analyse the layout structure of this page as if you're an engineer who needs to
rebuild it from scratch.
Produce:
1. Section map: list every distinct vertical section of the page from top to bottom.
For each section: what is its purpose, what is its approximate height behaviour
(fixed/content-driven/viewport), and what layout method does it appear to use
(flexbox, grid, absolute positioning)?
2. Grid breakdown: for the most complex section on the page, describe the column
structure in enough detail that a developer could write the CSS grid or flexbox
rules to recreate it.
3. Component nesting: pick the most interesting component on the page and describe
its internal structure as a nested list (outer container > row > left column >
icon + text stack, etc.)
4. Responsive logic: based on what you can see, how do you think this layout
changes at mobile widths? What likely collapses, stacks or hides?
5. One-sentence summary of the overall layout philosophy (e.g. "constrained-width
centred container with full-bleed section backgrounds").
[PASTE SCREENSHOT OR HTML]How to use it:
Use on full-page screenshots for the section map, or paste the page’s HTML for more precise component nesting
Pay particular attention to the grid breakdown output. That’s the hardest part to eyeball yourself
Use the responsive logic section as your mobile design brief
Example input: Screenshot of Notion’s marketing homepage.
What you’ll get: A section map with eight distinct blocks, a detailed grid breakdown of their feature comparison section (12-column base, 3-column at desktop, single column at mobile), a nested component description of their “block” illustration card, and a layout philosophy summary: “full-width sections with an 1100px max-width inner container, heavy use of alternating light/dark backgrounds to create rhythm.”
Advanced note: After the layout breakdown, ask Claude to write the HTML skeleton with semantic tags and BEM class names. You get a buildable scaffold in about 60 seconds.
You just got 3 prompts for extracting the visual layer, the code layer and the layout logic from any site.
The next 7 prompts go deeper:
How to extract the exact copywriting patterns and voice behind any site’s headlines
How to reverse-engineer the microcopy (buttons, tooltips, empty states, error messages)
How to clone a full component in working code from a screenshot alone
How to extract the animation and interaction logic without touching JavaScript
How to build a complete competitor teardown document in one session
How to generate a “stolen” style guide you can hand to any developer
Plus: a full replication workflow template that chains all 10 prompts in sequence
Prompt #4: Copywriting pattern extraction
What it does: Reverse-engineers the copywriting formula behind any site’s headlines, subheads, CTAs and feature descriptions so you can apply the same structure to your own product.
When to use it: When a competitor’s copy converts well and you want to understand the formula, not just admire it.
The prompt:
I'm going to share copy from a website. Analyse it as a direct-response copywriter
studying a competitor.
Extract:
1. Headline formula: what pattern does each headline follow? (e.g. "[outcome] for
[audience] without [pain]", "[verb] your [noun] in [timeframe]") Write the
abstract formula, then show the example from the page.
2. Value proposition structure: how do they sequence benefit claims? Features first
or outcomes first? Specific or aspirational?
3. CTA language: list every call-to-action button text on the page. What verb tense?
What commitment level do they imply (low-friction vs high-commitment)?
4. Social proof patterns: how do they use testimonials, logos or numbers? What
specifically do they claim (not vague praise but measurable outcomes)?
5. Objection handling: where on the page do they address likely hesitations?
What objections are they pre-empting?
6. Voice profile: write 5 adjectives that describe the writing voice, then write
2 sentences in that voice about a fictional product to demonstrate you've
captured it.
Here is the copy:
[PASTE ALL TEXT FROM THE PAGE]How to use it:
Select all text on the page (Ctrl+A, Ctrl+C in most browsers) or use a reader mode to get clean text
The voice profile at the end is the most portable output. Save it and use it in future writing sessions
Run this on your own site too. The gap between your formula and theirs is your rewrite brief.
Example input: All copy from Framer’s homepage.
What you’ll get: Headline formula identified as “[outcome]-first, tool-second” (they lead with what you’ll build, not what Framer is), CTA language catalogued as low-friction present-tense (”Start for free”, “See examples”), objection handling located in the FAQ section addressing the “is this just for designers?” concern, and a voice profile: “confident, minimal, slightly irreverent, product-obsessed, anti-corporate” with two demonstration sentences in that voice.
Advanced note: After the voice profile, ask Claude to rewrite your own homepage hero section in the competitor’s voice. Then ask it to identify which specific changes made the biggest difference. That gap analysis is your actual copywriting brief.
Prompt #5: Microcopy audit
What it does: Extracts and analyses all the small-copy decisions on a site: button labels, placeholder text, error messages, empty states, tooltips and confirmation messages.
When to use it: When a product feels polished and you can’t quite work out why. The answer is usually microcopy.
The prompt:
I'm going to share microcopy from a product interface. Analyse it as a UX writer
studying how a product communicates in the smallest moments.
Catalogue and analyse:
1. Button and action labels: list them all. What verb patterns do they use?
Do they describe the action or the outcome?
2. Placeholder text: is it instructional, aspirational or example-based?
Does it stay visible during input or disappear?
3. Error messages: how do they handle mistakes? Blame the user or own the problem?
Do they tell you what went wrong and what to do next?
4. Empty states: what do they show when there's no content yet? Is it helpful,
playful or just blank?
5. Confirmation and success messages: how do they celebrate completions?
Functional or warm?
6. Tooltip and helper text: where do they add context? How long are they?
7. Overall microcopy philosophy: write one paragraph describing the personality
and principles behind the writing, as if you were briefing a new UX writer
joining the team.
Here is the microcopy:
[PASTE ALL UI TEXT FROM THE INTERFACE]How to use it:
Go through the product you’re studying and copy every piece of text that isn’t marketing copy or content: labels, placeholders, errors, confirmations
The “overall philosophy” paragraph at the end is worth keeping as a writing brief
Compare the error message patterns to your own product. This is usually where the biggest gaps are
Example input: Microcopy from Superhuman’s email interface.
What you’ll get: A catalogue showing Superhuman uses outcome-based button labels (”Done” not “Mark as read”), aspirational placeholders (”Search everything”), warm and brief confirmation messages, a notably absent error state (by design, since the product is engineered to prevent errors rather than handle them gracefully), and a philosophy paragraph that reads: “Write for speed. Every word is a tax on the user’s attention. Celebrate momentum. Never explain what the interface already shows.”
Advanced note: After the audit, ask Claude to apply the same microcopy philosophy to your own interface. Give it your current button labels and error messages and ask for rewrites in the studied product’s voice. You’ll see immediately what “high craft” microcopy feels like compared to what most products ship.
Prompt #6: Component clone from screenshot
What it does: Takes a screenshot of any UI component and produces working HTML and CSS that replicates its structure, spacing and visual style.
When to use it: When you see a card, nav, hero block or form you want to build and you’d rather start from a working clone than a blank file.
The prompt:
I'm going to share a screenshot of a UI component. Build me a working HTML and CSS
replica of it.
Requirements:
- Semantic HTML5 elements where appropriate
- CSS using custom properties for all colours, spacing and typography values
- No external dependencies unless the original clearly uses an icon library
- Mobile-responsive by default
- Comments in the CSS explaining any non-obvious decisions
After the code, write a short note on:
- What you approximated (where you couldn't be precise from the screenshot)
- What you'd need to know to make it pixel-perfect
- One improvement you'd suggest over the original
Screenshot: [ATTACH COMPONENT SCREENSHOT]How to use it:
Crop your screenshot tightly to just the component you want. Don’t include surrounding page chrome
The “what I approximated” note at the end is useful for prioritising where to spend time refining
Paste the output into a CodePen or local file to test immediately
Example input: Screenshot of a pricing card from Vercel’s pricing page.
What you’ll get: Working HTML with a card wrapper, plan name, price display, feature list and CTA button, CSS custom properties for the dark surface colour, accent border treatment and spacing, mobile-responsive layout, and a note flagging that the exact font weight on the price figure was estimated at 700 and the precise box-shadow spread couldn’t be confirmed from the screenshot.
Advanced note: After the first clone, ask Claude to produce a variant: “now give me a highlighted/featured version of the same card that would work as the ‘recommended’ option.” You get a complete pricing card set without starting over.
Prompt #7: Animation and interaction logic extraction
What it does: Reverse-engineers the motion design and interaction patterns from a site’s animations without needing to read the JavaScript source.
When to use it: When a site’s interactions feel premium and you want to understand what’s creating that feeling.
The prompt:
I'm going to describe the animations and interactions I've observed on a website.
Reverse-engineer the likely implementation and give me working CSS and/or JS to
recreate the effect.
For each interaction I describe:
1. Identify what CSS properties are likely being animated
2. Identify the trigger (hover, scroll, load, click)
3. Estimate the duration and easing curve that would produce this feel
4. Write the CSS transition or animation, or minimal vanilla JS if required
5. Note any performance considerations (stick to transform and opacity where possible)
Interactions to reverse-engineer:
[DESCRIBE EACH ANIMATION IN PLAIN ENGLISH, E.G.:
- Cards lift slightly and show a shadow on hover, with a very short delay
- The hero headline fades in word by word on page load
- The nav shrinks and gains a background blur as you scroll down]How to use it:
Spend five minutes on the site you’re studying, watching each interaction carefully before describing it
Describe what you see, not what you think the code does. Claude will infer the implementation
Test the output in isolation before integrating; animation timing often needs adjustment to context
Example input: Describing three interactions from Loom’s marketing site: card hover lifts, scroll-triggered section fades, and a sticky nav with blur backdrop.
What you’ll get: CSS for the card lift using transform: translateY(-4px) with box-shadow transition at 200ms ease-out, an Intersection Observer setup for the scroll fades with staggered animation-delay per element, and the sticky nav using position: sticky with backdrop-filter: blur(12px) triggered by a scroll class toggle.
Advanced note: After getting the implementations, ask Claude to audit them for performance. It will flag any that trigger layout recalculation (the expensive kind) and suggest property swaps that keep the same visual result with better frame rates.
Prompt #8: Full competitor teardown
What it does: Produces a structured competitive analysis document from a single session studying one site, covering design, copy, UX, positioning and what you can steal versus what you should avoid.
When to use it: Before a redesign, a new product launch, or any time a competitor is outperforming you and you want to know specifically why.
The prompt:
I'm going to share information about a competitor's site. Produce a full teardown
document structured as follows:
**First impression (10 seconds)**
What does the site communicate in the first 10 seconds? What problem does it solve,
for whom, and why should you care? Could a confused first-time visitor answer those
three questions without scrolling?
**Design strengths**
3-5 specific design decisions that are working well. Be precise. Not "clean layout"
but "the use of 80% whitespace in the hero creates immediate visual hierarchy that
draws the eye to the single CTA."
**Copy strengths**
3-5 specific copy choices that are effective. Quote the actual line and explain why
it works.
**UX friction points**
Where does the experience break down? What requires more clicks than it should?
What's confusing or missing?
**What to steal**
Specific, actionable things worth replicating in your own work. Not the aesthetic
but the decision.
**What to avoid**
Mistakes or choices that don't serve users well, with a brief explanation of why.
**Competitive positioning gap**
What space does this product NOT occupy that could be claimed?
Here is what I've gathered about the site:
[PASTE SCREENSHOTS, COPY, AND YOUR OWN OBSERVATIONS]How to use it:
Spend 20-30 minutes on the competitor’s site before running this prompt. Your observations are as important as the raw material you paste in
The “what to steal” section is the deliverable; everything else is context
Run this on your own site too, as if you were a competitor studying you
Example input: Screenshots, copy and observations from a competitor SaaS product in the project management space.
What you’ll get: A structured eight-section teardown identifying their first impression as clear but slow (the hero takes four seconds to load its animation), three specific design strengths including their use of customer logo placement to create social proof before the fold, two copy lines worth studying, two UX friction points, five concrete things to steal and a positioning gap observation: they own “enterprise teams” but leave “solo operators who’ve outgrown spreadsheets” entirely unaddressed.
Advanced note: After the teardown, ask Claude to write a one-page brief summarising the single biggest opportunity the competitor has left open. That brief is the starting point for your own positioning work.
Prompt #9: Style guide generator
What it does: Takes everything extracted in the previous prompts and compiles it into a single, shareable style guide document a developer or designer can work from immediately.
When to use it: At the end of a replication or redesign session, when you need to hand off direction to someone else or document your decisions for future reference.
The prompt:
I'm going to paste design decisions, tokens and patterns I've extracted from a site
I've been studying. Compile them into a clean, shareable style guide document.
The document should include:
**Brand personality** (3 sentences describing the visual and verbal identity)
**Colour system**
Primary, secondary, neutral and semantic colours with hex values.
Brief usage note for each (e.g. "primary: use for interactive elements and CTAs only").
**Typography**
Font choices, size scale, weight usage, line height guidelines.
Show the scale visually using markdown heading levels where possible.
**Spacing system**
The base unit and scale. Show as a table.
**Component patterns**
Brief description of 3-5 key components with their design rules.
**Copy voice**
5 adjectives. 3 rules (e.g. "never use passive voice", "lead with the outcome").
One before/after example.
**What to use this for**
One paragraph on how to apply this guide to a new project without making it
look like a direct copy.
Here is the extracted material:
[PASTE YOUR OUTPUTS FROM PREVIOUS PROMPTS IN THIS SESSION]How to use it:
This prompt works best at the end of a session where you’ve already run several earlier prompts. Paste in those outputs as the raw material
The “what to use this for” section is important: it frames the guide as a learning tool rather than a copy-paste template
Export the output as a PDF or Notion doc to share with collaborators
Example input: Outputs from prompts 1, 2, 4 and 5 in this article, all run on the same site in a single Claude session.
What you’ll get: A complete four-page style guide covering brand personality, a full colour token table, a typographic scale, an 8px-based spacing system, five component patterns with rules, a copy voice section with three writing rules and a before/after example, and a closing paragraph reframing the guide as an influence document rather than a replication manual.
Advanced note: After generating the style guide, ask Claude to identify the three decisions in it that are most distinctive to the original site and would be most recognisable as “borrowed.” Those are the ones to consciously replace with your own decisions when applying the guide to new work.
Prompt #10: Full replication brief
What it does: Combines everything from the session into a single, structured brief that a developer can use to build a new site or app that’s informed by your studied design, without being a copy of it.
When to use it: When you’re ready to build and need a single document that captures all your decisions rather than a scattered set of notes.
The prompt:
I've spent a session studying a site I admire and extracting its design decisions.
Now I want to use those lessons to build something new. Write a full build brief
for my project.
My project:
[DESCRIBE WHAT YOU'RE BUILDING IN 3-5 SENTENCES]
Target audience:
[WHO WILL USE IT AND WHAT DO THEY CARE ABOUT]
What I've learned from the site I studied:
[PASTE KEY OUTPUTS FROM THIS SESSION]
The brief should include:
**Project overview** (what this is and who it's for)
**Design direction** (what to steal and how to make it your own; be specific about
where to stay close to the reference and where to deliberately diverge)
**Technical stack recommendation** (based on the complexity and patterns observed)
**Page-by-page build list** (which pages to build, in what order, with priority)
**Component build list** (which components to build first, with complexity rating)
**Copy direction** (voice, headline approach, CTA strategy)
**Definition of done** (what does "finished" look like for version 1?)How to use it:
Write a clear project description before running this. Vague input produces vague briefs
The “design direction” section is the most important: it’s where influence becomes original work
Hand the complete output to a developer as the project brief, or use it as your own build checklist
Example input: A founder building a SaaS landing page for a solo developer tool, having studied Linear’s marketing site throughout this session.
What you’ll get: A structured brief covering a dark-surface design direction informed by Linear’s palette but with a warmer accent colour and more editorial typography, a three-page build list (landing, pricing, docs) with the landing page broken into six sections and prioritised, a component list with complexity ratings, a copy direction that takes Linear’s “built for focus” voice but applies it to a solo rather than team context, and a definition of done covering performance benchmarks and conversion elements for launch.
Advanced note: After the brief, ask Claude to write the first section of the landing page in full, using the brief as its only instruction. If it produces something that feels right, the brief is clear enough to build from. If it goes sideways, revise the brief before handing it to anyone else.
Implementation guide: running the full workflow
These 10 prompts work as a sequential pipeline. Here’s how to run them in one session:
Phase 1: Reconnaissance (Prompts 1-3) Start with the visual audit (screenshot), then pull the CSS tokens (source code), then map the layout structure. By the end of phase 1 you have a complete technical picture of the site’s design layer.
Phase 2: Language and interaction (Prompts 4-5, 7) Extract the copy patterns, catalogue the microcopy, then document the animations. This phase gives you the verbal and motion layers that most replication projects miss entirely.
Phase 3: Build output (Prompts 6, 9-10) Clone the component you most want to replicate, compile everything into a style guide, then write the build brief. You leave the session with working code, a shareable document and a project brief.
Where Prompt 8 fits: The competitor teardown (Prompt 8) is a standalone exercise. Run it at the start of a project to inform what you study, or at the end to sense-check whether your brief has addressed the gaps you found.
Keep everything in one Claude session if you can. Context carries forward and later prompts benefit from what was established earlier.
Bonus: replication session starter
Paste this at the top of any replication session to set Claude’s context before you start:
I'm starting a design replication session. I'm going to study [SITE NAME] to
understand the design decisions behind it and apply those lessons to [MY PROJECT].
Throughout this session:
- Be specific and technical, not vague and inspirational
- Give me code I can use, not just descriptions
- When you estimate something you can't confirm, say so
- Point out decisions that are unusual or distinctive, not just standard practice
- Keep outputs structured so I can paste them into later prompts in this session
Let's start.This primes Claude for the technical register the later prompts need. Without it, early responses sometimes drift toward design commentary rather than extractable decisions.
Advanced tips
Screenshot quality matters more than you think. Use a full-page screenshot tool (GoFullPage for Chrome works well) rather than a browser crop. Higher resolution means Claude can read font weights, spacing and subtle colour differences more accurately.
Pair this workflow with real DevTools time. Claude does the analysis; DevTools gives you the ground truth. When the two disagree, trust DevTools. When Claude notices something you hadn’t spotted in DevTools, investigate it.
Study sites outside your category. The most interesting design decisions to steal are rarely from direct competitors. A fintech founder who studies Notion’s information hierarchy learns more than one who only looks at other fintech products.
Build a personal reference library. After each replication session, save the style guide output (Prompt 9) with the site name and date. After ten sessions you have a reference library of analysed design systems you can pull from without re-running the workflow.
Claude’s image analysis has limits. It reads layout, spacing and colour well. It struggles with fine-grain font identification and precise pixel measurements. For type identification, use WhatFont or Fontface Ninja in the browser alongside this workflow.
DISCLAIMER