Build a Directory Website With AI: Search, Filters, and a Clean Grid

TLDR: A directory website is a good list plus a fast way to search it. The whole trick is doing the data before the design: give every entry the same fields (name, one-line description, category, link, tags), and the page almost builds itself. Ask AI for a single self-contained HTML page that renders your data as a responsive card grid with a client-side search box and category filters. No database needed for a curated list, it handles hundreds of entries in the browser. Test search and filters, tune with specific feedback, then publish it to VisiblePage as one live link you keep updating instead of a new file every week.

You have a list in your head, or worse, in a spreadsheet nobody opens. The best AI tools for writers. Every dog-friendly patio in your city. The 40 links your community keeps asking for. A directory website turns that list into something people actually use: type a word, click a category, find the thing. And you can build a real one with AI in an afternoon, no database, no framework, no build step.

The reason most people never finish is that they start in the wrong place. They ask AI for “a directory website,” get a handsome grid holding three fake cards, and stall. This guide flips the order. We will get your entries into clean data first, then prompt for the page, then make search and filters genuinely good, and finally put it at a link you can keep updating.

What a directory website actually is

Strip away the styling and a directory is two moving parts:

1. A structured list. A set of entries where every entry has the same shape: a name, a short description, a category, a link, maybe a few tags. Consistency is the whole game.
2. A way to find things. Search that matches as you type, filters that narrow by category, and a layout that stays scannable whether there are 12 entries or 1,200.

That is it. A tool directory, a local guide, a curated reading list, a startup jobs board, an internal wiki of team resources: they are all the same machine with different rows. Once you see a directory as “data plus search,” building one stops being intimidating.

Step 1: do the data before the design

This is the step everyone skips and the one that decides whether your directory works. Before you ask for a single pixel, get your entries into clean, consistent data. Same fields, every row, no exceptions.

Here is where AI earns its keep. Give it your messy source (a rough list, a spreadsheet dump, a page of notes) and have it do the tidying:

I'm building a directory. Below is my raw list of entries. Turn it into a
clean JSON array. Each entry must have exactly these fields:

- name (string)
- description (string, one sentence, max ~120 characters)
- category (string, pick ONE from: [Design, Writing, Video, Code, Audio])
- url (string, full https link)
- tags (array of 2-4 short lowercase keywords)

Rules: keep categories consistent (only use the five I listed), rewrite
descriptions to a similar length and tone, and flag any entry where you
had to guess the category. Output only the JSON.

Here is my raw list:
[paste your messy list here]

Two things make this powerful. First, you force a fixed category set, so filtering works later instead of fracturing into 30 near-duplicate categories. Second, you get consistent descriptions, so cards line up instead of one being three words and the next a paragraph. Clean data in, clean directory out. Skip this and no prompt on earth will save the page.

If your list already lives in a spreadsheet, our guide on how to turn a spreadsheet into a report with AI uses the same data-first move.

Step 2: prompt for the filterable grid

Now that the data is clean, the page is almost mechanical. The key is to ask for one self-contained page and to be specific about the interactive parts, because the search and filters are the whole point. A vague “make it filterable” gets you a decorative dropdown that does nothing.

Here is a prompt that produces a working directory:

Build a directory website as a single self-contained HTML file. All CSS in
a <style> tag, all JavaScript in a <script> tag, no external libraries or
frameworks, no build step. It must open and work by double-clicking the file.

DATA: use this exact array as the source (paste the JSON from step 1):
[paste your clean JSON here]

LAYOUT:
- A header with a title, a one-line tagline, and a live result count
  ("Showing 24 of 24").
- A search box that filters as I type, matching against name, description,
  AND tags.
- A row of category filter chips generated from the data, plus an "All" chip.
  Clicking a chip filters the grid. The active chip is visually highlighted.
- A responsive card grid: 3 columns on desktop, 2 on tablet, 1 on phone.
- Each card shows the name, description, a category badge, the tags, and a
  clear "Visit" button that opens the url in a new tab.
- An empty state ("No results, try clearing filters") with a clear-filters
  button when nothing matches.

BEHAVIOR:
- Search and category filter combine (both apply at once).
- Everything runs client-side from the data array. No backend, no fetch.
- Use addEventListener for all interactions, no inline onclick.

STYLE: clean and modern, generous white space, a single accent color, rounded
cards with a subtle border and a soft hover lift. Readable system font stack.
Fully responsive and keyboard accessible.

Notice what this prompt refuses to leave to chance: search matches tags too, filters combine, there is a result count and an empty state, and every interaction uses addEventListener. Those are exactly the details a lazy build drops, and exactly the ones that separate a real directory from a static mock. For more on getting output that works offline in one file, see get self-contained HTML from AI.

Step 3: test it like a user, then tune

A directory reveals its flaws the moment you actually search it. So do that. Open the page and run it through real use:

• Type a partial word. Does it match mid-string, or only from the start?
• Type something that should hit a tag but not a name. Still found?
• Click every category chip. Does the count update? Does “All” reset it?
• Combine a search and a filter. Do they stack, or does one wipe the other?
• Resize to a phone width. Do the chips wrap cleanly, do cards go single-column?
• Clear everything. Do you get all entries back?

When something is off, feed the AI the specific fix, not a vibe. This is the same skill as any good iteration loop: precise notes beat “make it better.” Real examples that work:

• “Search should be case-insensitive and match anywhere in the string, not just the start.”
• “The result count doesn’t update when I filter by category. Fix it.”
• “Add a small ‘Clear filters’ link next to the count that resets search and category.”
• “On mobile the filter chips overflow the screen. Let them wrap to a second line.”
• “Sort the cards alphabetically by name by default, and add a Name / Category sort toggle.”

Two or three rounds of this turns a demo into something you would actually ship. If you want a deeper playbook, how to iterate on AI-generated pages covers the feedback loop in full.

When do you actually need a backend?

Almost never, for a curated directory. This trips people up, so here is the honest line.

If you own the list and update it, all the data can live inside the page and every feature runs in the browser. That covers the overwhelming majority of directories people want: a tool roundup, a local guide, a resource hub, a jobs list you maintain. It scales comfortably to hundreds and into the low thousands of entries.

You need a real backend only when visitors create the data: they submit listings, those submissions have to persist, and search has to run over a set too large to ship to the browser. Even then, the cheap first move is a form service. Point a “Submit an entry” button at a hosted form or a Google Form, collect submissions to a spreadsheet, review them, and paste the good ones into your data. You get quality control for free and still ship zero backend.

For most people reading this, row three is the sweet spot: a custom, fast, good-looking directory with none of the infrastructure.

Make it not look like every other directory

A directory can be dense and still feel designed. A few moves that lift it above the generic template look:

• One accent color, used with restraint. Category badges, the active filter chip, and the Visit button. That is enough. Skip the rainbow of category colors unless you have very few categories.
• Let the cards breathe. Consistent padding, a subtle border instead of heavy shadows, and a soft hover lift. Uniform description length (that clean data again) keeps the grid from looking ragged.
• Make the count and empty state feel intentional. “Showing 8 of 143” is reassuring. A friendly empty state with a clear-filters button turns a dead end into a way back.
• Respect the phone. Filter chips that wrap, a single column, tap targets you can actually hit. Plenty more in make AI pages mobile-friendly.

If you want the output to stop reading as stock AI, make AI pages look less generic is worth a read before your final polish pass.

Publish it as one link, and keep it that way

A directory is never finished. You add an entry, you drop a dead link, you add a category. So the last decision matters: where does it live, and what happens when it changes?

Once your page works, you want it at a real URL that everyone can open, that stays fast, and that you can update without minting a new link every week. That is exactly what VisiblePage does. Paste your HTML, or drop the ZIP if the AI split the project into files, and you get a live link in seconds, with every interaction intact: the search filters as you type, the chips work, the grid is responsive, because you are sharing the real page, not a screenshot. It serves fast from the edge, and you can make it public, private, or password-protected if the directory is for a specific group. Point a custom domain at it and your list lives at something like tools.yourname.com.

The part that matters most for a directory: the link is canonical. When you add ten new entries next month, you edit the same page and everyone sees the update at the same URL. No re-sharing, no “use the new link,” no directory-final-v3.html. Update the page, and you have updated the directory for everyone.

Try it now: Publish your AI-generated HTML with VisiblePage and get a live link in seconds.

Frequently asked questions

Do I need a database to build a directory website? No, not for most directories. If your list is curated and updated by you, the entries can live as structured data inside a single HTML page, and search, filtering, and sorting all run in the browser. You only need a database when visitors submit and store their own entries.

How many entries can a client-side directory handle? With the data embedded and filtering done in the browser, hundreds to low thousands of entries run smoothly. Past a few thousand you will feel load time and search lag, and that is the signal to move to a backend with server-side search. Most curated directories never get close.

What is the most important step? Getting your entries into clean, consistent structured data before you design anything. When every entry has the same fields, the AI can render, search, filter, and sort reliably. Inconsistent data is the top reason a directory comes out broken.

How do I let people submit entries? Point the submit button at a form service that collects to a spreadsheet or inbox. Review the submissions, add the good ones to your data, and republish. High quality, no backend.

How do I keep it updated without breaking the link? Publish once to a live link, then edit the same page when you add or remove entries. On VisiblePage the URL is canonical, so updating the page updates what everyone sees, no new link required.

The short version

A directory website is not a big engineering project. It is a clean list and a fast way to search it. Do the data first so every entry shares the same shape, prompt for a self-contained page with a real search box and working filters, test it like a user and tune with specific feedback, then publish it as one live link you can keep updating. The list you have been meaning to share can be a real, searchable site by the end of the day.