Claude Prompt Library

30 Claude Prompts That Build CRUD Apps

30 copy-paste prompts

Fill the brackets. Claude returns one HTML CRUD app as an Artifact: list, create, edit, delete. In-memory only. Not a real database and not a multi-user 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.

By Louis Corneloup · Founder, Techpresso

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

List

5 prompts

Record Table

1/30

✨ What it does

Claude builds a record-table crud for [RESOURCE] 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 crud designer <context> I need one self-contained HTML record-table crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] - Rows I have: [ROWS] </inputs> <task> Build a responsive record-table crud with these sections: 1. Table from [ROWS] 2. Fields from [FIELDS] 3. Dummy new 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 row.

Card Grid CRUD

2/30

✨ What it does

Claude builds a card-grid crud for [RESOURCE] 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 card designer <context> I need one self-contained HTML card-grid crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] - Rows: [ROWS] </inputs> <task> Build a responsive card-grid crud with these sections: 1. Cards from [ROWS] 2. Dummy new 3. Empty if none 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: Cards show only named fields.

Empty CRUD

3/30

✨ What it does

Claude builds a empty crud for [RESOURCE] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are an empty-state designer <context> I need one self-contained HTML empty crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Why empty: [WHY] </inputs> <task> Build a responsive empty crud with these sections: 1. Honest empty 2. [WHY] 3. Dummy create 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 sample records.

Search CRUD

4/30

✨ What it does

Claude builds a search crud for [RESOURCE] 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 designer <context> I need one self-contained HTML search crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Rows: [ROWS] </inputs> <task> Build a responsive search crud with these sections: 1. Filter in JS 2. Rows 3. Dummy new 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: Search must hide cards.

Sort CRUD

5/30

✨ What it does

Claude builds a sort crud for [RESOURCE] 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 sort designer <context> I need one self-contained HTML sort crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Sort keys: [KEYS] - Rows: [ROWS] </inputs> <task> Build a responsive sort crud with these sections: 1. Sort from [KEYS] 2. Working JS 3. Rows 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 key.

Create

5 prompts

Create Form

6/30

✨ What it does

Claude builds a create crud for [RESOURCE] 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 form designer <context> I need one self-contained HTML create crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] </inputs> <task> Build a responsive create crud with these sections: 1. Fields from [FIELDS] 2. Validate empty in JS 3. Add to list in memory 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: New row stays until refresh.

Required Optional

7/30

✨ What it does

Claude builds a validated create crud for [RESOURCE] 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 validated create crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Required: [REQ] - Optional: [OPT] </inputs> <task> Build a responsive validated create crud with these sections: 1. Required from [REQ] 2. Optional 3. Block submit if empty required 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 required field.

Defaults Create

8/30

✨ What it does

Claude builds a defaults crud for [RESOURCE] 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 defaults designer <context> I need one self-contained HTML defaults crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Defaults I set: [DEFAULTS] </inputs> <task> Build a responsive defaults crud with these sections: 1. Form with [DEFAULTS] 2. Dummy save 3. List Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a default.

Duplicate Guard

9/30

✨ What it does

Claude builds a unique crud for [RESOURCE] 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 uniqueness designer <context> I need one self-contained HTML unique crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Unique field: [UNIQUE] - Rows: [ROWS] </inputs> <task> Build a responsive unique crud with these sections: 1. Form 2. Reject dupes of [UNIQUE] in JS 3. List Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Only uniqueness you named.

Create Then Edit

10/30

✨ What it does

Claude builds a create-then-edit crud for [RESOURCE] 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 flow designer <context> I need one self-contained HTML create-then-edit crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] </inputs> <task> Build a responsive create-then-edit crud with these sections: 1. Create 2. Jump to edit of new row 3. In memory 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: The new id can be local.

Edit

5 prompts

Edit Form

11/30

✨ What it does

Claude builds a edit crud for [RESOURCE] 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 edit designer <context> I need one self-contained HTML edit crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] </inputs> <task> Build a responsive edit crud with these sections: 1. Prefill from the row 2. Dummy save 3. Back to list Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a field value.

Inline Edit

12/30

✨ What it does

Claude builds a inline crud for [RESOURCE] 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 inline designer <context> I need one self-contained HTML inline crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] - Rows: [ROWS] </inputs> <task> Build a responsive inline crud with these sections: 1. Table 2. Inline edit in JS 3. Dummy save 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: Escape should cancel.

Dirty Guard

13/30

✨ What it does

Claude builds a dirty crud for [RESOURCE] 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 dirty-state designer <context> I need one self-contained HTML dirty crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] </inputs> <task> Build a responsive dirty crud with these sections: 1. Edit 2. Warn on leave if dirty 3. Dummy save 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: Warn only if they changed a field.

Read Only Fields

14/30

✨ What it does

Claude builds a readonly crud for [RESOURCE] 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 permissions designer <context> I need one self-contained HTML readonly crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Locked: [LOCKED] - Editable: [EDITABLE] </inputs> <task> Build a responsive readonly crud with these sections: 1. Locked from [LOCKED] 2. Editable 3. Dummy save 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 lock a field I said to edit.

Version Note

15/30

✨ What it does

Claude builds a version-note crud for [RESOURCE] 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 versions designer <context> I need one self-contained HTML version-note crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - What I know: [KNOWN OR NONE] </inputs> <task> Build a responsive version-note crud with these sections: 1. Edit 2. Version or skip 3. Dummy save 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 v12.

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

Delete

5 prompts

Delete Confirm

16/30

✨ What it does

Claude builds a delete crud for [RESOURCE] 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 confirm designer <context> I need one self-contained HTML delete crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - What they type: [NAME] </inputs> <task> Build a responsive delete crud with these sections: 1. Type-to-confirm 2. Remove from memory 3. Back to list Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Confirm uses [NAME].

Soft Delete Stub

17/30

✨ What it does

Claude builds a soft-delete crud for [RESOURCE] 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 soft-delete designer <context> I need one self-contained HTML soft-delete crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Rows: [ROWS] </inputs> <task> Build a responsive soft-delete crud with these sections: 1. Archive instead of wipe 2. Restore dummy 3. List Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Do not invent a trash age.

Bulk Delete

18/30

✨ What it does

Claude builds a bulk-delete crud for [RESOURCE] 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 bulk designer <context> I need one self-contained HTML bulk-delete crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Rows: [ROWS] </inputs> <task> Build a responsive bulk-delete crud with these sections: 1. Checkboxes 2. Dummy delete 3. Confirm count 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: Count must match checked.

Undo Delete

19/30

✨ What it does

Claude builds a undo-delete crud for [RESOURCE] 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 undo designer <context> I need one self-contained HTML undo-delete crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Rows: [ROWS] </inputs> <task> Build a responsive undo-delete crud with these sections: 1. Delete 2. Undo toast 5s 3. List Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Undo restores the row.

Blocked Delete

20/30

✨ What it does

Claude builds a blocked-delete crud for [RESOURCE] 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 rules designer <context> I need one self-contained HTML blocked-delete crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Why blocked: [WHY] </inputs> <task> Build a responsive blocked-delete crud with these sections: 1. Try delete 2. Show [WHY] 3. Keep the row 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 foreign key.

Variants

5 prompts

Notes CRUD

21/30

✨ What it does

Claude builds a notes crud for [APP] as a working page you can open in the chat. Check every [VERIFY] against your facts, then save the HTML and publish.

You are a notes designer <context> I need one self-contained HTML notes crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [APP] - Notes I have: [NOTES OR NONE] </inputs> <task> Build a responsive notes crud with these sections: 1. Notes or empty 2. Create in memory 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 note.

Contacts CRUD

22/30

✨ What it does

Claude builds a contacts crud for [APP] 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 contacts designer <context> I need one self-contained HTML contacts crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [APP] - Fields: [FIELDS] - Rows: [ROWS] </inputs> <task> Build a responsive contacts crud with these sections: 1. Contacts from [ROWS] 2. Create 3. Dummy email 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.

Inventory CRUD

23/30

✨ What it does

Claude builds a inventory crud for [APP] 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 inventory designer <context> I need one self-contained HTML inventory crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [APP] - SKUs I have: [SKUS] </inputs> <task> Build a responsive inventory crud with these sections: 1. SKUs from [SKUS] 2. Qty [VERIFY] 3. Dummy edit 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 stock.

Rebuild CRUD

24/30

✨ What it does

Claude builds a rebuilt crud 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 crud 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 crud 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 app.

Mobile CRUD

25/30

✨ What it does

Claude builds a mobile crud for [RESOURCE] 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 crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Rows: [ROWS] </inputs> <task> Build a responsive mobile crud with these sections: 1. Stacked cards 2. Sticky add 3. In memory 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.

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

No Fake Seed

26/30

✨ What it does

Claude builds a no-seed crud for [RESOURCE] 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 seed skeptic <context> I need one self-contained HTML no-seed crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Rows: [ROWS OR NONE] </inputs> <task> Build a responsive no-seed crud with these sections: 1. Only [ROWS] 2. Empty if none 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 contacts.

A11y CRUD

27/30

✨ What it does

Claude builds a accessible crud for [RESOURCE] 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 crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] </inputs> <task> Build a responsive accessible crud with these sections: 1. Labels 2. Focus 3. List Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>

💡

Pro tip: Create is a button.

Local Only Banner

28/30

✨ What it does

Claude builds a local-only crud for [RESOURCE] 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 local-only crud I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Fields: [FIELDS] </inputs> <task> Build a responsive local-only crud with these sections: 1. Banner: in-memory 2. CRUD 3. Refresh wipes 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: Say refresh wipes it.

CRUD Plus Search

29/30

✨ What it does

Claude builds a crud-plus-search for [RESOURCE] 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 crud-plus-search I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Rows: [ROWS] </inputs> <task> Build a responsive crud-plus-search with these sections: 1. Search 2. List 3. Create 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: Search hides rows.

CRUD Plus Empty

30/30

✨ What it does

Claude builds a crud-plus-empty for [RESOURCE] 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 crud-plus-empty I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [RESOURCE] - Why empty: [WHY] </inputs> <task> Build a responsive crud-plus-empty with these sections: 1. Empty 2. Create 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: [WHY] stays visible.

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 CRUD app. 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 CRUD app: 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