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. Drafted with AI writing assistance and checked against our editorial policy.
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. The library keeps 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: hands-on tutorials on Claude, ChatGPT, Midjourney, and many other AI tools. New tutorials are added regularly.
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 hands-on tutorials on ChatGPT, Claude, Midjourney, and many other AI tools. New tutorials are added regularly.
7-day free trial. Cancel anytime.