---
name: website-research-banner-studio
description: Research any website with browser automation, capture screenshots and brand evidence, create a concise banner design plan, then generate five LinkedIn banner directions using the imagegen skill and bundled banner references. Use when a user provides a website URL and wants researched LinkedIn/profile/banner creative, brand visual analysis, or multiple banner concepts.
metadata:
  short-description: Research websites and generate five banner concepts
  version: 1.0.0
  requires:
    skills:
      - browser-use:browser
      - imagegen
---

# Website Research Banner Studio

Use this skill to turn a website URL into five researched LinkedIn banner concepts. The workflow is Codex-native: use browser automation for research/screenshots and the `imagegen` skill for image creation. Do not use OpenRouter scripts or external image API keys.

## Required Inputs

If missing, ask briefly for:
- Website URL
- Banner subject: company brand, founder/person, or product
- Primary banner message or tagline, if the user has one
- Output preference: concepts only, generated images, or both

If the user only gives a URL, proceed with reasonable assumptions from the website and state them in the research notes.

## Workflow

1. Create a project folder in the current workspace or user-requested destination.
   - Recommended structure: `research/`, `screenshots/`, `assets/`, `outputs/`, `prompts/`.
   - Optional helper: run `scripts/init_banner_project.py PROJECT_NAME`.

2. Use the browser automation skill to research the website.
   - Read `<Codex Browser Use plugin skill instructions>` if you need browser-use details.
   - Open the homepage and take a full-page screenshot.
   - Inspect navigation and visit likely pages: `About`, `Services`, `Products`, `Team`, `Customers`, `Case Studies`, `Pricing`, `Blog`, `Press`, and `Contact` when present.
   - Capture screenshots for pages with strong brand evidence, founder/team photos, product imagery, statistics, logos, or visual language.
   - Save screenshot paths and page URLs in the research document.

3. Extract brand evidence.
   - Brand positioning, audience, offers, key claims, CTAs, proof points, testimonials, partner/customer logos.
   - Visual system: colors, typography, logo style, imagery style, layout rhythm, texture, iconography, motion if visible.
   - Download useful assets only when clearly permitted by normal browser access: logo, founder photo, product screenshot, partner logos.

4. Create a research brief.
   - Use `references/research-brief-template.md`.
   - Keep it evidence-based. Separate observed facts from inferred recommendations.
   - Include screenshot filenames and source URLs.

5. Create a banner plan.
   - Read `references/banner-style-playbook.md`.
   - Map the brand to five distinct banner directions.
   - Use the bundled visual references in `assets/banner-references/` as style guidance only.
   - Respect LinkedIn profile banner safe composition: generate wide banners, keep all meaningful content in the middle 30% vertical band, leave top 35% and bottom 35% as clean background.

6. Generate five banners with `imagegen`.
   - Use the `imagegen` skill instructions at `<Codex imagegen skill instructions>`.
   - Pass the website screenshots, downloaded assets, and one matching reference banner per concept when useful.
   - Generate five different concepts, not minor variants of one layout.
   - Save outputs under `outputs/banner-01-*` through `outputs/banner-05-*`.

7. Review the generated banners.
   - Verify readable text, correct brand name, no fake unsupported claims, no broken logos, no unwanted watermarks, and content confined to the center band.
   - If text fidelity is poor, regenerate with less text and stronger layout constraints.
   - Provide the final folder path and a short summary of the five directions.

## Reference Files

- `references/research-brief-template.md`: structure for website research notes.
- `references/banner-style-playbook.md`: five banner directions and prompt requirements.
- `references/imagegen-handoff.md`: how to translate research into imagegen prompts.
- `assets/banner-references/`: copied reference images from the original banner generator.

## Output Quality Rules

- Do not invent customer logos, press mentions, metrics, or credentials.
- Prefer short banner copy. LinkedIn banners are too thin for paragraphs.
- Keep screenshots and research notes with the project so design choices are traceable.
- Use browser automation for website research; do not rely only on generic web search snippets.
- Use imagegen directly; do not reintroduce OpenRouter or the old `gen-banner.py` pipeline.
