# Make Your Bread: Brand Brief for AI-Built HubSpot Pages

Paste this whole thing into Claude with the **HubSpot connector** turned on (claude.ai or Claude Code). Fill in the answers in plain language. You don't need design terms. It takes about fifteen minutes.

**What to expect:** Claude makes a **first draft** from your theme's own designed template, with your copy and images in place. You then refine it in HubSpot's drag-and-drop editor. Claude ends with a short list of what to adjust first. Once you're happy with one page, Claude can turn it into your next pages.

**Before you start:** brand your theme. AI builds HubSpot pages from your theme's modules, and those modules take their colors and fonts from **theme settings**, not your brand kit. (See the theme settings sheet for your theme.) This brief is the filling; the theme is the bread.

---

## Instructions to the AI

You're helping a marketer, not a designer or developer, get a strong first draft of a HubSpot page that they'll refine in the drag-and-drop editor. Build it with the HubSpot connector, inside their existing theme.

1. **Check where you are.** Confirm which HubSpot account you're connected to and tell me its name before doing anything else.
2. **Look before you plan.** Read the brand kit, the template I named, and the theme's modules and ready-made sections. My brand colors are in this brief. Use them even if the brand kit comes back empty.
3. **Start from the template's designed sections.** This is the most important rule.
   - Keep each section's layout, image slots, icons and styling, and swap in my copy and images.
   - Only remove a section if there's no copy for it.
   - Only add a section if nothing in the template fits. When you add one, use the theme's ready-made sections before building from individual modules.
4. **Prefer the theme's own modules** (form, button, call to action, testimonial, cards) over HubSpot's generic ones.
5. **Fill every image slot.** Use the images listed under "This page." You can reuse a photo. If you run out, keep the slot and flag it. Don't delete it.
   - **Icons and brand graphics:** use mine if I've listed them. Otherwise keep the template's icons and flag them as "swap for brand icons" in your refine list.
   - **Text on photos:** if the template's photo overlay isn't something you can set, don't improvise a heavy panel. Keep the text readable as best you can and flag that section for a person to check.
6. **Fit my copy to the design.** Keep my wording.
   - You may drop or merge sections I've marked *nice-to-have*, and shorten labels (button text, card titles) to fit a module.
   - Never invent new claims or facts.
   - List every change you made in a "Copy changes" list.
7. **Show me the plan** as a short list:
   - which template sections you'll keep, and what goes in each
   - where each image goes
   - anything you'll drop or add

   Then wait for my OK. Only stop to ask if a **hard rule** (below) would be broken. For everything else, make a reasonable choice and tell me what you chose.
8. **Build, then don't publish.** Leave the page as a draft and give me the editor link.
9. **Review it against this brief.** Give me:
   - what matches
   - what doesn't
   - your "Copy changes" list
   - a **"Refine in drag and drop" list**: the changes I should make first, in priority order. Mark each one 🟢 (anyone can do it in the editor), 🟡 (needs a designer's eye) or 🔴 (needs a developer or theme change).
10. **Run the "Before you publish" checks** at the end of this brief. Fill in what you can check, and mark the rest "Needs a human."

---

## Brand brief (fill this in once)

**1. Brand in one line.** What is this brand and who is it for?

**2. Colors.** Your main colors with hex codes. Write them here even if they're in your HubSpot brand kit; AI tools can't always read the brand kit.

When does the bright/accent color get used? (buttons only, highlights, sparingly)

Section backgrounds: one main background with a tint saved for special sections (pricing, testimonials), or alternating? Any dark sections, and where?

**3. Type feel.** Headings punchy and bold, elegant and light, or plain and neutral? Any ALL CAPS?

**4. Corners.** Buttons and cards: sharp, slightly rounded, or fully rounded (pill)?

**5. Density.** Airy and spacious, or compact and information-dense?

**6. Imagery.** Photography, illustration, icons, or mostly text? If real people appear, are they your team or stock?

**7. Buttons.** Your main action, and your second action. These should look different.

**8. Brand graphics and icons.** Do you have an icon set, illustrations, or graphic shapes from your logo (patterns, waves, badges)? Where are the files? These are what make a page feel like *yours* rather than a template.

**9. Reference examples.** 2 or 3 things that feel right: your own past work, pages on your site, or brands you admire.

---

## This page (fill this in each time)

**Page goal.** What should a visitor do?

**Theme and template.** Which theme and template? Pick a template whose preview you like. Claude keeps its design and swaps in your content.

**Page name.**

**Form.** Which HubSpot form? (its name)

**Images.** 5 to 8 image URLs from your File Manager, each with a few words on what it shows. Web-sized JPGs (under about 500 KB) with square corners work best; let the theme round them.

| Image URL | What it shows | Good for |
|---|---|---|
| | | hero |
| | | |

**Search and sharing.** Page title (about 50 to 60 characters), meta description (about 140 to 160 characters) and URL slug, or "draft them for me." Claude will show drafts for your approval.

**Copy.** Paste your copy, with a label on each section, marked **must-have** or **nice-to-have**.

---

## Rules

### Hard rules (Claude stops and asks before breaking one)
- Don't write a custom template, coded page or custom CSS. It may look right, but your team can't edit it in drag and drop.
- Don't publish. Leave it as a draft for a human to review.
- Don't invent copy, claims, prices or facts.
- Don't leave template demo **text** behind (placeholder headlines, sample testimonials, "Lorem ipsum", sample logos with other companies' names).
- Don't connect to or change anything outside this page: other pages, theme settings, brand kit, forms or navigation.

### Colors
Use the theme's style options first. Where the theme has none, it's fine to set a section's background in its own settings, or a text color in the rich text editor, using the brand hex codes. Keep these to the few places that need them, because they don't update when your brand changes.

### Taste guidance (avoid these, but don't strip the template to do it)
These are the defaults AI reaches for. Don't *add* them. Keep whatever icons, cards, columns and image slots the template was designed with.
- Purple-to-blue gradients, gradient text, more than two or three colors in one layout
- More than two typefaces; body copy in all caps; bolding everything
- Centering long paragraphs; boxing every element in its own card; shadows under everything; frosted glass
- Stock photos of teams around a laptop; generic thin-line icon sets you add yourself
- Changing the background on every section just for variety
- The primary and secondary buttons looking the same

### Add your own:

---

## Before you publish (the checks people skip)

Claude fills in what it can check and marks the rest **Needs a human**.

**Mobile**
- [ ] Preview on a phone: nothing overlaps, cuts off or scrolls sideways
- [ ] Buttons are easy to tap
- [ ] Images aren't cropped in a way that loses the point
- [ ] The form is easy to fill in on a phone

**Search and sharing (SEO)**
- [ ] Page title is set (about 50 to 60 characters)
- [ ] Meta description is set (about 140 to 160 characters)
- [ ] URL slug is short, readable and lowercase
- [ ] Exactly **one H1**
- [ ] Headings go in order (H2 under H1, H3 under H2)
- [ ] Every meaningful image has alt text
- [ ] A featured/social image is set

**Readability and access**
- [ ] Text is readable on every background (at least 4.5:1)
- [ ] Button and link text says where it goes
- [ ] Nothing important is only in an image

**Works as intended**
- [ ] Every button and link goes somewhere real. No `#` placeholders.
- [ ] Submit the form once as a test
- [ ] Images are web-sized (under about 500 KB)
- [ ] Header and footer are right: logo, links, no leftover template text

---

*Fill the bread once. Run it as many times as you want.*