30 Claude Prompts for Form Builders
Fill the brackets. Claude returns one HTML form builder as an Artifact: add fields, preview, dummy submit. In-memory schema only. Not Typeform and not a live backend.
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.
Fields
5 promptsAdd Field Palette
1/30✨ What it does
Claude builds a field-palette builder for [FORM 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 builder designer <context> I need one self-contained HTML field-palette builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Field types I allow: [TYPES] </inputs> <task> Build a responsive field-palette builder with these sections: 1. Palette from [TYPES] 2. Add to canvas in JS 3. Preview 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 field type.
Required Toggle
2/30✨ What it does
Claude builds a required-toggle builder for [FORM 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 required designer <context> I need one self-contained HTML required-toggle builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive required-toggle builder with these sections: 1. List 2. Required toggle in JS 3. Preview 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: Preview must show asterisks.
Field Help Text
3/30✨ What it does
Claude builds a help-text builder for [FORM 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 help designer <context> I need one self-contained HTML help-text builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive help-text builder with these sections: 1. Help per field I gave 2. Preview 3. Dummy submit 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 help.
Select Options
4/30✨ What it does
Claude builds a select-options builder for [FORM 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 options designer <context> I need one self-contained HTML select-options builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Options I have: [OPTIONS] </inputs> <task> Build a responsive select-options builder with these sections: 1. Options from [OPTIONS] 2. Add option in JS 3. Preview 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 options stay empty.
Reorder Fields
5/30✨ What it does
Claude builds a reorder builder for [FORM 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 reorder designer <context> I need one self-contained HTML reorder builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive reorder builder with these sections: 1. Up down buttons 2. Working JS 3. Preview 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: Order must change.
Preview
5 promptsLive Preview
6/30✨ What it does
Claude builds a live-preview builder for [FORM 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 preview designer <context> I need one self-contained HTML live-preview builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive live-preview builder with these sections: 1. Builder 2. Live preview 3. Dummy submit 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: Preview matches the canvas.
Mobile Preview
7/30✨ What it does
Claude builds a mobile-preview builder for [FORM 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-preview designer <context> I need one self-contained HTML mobile-preview builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive mobile-preview builder with these sections: 1. Phone frame 2. Fields 3. Dummy submit 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: Phone is a frame, not a device.
Validation Preview
8/30✨ What it does
Claude builds a validation builder for [FORM 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 validation designer <context> I need one self-contained HTML validation builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Rules I have: [RULES] </inputs> <task> Build a responsive validation builder with these sections: 1. Rules from [RULES] 2. Preview errors 3. Dummy submit 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 regex.
Multi Step Preview
9/30✨ What it does
Claude builds a multistep builder for [FORM 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 steps designer <context> I need one self-contained HTML multistep builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Steps: [STEPS] </inputs> <task> Build a responsive multistep builder with these sections: 1. Steps from [STEPS] 2. Next back in JS 3. Dummy submit 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 step.
Thank You Preview
10/30✨ What it does
Claude builds a thanks builder for [FORM 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 thanks designer <context> I need one self-contained HTML thanks builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Thanks copy: [THANKS] </inputs> <task> Build a responsive thanks builder with these sections: 1. Form 2. Dummy submit 3. [THANKS] 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 2 minute reply.
Logic
5 promptsShow If Stub
11/30✨ What it does
Claude builds a show-if builder for [FORM 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 logic designer <context> I need one self-contained HTML show-if builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Rule I have: [RULE] </inputs> <task> Build a responsive show-if builder with these sections: 1. Rule from [RULE] 2. Hide show in JS 3. Preview 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: Only the rule you wrote.
Branch Stub
12/30✨ What it does
Claude builds a branch builder for [FORM 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 branch designer <context> I need one self-contained HTML branch builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Branches: [BRANCHES] </inputs> <task> Build a responsive branch builder with these sections: 1. Branches from [BRANCHES] 2. Dummy jump 3. Preview 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 branch.
Score Stub
13/30✨ What it does
Claude builds a score builder for [FORM 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 score designer <context> I need one self-contained HTML score builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Scoring I have: [SCORE OR NONE] </inputs> <task> Build a responsive score builder with these sections: 1. Score or skip 2. Preview 3. Dummy submit 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 points.
File Stub
14/30✨ What it does
Claude builds a file-field builder for [FORM 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 file designer <context> I need one self-contained HTML file-field builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Accept: [ACCEPT OR VERIFY] </inputs> <task> Build a responsive file-field builder with these sections: 1. File dummy 2. Accept or [VERIFY] 3. Note not uploaded 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 real upload.
Payment Field Stub
15/30✨ What it does
Claude builds a pay-field builder for [FORM 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 pay-field designer <context> I need one self-contained HTML pay-field builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Amount: [AMOUNT OR VERIFY] </inputs> <task> Build a responsive pay-field builder with these sections: 1. Amount or [VERIFY] 2. Dummy pay field 3. Banner dummy 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 charge anyone.
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.
Variants
5 promptsIntake Builder
21/30✨ What it does
Claude builds a intake builder for [ORG] 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 intake designer <context> I need one self-contained HTML intake builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [ORG] - Questions: [QUESTIONS] </inputs> <task> Build a responsive intake builder with these sections: 1. Questions from [QUESTIONS] 2. Preview 3. Dummy submit 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 medical Q.
Job Apply Builder
22/30✨ What it does
Claude builds a apply builder for [ROLE] 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 apply designer <context> I need one self-contained HTML apply builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [ROLE] - Fields: [FIELDS] </inputs> <task> Build a responsive apply builder with these sections: 1. Fields from [FIELDS] 2. Dummy file 3. Dummy submit 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 real resume upload.
RSVP Builder
23/30✨ What it does
Claude builds a rsvp builder for [EVENT] 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 rsvp designer <context> I need one self-contained HTML rsvp builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [EVENT] - Fields: [FIELDS] </inputs> <task> Build a responsive rsvp builder with these sections: 1. Fields 2. Plus-one if I said so 3. Dummy submit 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 plus-one.
Rebuild Builder
24/30✨ What it does
Claude builds a rebuilt builder 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 builder 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 builder 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 builder.
Mobile Builder
25/30✨ What it does
Claude builds a mobile builder for [FORM 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 builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive mobile builder with these sections: 1. Stacked tools 2. Preview 3. Dummy add 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 add a field.
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.
Fixes
5 promptsLabel Dummy Submit
26/30✨ What it does
Claude builds a labeled-dummy builder for [FORM 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 honesty editor <context> I need one self-contained HTML labeled-dummy builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive labeled-dummy builder with these sections: 1. Rebuild 2. Dummy banner 3. Preview 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 cannot store, say so.
A11y Builder
27/30✨ What it does
Claude builds a accessible builder for [FORM 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 builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive accessible builder with these sections: 1. Labels 2. Focus 3. Preview 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: Palette buttons have names.
No Fake Analytics
28/30✨ What it does
Claude builds a no-fake-views builder for [FORM 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 analytics skeptic <context> I need one self-contained HTML no-fake-views builder I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive no-fake-views builder with these sections: 1. Rebuild 2. No 128 views 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: Views you did not count go.
Builder Plus Preview
29/30✨ What it does
Claude builds a builder-plus-preview for [FORM 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 builder-plus-preview I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive builder-plus-preview with these sections: 1. Canvas 2. Preview 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: They stay in sync.
Builder Plus Thanks
30/30✨ What it does
Claude builds a builder-plus-thanks for [FORM 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 builder-plus-thanks I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [FORM NAME] - Fields: [FIELDS] - Thanks: [THANKS] </inputs> <task> Build a responsive builder-plus-thanks with these sections: 1. Form 2. [THANKS] 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: Thanks stays short.
Free tool
Prompt Optimizer
Turn a rough idea into a structured, professional AI prompt.
Frequently Asked Questions
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.