Claude Prompt Library

30 Claude Prompts for SaaS Homepages

30 copy-paste prompts

Fill the brackets. Claude returns one HTML SaaS homepage as an Artifact: hero, proof, how it works, pricing tease. Not a full app and not the pricing-page pack.

In short: This page contains 30 copy-paste ready prompts, organized into 6 categories with a description and pro tip for each. The first 5 prompts are free instantly, no signup needed. Hand-curated and tested by the AI Academy team.

By Louis Corneloup · Founder, Techpresso

Last updated September 8, 2026·Hand-curated & tested by the AI Academy team

Hero

5 prompts

Spoken Hero

1/30

✨ What it does

Claude builds a spoken-hero homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a homepage writer <context> I need one self-contained HTML spoken-hero homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job it does: [JOB] - Who: [WHO] </inputs> <task> Build a responsive spoken-hero homepage with these sections: 1. Spoken headline from [JOB] 2. Who 3. One CTA 4. Product shot placeholder Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: If it could sell any SaaS, rewrite.

Before After Hero

2/30

✨ What it does

Claude builds a before-after homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a contrast writer <context> I need one self-contained HTML before-after homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Before: [BEFORE] - After: [AFTER] </inputs> <task> Build a responsive before-after homepage with these sections: 1. Split hero 2. After only from [AFTER] 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent the after.

Founder Hero

3/30

✨ What it does

Claude builds a founder homepage for [FOUNDER] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a founder-homepage writer <context> I need one self-contained HTML founder homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FOUNDER] - Product: [PRODUCT] - Line: [LINE] </inputs> <task> Build a responsive founder homepage with these sections: 1. Face placeholder 2. Line 3. Product 4. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: First person. No thrilled.

Quiet Hero

4/30

✨ What it does

Claude builds a quiet homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a quiet homepage designer <context> I need one self-contained HTML quiet homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Line: [LINE] </inputs> <task> Build a responsive quiet homepage with these sections: 1. Space 2. Line 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No gradient circus.

Video Hero

5/30

✨ What it does

Claude builds a video homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a video-hero designer <context> I need one self-contained HTML video homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Video: [VIDEO OR PLACEHOLDER] - Line: [LINE] </inputs> <task> Build a responsive video homepage with these sections: 1. Placeholder 2. Line 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No fake Wistia id.

Proof

5 prompts

Logo Wall Honest

6/30

✨ What it does

Claude builds a logo-wall homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a proof designer <context> I need one self-contained HTML logo-wall homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Names I can use: [NAMES] </inputs> <task> Build a responsive logo-wall homepage with these sections: 1. Hero stub 2. Names from [NAMES] only 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No invented logos.

Quote Homepage

7/30

✨ What it does

Claude builds a quote homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a quote editor <context> I need one self-contained HTML quote homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Quotes I have: [QUOTES] </inputs> <task> Build a responsive quote homepage with these sections: 1. Hero 2. Quotes only 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No invented customer.

Metric Honest

8/30

✨ What it does

Claude builds a metric homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a metrics skeptic <context> I need one self-contained HTML metric homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Metrics I can publish: [METRICS OR NONE] </inputs> <task> Build a responsive metric homepage with these sections: 1. Hero 2. Metrics or skip the row 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No 10k teams unless you typed it.

Use Case Row

9/30

✨ What it does

Claude builds a use-case homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a use-case editor <context> I need one self-contained HTML use-case homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Cases: [CASES] </inputs> <task> Build a responsive use-case homepage with these sections: 1. Hero 2. Cases from [CASES] 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a vertical.

Press Mentions

10/30

✨ What it does

Claude builds a press homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a press editor <context> I need one self-contained HTML press homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Mentions: [MENTIONS OR NONE] </inputs> <task> Build a responsive press homepage with these sections: 1. Hero 2. Mentions or skip 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: As seen in nowhere is better than a lie.

How It Works

5 prompts

Three Steps

11/30

✨ What it does

Claude builds a three-step homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a steps writer <context> I need one self-contained HTML three-step homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Steps: [STEPS] </inputs> <task> Build a responsive three-step homepage with these sections: 1. Hero 2. Three steps from [STEPS] 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not add a fourth miracle.

Product Tour Stub

12/30

✨ What it does

Claude builds a tour homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a tour designer <context> I need one self-contained HTML tour homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Screens: [SCREENS] </inputs> <task> Build a responsive tour homepage with these sections: 1. Hero 2. Screen placeholders from [SCREENS] 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No invented UI chrome.

For Not For

13/30

✨ What it does

Claude builds a for-not-for homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are an honest closer <context> I need one self-contained HTML for-not-for homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - For: [FOR] - Not: [NOT] </inputs> <task> Build a responsive for-not-for homepage with these sections: 1. Hero 2. For 3. Not 4. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: A not list saves support later.

Replace The Spreadsheet

14/30

✨ What it does

Claude builds a replace-old homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a replacement writer <context> I need one self-contained HTML replace-old homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Old tool: [OLD] - What moves: [MOVES] </inputs> <task> Build a responsive replace-old homepage with these sections: 1. Hero 2. What moves 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a migration time.

Security Note

15/30

✨ What it does

Claude builds a security-note homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a security-copy editor <context> I need one self-contained HTML security-note homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - What is true: [TRUE] </inputs> <task> Build a responsive security-note homepage with these sections: 1. Hero 2. Security from [TRUE] 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: No fake ISO unless you have it.

These prompts give you the what. Tutorials give you the why.

Learn when to use extended thinking, how to build Claude Projects, and workflows that compound. 300+ tutorials and growing.

Try AI Academy Free

Convert

5 prompts

Pricing Tease

16/30

✨ What it does

Claude builds a pricing-tease homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a tease-to-pricing designer <context> I need one self-contained HTML pricing-tease homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - From price: [PRICE OR VERIFY] - Link: [PRICING HREF OR #] </inputs> <task> Build a responsive pricing-tease homepage with these sections: 1. Hero 2. From-price or [VERIFY] 3. Jump to #pricing or a stub 4. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent $29.

Email Capture Home

17/30

✨ What it does

Claude builds a email homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a capture designer <context> I need one self-contained HTML email homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - What they get: [GET] </inputs> <task> Build a responsive email homepage with these sections: 1. Hero 2. Email dummy 3. What they get from [GET] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Dummy submit only.

Two CTAs

18/30

✨ What it does

Claude builds a two-cta homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a dual-CTA designer <context> I need one self-contained HTML two-cta homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Primary: [PRIMARY] - Secondary: [SECONDARY] </inputs> <task> Build a responsive two-cta homepage with these sections: 1. Hero 2. Two labeled CTAs 3. Proof stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Primary should look primary.

Demo Request

19/30

✨ What it does

Claude builds a demo homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a demo-form designer <context> I need one self-contained HTML demo homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Fields: [FIELDS] - Who should book: [WHO] </inputs> <task> Build a responsive demo homepage with these sections: 1. Hero 2. Dummy demo form from [FIELDS] 3. Who Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a calendar link.

Self Serve Plus Sales

20/30

✨ What it does

Claude builds a hybrid homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a hybrid homepage designer <context> I need one self-contained HTML hybrid homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Self: [SELF] - Sales: [SALES] </inputs> <task> Build a responsive hybrid homepage with these sections: 1. Hero 2. Two paths 3. CTA each Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not hide the small plan.

Variants

5 prompts

Devtool Homepage

21/30

✨ What it does

Claude builds a devtool homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a devtool marketer <context> I need one self-contained HTML devtool homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Install: [INSTALL] - Job: [JOB] </inputs> <task> Build a responsive devtool homepage with these sections: 1. Install from [INSTALL] 2. Job 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: A real install line beats a metaphor.

B2B Boring Homepage

22/30

✨ What it does

Claude builds a boring B2B homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a boring-B2B designer <context> I need one self-contained HTML boring B2B homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job: [JOB] - Buyer: [BUYER] </inputs> <task> Build a responsive boring B2B homepage with these sections: 1. Job 2. Buyer 3. Proof stub 4. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Boring is a compliment here.

Consumer SaaS

23/30

✨ What it does

Claude builds a consumer saas homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a consumer designer <context> I need one self-contained HTML consumer saas homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Feeling: [FEELING] - Job: [JOB] </inputs> <task> Build a responsive consumer saas homepage with these sections: 1. Feeling 2. Job 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Still no invented users.

Rebuild Homepage

24/30

✨ What it does

Claude builds a rebuilt homepage for [CURRENT PASTE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a ruthless editor <context> I need one self-contained HTML rebuilt homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [CURRENT PASTE] - Keep: [KEEP] - Cut: [CUT] </inputs> <task> Build a responsive rebuilt homepage with these sections: 1. Diagnose 2. Rebuild 3. Keep [KEEP] 4. Cut [CUT] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Paste the current home.

Mobile Homepage

25/30

✨ What it does

Claude builds a mobile saas homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a mobile designer <context> I need one self-contained HTML mobile saas homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job: [JOB] </inputs> <task> Build a responsive mobile saas homepage with these sections: 1. Job 2. Sticky CTA 3. Proof stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Thumb to the button.

Most people use 10% of Claude. Tutorials unlock the rest.

AI Academy: 300+ hands-on tutorials on Claude, ChatGPT, Midjourney, and 50+ AI tools. New tutorials added every week.

Start Your Free Trial

Fixes

5 prompts

Cut The Slides

26/30

✨ What it does

Claude builds a no-slide homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a slide-hunter <context> I need one self-contained HTML no-slide homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job: [JOB] </inputs> <task> Build a responsive no-slide homepage with these sections: 1. Rebuild 2. Job first 3. No revolution copy Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Unlock your potential goes.

A11y Homepage

27/30

✨ What it does

Claude builds a accessible homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are an a11y designer <context> I need one self-contained HTML accessible homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job: [JOB] </inputs> <task> Build a responsive accessible homepage with these sections: 1. Contrast 2. Focus 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: The CTA must be a real button.

One Screen Home

28/30

✨ What it does

Claude builds a one-screen homepage for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a one-screen designer <context> I need one self-contained HTML one-screen homepage I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job: [JOB] - CTA: [CTA] </inputs> <task> Build a responsive one-screen homepage with these sections: 1. Job 2. CTA 3. No scroll sections Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: If you scroll, you used the wrong prompt.

Homepage Plus Footer

29/30

✨ What it does

Claude builds a homepage with footer for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a footer designer <context> I need one self-contained HTML homepage with footer I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job: [JOB] - Footer links: [LINKS] </inputs> <task> Build a responsive homepage with footer with these sections: 1. Hero 2. Footer from [LINKS] only Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a careers page.

Homepage Plus Docs Tease

30/30

✨ What it does

Claude builds a homepage docs tease for [PRODUCT] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a product-led designer <context> I need one self-contained HTML homepage docs tease I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PRODUCT] - Job: [JOB] - Docs label: [DOCS] </inputs> <task> Build a responsive homepage docs tease with these sections: 1. Hero 2. Docs tease 3. CTA Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Docs tease is a link, not a second site.

Free tool

Prompt Optimizer

Turn a rough idea into a structured, professional AI prompt.

Try it free →

Frequently Asked Questions

No. Every prompt tells Claude to mark missing facts as [VERIFY] instead of inventing customers, prices, or dates on the SaaS homepage. You still review the Artifact before you publish.

Use Claude with Artifacts (claude.ai or the desktop app). Paste a prompt, fill the brackets, and open the HTML Artifact in the chat. Download the file when it looks right.

Yes, it is one self-contained file with inline CSS. Swap photo placeholders and [VERIFY] lines, then host it. It is a working first page, not a production design system.

The prompts are free to copy. Generating Artifacts needs a Claude plan that can create them. The free tier has limits. Paid plans run more generously.

The hub covers a whole site. This page is only the SaaS homepage: thirty prompts, one job, so the Artifact stays on that page instead of turning into a generic homepage.

Prompts are the starting line. Tutorials are the finish.

A growing library of 300+ hands-on tutorials on ChatGPT, Claude, Midjourney, and 50+ AI tools. New tutorials added every week.

Start 7-Day Free Trial Explore AI for Entrepreneurs

7-day free trial. Cancel anytime.

Browse All Claude Prompt Collections Browse All Prompt Collections

Popular prompt collections

AI Photo Editing Prompts ChatGPT Jailbreak Prompt Best ChatGPT Prompts Funny Hinge Prompts ChatGPT Caricature Prompts