Claude Prompt Library

Claude Artifacts Prompts: One Spec, One HTML or React File

15 copy-paste prompts

Build one Claude Artifact from your spec: HTML or React, no invented APIs, sample data only where marked. Official Claude Artifacts in chat.

In short: This page contains 15 copy-paste ready prompts, organized into 5 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 15, 2026·Hand-curated & tested by the AI Academy team

Spec to artifact

3 prompts

One artifact contract

1/15

✨ What it does

Claude builds one Artifact for [GOAL] in [HTML OR REACT] with SAMPLE labels and [VERIFY] on unknown APIs. Review in preview before share.

Build one Claude Artifact for [GOAL]. Stack: [HTML OR REACT]. Sections: [LIST]. Use sample data only where marked SAMPLE. No backend. Unknown APIs [VERIFY].

💡

Pro tip: One artifact per prompt. Split large apps across multiple specs.

Layout wire from bullets

2/15

✨ What it does

Claude proposes component layout from [PASTE] without new features. Approve layout before code generation pass.

From bullets [PASTE], propose artifact layout: header, main, footer components. Name each component and data it needs from spec only. No new features.

💡

Pro tip: Layout approval saves rework when code starts wrong.

Accessibility defaults

3/15

✨ What it does

Claude adds a11y requirements to [PASTE] and flags gaps [VERIFY]. Implement before you share artifact externally.

Add accessibility requirements to artifact spec [PASTE]: labels, focus order, color contrast note, keyboard nav. Flag spec gaps [VERIFY].

💡

Pro tip: A11y belongs in spec, not as a surprise follow-up prompt.

XML tags are just the start. Learn the full Claude workflow.

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

Start 7-Day Free Trial

HTML artifacts

3 prompts

Single file HTML dashboard

4/15

✨ What it does

Claude creates single-file HTML dashboard with SAMPLE [METRICS LIST] and no unapproved CDNs. Replace SAMPLE before production use.

Create single-file HTML artifact dashboard for [METRICS LIST] using SAMPLE numbers. Chart with canvas or SVG only, no external CDN unless I list [CDN OK].

💡

Pro tip: Say no CDN if you need offline-safe artifacts.

Landing section HTML

5/15

✨ What it does

Claude builds landing section HTML from [PASTE] with an inert CTA href #. Wire real links yourself only after copy approval.

HTML artifact landing section for [PRODUCT]: hero, 3 features, CTA button that goes nowhere (href #). Copy from [PASTE] only. Missing copy [VERIFY].

💡

Pro tip: Inert CTA prevents accidental live links during review.

Print-friendly report HTML

6/15

✨ What it does

Claude builds print-friendly HTML report from [PASTE NOTES] with [VERIFY] on unknown numbers. Print preview in browser before PDF export.

HTML artifact print-friendly one-page report for [TOPIC] from [PASTE NOTES]. Page break hints, no scripts required. Unknown numbers [VERIFY].

💡

Pro tip: Print CSS is cheaper than fighting slide tools for one-pagers.

React artifacts

3 prompts

React component one file

7/15

✨ What it does

Claude builds single-file React [NAME] with SAMPLE mock data and no fetch. Swap SAMPLE before demo to stakeholders.

React artifact single component [NAME] with props [LIST]. Use inline styles or simple CSS module text in artifact. No fetch calls. Mock data SAMPLE.

💡

Pro tip: No fetch in v1 artifacts avoids invented API hosts.

State table UI

8/15

✨ What it does

Claude builds sortable React table with SAMPLE rows and readonly defaults. Confirm sort works in artifact preview.

React artifact table with sort on [COLUMNS] and SAMPLE rows [COUNT]. Local state only. Mark editable cells [READONLY] unless spec says edit.

💡

Pro tip: Editable tables need explicit spec or users edit SAMPLE by mistake.

Form UI without submit

9/15

✨ What it does

Claude builds form UI with disabled Preview only submit and validation from [PASTE]. Enable submit only when you add real backend.

React artifact form fields [LIST] with validation messages from spec [PASTE]. Submit button disabled with label Preview only. No network.

💡

Pro tip: Disabled submit is intentional safety for artifact demos.

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

No invented APIs

3 prompts

API boundary check

10/15

✨ What it does

Claude lists endpoints in [PASTE] and replaces invented ones with [VERIFY] placeholders. Add real API docs before coding fetch.

Review artifact spec [PASTE] for API calls. List each endpoint, mark invented vs provided, replace invented with [VERIFY] placeholders.

💡

Pro tip: Run this before any React artifact with data.

Mock service layer

11/15

✨ What it does

Claude writes mock getX functions returning SAMPLE matching [PASTE]. Keep mocks when you later swap to real API.

Write mock data module for artifact [NAME] matching spec shapes [PASTE]. Export functions getX that return SAMPLE only. No fake URLs.

💡

Pro tip: Mock layer separates UI demo from backend contract.

Refuse live keys

12/15

✨ What it does

Claude refuses to embed keys and uses [YOUR_KEY] placeholders with local dev note. Never share artifacts containing real secrets.

Act as Claude Artifacts. I pasted API key [REDACTED OR ASK]. Refuse to embed keys. Use [YOUR_KEY] placeholder and env note for local dev only.

💡

Pro tip: Artifacts get shared as links. Treat every artifact as public.

Ship checklist

3 prompts

Preview QA list

13/15

✨ What it does

Claude produces a pass/fail QA checklist for [NAME] vs [PASTE]. Fix every fail before you share the stakeholder link.

QA checklist for artifact [NAME] against spec [PASTE]: layout, copy, SAMPLE labels, broken buttons, mobile width. Pass/fail list.

💡

Pro tip: Mobile width fails are common on dashboard artifacts.

Extract for codebase

14/15

✨ What it does

Claude explains extraction into [REPO STRUCTURE OR VERIFY] with SAMPLE noted. Create files manually in repo after review.

Explain how to extract artifact [NAME] into repo [REPO STRUCTURE OR VERIFY]: files to create, deps to add, what stays SAMPLE. No invented paths.

💡

Pro tip: Extraction prompt bridges artifact demo to engineering handoff.

Stop before production deploy

15/15

✨ What it does

Claude lists productionization steps and stops at [STOP] before deploy commands. Demo artifacts are not production apps.

Artifact [NAME] is demo only. List steps required before production: real API, auth, tests, hosting. Stop at [STOP] before deploy commands.

💡

Pro tip: Stakeholders confuse working demo with shipped product. Label demo.

Free tool

Prompt Optimizer

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

Try it free →

Frequently Asked Questions

No. These prompts stay inside Claude's official product. It uses official Claude Artifacts in the Claude product. If a setting is missing on your plan, the prompt says so.

A current Claude account. Some features sit on paid plans. The prompts still work as checklists if a feature is off.

Every prompt tells it to use only what you paste and to tag gaps as [VERIFY]. You still check the Artifact preview before you save it.

Yes to copy. Running them needs your Claude account. Long files fit better on a paid plan.

No. It is a draft of your Artifact preview. You own the facts, the files, and whatever your job or policy requires.

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 AI tools for consultants

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