Documentation

Bring your own design

If you want a one-of-a-kind site, you can design it yourself (or with a designer) using an AI design tool and hand the result to Get Bookable as a handoff bundle — a single file the design tool exports. We import it and serve it as your live site.

New to this? The friendly, step-by-step version is Design your own site with AI. This page is the big-picture overview, and the two companion pages go deep:

Designer guide — the practical workflow for using Claude Design or Google Stitch.
System prompt for Claude Design / Stitch — the exact brief you point the design tool at.

What a handoff bundle is

A handoff bundle is the .tar.gz file the design tool produces when you click "hand off to coding agent". It's a single archive that contains your design's files, images, and content. To make sure the design imports cleanly, the file follows a small set of naming and content rules (the handoff contract) that the design tool is briefed on. You don't need to learn the rules — the system prompt takes care of that — but they exist so the design tool always produces a file we know how to import.

If a bundle doesn't match the contract, the import is rejected with a clear message naming the file and the rule that failed, so the design can be fixed and re-exported.

The full contract is served at /handoff-contract.txt for anyone who wants to read it. Designers don't need to memorise it — the system prompt instructs the design tool to follow it.

The workflow at a glance

Brief the design tool. Start a Claude Design or Stitch session and, in your first message, paste this URL so the tool reads our canonical brief:
```
https://getbookable.online/system-design-prompt.txt
```
Then describe your business in your own words (what you do, who it's for, the feel you want, the services you offer). The design tool takes it from there. See the designer guide for the deeper reference, or read the system prompt itself if you're curious.
Design your site. Iterate until you're happy. The design tool keeps to the file names and content structure our brief describes, so you can focus on how it looks.
Export the bundle. Trigger the design tool's "hand off to coding agent" export to produce the .tar.gz.
Upload it. On the Design your site onboarding step, choose Bring your own design and upload the bundle. It is validated before you reach the plan step, so you find out immediately if anything needs fixing.
Go live. Once your plan is active the site is built from your bundle.

Re-importing later

You can refine your design and re-import at any time — your admin edits are kept, untouched sections update, and any conflicts are yours to resolve. See Re-import & update your design for the full walkthrough (including what template sites do).

If an import is rejected

Rejections are specific, not vague. The error names the file and the rule that failed — for example a missing canonical block file, content placed outside the expected data block, or an asset that's too large. Fix the design, re-export, and upload again.

Some features ship to your live site only on a bundle import — most notably the in-page Stripe payment step. If you enable payments after going live, re-import your bundle so the payment step appears on your booking page.