Rebuilding TicketingHub's website.

I designed and developed ticketinghub.com. Design should be felt, not explained, so the site says more about my work than this page can. What follows is how I built it with AI.

Working on TicketingHub's old website was a mess. It lived on Webflow, it was slow, and it looked like it didn't quite work. Nothing on it matched anything else, as . It also leaned on plugins, and the translations alone cost us serious money every month.

So when I got the chance, I built a real, useful site on a stack that works. I moved it off Webflow in four weeks, and Claude wrote most of the code.

That first build gave the site a structure, but no visual love. I didn't have time for it. The team is small, I'm the only designer, and I'm busy with everything at once, so the site waited.

When I came back to it, the pages were full of slop and long paragraphs. Marketing had asked Claude what works for AI search tools, and it mostly recommended slop. Nobody questioned it, and that's the mistake. AI always needs someone watching over it.

That's when I decided the site needed a design system, a visual layer and a voice. Here's how I set up the work so Claude would build what I would have built.

Prototyping with AI

Writing is hard. It takes talent, research and time, which is why few people write well. A prompt is writing too, so few people write good ones. That's why we put forms and buttons between people and machines. Jakob Nielsen calls it the articulation barrier.

With a person, a look, a touch, even silence can say everything. A machine has none of that, so you have to be clear and precise. Tesler's law says some complexity can't be removed, only moved, and with AI it moves into the prompt.

A prompt can't say everything, so I ask to see it first. Nothing new goes straight into the site's code. It starts as a prototype with a few options side by side, and I decide only once I've compared them.

CLAUDE.md

Make the home hero nicer, with some animation.

AutoOpus 5.5Extra

A lazy prompt came back as the obvious: a template, mediocre, slop. Even after a good one, I still go over the options, pick a path, then iterate and refine.

What I pick becomes a rule, and what I drop goes into a log.

Rules

The rules live in CLAUDE.md, which Claude reads before it writes anything. I write them myself, from what I pick in a prototype and from each bad decision I catch.

Sometimes AI is lazy. My guess is it learned that from us, since it's built on how we think and write. AI doesn't put things off. It skips steps and goes around rules because it wants to please every request, which Anthropic's own research calls sycophancy.

Most of my rules come from the slop. Design isn't only visual, it's in the words too, and sometimes writing means taking something out so the rest makes sense. AI can be long-winded too, explaining at length what a few sentences could say. Cognitive load is why: a person's eye can't take in a wall like that, and in the end we design for people.

CLAUDE.md

Less booking admin.

Some rules come from something that looked right, like the heading on the home page. Claude first wrote it long. I kept asking for shorter, and after a few rounds it came down to a sentence I liked.

That gave me the idea to animate the text itself and give the site some character. Now the two "o"s in "booking" tell the story of a booking.

In Danish, German and Dutch, "booking admin" is one long word, and on a phone it ran off the screen.

CLAUDE.md

Mere tid til dine gæster.Mindre booking­administration.

The browser's own hyphens broke the word in the wrong place. The soft hyphen only breaks it when it doesn't fit, so every other language stays as it was.

The file grew fast, so I split it. CLAUDE.md kept the rules, and the page specs and the decisions moved to files of their own.

Design system

The rules point at one design system. It holds the whole site and its look together, and it fights inconsistency. Colours are roles like link and focus, text takes one of a few type roles, and a page is built from shared components.

components/sections/PricingHero.tsx

Pay per booking, not per month.

For every operator

3%

of each successful booking, online, through OTAs or by card in person. Cash sales are free.

Get started

A new component can't go in until it has its own page in the docs.

Visual design

Through constant iteration with AI, the site found its direction, and it kept getting more pleasant to the eye. The aesthetic-usability effect says people find a pleasing design easier to use.

Even the name became part of the design. The ticket in TicketingHub became the site's own shape.

components/footer-map/coupon.tsx

ADMIT ONE

© 2026 TicketingHub LTD.

London, UK · since 2012

  • YouTube
  • LinkedIn
Back to top
components/sections/IndustryCategoryGrid.tsx

1.4M+ departures and time slots booked since 2014, and counting.

Activity Providers

49 industries

Animal Parks

4 industries

Attractions

10 industries

Landmarks

22 industries

Events

12 industries

Tour Operators

49 industries

components/sections/CaseStudyStrip.tsx

400% Increase in sales

City Tours Belfast sells more online after leaving Checkfront

500% Growth on TicketingHub

Sound and Light Egypt sells show tickets at the Pyramids online

Decisions

Every pick and every drop goes into a log, so nobody, AI included, brings back a dropped idea without seeing why it went. On /features, the dropped one was the template every site has, a list of links with an icon on each line.

docs/design/decisions.md

All access

56 features

Valid on every account.

  • Sell online8
  • Sell at the door6
  • Sell through resellers6
  • Run the day11
  • Guides, groups and pickups6
  • Earn more per booking7
  • Guest messages6
  • Connect your tools6

TicketingHub

Tests

A rule in CLAUDE.md is only words, and AI in a hurry to please skips words. So if a test can check a rule, it gets one.

Arabic and Hebrew read right to left, and there "480+" kept turning into "+480". Invisible marks hold the plus in place now, and a test makes sure they're there.

lib/__tests__/messages-rtl-figures.test.ts

يستخدمه ‎480+‎ مشغل في 65 دولة.

The words have their own rules too, a glossary and a style guide, down to the accent. A test lists every line that breaks them.

lib/__tests__/messages-style.test.ts
  • productGrow.meta.titleAdd-onsglossary, yield pricing and reviews for tours
  • alternatives.meta.descriptionCompare TicketingHub with top booking software alternatives. See why operators choose TicketingHub over FareHarbor, Bokunglossary, Xola, andserial comma more.
  • press.brandAssets.descriptionPlease use our brand assets as provided. Do not modify the logos, change their colorsUS spelling, orserial comma alter the proportions.
  • press.brandAssets.headingLogos &ampersand guidelines

Anything that breaks a rule on purpose has to say why.

I try to think of every case, but some still surprise me. This is where AI helped. Working together, we kept finding things that needed a test, and now the site has more than 500 of them.

Accessibility

This was the first time I could take accessibility all the way, because I was both the designer and the developer.

Axe, a tool that finds accessibility problems, checks every change and stops one that brings in a serious problem. For a long time it checked only four pages, and only at desktop width.

e2e/smoke.spec.ts

Pages

  • /
  • /features
  • /pricing
  • /book-a-demo
  • /product/sell
  • /product/manage
  • /product/grow
  • /developers
  • /about
  • /blog
  • /industries
  • /integrations
  • /alternatives
  • /case-studies
  • /customers
  • /press
  • /privacy
  • /terms
  • /cookies
  • /third-party-suppliers
  • /sitemap-page
  • /ar
  • /he/pricing
  • 404

At 375px

  • / · 375
  • /pricing · 375
  • /integrations · 375
  • /blog · 375
  • /ar · 375

When I audited the site, every problem the audit found was on a page axe had never checked. Now it checks them all.

It missed the illustrations too. Each one is a single picture with one description, so AI readers don't take its sample data for the page's text.

In the same audit I saw something no check had caught. The button looked a little unfinished, as if something was off.

components/ui/Button.tsx
Aa3.52:1Get started
Aa5.09:1Get started

Slop

Given free rein, AI doesn't know when to stop. It writes long sentences, repeats itself, and says the result meets all your needs in the best possible way. Always question every decision it makes.

messages/en.json375 px wide
Slop
Now

Principles

Here's a short list of what I follow when I work with AI.

  • Rules before pages. Tokens, type roles and components first, so AI has something to reuse instead of something to copy.
  • Keep the file Claude always reads short. Page specs and reasons go in files of their own.
  • Decide in a prototype, then build. The pick becomes the rule.
  • Every rule says why. A rule without its reason gets followed to the letter and missed.
  • A rule a test can hold gets its test the same day. What a test can't hold, a script counts, by file and class.
  • Keep what was dropped, with the reason, so it doesn't come back.
  • Check the hard cases from the first page. Some languages read right to left, some have very long words, and crawlers see the page without JavaScript.
  • Protect the guards. A change to a test waits for review, like a change to the design.

Where it stands

The site is live, and every change goes through the tests before it ships. Anyone can change the copy, but the rules now catch slop and stop it. That trains people too, to question what AI writes instead of trusting it blindly.

A change to how the site looks, or to the tests themselves, waits for a human reviewer, preferably a designer.

It still has more text than I'd like, and that will come down over time.

Working with AI is addictive, and I really enjoy it, even when it means being the human who reviews so much. It's fast and eager to please, but it needs a person to guide it and give it direction and a shared purpose. It does what I don't have time for, and I do what it can't. That's why it works.

Everything else

Some of the work didn't fit the story, but it's on the site.

  • Every page has a Markdown version, llms.txt lists them, and robots.txt lets AI tools in, so they can read the whole site without the design around it.
  • Search engines and AI used to get an empty page until JavaScript loaded. Now every page arrives whole.
  • The home page answers what TicketingHub is and what it costs. AI wrote it in long paragraphs, and I cut it to a few sentences, because AI understands short ones too.
  • I took down twenty blog posts that had nothing to do with tour operators, like bungee jumping and karaoke. Older posts that search engines never found now have pages of their own.
  • AI translates the site into 15 languages, and I fix what reads wrong.
  • Each language has its own addresses, in the words people search for there.
  • The site used to rebuild every page every hour, and that was the biggest cost of hosting. Now a page rebuilds only when it changes.
  • Every page has its own preview image.
  • There's a press kit, with real logo files, the founder's photo and the site's facts.