How to use your website theme
Use your website theme with AI, refine your first page, build matching pages, and create images with the prompts in your download.
To use a website theme, upload the design guidelines to your AI website builder. Build one page, review its colours, typography, spacing, and layout, then reuse the same direction for the rest of your site. Use the image prompts to create matching imagery.
You receive two Markdown files. Markdown is a plain-text format with an .md extension.
- Theme: the visual instructions for building your website (typography, spacing etc.)
- Image prompts: ready-to-use prompts for creating matching images
1. Download your theme
Sign in to your account with the email you used at checkout. Find your theme under Your purchases and select Download files for AI. Upload the zip file to your favourite AI tool. Keep both files in a project folder alongside your website copy and the images you create.
Before building, write down what your business does, who it helps, and the main action you want visitors to take. This will help provide the AI tool context to work off of.
2. Use the theme
Start with one page so you can review the direction before building the rest.
Use the attached design theme to build a homepage for [business name]. We help [target audience] with [service or product]. The main action is [book a call / browse products / make an enquiry]. Follow the theme's typography, colours, spacing, layout and motion. Use attached content. Make sure to review desktop and mobile.
Replace the bracketed parts with your own details and final copy. If your tool cannot read the ZIP, unzip it and attach the theme file, or open that file and paste its contents into your project.
3. Review and refine
Open the first page on a larger screen and a phone. Read it from top to bottom: is your offer clear? Is the main action easy to find? Does the page follow the theme's fonts, colours and spacing?
Pick one thing to improve. Tell the AI tool which section you're referring to and what you want to change. Don't forget to note which parts you want to keep unchanged. For example:
On the homepage, the introduction feels cramped on mobile. Add more 50% more between the headline, description and button, and make the heading wrap within the screen. Keep the theme's fonts and colours, the current wording and the desktop layout.
Don't forget to save a version on Github before moving on.
4. Build your next page
Keep working in the same project (the one with the uploaded theme). Gather what the next page needs to explain, the final copy, translate that into a list the sections you need and what you need the visitor to do.
Use the first page as the design reference:
Add a [About / Services / Contact] page. Its purpose is to [explain the business / describe our services / help visitors get in touch]. Include these sections in order: [section list]. Use this final content: [paste your copy]. Follow the attached theme and reuse the homepage's navigation, footer, fonts, colours, buttons and spacing. Add the new page to the desktop and mobile navigation. Keep the approved homepage design.
Open the new page and homepage side by side. Do the headings, buttons and spacing feel consistent? Follow the same review-and-refine process before adding another page.
5. Create your images
Upload the image-prompts.md file from your the downloaded file. Each theme has its own image directions that instruct the lighting, colours, textures and mood to keep your images related.
Adapt the subject to your business and explain where the image will appear. For a wide full width hero with a headline beside the subject, try:
Use this theme image prompt as the starting point attached in the project. Change the subject to [your product, space or subject], while keeping the lighting, colour palette, textures and mood. Create a wide landscape 16:9 image for my homepage hero, with clear space on the [left / right] for a headline.
Generate a few variations and choose one that suits the page.
Now, tell the builder where to place the image(s):
Put attached image in the homepage hero and second attached image beside the [section name]. Keep the theme's image treatment. Check the crops on desktop and mobile, keep the headline readable, and add useful text descriptions for meaningful images.
Repeat this process for the remaining pages: build with the theme, review and refine, then add matching images. Keep your theme and image prompts available in the same project as you go.
Before you publish
Before publishing, work through the website launch checklist.
- Read your page from top to bottom. Is the offer clear and the next step easy to find?
- Check a narrow mobile view. Are the headings, buttons and image crops comfortable?
- Make sure the colours, type, spacing and photography feel consistent between pages.
- Check every link, form and button.
