--- name: design-gallery description: Use whenever you build or substantially redesign a website or landing page for the client. Runs discovery (harvest their existing site first, then one batched question round), picks a structural starting point from the design gallery, and builds to STANDARDS.md using the animation and media toolboxes. (Siblings: import-existing-site to mirror their current site, mimic-a-site for reference sites they admire.) --- # Build the site the client actually wants The design gallery at `/home/opencode/design-gallery/` is a set of complete, approved example pages (`manifest.md` lists them), a quality bar (`STANDARDS.md`), and two toolboxes (`toolbox/animations.html`, `toolbox/media.html`). It exists so you never improvise structure or quality from scratch — but the gallery is **vocabulary, not templates**. The client's site must be theirs, not a gallery page with the name swapped. ## Step 0 — Harvest before you ask Most businesses already have something online. Collect facts BEFORE asking questions — correcting a summary is much easier for the client than dictating from a blank page. - **They have a site?** Mirror or curl it (the `import-existing-site` skill has the exact commands) and extract: business name, address, phone, hours, services and prices, about/story copy, testimonials, team names and roles, logo, brand colors (read the real hex values from their CSS), fonts, and which photos/videos exist. - Also check the obvious secondary sources if the site is thin: their Google Business profile and social pages usually have hours, photos, and reviews. - Present the harvest back in one short summary: *"Here's what I pulled from your current site — what's out of date? What do you want to keep, and what should change?"* - **Never invent facts.** Hours, prices, addresses, staff names: if the harvest didn't produce it, ask. A beautiful page with wrong hours is a failed page. ## Step 1 — Discovery (one conversational round, not a form) Ask ONLY what the harvest didn't answer, woven into one short, friendly message. Lead with the highest-signal question: 1. **"Is there a website you'd love yours to feel like?"** — theirs to keep, a competitor's, anything. If they name one, run `mimic-a-site` on it and most style questions disappear. If they're stuck, don't leave them hanging: offer directions — run `web-search` for 2–3 well-regarded sites in their category, describe each in one line ("warm and personal / dark and premium / bright and minimal"), and let them point. 2. The site's number-one job: bookings? calls? walk-ins? online orders? → that becomes the primary CTA, above the fold. 3. Colors or fonts you love — or hate. (Or: "keep my current brand.") 4. Anything you never want to see on your site. 5. What photos or video do you have (or can shoot)? Skip anything already answered by the harvest or the mimic pick. The goal is seamless: the client should feel like they described their dream site to a person, not filled in a questionnaire. **Client answers override everything below.** If they want hot pink, they get hot pink — your job is to make hot pink pass the standards (contrast, mobile), not to talk them out of it. The gallery only decides things the client expressed no opinion on. ## Step 2 — Choose a structural starting point Read `manifest.md`. Pick the example nearest the client's business for **structure**: section order, menu/pricing presentation, media placement, footer pattern. Mixing sections across examples is encouraged (e.g. one example's hero with another's team-card pattern). If no category fits, take the closest structure, follow `STANDARDS.md`, and research the category with `mimic-a-site` + web search. ## Step 3 — Adaptation rules (hard rules, no exceptions) - Palette, fonts, and voice come from the CLIENT — their logo, their existing brand, their discovery answers. **Never ship a gallery example's palette+font combination unchanged.** - **Never reuse gallery copy or gallery business details.** Hazel's, Marigold Bakehouse, Marlowe, The Stillroom are fictional gallery businesses — none of their names, taglines, sentences, addresses, or phone numbers may appear in a client build. - Copy is written fresh for this client, in their voice, from harvested facts. Menus, services, prices, staff bios: real, specific, theirs. - Two clients in the same category must get visibly different pages. If your build would look like the gallery example with a different logo, change more: different palette temperature, different hero construction, different section mix. ## Step 4 — Build to STANDARDS.md Read `/home/opencode/design-gallery/STANDARDS.md` before you build and grade against it after. The short version: mobile-first and flawless at 375px AND 1440px, no horizontal scroll ever; zero lorem/placeholder text; primary CTA above the fold; footer with address/phone/hours + repeated CTA; WCAG AA contrast; visible focus states; semantic heading hierarchy. ## Step 5 — Motion and media - **Motion** (`toolbox/animations.html` — every demo there is the implementation, view source): defaults ON are scroll-reveal, hero entrance stagger, hover micro-interactions, sticky nav. Budget ~1 motion idea per section. All movement inside the `prefers-reduced-motion: no-preference` guard. H1 and hero image visible at first paint. **Never animate menus, prices, hours, or contact info.** - **Media** (`toolbox/media.html`): place the client's REAL photos and video using the slot patterns (full-bleed video band, inline video card, click-to-play testimonials, 3:4 portraits, ringed avatars). Video is always muted-first — sound only by explicit user action. If the client has no media yet, ship labeled placeholder frames sized exactly like the gallery's, and give the client a specific shot list ("10s slow pan of the dining room at golden hour; 3:4 portraits of each stylist against the brick wall") so the slots get filled. ## Step 6 — Self-review before showing the client 1. **Gallery-leak check** — must return nothing: `grep -riE "hazel|marigold|marlowe|stillroom|woodrow|hopkins st|magnolia ave|crestview" ` 2. **Fact check** — every hour, price, address, phone, and name on the page traces to the harvest or the client's own words. Nothing invented. 3. **Standards pass** — 375px and 1440px renders, no horizontal scroll, anchors land correctly, contrast and focus states hold. 4. Publish the preview (see `opencode-static-pages`) and ask for feedback the useful way: **keep / kill / fix, per section** — not "do you like it?". Iterate on their feedback; their direction wins every round.