7 Claude Prompts to Build a Premium Website

A practical prompt kit to stop Claude from generating cheap, templated websites. Learn how to assign AI specific roles like typography director and layout critic to achieve premium, high-converting designs.

By Arjav Jain · COO @ Hyperke, @lifeofarjav 11 min read Originally a reel on @lifeofarjav

A practical prompt kit from @lifeofarjav

Use this when your website looks functional but still feels generic, cheap, templated, or obviously AI-made.

The goal is not to make Claude "design a website" from one vague prompt.

The goal is to use Claude like a senior website strategist, typography director, layout critic, interaction designer, presentation specialist, and pre-launch reviewer.

Most people ask:

"Make my website better."

That is why they get average outputs.

This kit gives Claude sharper roles, better context, and more specific jobs.

What this kit helps you fix

Use these prompts when your website has any of these problems:

The page looks like a template.
The headline is vague.
The layout feels cramped.
The typography feels random.
The page has no hierarchy.
The design feels flat or static.
The case studies do not create trust.
The testimonials feel weak or fake.
The site looks like AI generated filler.
You are not sure what belongs above the fold.

This is built for founders, creators, agencies, coaches, consultants, service businesses, SaaS builders, AI product builders, freelancers, and personal brands.

Before you use the prompts

Do not skip this part.

Claude will give better answers if you provide context. Bad input creates generic output.

Prepare these before starting:

Your website link or screenshots
Your business type
Your ideal customer
Your offer
Your current headline
Your main conversion goal
1 to 3 websites you like
1 to 3 websites you dislike
Any brand colors, fonts, or visual references
Any constraints, such as no redesign, no animation, no custom code, or mobile-first only

Recommended format:

Business type:
Ideal customer:
Offer:
Current website:
Main conversion goal:
Brand vibe:
Websites I like:
Websites I dislike:
Current problem:
Constraints:

The best order to use these prompts

Do not throw all seven prompts at Claude at once.

Use them in this order:

The Signature Blueprint Prompt: define structure and strategy
The Anti-Sameness Type Prompt: fix typography and hierarchy
The Breathing Room Auditor: fix spacing and layout
The Purposeful Motion Prompt: add subtle interaction polish
The Case Study Framer: turn work into proof
The Trust Signal Sweep: remove credibility leaks
The Reference Anchor Prompt: make the whole site visually specific

This sequence matters.

Strategy before styling. Typography before motion. Layout before micro-interactions. Proof before polish. References before final design direction.

Prompt 1: The Signature Blueprint Prompt

What it solves

Most websites fail because the structure is weak before the design even begins.

This prompt makes Claude act like a strategist first, not a decoration machine.

Use it when:

Your site feels unclear.
The sections feel random.
You are not sure what to place above the fold.
Your page looks like every other template site.
You want a stronger website before touching colors or visuals.

Copy-paste prompt

Act as a senior website strategist and UX architect.

I want a website for [business type] that feels intentionally designed, not templated.

Ask me 5 clarifying questions about my brand, audience, offer, and style.

After I answer, give me:

1. The exact page structure
2. What should go above the fold
3. Which sections most template sites include but I should skip
4. The layout decisions that would make the site feel premium
5. The sections that build trust fastest
6. The conversion path from first impression to action
7. The one mistake that would instantly make this website feel cheap

Do not give generic advice.
Make the structure specific to my business, my audience, and my offer.

How to use it

Answer Claude's 5 questions seriously.

Do not write lazy answers like "premium", "modern", or "minimal" without explanation. Those words mean nothing on their own.

Better context:

My audience is DTC founders doing $1M to $10M per year who want to get into retail stores without hiring an internal wholesale team.

They are skeptical of agencies because they have been burned by generic lead gen. The site needs to feel credible, direct, and outcome-led, not flashy.

Weak context:

I want it to look clean and modern.

What a good output should include

A strong answer from Claude should give you:

A clear hero section
A specific headline angle
A logical section order
A trust-building sequence
A CTA strategy
A list of sections to avoid
Above-the-fold clarity
A reason behind each section

If Claude gives vague advice, push back.

Use this follow-up:

This is still too generic. Make it more specific to my exact business and audience. Remove any section that could appear on a random agency website. Give me a sharper structure with stronger reasoning.

Prompt 2: The Anti-Sameness Type Prompt

What it solves

Typography is one of the fastest giveaways of low-effort design.

A website can have good copy and still feel amateur if the type hierarchy is weak.

Use this when:

Every text block looks the same.
The font choices feel default.
The page has no hierarchy.
The headline does not feel premium.
The design feels too SaaS-template or too Canva-like.

Copy-paste prompt

Act as a typography director.

My site currently uses [describe fonts, font sizes, or upload screenshots].

Give me:

1. A font pairing that feels intentional
2. A full type scale for display headings, H1, H2, H3, body text, captions, buttons, and labels
3. Recommended font weights for each use case
4. Correct line height for each text style
5. Letter spacing guidance for headings, labels, and buttons
6. Rules for when to use serif vs sans-serif text
7. The one typography habit that makes good content look amateur

Keep the recommendations practical and implementable.
Do not suggest trendy fonts without explaining why they fit the brand.

How to use it

Give Claude a screenshot of your current design if possible.

Then ask it to output a simple type system.

Example output format you should request:

Return the answer as a clean typography table with columns:
Text style, font, size, weight, line height, letter spacing, use case.

What to watch for

Do not let Claude over-design.

If it suggests too many fonts, push back.

Use this follow-up:

Simplify this to a maximum of 2 font families and 6 core text styles. I want a system that is easy to implement, not a complex brand book.

Practical typography rules

Use these as guardrails:

One display style for major headlines
One body style for readable paragraphs
One small label style for metadata and tags
Strong contrast between headline and body
Avoid using too many weights
Avoid centered long paragraphs
Avoid tiny body text on mobile
Avoid uppercase for long sentences
Avoid low contrast gray text for important copy

Prompt 3: The Breathing Room Auditor

What it solves

Most amateur websites are not ugly because of colors.

They are ugly because everything is too close together.

Spacing controls how premium a page feels.

Use this when:

The design feels cramped.
Sections feel busy.
Nothing has visual breathing room.
The page technically has good content but feels cheap.
Mobile layouts feel dense or exhausting.

Copy-paste prompt

Act as a layout critic reviewing my page.

I will upload screenshots.

Go section by section and tell me:

1. Where the page feels cramped
2. Where it feels empty in the wrong way
3. The exact spacing changes that would make it feel more premium
4. Which elements need more margin or padding
5. Which sections should be visually grouped together
6. Which sections should be separated more clearly
7. How spacing should change between desktop and mobile
8. Why generous white space improves clarity and perceived quality

Give me specific recommendations, not vague design advice.
Use pixels or relative spacing where helpful.

How to use it

Upload screenshots of:

Desktop hero section
Desktop full page
Mobile hero section
Mobile full page
Any section that feels off

Ask Claude to critique the layout visually.

Follow-up prompt

Turn this critique into a section-by-section implementation checklist for my designer or developer. Keep it specific and practical.

What good spacing feedback looks like

Good feedback sounds like this:

Increase the spacing between the hero headline and subheadline from about 16px to 28px so the headline has more authority.

Reduce the gap between the testimonial quote and customer name so they feel like one trust unit.

Add 80px to 120px vertical spacing between the problem section and solution section on desktop, but keep it closer on mobile.

Bad feedback sounds like this:

Make it cleaner and more premium.

That is not useful.

Prompt 4: The Purposeful Motion Prompt

What it solves

Motion can make a website feel premium.

It can also make it feel cheap fast.

This prompt helps Claude suggest subtle interactions that add polish without turning the page into a circus.

Use this when:

The site feels flat.
Buttons feel lifeless.
Cards feel static.
You want polish without heavy animation.
You want motion that supports conversion, not distraction.

Copy-paste prompt

Act as an interaction designer.

My site is mostly static.

Give me 3 small hover or scroll interactions that add polish without custom animation.

For each interaction, tell me:

1. Where it belongs
2. What triggers it
3. What changes visually
4. Why it improves perceived quality
5. How to keep it subtle
6. When it would become distracting
7. How it should behave on mobile

Then tell me the line between tasteful detail and distracting gimmick.

Examples of tasteful motion

Good motion:

Button shadow deepens slightly on hover
Card lifts 2 to 4px on hover
CTA arrow shifts 4px right on hover
Section fades in softly when entering view
Testimonial cards reveal slightly staggered
Product image moves subtly with cursor
FAQ opens with a smooth height transition

Bad motion:

Random spinning icons
Constant floating objects
Huge scroll effects
Overdone parallax
Animations that slow down reading
Motion that competes with the CTA

Follow-up prompt

Give me the CSS or Framer implementation notes for these interactions. Keep them lightweight and easy to build.

Prompt 5: The Case Study Framer

What it solves

Most people dump project screenshots and call it a case study.

That does not build trust.

A strong case study tells a simple story:

Problem. Decision. Execution. Result.

Use this when:

Your portfolio does not prove outcomes.
Your work section feels weak.
Your case studies are too long.
Your case studies are too vague.
You do good work but do not present it well.

Copy-paste prompt

Act as a presentation specialist.

I want my work section to feel like a design studio's case study page.

Give me:

1. The structure for presenting one project persuasively
2. What to show
3. What to cut
4. How much text to use
5. Which screenshots or visuals matter most
6. How to explain the problem, process, and outcome
7. A caption style that lets the work speak for itself
8. A stronger way to show results if I do not have hard numbers yet

Do not make it sound like a corporate case study.
Make it clear, credible, and premium.

Recommended case study structure

Use this structure:

Project name:
Client or context:
Problem:
What was broken:
What we changed:
Key decisions:
Before:
After:
Result:
What this proves:

Example

Project:
Retail outreach landing page

Problem:
The original page explained the service but did not make the outcome obvious.

What we changed:
We reframed the offer around retailer pipeline, added proof above the fold, simplified the CTA, and moved process details lower on the page.

Result:
More visitors understood the offer without needing a sales call.

What this proves:
Positioning and page structure matter more than adding more content.

If you do not have numbers

Do not fake metrics.

Use proof types like:

Before and after screenshots
Clear strategic decision-making
Stronger messaging
Shorter path to CTA
Client quote
Screenshots of shipped work
User feedback
Faster workflow
Reduced confusion
Improved clarity

Use this follow-up:

I do not have hard numbers for this project yet. Help me present the outcome credibly without inventing metrics.

Prompt 6: The Trust Signal Sweep

What it solves

Trust is built in details.

It is also destroyed in details.

Fake trust signals are one of the biggest AI website tells.

Use this when:

Your site has vague testimonials.
You use fake-looking logos.
The copy sounds inflated.
The proof section feels generic.
You are not sure what makes the page credible.

Copy-paste prompt

Act as a pre-launch reviewer trained to spot amateur tells.

Here is my site description: [describe site].

Give me:

1. The 5 small details that separate polished from unfinished
2. The order to fix them in
3. The one detail worth obsessing over
4. Anything that looks like a fake or generic trust signal
5. Any copy that sounds inflated, vague, or AI-generated
6. Any visual element that lowers credibility
7. Any missing proof that would make the page more believable

Be direct.
Do not flatter the page.
Tell me what would make a serious buyer hesitate.

Common credibility leaks

Watch for these:

"Trusted by leading brands" with no proof
Stock testimonials with no full name or context
Fake client logos
Vague claims like "10x growth" without source
Overused AI copy
Too many buzzwords
No founder or team presence
No screenshots of actual work
No examples
No process
No pricing signal when buyers need one
No clear next step

Follow-up prompt

Rewrite the weak trust signals into stronger, more specific proof. Do not invent facts. Only use what I can honestly support.

Prompt 7: The Reference Anchor Prompt

What it solves

Vague design prompts give you average design.

Specific visual references help Claude understand the direction.

This prompt prevents your website from drifting into generic AI aesthetics.

Use this when:

You have a visual style in mind.
You want inspiration without copying.
Your site needs a clearer design direction.
You want Claude to explain what it changed and why.
You are using screenshots, moodboards, or reference sites.

Copy-paste prompt

Anchor my site's visual direction to this reference: [paste a screenshot or link].

Match its:

1. Type scale
2. Spacing rhythm
3. Visual hierarchy
4. Accent color discipline
5. Section pacing
6. Use of imagery
7. Level of visual restraint

But do not copy it.

Write real, specific copy for my business, not filler.

Then tell me:

1. What you changed
2. Why you changed it
3. What you intentionally did not copy
4. How to make the design feel inspired by the reference while still original

How to use references properly

Good references:

Show a clear visual direction
Match the feeling you want
Have strong spacing
Have good typography
Have similar buyer psychology
Are relevant to your audience

Bad references:

Random pretty websites
Websites from totally different industries with different buying behavior
Trendy landing pages with weak conversion logic
Sites that look premium but do not explain anything clearly

Follow-up prompt

Create a practical design direction based on this reference, but adapt it for my audience, offer, and conversion goal. Give me a section-by-section design plan.

Bonus: The Website Premiumizer Meta-Prompt

Use this after all seven prompts if you want one final critique.

Act as a brutally honest website quality reviewer.

Review everything we have created so far: the structure, typography, spacing, motion, case studies, trust signals, and visual direction.

Tell me:

1. What still feels generic
2. What still feels cheap
3. What still feels unclear
4. What would make a buyer hesitate
5. What should be removed
6. What should be simplified
7. What should be made more specific
8. The 3 highest leverage fixes before launch

Prioritize changes by impact:
High impact
Medium impact
Low impact

Be direct and practical.
Do not give motivational feedback.

Full Website Build Workflow

Use this section if you want to go from rough idea to launch-ready direction.

Step 1: Define the website brief

Paste this first:

Help me create a clear website brief.

Ask me the minimum questions needed to understand my business, audience, offer, proof, positioning, visual preferences, and conversion goal.

Then summarize the brief in a format I can use for website design.

Step 2: Run the Signature Blueprint Prompt

Use Prompt 1.

Output you want:

Page strategy
Section order
Above-the-fold plan
Conversion path
Sections to remove

Step 3: Run the typography prompt

Use Prompt 2.

Output you want:

Font pairing
Type scale
Heading hierarchy
Button style
Text spacing

Step 4: Run the layout audit

Use Prompt 3.

Output you want:

Section-by-section spacing fixes
Mobile adjustments
Desktop adjustments
Visual grouping notes

Step 5: Add subtle interaction

Use Prompt 4.

Output you want:

3 lightweight interactions
Trigger behavior
Mobile behavior
What to avoid

Step 6: Upgrade proof

Use Prompt 5 and Prompt 6.

Output you want:

Strong case study format
Clear trust signals
Weak proof removed
Specific proof added

Step 7: Anchor the design

Use Prompt 7.

Output you want:

Visual direction
What to copy in spirit
What not to copy
How to make it original

Step 8: Final pre-launch review

Use the bonus meta-prompt.

Output you want:

Top fixes
Priority order
Launch checklist

Practical Example: How to Use the Kit

Imagine you are building a website for a done-for-you cold email agency.

A bad prompt would be:

Make me a premium website for my agency.

A better workflow would be:

Business type:
Done-for-you cold email agency

Ideal customer:
B2B service businesses doing $500K to $5M per year that want more qualified sales calls.

Offer:
We build outbound campaigns, manage inboxes, write copy, build lead lists, and book calls.

Main conversion goal:
Book a strategy call.

Brand vibe:
Premium, direct, no hype, founder-led, proof-heavy.

Current problem:
The site explains the service but does not make the outcome obvious enough.

Then run Prompt 1.

After Claude gives the structure, run Prompt 2 for typography.

Then upload screenshots and run Prompt 3.

Then run Prompt 6 to find credibility leaks.

That is how you get useful output.

Do not ask Claude to magically guess everything.

Give it the right job.

Implementation Checklist

Before you publish your website, check this list.

Strategy

The hero says what you do, for whom, and why it matters.
The CTA is obvious.
The page has one primary goal.
The section order follows buyer psychology.
The page removes unnecessary sections.

Copy

The headline is specific.
The subheadline explains the outcome.
The copy avoids vague buzzwords.
The offer is clear.
The proof is specific.
The CTA is repeated at logical points.

Typography

There is a clear type hierarchy.
Body text is readable.
Buttons are easy to scan.
Labels are not overused.
Text blocks are not too wide.
Fonts feel intentional.

Layout

Sections have enough breathing room.
Related elements are visually grouped.
Mobile spacing is not cramped.
Important elements are not buried.
Cards and sections align cleanly.

Motion

Motion is subtle.
Motion supports clarity.
Nothing distracts from reading.
Hover states feel polished.
Mobile does not depend on hover.

Proof

Testimonials include context.
Case studies explain the problem and result.
Logos are real and relevant.
Metrics are not invented.
Claims are supportable.

Trust

No fake trust signals.
No generic AI copy.
No overpromising.
No confusing next step.
No visual elements that feel unfinished.

Common Mistakes to Avoid

Mistake 1: Asking for design without strategy

If the offer is unclear, better colors will not save the page.

Mistake 2: Copying a reference too literally

Use references for direction, not imitation.

Mistake 3: Adding too many sections

More content does not always mean more clarity.

Mistake 4: Using motion as decoration

Motion should guide attention, not entertain randomly.

Mistake 5: Faking proof

Fake proof kills trust faster than no proof.

Mistake 6: Treating Claude like a designer instead of a reviewer

Claude is strongest when you make it critique, structure, compare, and refine.

Mistake 7: Not giving screenshots

For design critique, screenshots beat description.

The Simple Rule

If you want better website output from Claude, stop asking broad questions.

Give Claude:

A specific role
A specific job
A specific reference
A specific audience
A specific conversion goal
A specific format for the answer

That is the difference between:

Make my website better.

And:

Act as a pre-launch reviewer. Tell me what would make a serious buyer hesitate, and what to fix first.

The second one creates better work.

Final Copy-Paste Prompt Pack

1. Signature Blueprint

Act as a senior website strategist and UX architect.

I want a website for [business type] that feels intentionally designed, not templated.

Ask me 5 clarifying questions about my brand, audience, offer, and style.

After I answer, give me:

1. The exact page structure
2. What should go above the fold
3. Which sections most template sites include but I should skip
4. The layout decisions that would make the site feel premium
5. The sections that build trust fastest
6. The conversion path from first impression to action
7. The one mistake that would instantly make this website feel cheap

Do not give generic advice.
Make the structure specific to my business, my audience, and my offer.

2. Anti-Sameness Type

Act as a typography director.

My site currently uses [describe fonts, font sizes, or upload screenshots].

Give me:

1. A font pairing that feels intentional
2. A full type scale for display headings, H1, H2, H3, body text, captions, buttons, and labels
3. Recommended font weights for each use case
4. Correct line height for each text style
5. Letter spacing guidance for headings, labels, and buttons
6. Rules for when to use serif vs sans-serif text
7. The one typography habit that makes good content look amateur

Keep the recommendations practical and implementable.
Do not suggest trendy fonts without explaining why they fit the brand.

3. Breathing Room Auditor

Act as a layout critic reviewing my page.

I will upload screenshots.

Go section by section and tell me:

1. Where the page feels cramped
2. Where it feels empty in the wrong way
3. The exact spacing changes that would make it feel more premium
4. Which elements need more margin or padding
5. Which sections should be visually grouped together
6. Which sections should be separated more clearly
7. How spacing should change between desktop and mobile
8. Why generous white space improves clarity and perceived quality

Give me specific recommendations, not vague design advice.
Use pixels or relative spacing where helpful.

4. Purposeful Motion

Act as an interaction designer.

My site is mostly static.

Give me 3 small hover or scroll interactions that add polish without custom animation.

For each interaction, tell me:

1. Where it belongs
2. What triggers it
3. What changes visually
4. Why it improves perceived quality
5. How to keep it subtle
6. When it would become distracting
7. How it should behave on mobile

Then tell me the line between tasteful detail and distracting gimmick.

5. Case Study Framer

Act as a presentation specialist.

I want my work section to feel like a design studio's case study page.

Give me:

1. The structure for presenting one project persuasively
2. What to show
3. What to cut
4. How much text to use
5. Which screenshots or visuals matter most
6. How to explain the problem, process, and outcome
7. A caption style that lets the work speak for itself
8. A stronger way to show results if I do not have hard numbers yet

Do not make it sound like a corporate case study.
Make it clear, credible, and premium.

6. Trust Signal Sweep

Act as a pre-launch reviewer trained to spot amateur tells.

Here is my site description: [describe site].

Give me:

1. The 5 small details that separate polished from unfinished
2. The order to fix them in
3. The one detail worth obsessing over
4. Anything that looks like a fake or generic trust signal
5. Any copy that sounds inflated, vague, or AI-generated
6. Any visual element that lowers credibility
7. Any missing proof that would make the page more believable

Be direct.
Do not flatter the page.
Tell me what would make a serious buyer hesitate.

7. Reference Anchor

Anchor my site's visual direction to this reference: [paste a screenshot or link].

Match its:

1. Type scale
2. Spacing rhythm
3. Visual hierarchy
4. Accent color discipline
5. Section pacing
6. Use of imagery
7. Level of visual restraint

But do not copy it.

Write real, specific copy for my business, not filler.

Then tell me:

1. What you changed
2. Why you changed it
3. What you intentionally did not copy
4. How to make the design feel inspired by the reference while still original

Closing Note

Claude is not the shortcut.

The shortcut is knowing what job to give it.

Use these prompts one by one, give real context, upload screenshots, and push for specificity.

The output will be dramatically better than one vague "make it premium" prompt.

Epistemic Status

Confidence level: 8/10

These prompts are based on practical website strategy, UX review patterns, design critique workflows, and prompt engineering principles. They are not a substitute for a senior designer, but they will produce materially better direction than broad generic prompting.

What would change my mind

Real user testing, conversion data, or designer feedback showing that a different sequence produces better outcomes.

Assumptions

The user has a real offer, audience, and conversion goal.
The user can provide screenshots or a website link.
Claude is being used as a strategy and critique assistant, not as the only design authority.
The user will not blindly accept the first output.

Related questions not covered

How to implement the design in Webflow, Framer, WordPress, or code
How to run A/B tests
How to measure conversion improvement
How to write the final website copy
How to build a full design system

Related in AI & Claude

← Back to Writing