30 Claude Prompts That Build Directories
Fill the brackets. Claude returns one HTML directory as an Artifact: cards, filters, a listing page. Dummy submit only. Not a live database and not a marketplace checkout.
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.
Browse
5 promptsCard Directory
1/30✨ What it does
Claude builds a card directory for [DIRECTORY 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 directory designer <context> I need one self-contained HTML card directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Listings I have: [LISTINGS] </inputs> <task> Build a responsive card directory with these sections: 1. Cards from [LISTINGS] only 2. Search stub 3. Submit stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a listing.
Table Directory
2/30✨ What it does
Claude builds a table directory for [DIRECTORY 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 table designer <context> I need one self-contained HTML table directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Rows: [ROWS] - Columns: [COLS] </inputs> <task> Build a responsive table directory with these sections: 1. Table from [ROWS] 2. Sort stub in JS 3. Submit stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Empty cells stay empty.
Map Directory
3/30✨ What it does
Claude builds a map directory for [DIRECTORY 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 map-directory designer <context> I need one self-contained HTML map directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Places: [PLACES] </inputs> <task> Build a responsive map directory with these sections: 1. List from [PLACES] 2. Map placeholder 3. No fake pins Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent an address.
Empty Directory
4/30✨ What it does
Claude builds a empty directory for [DIRECTORY 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 empty-state designer <context> I need one self-contained HTML empty directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Why empty: [WHY] </inputs> <task> Build a responsive empty directory with these sections: 1. Honest empty 2. Submit stub 3. [WHY] 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 cafes.
Featured Plus All
5/30✨ What it does
Claude builds a featured directory for [DIRECTORY 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 featured designer <context> I need one self-contained HTML featured directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Featured: [FEATURED] - Rest: [REST] </inputs> <task> Build a responsive featured directory with these sections: 1. Featured from [FEATURED] 2. Rest 3. Rules for featured or [VERIFY] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a paid badge.
Filter
5 promptsTag Filters
6/30✨ What it does
Claude builds a filtered directory for [DIRECTORY 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 filter designer <context> I need one self-contained HTML filtered directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Tags: [TAGS] - Listings: [LISTINGS] </inputs> <task> Build a responsive filtered directory with these sections: 1. Tags from [TAGS] 2. Working filter in JS 3. Cards 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: Filters must hide cards.
City Filter
7/30✨ What it does
Claude builds a city directory for [DIRECTORY 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 city-filter designer <context> I need one self-contained HTML city directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Cities: [CITIES] - Listings: [LISTINGS] </inputs> <task> Build a responsive city directory with these sections: 1. City select from [CITIES] 2. Filter in JS 3. Cards 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 cities you named.
Price Filter Honest
8/30✨ What it does
Claude builds a price-filter directory for [DIRECTORY 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 price-filter designer <context> I need one self-contained HTML price-filter directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Bands I have: [BANDS] - Listings: [LISTINGS] </inputs> <task> Build a responsive price-filter directory with these sections: 1. Bands from [BANDS] 2. Filter 3. [VERIFY] on missing prices 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 $$$.
Open Now Stub
9/30✨ What it does
Claude builds a hours directory for [DIRECTORY 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 hours designer <context> I need one self-contained HTML hours directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Hours I have: [HOURS OR NONE] </inputs> <task> Build a responsive hours directory with these sections: 1. Listings 2. Hours or skip Open now 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 open clock.
Search Stub Dir
10/30✨ What it does
Claude builds a search directory for [DIRECTORY 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 search designer <context> I need one self-contained HTML search directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Hits: [HITS OR NONE] </inputs> <task> Build a responsive search directory with these sections: 1. Box 2. Hits or empty honest Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No invented hit.
Listing
5 promptsListing Page
11/30✨ What it does
Claude builds a listing page for [LISTING] 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 listing-page designer <context> I need one self-contained HTML listing page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [LISTING] - Facts: [FACTS] - Off-limits: [OFF] </inputs> <task> Build a responsive listing page with these sections: 1. Facts from [FACTS] 2. Placeholders 3. Back to index 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.
Hours And Place
12/30✨ What it does
Claude builds a hours-place listing for [LISTING] 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 NAP designer <context> I need one self-contained HTML hours-place listing I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [LISTING] - Address: [ADDRESS OR VERIFY] - Hours: [HOURS OR VERIFY] </inputs> <task> Build a responsive hours-place listing with these sections: 1. Name 2. Address or [VERIFY] 3. Hours or [VERIFY] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Unknown stays unknown.
Related Listings
13/30✨ What it does
Claude builds a related listings page for [LISTING] 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 related designer <context> I need one self-contained HTML related listings page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [LISTING] - Related I allow: [RELATED] </inputs> <task> Build a responsive related listings page with these sections: 1. Listing 2. Related from [RELATED] only 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 similar.
Claim Stub
14/30✨ What it does
Claude builds a claim listing page for [LISTING] 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 claim-listing designer <context> I need one self-contained HTML claim listing page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [LISTING] - How to claim: [HOW OR VERIFY] </inputs> <task> Build a responsive claim listing page with these sections: 1. Listing 2. Claim from [HOW] or [VERIFY] Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Do not invent a claim fee.
Report Stub
15/30✨ What it does
Claude builds a report listing page for [LISTING] 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 report designer <context> I need one self-contained HTML report listing page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [LISTING] - Reasons: [REASONS] </inputs> <task> Build a responsive report listing page with these sections: 1. Listing 2. Dummy report from [REASONS] 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: Dummy only.
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.
Submit
5 promptsSubmit Listing
16/30✨ What it does
Claude builds a submit listing page for [DIRECTORY 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 submit-form designer <context> I need one self-contained HTML submit listing page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Fields: [FIELDS] </inputs> <task> Build a responsive submit listing page with these sections: 1. Fields from [FIELDS] 2. Dummy submit 3. Review note 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 go live.
Guidelines
17/30✨ What it does
Claude builds a directory guidelines for [DIRECTORY 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 guidelines writer <context> I need one self-contained HTML directory guidelines I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Rules: [RULES] </inputs> <task> Build a responsive directory guidelines with these sections: 1. Rules from [RULES] 2. Submit jump 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 rule.
Paid Listing Honest
18/30✨ What it does
Claude builds a paid listing page for [DIRECTORY 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 paid-listing editor <context> I need one self-contained HTML paid listing page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - What paid gets: [PAID OR NONE] </inputs> <task> Build a responsive paid listing page with these sections: 1. Free vs paid only if you have paid 2. Price [VERIFY] 3. 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: If there is no paid tier, skip it.
Bulk Import Stub
19/30✨ What it does
Claude builds a import directory page for [DIRECTORY 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 import designer <context> I need one self-contained HTML import directory page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Format: [FORMAT] </inputs> <task> Build a responsive import directory page with these sections: 1. Format from [FORMAT] 2. Dummy upload 3. Note not wired 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.
Thanks Submit
20/30✨ What it does
Claude builds a submit thanks page for [DIRECTORY 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 submit thanks page I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Next: [NEXT] </inputs> <task> Build a responsive submit thanks page with these sections: 1. Thanks 2. [NEXT] 3. No fake review time 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 2 business days.
Variants
5 promptsLocal Directory
21/30✨ What it does
Claude builds a local directory for [PLACE] 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 local-directory designer <context> I need one self-contained HTML local directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [PLACE] - Listings: [LISTINGS] </inputs> <task> Build a responsive local directory with these sections: 1. Place 2. Listings 3. Map placeholder 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 that place.
Job Board Stub
22/30✨ What it does
Claude builds a job board stub for [BOARD 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 job-board designer <context> I need one self-contained HTML job board stub I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [BOARD NAME] - Jobs I have: [JOBS] </inputs> <task> Build a responsive job board stub with these sections: 1. Jobs from [JOBS] 2. Dummy apply 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 job.
Tool Directory
23/30✨ What it does
Claude builds a tools directory for [DIRECTORY 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 tools-directory designer <context> I need one self-contained HTML tools directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Tools: [TOOLS] </inputs> <task> Build a responsive tools directory with these sections: 1. Tools from [TOOLS] 2. Tags 3. Submit stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: No invented tool.
Rebuild Directory
24/30✨ What it does
Claude builds a rebuilt directory 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 directory 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 directory 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 index.
Mobile Directory
25/30✨ What it does
Claude builds a mobile directory for [DIRECTORY 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 directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Listings: [LISTINGS] </inputs> <task> Build a responsive mobile directory with these sections: 1. Stacked cards 2. Sticky search 3. Submit stub Use vanilla JS only if a control must actually work. </task> <constraints> - One self-contained HTML file. No build step, no frameworks. - Do not invent metrics, customers, prices, or dates. Mark gaps as [VERIFY]. - Semantic accessible markup, visible focus, labeled placeholders I can swap. - No We are passionate, unlock your potential, or in today's world. </constraints> <format> Return the full HTML as an Artifact, then name the one sentence a visitor should remember. </format>
Pro tip: Thumb to search.
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 promptsCut Fake Reviews
26/30✨ What it does
Claude builds a no-fake-reviews directory for [DIRECTORY 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 reviews skeptic <context> I need one self-contained HTML no-fake-reviews directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Reviews I have: [REVIEWS OR NONE] </inputs> <task> Build a responsive no-fake-reviews directory with these sections: 1. Rebuild 2. Reviews or 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 4.8 stars you did not measure.
A11y Directory
27/30✨ What it does
Claude builds a accessible directory for [DIRECTORY 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 directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Listings: [LISTINGS] </inputs> <task> Build a responsive accessible directory with these sections: 1. Labels 2. Focus 3. Cards 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: Filters must be keyboardable.
No Fake Distance
28/30✨ What it does
Claude builds a no-fake-distance directory for [DIRECTORY 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 geo skeptic <context> I need one self-contained HTML no-fake-distance directory I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Listings: [LISTINGS] </inputs> <task> Build a responsive no-fake-distance directory with these sections: 1. List 2. No 0.3 mi unless I gave it 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: Distance you cannot compute goes.
Directory Plus About
29/30✨ What it does
Claude builds a directory-plus-about for [DIRECTORY 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 directory-plus-about I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Why: [WHY] - Listings: [LISTINGS] </inputs> <task> Build a responsive directory-plus-about with these sections: 1. Why 2. Listings 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: About stays short.
Directory Plus Map
30/30✨ What it does
Claude builds a directory-plus-map for [DIRECTORY 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 directory-plus-map I can open in this chat as an Artifact. One file. Inline CSS. Google Fonts only. Real copy, no lorem ipsum. </context> <inputs> - Primary: [DIRECTORY NAME] - Places: [PLACES] </inputs> <task> Build a responsive directory-plus-map with these sections: 1. List 2. Map placeholder 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: Placeholder, not a Google key.
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.