Claude Prompt Library

30 Claude Prompts That Build Blog Sites

30 copy-paste prompts

Fill the brackets. Claude returns one HTML blog as an Artifact: index, a post template, tags. Dummy search only. Not a CMS and not a newsletter ESP.

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.

Louis Corneloup
By Louis Corneloup · Founder, Techpresso
Last updated ·Hand-curated & tested by the AI Academy team

Index

5 prompts

Post Index

1/30

✨ What it does

Claude builds a blog index for [BLOG NAME] 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 blog-index designer <context> I need one self-contained HTML blog index I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Posts I have: [POSTS] </inputs> <task> Build a responsive blog index with these sections: 1. Name 2. List from [POSTS] only 3. Dates or [VERIFY] 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 post.

Featured Plus List

2/30

✨ What it does

Claude builds a featured blog index for [BLOG NAME] 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 magazine designer <context> I need one self-contained HTML featured blog index I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Featured: [FEATURED] - Rest: [REST] </inputs> <task> Build a responsive featured blog index with these sections: 1. Featured from [FEATURED] 2. Rest 3. About jump 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: Featured must be in your list.

Chronological Index

3/30

✨ What it does

Claude builds a chrono blog for [BLOG NAME] 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 chrono designer <context> I need one self-contained HTML chrono blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Dated posts: [POSTS] </inputs> <task> Build a responsive chrono blog with these sections: 1. By date 2. Gaps unlabeled years stay empty 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 2019 archive.

Empty Blog Honest

4/30

✨ What it does

Claude builds a empty blog for [BLOG NAME] 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 empty-state designer <context> I need one self-contained HTML empty blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Why empty: [WHY] </inputs> <task> Build a responsive empty blog with these sections: 1. Honest empty 2. [WHY] 3. About or wait 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 three sample posts.

Author Index

5/30

✨ What it does

Claude builds a author blog index for [BLOG NAME] 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 multi-author designer <context> I need one self-contained HTML author blog index I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Authors: [AUTHORS] - Posts: [POSTS] </inputs> <task> Build a responsive author blog index with these sections: 1. Authors from [AUTHORS] 2. Posts 3. Filter 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: Do not invent an author.

Post

5 prompts

Long Post Template

6/30

✨ What it does

Claude builds a long post template for [TITLE] 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 post-template designer <context> I need one self-contained HTML long post template I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TITLE] - Body I pasted: [BODY] - Author: [AUTHOR] </inputs> <task> Build a responsive long post template with these sections: 1. Title 2. Body from [BODY] 3. Author 4. Next 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: Do not rewrite the argument unless I ask.

Short Note Template

7/30

✨ What it does

Claude builds a short note template for [TITLE] 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 notes designer <context> I need one self-contained HTML short note template I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TITLE] - Note: [NOTE] </inputs> <task> Build a responsive short note template with these sections: 1. Title 2. Note 3. Date [VERIFY] 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 note stays a note.

Series Post

8/30

✨ What it does

Claude builds a series post for [SERIES] 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 series designer <context> I need one self-contained HTML series post I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [SERIES] - This part: [PART] - Others: [OTHERS] </inputs> <task> Build a responsive series post with these sections: 1. Series nav from [OTHERS] 2. Part 3. Next 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 part 4.

Code Post

9/30

✨ What it does

Claude builds a code blog post for [TITLE] 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 code-blog designer <context> I need one self-contained HTML code blog post I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TITLE] - Sample: [SAMPLE] </inputs> <task> Build a responsive code blog post with these sections: 1. Title 2. Sample from [SAMPLE] 3. Copy button 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 secret in the sample.

Image Post

10/30

✨ What it does

Claude builds a image blog post for [TITLE] 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 photo-essay designer <context> I need one self-contained HTML image blog post I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TITLE] - Shots: [SHOTS] - Captions I wrote: [CAPTIONS] </inputs> <task> Build a responsive image blog post with these sections: 1. Title 2. Placeholders 3. Captions 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: No stock story.

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

Trust

5 prompts

Editorial Policy

16/30

✨ What it does

Claude builds a editorial policy page for [BLOG NAME] 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 policy writer <context> I need one self-contained HTML editorial policy page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Rules: [RULES] </inputs> <task> Build a responsive editorial policy page with these sections: 1. Rules from [RULES] 2. Contact 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 corrections desk.

Corrections Page

17/30

✨ What it does

Claude builds a corrections page for [BLOG NAME] 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 corrections editor <context> I need one self-contained HTML corrections page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Fixes I made: [FIXES OR NONE] </inputs> <task> Build a responsive corrections page with these sections: 1. Fixes or we have none yet 2. How to ask 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: Empty is honest.

Sponsored Label

18/30

✨ What it does

Claude builds a disclosure blog for [BLOG NAME] 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 disclosure editor <context> I need one self-contained HTML disclosure blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - What is sponsored: [SPONSORED OR NONE] </inputs> <task> Build a responsive disclosure blog with these sections: 1. Policy 2. Labels only if given 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 sponsor.

RSS Note

19/30

✨ What it does

Claude builds a rss-note blog for [BLOG NAME] 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 RSS designer <context> I need one self-contained HTML rss-note blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Feed URL: [FEED OR VERIFY] </inputs> <task> Build a responsive rss-note blog with these sections: 1. Index 2. Feed or [VERIFY] 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 feed URL.

License Note

20/30

✨ What it does

Claude builds a license blog for [BLOG NAME] 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 license editor <context> I need one self-contained HTML license blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - License: [LICENSE OR VERIFY] </inputs> <task> Build a responsive license blog with these sections: 1. Post stub 2. License or [VERIFY] 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 CC-BY.

Variants

5 prompts

Quiet Blog

21/30

✨ What it does

Claude builds a quiet blog for [BLOG NAME] 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 designer <context> I need one self-contained HTML quiet blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Posts: [POSTS] </inputs> <task> Build a responsive quiet blog with these sections: 1. Type 2. List 3. No cards circus 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: Text first.

Magazine Blog

22/30

✨ What it does

Claude builds a magazine blog for [BLOG NAME] 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 magazine designer <context> I need one self-contained HTML magazine blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Posts: [POSTS] </inputs> <task> Build a responsive magazine blog with these sections: 1. Big feature 2. Grid 3. About 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 only real posts.

Docs-Like Blog

23/30

✨ What it does

Claude builds a eng blog for [BLOG NAME] 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 engineering-blog designer <context> I need one self-contained HTML eng blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Posts: [POSTS] </inputs> <task> Build a responsive eng blog with these sections: 1. Sidebar 2. Posts 3. Search 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: Feels like docs, is still a blog.

Rebuild Blog

24/30

✨ What it does

Claude builds a rebuilt blog 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 blog 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 blog with these sections: 1. Diagnose 2. Rebuild 3. Keep [KEEP] 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 index.

Mobile Blog

25/30

✨ What it does

Claude builds a mobile blog for [BLOG NAME] 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 blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Posts: [POSTS] </inputs> <task> Build a responsive mobile blog with these sections: 1. Stacked posts 2. Sticky name 3. Subscribe 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 subscribe.

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 Lorem Posts

26/30

✨ What it does

Claude builds a lorem-free blog for [BLOG NAME] 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 lorem-hunter <context> I need one self-contained HTML lorem-free blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Real posts: [POSTS] </inputs> <task> Build a responsive lorem-free blog with these sections: 1. Rebuild 2. Only [POSTS] 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 Hello world filler.

A11y Blog

27/30

✨ What it does

Claude builds a accessible blog for [BLOG NAME] 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 blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Posts: [POSTS] </inputs> <task> Build a responsive accessible blog with these sections: 1. Headings 2. Contrast 3. List 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: Post titles are headings.

No Fake Dates

28/30

✨ What it does

Claude builds a no-fake-dates blog for [BLOG NAME] 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 dates skeptic <context> I need one self-contained HTML no-fake-dates blog I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Posts: [POSTS] </inputs> <task> Build a responsive no-fake-dates blog with these sections: 1. Dates or [VERIFY] 2. List 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: Today is not a date you typed.

Blog Plus About

29/30

✨ What it does

Claude builds a blog-plus-about for [BLOG NAME] 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 combo designer <context> I need one self-contained HTML blog-plus-about I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Why: [WHY] - Posts: [POSTS] </inputs> <task> Build a responsive blog-plus-about with these sections: 1. Why 2. Posts 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: About stays short.

Blog Plus Waitlist

30/30

✨ What it does

Claude builds a blog-plus-waitlist for [BLOG NAME] 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 launch-blog designer <context> I need one self-contained HTML blog-plus-waitlist I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BLOG NAME] - Product: [PRODUCT] - Posts: [POSTS] </inputs> <task> Build a responsive blog-plus-waitlist with these sections: 1. Posts 2. Dummy waitlist 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 email only.

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 blog site. 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 blog site: 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.

7-day free trial. Cancel anytime.