Ai Website Clone

 AI Website Design & Conversion Guidebook

A Complete Reference Based on the Video Walkthrough

SECTION 1 — Full Design Element Cheat Sheet

(As Shown and Described in the Video ~8:55)

The creator displays and discusses a downloadable “design elements cheat sheet” containing trendy, premium design components to elevate AI-generated website designs. These elements are inspired by high-end visuals and layouts from platforms such as Dribbble, Mobbin, and similar premium design libraries.

During the video, he actively selects and adds several of these elements directly into his prompt while working live on screen.

Full Replicated List of Design Elements (Explicitly Mentioned and Used)

• Solo animated background

• Soft animated background light beam texture

• Intentional micro interactions

• Everything reacts

• Depth layers

• Strong typography

The creator states:

“You can go through and decide what you would like… different kind of components that you want like depth layers, strong typography, whatever you want to.”

These are the core design elements highlighted, discussed, and applied during the demonstration.

How to Use the Design Elements in Prompts (Exactly as Demonstrated)

The creator instructs users to copy and paste or otherwise incorporate selected design elements directly into the stylistic guidelines section of their prompt.

Example Prompt Usage:

“Incorporate a solo animated background, soft animated background light beam texture, intentional micro interactions where everything reacts, depth layers, and strong typography.”

He also mentions that there is a link in the video description to download the full design elements cheat sheet, which includes additional options beyond the ones shown live.

SECTION 2 — Full Specific Design Prompt Structure

(As Built Starting ~8:28)

The creator builds a powerful “one-shot” three-part prompt inside Google AI Studio (Gemini). The purpose of this prompt is to generate a complete, premium website design and code output in one single run.

This prompt structure is built step by step and explained in detail.

Part 1 — Business Description / Context

The creator begins by describing the business clearly and in detail.

Example (as shown):

“Hey, I would like you to design for me a website for an agency that helps dentists scale their business using proven AI systems…”

At this stage, the user is expected to provide:

• Business details

• Target audience

• Offer

• Goals

• Context for the website

Part 2 — Stylistic Guidelines

Next, the creator adds stylistic direction to guide the visual output.

He explains:

“Give it some information about the kind of stylistic guidelines…”

This section includes:

• References to inspiration images

• Mood boards from Canva, Dribbble, Mobbin, or Base10

• Explicit inclusion of selected design elements from the cheat sheet

Example Instruction:

“Incorporate solo animated background, soft animated background light beam texture, intentional micro interactions, everything reacts, depth layers, and strong typography.”

The creator stresses the importance of attaching screenshots or referencing premium design sites to achieve a “premium vibe.”

Part 3 — Structure Guidelines

He then instructs:

“Add more specifics at the bottom.”

This section defines exactly how the page should be laid out, using a proven conversion-focused structure (detailed in the next section).

SECTION 3 — Full Website Structure

(Pasted and Explained Starting ~10:26)

The creator pastes a high-converting website structure directly into the prompt to guide layout and hierarchy.

Exact Structure as Explained

• Start with a hook at the top

• Present a promise of value / value proposition

• Follow with value proposition details (two or three supporting points)

• Include proof

• End with a CTA at the bottom of the screen

He explains that this structure can be adjusted based on traffic temperature (cold traffic, warm traffic, outbound traffic) and influenced by any upfront strategic notes.

SECTION 4 — Full 8-Step Conversion Blueprint

(Referenced and Used ~14:15)

The creator opens his “school docs” notes and pastes his pre-made 8-Step Conversion Blueprint into a follow-up refinement prompt.

He describes it as:

“This is my eight-step conversion blueprint. Effectively, this is all the stuff we want on a high-converting page to turn viewers into buyers.”

Blueprint as Displayed and Pasted in the Video

Value Proposition
Proof
Fraction (risk reversal, objection handling, or fractional / low-risk offer)
CTA
Follow-up
Debug

He notes that while it is referred to as an “eight-step” blueprint, these core six steps are what he displays and uses in the demo. The emphasis is on ensuring all conversion-critical elements are present.

How He Uses the Blueprint in Practice

In a second prompt, he instructs:

“Grab this 8-step conversion blueprint, which effectively is all the stuff we want on a high converting page… [paste the list]. Refine the previous design to include these elements perfectly.”

This refinement step transforms a visually strong design into a highly persuasive, conversion-optimized page.

SECTION 5 — Expanded Full 8-Step Conversion Blueprint (Clean, Complete, and Explained)

Purpose:
Ensure every high-converting page element exists so traffic turns into booked calls or sales.

STEP 1 — Hook / Pattern Interrupt

What it is:
The very first thing visitors see. Its only job is to stop scrolling.

Includes:

• Bold headline

• Clear transformation

• Audience call-out

• Pattern interrupt

Example:

“How Dentists Add 30–50 New Patients a Month Using AI — Without Hiring More Staff”

STEP 2 — Value Proposition

What it is:
A crystal-clear promise of what they get, how it’s different, and why it matters.

Includes:

• Who it’s for

• The outcome

• The unique mechanism

• Speed or ease

Example:

“We build AI systems that automate patient acquisition, follow-ups, and reactivation for dental practices — so you grow without burnout.”

STEP 3 — Proof

What it is:
Evidence that this actually works.

Includes:

• Testimonials

• Case studies

• Before/after metrics

• Logos

• Screenshots

• Video proof

• Usage stats

Rule:
Claims without proof kill conversions.

STEP 4 — Objection Handling / Friction Removal

What it is:
Address the reasons people hesitate before leaving.

Common objections:

• “Will this work for me?”

• “Is this expensive?”

• “How long does it take?”

• “What if I don’t have time?”

How to handle:

• FAQs

• Short objection bullets

• Comparison tables

• Guarantees

STEP 5 — Fraction (Risk Reversal / Low-Risk Entry)

What it is:
A small yes that leads to a big yes.

Examples:

• Free audit

• Strategy call

• Trial

• Diagnostic

• Low-commitment starter offer

• Guarantee

Why it works:
Reduces psychological and financial risk.

STEP 6 — CTA (Primary Call to Action)

What it is:
Tell them exactly what to do next.

Rules:

• One primary CTA

• Clear benefit

• Action-oriented

• Visible above the fold

Examples:

• “Book Your Free AI Growth Audit”

• “Get the Custom Plan”

• “See If You Qualify”

STEP 7 — Follow-Up / Secondary Conversion Paths

What it is:
Ways to capture or convert people who aren’t ready yet.

Includes:

• Secondary CTAs

• Email capture

• Scarcity

• Urgency

• Reminders

• Sticky buttons

• Exit intent

Goal:
No visitor leaves empty-handed.

STEP 8 — Debug (Final Optimization Pass)

What it is:
Ensure nothing breaks conversion.

Checklist:

• Mobile-first design

• Fast load speed

• Clear hierarchy

• No distractions

• Buttons work

• Forms are simple

• Accessibility and readability

This is where amateurs stop — professionals optimize.

SECTION 6 — Clean, Paste-Ready 8-Step Blueprint

1. Hook / Pattern Interrupt

2. Value Proposition

3. Proof

4. Objection Handling / Friction Removal

5. Fraction (Risk Reversal or Low-Risk Entry)

6. Primary CTA

7. Follow-Up / Secondary CTAs

8. Debug & Optimization

SECTION 7 — Concise One-Shot AI Prompt

Design a high-converting, premium single-page website. Business context: [Describe business, audience, offer, and goal] Stylistic guidelines: Use a modern, premium aesthetic inspired by Dribbble and Mobbin. Incorporate: solo animated background, soft animated background light beam textures, intentional micro-interactions where everything reacts, depth layers, and strong typography. Website structure: Above-the-fold hook Clear value proposition Expanded value details Proof CTA Conversion optimization: Refine the design to perfectly incorporate this 8-step conversion blueprint: 1. Hook / Pattern Interrupt 2. Value Proposition 3. Proof 4. Objection Handling 5. Fraction (Risk Reversal) 6. Primary CTA 7. Follow-Up / Secondary CTAs 8. Debug & Optimization Output clean, production-ready HTML, CSS, and JavaScript.

me. It's easy.