You're running the PageHub workflow "Make it look like this site" on site . - Pass `id: ""` on every PageHub tool call (the Stripe and checkout tools name it `siteId: ""`). - Every change stages in the site's draft. Never call `publish_site` unless the user says to publish. - Finish by showing the proof: Desktop and phone screenshots of the home page before and after, the old and new theme side by side, and accessibility results before and after. - Keep to about 13 minutes of work. If more is left, list it and stop. - Draft preview: https://pagehub.dev/view/ - This needs the PageHub connector (https://pagehub.dev/api/mcp). If its tools aren't available, tell the user to add it and stop. Goal: site takes on the look of the reference site, with every word, photo, page, link and form left as it is. Reference: (not given) What they like about it: (not given) Must stay: (not given) The reference is a source of techniques, not something to copy. Take its colour mood, type pairing, shapes, spacing and section treatments. Never take its logo, wording, photos, icons or brand name. ## 1. Study the reference (about 2 minutes) If you can open web pages, open the reference and note, as techniques: - Colours: the main colour, the background, the text colour, the accent, and whether it's light or dark. - Fonts: the heading and body font families (from its CSS), and the weights. - Shapes: corner radius on buttons and cards, borders, shadows. - Rhythm: how much space between sections, and how backgrounds alternate. - Section treatments: hero layout (photo with overlay, split, plain), eyebrow labels, button shape (pill or square, filled or outline), card style. If you can't open it, work from "What they like about it". If both are thin, ask the user to describe the look in a sentence or two, and stop. Then `get_style_reference` with `topic: "design"` and with `topic: "theme"`. ## 2. Capture before (about 1 minute) 1. `read_site_file` on `theme.css`. Save the palette, radius, font and spacing custom properties. This is the "before" theme, and the way back. 2. `screenshot_site` of the home page at `width: 1440` and at `width: 390`, both `fullPage: true`. 3. `audit_accessibility` with `level: "AA"` on the home page. Note the violation count. ## 3. Apply the theme (about 3 minutes) One `set_theme` call: - `palette`: the complete list in DaisyUI names (Primary, Primary Content, Secondary, Secondary Content, Accent, Accent Content, Neutral, Neutral Content, Base 100, Base 200, Base 300, Base Content, plus Error, Info, Success and Warning with their Content colours, kept from the before theme). Each Content colour must reach 4.5:1 contrast on its colour. Keep anything listed under "Must stay". - `styleGuide`: `headingFontFamily` and `bodyFontFamily` (Google Fonts closest to the reference; check the weights exist), `radiusBox`, `radiusField`, `buttonPadding`, `shadowStyle`, `border`. Keep `contentWidth` unless the reference is clearly wider or narrower. - Keep a `darkPalette` only if the site already had one; update it to match. ## 4. Restyle sections (about 5 minutes) `list_pages`, then `list_site_files`. Work on the header and footer partials and the home page's sections from the top, up to 8 sections in total. Read each file with `read_site_file`, then send one `edit_site_files` per page. Change classes and style attributes only: - Section backgrounds and rhythm: `bg-base-100`, `bg-base-200` or `bg-primary` bands, each paired with its text token (`text-base-content`, `text-primary-content`). Never 4 sections in a row on the same background. - Spacing with spatial tokens only (`py-space-lg`, `py-space-2xl`, `gap-space-md`). No `py-16`, no `md:py-*`. - Headings: `font-heading`, weights and responsive sizes like `text-3xl sm:text-4xl md:text-6xl`. - Buttons: the reference's shape on the site's own buttons, keeping `px-space-md py-space-xs min-h-12`. Cards: padding, border, and a shadow or background. - Hero photo overlays: a child gradient overlay element (`bg-linear-to-b` with palette tokens), never a flat dark fill. - Replace a class with its new version in the same `class` attribute; remove only classes that would fight the new ones. Don't, and list for the user instead: - Changing any text, image, link, form, page or nav item, or adding, deleting or moving sections. A layout that needs restructuring to match goes in the report as a suggestion. - Hex or rgba colours, `font-['Name']`, `@keyframes`, or anything in `site.json` inject. - Restyling more than 8 sections. Other pages already pick up the new theme; name them as the follow-up ("run this again for the Services page"). If an edit fails, read the file again and retry once with the smallest change, then note the exact error and move on. ## 5. Prove it (about 2 minutes) 1. `audit_accessibility` on the home page again. Fix new contrast failures with stronger tokens before you finish. 2. `screenshot_site` of the home page at `width: 1440` and `width: 390`. Check that every word and photo from the before screenshots is still there and readable. Undo any change that hid or broke something. ## 6. Report Reply with: - Before and after screenshots, desktop and phone. - Old theme and new theme side by side: colours, fonts, corner radius. - Which techniques from the reference you used, in plain words ("bold serif headings, pill buttons, a dark band behind the reviews"). - Accessibility violations before and after. - Suggestions that would need layout changes, and pages still to restyle. - How to go back: the before theme is saved, and one `set_theme` with it restores the colours and fonts. - The draft preview link (the `Draft preview:` address `screenshot_site` prints; never one you build), and a question: publish the new look now? Ask before `publish_site`.