STEP 1 — Lock in brand & draft content (minimal asking).

First load the deferred tools you'll need later: call toolSearch for generateImage and generateWebpage so they are ready before Steps 2 and 3.

Then scan the user's message and any @references for: brand/studio name, what the brand does (focus), tagline, project names, service list, and any uploaded/referenced images (track these for Step 2 — do NOT regenerate slots they cover).

Asking rules (be sparing — the user prefers concise interactions):

- If BOTH brand name AND brand focus are missing, call askUserQuestion ONCE with two batched questions:

Q1 "Studio/brand name?" — options like 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject'.

Q2 "What does the brand do?" — options like 'design agency', 'photography studio', 'architecture firm', 'fashion label', 'personal portfolio'.

- If only one is missing, ask only that one.

- If both are present in the user's message, do NOT ask anything — proceed directly.

Once brand name + focus are known, draft the rest yourself without further questions. Tone: editorial, confident, minimal, premium. Keep copy tight — this style breathes through whitespace, not verbosity.

Draft:

- Tagline: two short lines that read as one phrase, eg 'Design / the future', 'Frame / the world', 'Build / the lasting', 'Make / it last'. Each line 1–2 words. Pair the line break with a serif italic + serif regular split.

- About copy: ~80 words, two short paragraphs. Mention a founding era (eg 'since the 80s'), a couple of services, and a global-clients / industry-awards vibe.

- THREE case studies. For each: invented project name that fits the focus (for a design agency reuse names like 'Schematiq', 'Commercial Co.', 'Sprig & Sky'; for other focuses pick parallel-feeling names), 1–2 service tags, a ~30-word Background sentence, a ~30-word Solution sentence.

- SIX service tags relevant to the focus (defaults: Brand Activation, Integrated Marketing, Website Development, Video Production, Brand Identity, Brand Strategy — adapt for non-agency focuses).

- Closing CTA tagline (one line, ~10–14 words), eg 'Elevate your brand and make your mark in history.'

- Footer items: studio name, 'Terms & Support', 'Privacy Policy'.

Hold all content in memory for Step 3. Do NOT call generateWebpage yet.

STEP 2 — Assemble exactly 6 cohesive monochrome images.

Slot map: hero, about, project_1, project_2, project_3, feature.

A) If the user already provided images (uploads, @references, URLs in their message), assign them to slots in the order received and skip generation for those slots. Generate only the remaining slots.

B) For every empty slot, call generateImage. Run them IN PARALLEL in a single tool batch where possible.

Non-negotiable image style for every slot:

- Pure black-and-white only. No color tint, no sepia, no duotone. Editorial / cinematic / high-end magazine quality. Consistent contrast and grain across all six. Generous negative space where the layout calls for it.

Slot prompt templates — substitute [DISCIPLINE] with the brand focus from Step 1 (eg 'design agency', 'photography studio', 'architecture firm') and [DISCIPLINE_SUBJECT] with a fitting subject (eg for design: paper sculpture / typography close-up; for architecture: shadow geometry; for fashion: silhouette; for photography: still life):

1. hero (aspect 16:9): "Cinematic black and white photograph of [DISCIPLINE_SUBJECT], dramatic editorial composition, sleek minimalist monochrome aesthetic, soft top lighting, ample negative space, premium magazine quality, no color, high contrast."

2. about (aspect 4:3): "Black and white documentary photograph of a contemporary [DISCIPLINE] studio interior, large windows with soft daylight, minimalist desk and tools, editorial reportage style, monochrome only, high contrast."

3. project_1 (aspect 1:1): "Black and white flat-lay of brand identity mockups — business cards, letterheads, printed stationery — on a clean white surface, sharp top-down editorial design photography, monochrome only."

4. project_2 (aspect 1:1): "Black and white minimalist still life relevant to [DISCIPLINE] (eg film clapperboard, scale model, styled product), cinematic studio lighting, sharp shadows, monochrome only."

5. project_3 (aspect 1:1): "Black and white editorial lifestyle photography, minimally styled scene relevant to [DISCIPLINE], premium magazine aesthetic, monochrome only."

6. feature (aspect 16:9): "Wide black and white abstract composition relevant to [DISCIPLINE], dramatic perspective, atmospheric editorial monochrome, no color."

After all six URLs are in hand, label each by slot and proceed to Step 3.

STEP 3 — Build the webpage.

Call generateWebpage with as_artifact: true. Pass a single detailed instruction prompt that contains everything below verbatim — the agent that fulfills generateWebpage must follow it to the letter.

--- BEGIN WEBPAGE PROMPT ---

Build a single long scrollable portfolio website in sleek monochrome editorial style. STRICT visual lock follows — do not deviate.

PALETTE (exclusive — no other hues anywhere):

- White background: #FFFFFF

- Black ink and text: #000000

- One dark section may use near-black: #0A0A0A

- Apply CSS `filter: grayscale(1) contrast(1.02)` on every as a safety net so any imported asset stays strictly monochrome.

TYPOGRAPHY:

- Display: Google Font 'Fraunces' (use weights 300 and 700, opsz 144). Italic variant available for emphasized hero word.

- Body: Google Font 'Inter' (weights 400, 500). 16–18px body, line-height ~1.6.

- Display headlines are huge: clamp(56px, 12vw, 180px). Tracking -0.02em on display.

- Small caps (`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`) for nav, service tags, and footer links.

LAYOUT RHYTHM:

- Section vertical padding: clamp(80px, 12vh, 200px).

- Container max-width: 1280px, side gutters clamp(24px, 6vw, 96px).

- Generous whitespace; do not crowd.

INTERACTION:

- Sticky top nav with subtle background blur on scroll.

- Pill buttons: 1px solid #000, transparent fill, border-radius: 9999px, padding 14px 28px. Hover inverts to bg #000 + color #FFF, 200ms ease.

- Subtle scroll-triggered fade-up + 24px translate-y on each major block (Intersection Observer).

- Service rows: hover slides text and arrow right ~12px, 200ms ease.

RESPONSIVE:

- Below 768px: headlines scale down to ~64–88px, two-column grids collapse to one column, images stay full-bleed within their padding.

SECTIONS (in this exact order):

1. NAV (sticky): studio name top-left in small caps; 'Work with us' pill button top-right.

2. HERO (full white): split display headline across two lines — line 1 in Fraunces italic, line 2 in Fraunces regular — using the user's tagline. Massive type. Optional small monochrome accent image floating at bottom-right (use the hero image small here OR reserve hero for the next section). Subtle scroll cue at the bottom.

3. ABOUT: heading 'About [studio]' in Fraunces 700. 6-column grid: about copy left (cols 1–3), the 4:3 about image right (cols 4–6). Two short paragraphs.

4. SECTION HEADER: 'Our Work' in Fraunces 700, large.

5. CASE STUDY 1: project name (huge Fraunces), service tags row in small caps (separated by middle dot · or by space). Below the name: full-width project image (use project_1, 1:1 cropped to 16:9 framing). Below the image: two-column grid — left column shows oversized number '01' (Fraunces 300, clamp(100px, 18vw, 220px)), label 'Background' in small caps, then ~30-word body. Right column same with '02' and 'Solution'.

6. CASE STUDY 2: same structure as CS1 but use project_2 image. Optionally reverse so image sits on a tinted off-white band — keep colors strictly within the palette.

7. CASE STUDY 3: same structure, use project_3 image.

8. FEATURE BAND: full-bleed wide image (use the 16:9 feature slot). No text overlay.

9. WHAT WE DO: heading 'What we do' in Fraunces 700. Below, a vertical list of the 6 service tags. Each row: 1px hairline divider above (#000), service name on the left in Fraunces ~clamp(36px, 6vw, 80px), '→' arrow on the right. Pointer cursor. Hover slides right.

10. CTA: full-bleed dark section, background #000. Massive Fraunces headline center-aligned in #FFF using the closing CTA tagline. Padding clamp(120px, 20vh, 240px). 'Work with us' pill button below the headline (white border, transparent fill, hover inverts to white bg + black text).

11. FOOTER: white background, small caps grotesk text. Studio name on the left, links on the right ('Terms & Support', 'Privacy Policy'). Hairline top border (#000, 1px). Tiny copyright fine print on a second line.

IMAGES — inject the URLs supplied in the data section below into the matching slots. Apply object-fit: cover and the grayscale safety filter to every . Do not add extra decorative images.

DATA — substitute these into the page:

- studio_name:

- tagline:

- about_copy:

- case_studies: array of three { name, tags[], background, solution } from Step 1

- services: array of six service tag strings from Step 1

- cta_tagline:

- images: { hero, about, project_1, project_2, project_3, feature } from Step 2

- footer_links: ['Terms & Support', 'Privacy Policy']

--- END WEBPAGE PROMPT ---

When calling generateWebpage, pass as_artifact: true. After it returns, give the user a one-line summary in their preferred language and tell them they can ask to swap any image, change copy, or rename projects.