The First Version Of Your Startup's Website
Early-stage founders do this all the time:
You see a website or app.
You love the style.
You want your product to look like that.
Then you open ChatGPT and type:
“Make my website like Linear / Stripe / Notion.”
And what happens next?
You get something that looks:
- generic
- inconsistent
- “template-ish”
- and not like the product you admired
Because what you liked was never “the UI”.
What you liked was the system behind the UI.
In this article, I’ll show you the exact way designers reverse-engineer any website style and recreate it for their own product—using AI.
No design degree required.
No copying screens.
Just extracting rules and applying them.
Why Founders Fail When Trying to Copy UI
When founders say:
“I want this style”
They usually mean:
- the clean typography
- the premium spacing
- the calm color palette
- the consistent components
- the feeling of trust
But that isn’t a screen.
That’s a design system.
Here’s the key insight
✅ Good designers don’t copy screens.
✅ They reverse-engineer systems.
And AI is extremely good at this—if you ask the right way.
The 4-Step Method: Extract → Systemize → Apply → Validate
This method works on:
- SaaS landing pages
- mobile apps
- dashboards
- onboarding flows
- pricing pages
Let’s do it.
Step 1) Capture the Right Input (The Most Important Step)
Most founders fail here.
They screenshot an entire webpage or they send a URL and ask AI to “copy”.
Instead, do this:
✅ Pick ONE section only
Choose one:
- hero section
- pricing section
- dashboard table
- onboarding screen
✅ Your screenshot should include
- headline + body text
- at least one button
- cards/sections
- spacing & alignment clearly visible
Why?
Because AI works best with specific UI context, not a whole site full of noise.
Step 2) Extract the Design System (Prompt #1)
Open ChatGPT (or any vision-enabled AI), attach your screenshot, and paste this:
Prompt #1 — Style Extraction Prompt
You are a senior product designer.
Analyze this UI screenshot and extract the design system behind it.
Do NOT imitate the brand. Do NOT mention the company.
Return:
1) Typography
- font style (sans/serif), weight usage
- hierarchy (H1/H2/body/caption)
- type scale (approx sizes)
2) Color roles
- primary action
- background/surface
- text (primary/secondary)
- borders/dividers
Explain roles, not brand identity.
3) Spacing & layout
- base spacing unit (4/8)
- section spacing pattern
- grid/alignment notes
4) Components
- buttons (primary/secondary)
- cards
- inputs (if visible)
- nav pattern (if visible)
5) Visual personality
- 3 adjectives
- what audience it fits
What Results You Should Expect
If this works correctly, the output will look like this (example):
Typography
- Modern sans-serif, geometric feel
- H1: 44–56px, bold
- Body: 16–18px, regular
- Captions: 12–13px, muted
Spacing
- Base unit: 8px
- Section padding: 64–96px
- Card padding: 16–24px
- Gaps: 12 / 16 / 24
Components
- Primary button: filled, 10–12px radius
- Secondary: outline/ghost
- Cards: subtle border + light shadow
At this point, you have something powerful:
✅ the “DNA” behind the UI
But you still don’t have something implementable.
Let’s fix that.
Step 3) Turn It Into a Reusable Style Guide (Prompt #2)
Now we turn AI’s analysis into something you can actually apply.
Paste this follow-up prompt:
Prompt #2 — Style Guide Generator
Turn the extracted system into a reusable Style Guide v0.1 for a generic B2B SaaS.
Rules:
- Remove any brand-specific vibes
- Keep it practical and implementable
Include:
A) Typography rules + scale table
B) Color roles (with suggested neutral hex defaults)
C) Spacing scale (4/8-based) + section padding guidance
D) Component rules (buttons, cards, inputs)
E) 10 quick Do/Don’t rules
Output as a clean checklist + tables.
Example Output (Style Guide v0.1)
Typography Scale
- H1: 48 / 700
- H2: 32 / 650
- H3: 24 / 600
- Body: 16 / 400
- Small: 13 / 400
Spacing Scale
- 4, 8, 12, 16, 24, 32, 48, 64
Colors (Roles)
- Primary: #2563EB
- Text: #0F172A
- Muted text: #475569
- Background: #FFFFFF
- Surface: #F8FAFC
- Border: #E2E8F0
Now you have a mini design system:
✅ reusable
✅ adaptable
✅ consistent
Now we apply it.
Step 4) Apply the System to Your Landing Page (Prompt #3)
Pick your builder tool:
- Framer AI
- Figma Make
- Webflow AI
- v0 / Cursor
Then paste:
Prompt #3 — Apply Style Guide
Create a responsive SaaS landing page for: [YOUR PRODUCT IN ONE LINE]
Use this Style Guide exactly:
[PASTE STYLE GUIDE v0.1]
Page sections:
1) Top nav (logo, 3 links, CTA)
2) Hero (headline, subtext, primary + secondary CTA)
3) Social proof (logos)
4) Features (3 cards)
5) Pricing (3 tiers)
6) FAQ
7) Footer
Tone: clear, confident, not hype.
What You’ll Notice Immediately
If you do this correctly, your output will suddenly feel:
- consistent
- “premium”
- calm and structured
- professionally designed
Because the design isn’t random anymore.
It’s governed by rules.
Common Mistakes (And How to Fix Them)
Mistake 1: AI output feels too generic
Fix:
- use a stronger reference UI
- use a more detailed screenshot
- include a pricing section (best for patterns)
Mistake 2: The style guide feels messy
Fix:
Ask:
“Put the style guide into tables and enforce strict numbers and scales only.”
Mistake 3: The generated UI ignores the system
Fix:
In Prompt #3 add:
“Follow typography scale and spacing scale strictly.”
Final Thoughts
This is the big difference between:
❌ copying a UI
and
✅ borrowing a system
Good design isn’t decoration.
It’s decision-making.
And AI is great at extracting decisions—when you prompt it properly.
Hooman has been leading product design across SaaS, fintech, eCommerce, and consumer platforms for over a decade. Led design teams. Built design functions from scratch. Scaled design systems that moved retention, satisfaction, and conversion. Mentors founders on the brand and UX choices that align with business goals and investor readiness.
