The First Version Of Your Startup's Website

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.