I've built three directory sites in the past year using Claude Code and AI tools — no traditional coding required. One is a marketing jobs board for Vancouver, another aggregates peptide research papers, and the third lists local service providers by neighbourhood. All three are live, searchable, and generating traffic. Total development time for each was under 20 hours.
If you've been thinking about building a directory site but don't have a development background, this is the guide I wish I'd had when I started. I'll walk you through exactly how I built these sites, what worked, what didn't, and where AI saves you the most time.
Why Directory Sites Work (and Why AI Makes Them Viable)
Directory sites have a simple business model: aggregate useful information in one place, make it searchable, and drive traffic through SEO or targeted marketing. The challenge has always been the upfront build cost. Hiring a developer to build a custom directory could easily run $10,000–$30,000 depending on features.
AI changes the economics. With Claude Code, you can build a working prototype in a weekend. The site won't be as polished as a six-figure custom build, but it'll be functional enough to validate demand before you invest more.
The key is understanding what parts of a directory site AI handles well and what parts still require human decision-making. Claude Code excels at generating repetitive HTML, writing filtering logic, and structuring data. It's not great at design intuition or understanding nuanced user needs. That's where you come in.
Step 1: Define Your Data Structure
Before you write a single line of code, you need to know what you're listing and what fields each listing will have. This is the part where I see people get stuck — they jump straight into building without thinking through the schema.
For my Vancouver marketing job board, each listing has these fields:
- Job title
- Company name
- Location (neighbourhood or remote)
- Job type (full-time, part-time, contract, freelance)
- Salary range (optional)
- Post date
- Application link
- Short description (120 characters for the card view)
That's it. Eight fields. I resisted the urge to add more because every additional field increases complexity and maintenance burden. Start simple, add features later if users ask for them.
Once you have your field list, structure it as a JSON array. This becomes your source of truth. Here's a simplified example:
[
{
"id": "job-001",
"title": "Content Marketing Manager",
"company": "Acme Corp",
"location": "Downtown Vancouver",
"type": "Full-time",
"salary": "$70k–$90k",
"posted": "2026-05-10",
"link": "https://example.com/apply",
"description": "Lead content strategy for a growing SaaS startup."
}
]
This JSON file is what Claude Code will read and turn into HTML.
Step 2: Build the Static HTML Shell with Claude Code
Once your data structure is set, you need a template. I use a simple static HTML setup with inline CSS and vanilla JavaScript — no build tools, no frameworks, just a single HTML file that loads fast and works everywhere.
Here's the prompt I use to generate the initial shell:
Build a single-page directory site in HTML/CSS/JS. Requirements: - Header with site title and search bar - Filter sidebar with checkboxes for [list your filter categories] - Grid of cards, each showing [list your fields] - Footer with contact link - Mobile responsive - Clean, minimal design with good typography - Inline CSS, no external dependencies The page should read from a "listings.json" file and render cards dynamically. Include search that filters by title and description. Include filter checkboxes that narrow results by category.
Claude Code will generate a working prototype in one response. It won't be beautiful, but it'll be functional. From there, I refine the design in a second pass, asking for specific changes to spacing, colors, and layout.
What to Watch For
The first version Claude Code produces will often have a few quirks. Common issues I've seen:
- Search logic that's case-sensitive (you want case-insensitive matching)
- Filters that use AND logic when you want OR (if someone checks "Full-time" and "Remote," you usually want jobs that match either, not both)
- No handling for empty states (what shows when no results match the filters?)
These are all easy fixes once you spot them. Just describe the issue in plain language and ask Claude Code to adjust.
Step 3: Populate Your Listings (Manual or Scraped)
Now comes the data entry. You have two options: manual curation or automated scraping.
For my job board, I manually add 5–10 new listings per week. It takes about 15 minutes. I do this because job postings require human judgment — I want to make sure the listings are high-quality and relevant to the Vancouver market.
For the peptide research directory, I built a scraper that pulls from public databases. Claude Code wrote the scraping script (Python using BeautifulSoup), and I run it weekly to update the JSON file. This only works when the source data is structured and publicly accessible. If you're scraping, make sure you're respecting robots.txt and terms of service.
A hybrid approach works well too: scrape the initial dataset to get 50–100 listings, then manually curate additions. This gives you enough volume to look credible without ongoing maintenance overhead.
Step 4: Add SEO and Deploy
A directory site is only useful if people can find it. That means SEO from day one. Here's what I do on every directory site I build:
- Unique title and meta description — targeting the primary keyword (e.g., "marketing jobs Vancouver")
- Structured data — JobPosting or LocalBusiness schema depending on the directory type
- Descriptive H1 and H2 tags — Claude Code handles this if you tell it what keywords to include
- Internal linking — link to related content on your main site, like local SEO guides or AI tools for businesses
For hosting, I use GitHub Pages or Netlify. Both are free for static sites and give you a custom domain. Total hosting cost: $0 per month. If you need server-side logic later (like user authentication or a submission form), you can migrate to Vercel or a simple VPS, but start static.
Real Results: What I've Seen Work
My marketing job board started getting organic traffic within three weeks of launch. No paid ads, just local SEO and a few mentions on LinkedIn. After two months, it was ranking on page one for "marketing jobs Vancouver" and driving 200+ visits per week.
The peptide directory took longer because it's a niche topic, but it's now the top result for several long-tail research queries. Traffic is lower, but the audience is highly targeted — exactly what you want for a specialized directory.
The key in both cases: I picked a category where existing directories were either outdated or too general. Find a gap, fill it with clean data and a fast site, and SEO will reward you.
Common Mistakes to Avoid
I've made plenty of mistakes building these sites. Here are the ones that cost me the most time:
- Overbuilding features upfront — I initially tried to add user accounts, saved searches, and email alerts. All of that added complexity without validating demand first. Ship a minimal version, see if people use it, then add features.
- Not planning for updates — If your directory requires frequent updates, build a workflow for adding new listings before you launch. I made the mistake of hard-coding listings into HTML on my first attempt. Moving to a JSON file made updates 10x faster.
- Ignoring mobile — More than half of directory traffic comes from mobile. If your filters or search don't work well on a phone, you'll lose users immediately.
When to Hire a Developer (and When You Don't Need One)
Claude Code can get you to a working MVP without hiring anyone. But there are limits. If you need any of the following, you'll eventually want a developer:
- User-submitted listings (requires backend validation and moderation)
- Payment processing (subscription or paid listings)
- Complex search (full-text search across large datasets)
- Real-time updates (WebSockets or live data feeds)
For a static directory with manual updates, you don't need a developer. For anything more complex, budget for professional help once you've validated the concept. If you're not sure where the line is, check the FAQ or book a call and I'll walk you through it.
Key Takeaways
If you want to build a directory site using AI, here's what to remember:
- Start with a clear data structure — define your fields before you write any code
- Use Claude Code to generate the HTML shell, then refine in iterations
- Keep it simple: static HTML, JSON data, no unnecessary features
- Focus on SEO from day one — title tags, meta descriptions, structured data
- Deploy fast and iterate based on real user feedback
You don't need to be a developer to build something useful. You just need a clear idea, the right tools, and the patience to iterate. The rest is execution.