---
name: Property Brochure
description: "Produce a 10-page A4 property brochure from raw photos, transcripts, floorplans, and EPC data. Renders in-browser for live editing and exports to pixel-perfect PDF via page-level image snapshots. Covers image organisation, SVG logo generation, AI hero image prompt, Material Information (DMCCA 2024), and print snapshot capture."
---

# Property Brochure

Produce a 10-page A4 property brochure from raw assets. The brochure renders in-browser for live editing and exports to pixel-perfect PDF via page-level image snapshots.

## Reference template

See `references/template.html` — the canonical HTML template. Read it, copy to `output/brochure.html` in the property's project directory, and populate all `<!-- REPLACE: -->` placeholders with real content. The CSS is final; do not modify it.

## Required inputs

- **Property photographs** — minimum 20, ideally 30+. See image requirements below.
- **Property name and address**
- **Floor plan image** — used for room dimensions, total area, and compass orientation
- **EPC rating** — set the `current` class on the correct A-G band
- **Property walkthrough transcript or written description** — source for room descriptions, features, renovation history
- **Agent details** — default: Muvin (01279 600567, sales@muvin.co.uk, 25 Bell Street Sawbridgeworth CM21 9AR). Logos: `muvin.svg` (light bg), `muvin-light.png` (dark bg)

## Image requirements

Rename all photos to descriptive names in an `images/` subfolder. The template needs these categories and quantities:

| Slot | Count | Description |
|------|-------|-------------|
| `front-dusk.png` | 1 | AI-generated golden hour hero (cover) |
| `front-street.jpeg` | 1 | Front elevation, daytime |
| `rear-elevated.jpeg` | 1 | Rear elevation |
| `hallway.jpeg` | 1 | Entrance hall / staircase |
| `kitchen-hero.jpeg` | 1 | Wide kitchen shot (banner image, page 3) |
| `kitchen-bar.jpeg` | 1 | Kitchen island / breakfast bar |
| `kitchen-detail.jpeg` | 1 | Kitchen worktop / appliance detail |
| `dining-area.jpeg` | 1 | Dining space |
| `living-room.jpeg` | 1 | Living room wide |
| `living-detail.jpeg` | 1 | Living room detail / seating |
| `study.jpeg` | 1 | Study / home office |
| `utility.jpeg` | 1 | Utility room |
| `bedroom-master.jpeg` | 1 | Principal bedroom |
| `dressing-room.jpeg` | 1 | Dressing room / walk-in wardrobe |
| `ensuite-master.jpeg` | 1 | Master ensuite |
| `landing.jpeg` | 1 | Landing / staircase |
| `loft-room.jpeg` | 1 | Loft / additional room |
| `bedroom-child1.jpeg` | 1 | Bedroom 2 |
| `bedroom-child2.jpeg` | 1 | Bedroom 3 |
| `bathroom-freestanding.jpeg` | 1 | Family bathroom |
| `bathroom-dual-basins.jpeg` | 1 | Bathroom vanity detail |
| `cloakroom.jpeg` | 1 | Ground floor WC |
| `aerial-plan.jpeg` | 1 | Aerial / drone plan view (page 7 hero) |
| `garden-towards-house.jpeg` | 1 | Garden looking back at house |
| `garden-lawn.jpeg` | 1 | Garden / landscaping |
| `patio-decking.jpeg` | 1 | Patio / terrace |
| `patio-seating.jpeg` | 1 | Outdoor seating area |
| `floorplan.jpeg` | 1 | Floor plan (all levels, page 8) |

**Total: ~28 images.** Not every property will have all of these. Adapt the page layout when images are missing — remove the slot, don't leave a placeholder. If the property has fewer rooms, merge pages to maintain A4 fit.

## Output folder structure

All final artefacts go in a single `output/` folder, ready to host or hand off:

```
output/
  brochure.html
  cover-print.png
  page2-print.png … page9-print.png
  backpage-print.png
  {name}-logo-dark.svg
  {name}-logo-light.svg
  muvin.svg
  muvin-light.png
  images/
    {name}-01.png        (dusk hero)
    {name}-02.jpeg       (front street)
    {name}-03.jpeg …     (remaining photos)
    {name}-28.jpeg       (floorplan)
```

## Image renaming

Rename all source images to `{property-name}-NN.{ext}` (e.g. `laven-01.png`, `laven-02.jpeg`) in the order listed in the image requirements table above. Use zero-padded two-digit numbers. The brochure HTML must reference `images/{name}-NN.{ext}` — not the original camera/WhatsApp filenames. Discard the originals after copying to output.

## Line-drawing SVG logo

Trace the front elevation from the exterior photo into a minimal SVG line drawing:
- Dark version (`#2C2C2A` stroke) for light backgrounds
- Light version (`#FAFAF8` stroke) for the dark back page
- No text in the SVG — the property name is rendered in HTML
- Crop the viewBox tightly to the house outline
- Stroke weight should read clearly at ~120–160px wide

## AI hero image prompt

Generate a golden hour / dusk version of the front exterior. The prompt must:
- Reference the floor plan and aerial image to determine compass orientation
- Position the setting sun on the correct side of the frame relative to the front elevation
- Specify warm amber directional light on the facade from the sun side
- Sky gradient from deep amber at sun to pale peach opposite
- Keep the house structure sharp and unmodified
- Professional UK estate agent photography style
- Output the prompt text for the user to execute in their image tool of choice

## 10-page structure

Each page is a `<div class="page">` (or `.cover` / `.backpage`) at `width: 210mm; min-height: 297mm`. Every page must fit within A4 height (1123px at 96dpi). Measure with `element.scrollHeight` during development and adjust image heights with inline styles if content overflows.

| Page | Class | Section | Key content |
|------|-------|---------|-------------|
| 1 | `.cover` | Cover | Dusk hero, property name, subtitle, 5 glassmorphic stat cards |
| 2 | `.page` | Property Overview | Description, callout, hallway image, 2-image grid (front + rear) |
| 3 | `.page` | Kitchen & Living | Banner image with overlay text, kitchen split, living room split |
| 4 | `.page` | Study, Utility & Sustainability | Detail image grid, study/utility descriptions, dark band with energy features |
| 5 | `.page` | Principal Bedroom | Master suite, dressing room, ensuite, landing, loft room |
| 6 | `.page` | Bedrooms & Bathrooms | Remaining bedrooms, bathroom gallery, bathroom description |
| 7 | `.page` | Outside / Garden | Aerial plan view (full bleed), garden description, 3-image garden grid |
| 8 | `.page` | Floor Plans & Key Features | Floor plan image (85% width), total area, key features list, horizontal EPC bar |
| 9 | `.page` | Material Information | Parts A, B, C per DMCCA 2024 + NTS guidance |
| 10 | `.backpage` | Back Page | Property logo (light SVG), CTA heading, contact details, Muvin logo, disclaimer |

## Material Information (UK regulatory compliance)

Three tiers per National Trading Standards and DMCCA 2024. Populate all known fields; mark unknowns as "TBC":

- **Part A** (all transactions): price, tenure, council tax, property type, rooms, floor area, utilities (electricity, water, sewerage, heating), broadband, mobile, parking, EPC
- **Part B** (where applicable): building safety, covenants, rights of way, easements, listed status, conservation area, TPOs, accessibility
- **Part C** (additional facts): flood risk, coastal erosion, planning, construction type, structural issues, subsidence, damp, asbestos, knotweed, mining

## Design system

- **Fonts**: Playfair Display (headings) + Inter (body)
- **Palette**: sage `#7C8C72` primary, gold `#C5A572` accent, warm off-white `#FAFAF8` background
- **Cover/backpage dark**: greenish-black `#1a1c18` with gold `#D4B882` accents — not teal/cyan
- **Cover**: content at bottom (`justify-content: flex-end`), left-aligned, glassmorphic stat cards
- **EPC**: horizontal A-G bar at bottom of key features section, `current` class outlines the active band
- **Page numbers**: CSS counter on screen (bottom-centre of each `.page`), not on cover or backpage

## Live editing workflow

1. Copy template to property directory, populate with content
2. Serve locally: `python3 -m http.server <port>` from the project root
3. Navigate Playwright to the brochure URL
4. Present to user in browser for review
5. User requests changes — iterate on content, image sizing, page balance
6. Verify every page fits A4: measure `scrollHeight` for all `.page` elements, adjust if any exceed 1123px
7. Repeat 4–6 until user approves the final copy
8. **Only after user approval**: capture all print snapshots (see below)
9. User downloads PDF via the Download button (browser print with `@page { margin: 0 }`)

Do not capture snapshots during the editing cycle — they are expensive and invalidated by every change. Only generate them once the user confirms the content is final.

## Print snapshot capture

Every page is pre-captured as a PNG that swaps in during print. This guarantees pixel-perfect PDF — no browser print rendering issues. **Run this only once, after the user approves the final version.**

Capture all pages in one pass via Playwright `browser_run_code`:

```javascript
async (page) => {
  await page.evaluate(() => {
    document.querySelector('.download-bar').style.display = 'none';
    document.body.style.overflow = 'hidden';
  });
  const base = '/path/to/property/';
  const cover = page.locator('.cover');
  await cover.scrollIntoViewIfNeeded();
  await cover.screenshot({ path: base + 'cover-print.png', type: 'png' });
  const pages = page.locator('.page');
  for (let i = 0; i < await pages.count(); i++) {
    await pages.nth(i).scrollIntoViewIfNeeded();
    await pages.nth(i).screenshot({ path: base + `page${i+2}-print.png`, type: 'png' });
  }
  const back = page.locator('.backpage');
  await back.scrollIntoViewIfNeeded();
  await back.screenshot({ path: base + 'backpage-print.png', type: 'png' });
  await page.evaluate(() => {
    document.querySelector('.download-bar').style.display = '';
    document.body.style.overflow = '';
  });
}
```

**Print CSS**: `@page { size: A4 portrait; margin: 0; }`. Each container hides children except `.print-img` which fills the page at `z-index: 9999`.

The `.print-img` elements use `opacity: 0; width: 1px; height: 1px` on screen (not `display: none` — that prevents image loading in some browsers).

## Scope

**Included**: HTML brochure, image organisation, SVG logo (dark + light), AI hero prompt, all print snapshots, Material Information compliance, EPC chart, disclaimers, page numbering.

**Not included**: Professional photography, actual EPC assessment, legal verification of Material Information values, agent CRM integration, print shop preparation (CMYK, bleed marks), executing the AI hero image prompt.

**Depends on**: Playwright MCP for screenshots, local HTTP server for browser preview.
