Claude Prompt Library

30 Claude Prompts That Build Docs Sites

30 copy-paste prompts

Fill the brackets. Claude returns one HTML docs site as an Artifact: sidebar, article, search stub. Dummy search only. Not a Docusaurus build and not a marketing homepage.

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. Drafted with AI writing assistance and checked against our editorial policy.

By Louis Corneloup · Founder, Techpresso

Last updated September 8, 2026·Drafted with AI assistance (how we make prompts)

Shell

5 prompts

Sidebar Docs Shell

1/30

✨ What it does

Claude builds a sidebar docs shell 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 docs IA designer <context> I need one self-contained HTML sidebar docs shell 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] - Nav items: [NAV] - First article: [ARTICLE] </inputs> <task> Build a responsive sidebar docs shell with these sections: 1. Sticky sidebar from [NAV] 2. Article from [ARTICLE] 3. Next/prev stubs 4. 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: Do not invent a nav item.

Top Nav Docs

2/30

✨ What it does

Claude builds a top-nav docs site 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 top-nav docs designer <context> I need one self-contained HTML top-nav docs site 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] - Sections: [SECTIONS] - Article: [ARTICLE] </inputs> <task> Build a responsive top-nav docs site with these sections: 1. Top sections 2. Article 3. Footer links I named 4. 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: Keep the top nav short.

Three-Pane Docs

3/30

✨ What it does

Claude builds a three-pane docs 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 reference designer <context> I need one self-contained HTML three-pane docs 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] - Tree: [TREE] - Article: [ARTICLE] </inputs> <task> Build a responsive three-pane docs with these sections: 1. Tree 2. Article 3. On-this-page 4. Working jump links in JS 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: On-this-page must jump.

Empty Docs Honest

4/30

✨ What it does

Claude builds a empty docs site 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 empty-docs designer <context> I need one self-contained HTML empty docs site 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 exists: [EXISTS] - What does not: [MISSING] </inputs> <task> Build a responsive empty docs site with these sections: 1. Shell 2. Exists 3. Missing labeled 4. No fake articles 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 missing page is a labeled hole.

Versioned Docs Stub

5/30

✨ What it does

Claude builds a versioned docs 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 versioning designer <context> I need one self-contained HTML versioned docs 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] - Versions I have: [VERSIONS] </inputs> <task> Build a responsive versioned docs with these sections: 1. Version select from [VERSIONS] 2. Article 3. Note not wired to real files 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 v3.2.

Articles

5 prompts

How-To Article

6/30

✨ What it does

Claude builds a how-to docs article for [TASK] 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 how-to writer <context> I need one self-contained HTML how-to docs article I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TASK] - Product: [PRODUCT] - Steps I know: [STEPS] </inputs> <task> Build a responsive how-to docs article with these sections: 1. Title 2. Steps from [STEPS] only 3. Warnings I named 4. 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 add a step you invented.

Concept Article

7/30

✨ What it does

Claude builds a concept docs article for [CONCEPT] 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 concept writer <context> I need one self-contained HTML concept docs article I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [CONCEPT] - Product: [PRODUCT] - Analogy I allow: [ANALOGY OR NONE] </inputs> <task> Build a responsive concept docs article with these sections: 1. What it is 2. What it is not 3. Analogy only if given 4. 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: No invented metaphor.

Troubleshooting Article

8/30

✨ What it does

Claude builds a troubleshooting docs for [SYMPTOM] 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 support writer <context> I need one self-contained HTML troubleshooting docs I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [SYMPTOM] - Checks: [CHECKS] - Fixes I allow: [FIXES] </inputs> <task> Build a responsive troubleshooting docs with these sections: 1. Symptom 2. Checks 3. Fixes from [FIXES] 4. Still stuck: contact I named 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 fix.

Changelog Page

9/30

✨ What it does

Claude builds a changelog docs 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 changelog editor <context> I need one self-contained HTML changelog docs 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] - Entries: [ENTRIES] </inputs> <task> Build a responsive changelog docs with these sections: 1. Dated entries from [ENTRIES] only 2. Missing dates [VERIFY] 3. No fake features 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 weeks stay empty.

Release Notes

10/30

✨ What it does

Claude builds a release-notes page for [VERSION] 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 release-notes editor <context> I need one self-contained HTML release-notes 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: [VERSION] - Changes I can stand behind: [CHANGES] </inputs> <task> Build a responsive release-notes page with these sections: 1. Version 2. Changes only 3. Breaking only if I said so 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 breaking change.

API

5 prompts

API Reference Page

11/30

✨ What it does

Claude builds a API reference page for [API 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 API-docs designer <context> I need one self-contained HTML API reference 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: [API NAME] - Endpoints I have: [ENDPOINTS] - Auth: [AUTH OR VERIFY] </inputs> <task> Build a responsive API reference page with these sections: 1. Endpoint list from [ENDPOINTS] 2. One detailed panel 3. Auth or [VERIFY] 4. Dummy try-it that does not call a server 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 endpoint.

Auth Docs

12/30

✨ What it does

Claude builds a auth docs page 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 auth-docs writer <context> I need one self-contained HTML auth docs 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: [PRODUCT] - Methods: [METHODS] </inputs> <task> Build a responsive auth docs page with these sections: 1. Methods from [METHODS] 2. Sample only if I pasted one 3. [VERIFY] on secrets 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 client secret.

Error Code Table

13/30

✨ What it does

Claude builds a error-code docs 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 errors-docs writer <context> I need one self-contained HTML error-code docs 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] - Codes I have: [CODES] </inputs> <task> Build a responsive error-code docs with these sections: 1. Table from [CODES] 2. Missing meanings [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 HTTP 499.

Webhook Docs

14/30

✨ What it does

Claude builds a webhook docs 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 webhook writer <context> I need one self-contained HTML webhook docs 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] - Events: [EVENTS] </inputs> <task> Build a responsive webhook docs with these sections: 1. Events from [EVENTS] 2. Payload only if I pasted one 3. Retry [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 an event name.

SDK Quickstart

15/30

✨ What it does

Claude builds a SDK quickstart docs for [LANGUAGE] 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 quickstart writer <context> I need one self-contained HTML SDK quickstart docs I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [LANGUAGE] - Product: [PRODUCT] - Steps: [STEPS] </inputs> <task> Build a responsive SDK quickstart docs with these sections: 1. Language 2. Steps from [STEPS] 3. No invented package name 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 did not name the package, [VERIFY].

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. The library keeps growing.

Try AI Academy Free

Findability

5 prompts

Search Stub Docs

16/30

✨ What it does

Claude builds a search-stub docs 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 search-UI designer <context> I need one self-contained HTML search-stub docs 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] - Sample hits: [HITS OR NONE] </inputs> <task> Build a responsive search-stub docs with these sections: 1. Search box 2. Dummy results from [HITS] or empty honest 3. Article 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 hit.

404 Docs Page

17/30

✨ What it does

Claude builds a docs 404 page 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 404 designer <context> I need one self-contained HTML docs 404 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: [PRODUCT] - Useful links: [LINKS] </inputs> <task> Build a responsive docs 404 page with these sections: 1. Not found 2. Links from [LINKS] 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: No fake popular articles.

Docs Home

18/30

✨ What it does

Claude builds a docs home page 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 docs-home designer <context> I need one self-contained HTML docs home 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: [PRODUCT] - Start here: [START] - Topics: [TOPICS] </inputs> <task> Build a responsive docs home page with these sections: 1. Start here from [START] 2. Topic cards from [TOPICS] 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: Home is a map, not a blog.

Breadcrumb Docs

19/30

✨ What it does

Claude builds a breadcrumb docs 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 breadcrumb designer <context> I need one self-contained HTML breadcrumb docs 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] - Path: [PATH] - Article: [ARTICLE] </inputs> <task> Build a responsive breadcrumb docs with these sections: 1. Breadcrumb from [PATH] 2. Article 3. Working jumps 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: Path must match nav I gave.

Printable Article

20/30

✨ What it does

Claude builds a printable docs article for [ARTICLE] 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 print-css designer <context> I need one self-contained HTML printable docs article I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [ARTICLE] - Product: [PRODUCT] </inputs> <task> Build a responsive printable docs article with these sections: 1. Article 2. Print CSS that hides nav 3. One file 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: Print should drop the sidebar.

Variants

5 prompts

Help Center

21/30

✨ What it does

Claude builds a help center 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 help-center designer <context> I need one self-contained HTML help center 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] - Categories: [CATS] - Articles: [ARTICLES] </inputs> <task> Build a responsive help center with these sections: 1. Category cards 2. Article list from [ARTICLES] 3. Contact I named 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 phone number.

Internal Wiki

22/30

✨ What it does

Claude builds a internal wiki for [TEAM] 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 internal-wiki designer <context> I need one self-contained HTML internal wiki I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TEAM] - Spaces: [SPACES] - First page: [PAGE] </inputs> <task> Build a responsive internal wiki with these sections: 1. Spaces 2. Page 3. Owner [VERIFY] 4. No public 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: This is internal. No Sign up.

Open Source Docs

23/30

✨ What it does

Claude builds a open-source docs for [REPO] 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 OSS docs designer <context> I need one self-contained HTML open-source docs I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [REPO] - Install: [INSTALL] - License: [LICENSE OR VERIFY] </inputs> <task> Build a responsive open-source docs with these sections: 1. Install from [INSTALL] 2. License or [VERIFY] 3. Contribute link I gave 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 license.

Multi-Product Docs

24/30

✨ What it does

Claude builds a multi-product docs for [COMPANY] 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-product IA designer <context> I need one self-contained HTML multi-product docs I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [COMPANY] - Products: [PRODUCTS] </inputs> <task> Build a responsive multi-product docs with these sections: 1. Product switcher from [PRODUCTS] 2. Article 3. Stub switch in JS 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 product you did not name.

Rebuild Docs Home

25/30

✨ What it does

Claude builds a rebuilt docs home 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 docs editor <context> I need one self-contained HTML rebuilt docs home 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 docs home 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.

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

AI Academy: hands-on tutorials on Claude, ChatGPT, Midjourney, and many other AI tools. New tutorials are added regularly.

Start Your Free Trial

Fixes

5 prompts

Cut The Lorem

26/30

✨ What it does

Claude builds a lorem-free docs 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 lorem-hunter <context> I need one self-contained HTML lorem-free docs 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] - Real article: [ARTICLE] </inputs> <task> Build a responsive lorem-free docs with these sections: 1. Rebuild 2. Only [ARTICLE] 3. Holes labeled 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 Lorem ipsum. Ever.

A11y Docs

27/30

✨ What it does

Claude builds a accessible docs 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 docs designer <context> I need one self-contained HTML accessible docs 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] - Article: [ARTICLE] </inputs> <task> Build a responsive accessible docs with these sections: 1. Skip link 2. Headings in order 3. Contrast 4. Article 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: Keyboard must reach search and nav.

Code Sample Page

28/30

✨ What it does

Claude builds a code-sample docs for [LANGUAGE] 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 samples editor <context> I need one self-contained HTML code-sample docs I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [LANGUAGE] - Sample I approve: [SAMPLE] - Product: [PRODUCT] </inputs> <task> Build a responsive code-sample docs with these sections: 1. Sample from [SAMPLE] only 2. Copy button in JS 3. Notes 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 API key in the sample.

Image-Heavy Guide

29/30

✨ What it does

Claude builds a illustrated docs for [TASK] 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 illustrated-guide designer <context> I need one self-contained HTML illustrated docs I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [TASK] - Image notes: [SHOTS] - Steps: [STEPS] </inputs> <task> Build a responsive illustrated docs with these sections: 1. Steps 2. Placeholders from [SHOTS] 3. Alt text 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 figures stay labeled.

Docs Plus Changelog

30/30

✨ What it does

Claude builds a docs-plus-changelog 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 combo designer <context> I need one self-contained HTML docs-plus-changelog 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] - Article: [ARTICLE] - Entries: [ENTRIES] </inputs> <task> Build a responsive docs-plus-changelog with these sections: 1. Docs shell 2. Changelog strip from [ENTRIES] 3. Article 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: Two jobs, still one file.

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 docs 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 docs 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 hands-on tutorials on ChatGPT, Claude, Midjourney, and many other AI tools. New tutorials are added regularly.

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