← All runbooks
gooseworks-ai / capabilities-visual-brand-extractor

Visual Brand Extractor

Extract a client's visual identity from their website and convert the findings into reusable brand artifacts. The runbook uses web page content, CSS, metadata, and visible design patterns to identify color roles, font pairings, layout conventions, and the overall visual direction

agent codexmodel gpt-5.5snapshot python312-uveval programmatic8 stepsv1.0.0

Deploy Visual Brand Extractor to your jetty.io

One-click installs this runbook into a collection on your Jetty account. You can run it from the Spot dashboard, schedule it, or pipe inputs in via the API.

Deploy on jetty.io →View source
The shape of the run

8 steps · start to finish.

  1. 1
    Step 1

    Environment Setup

    ▶
    1. Create the results directory and confirm the required inputs are present.
    2. Normalize the client name into a filesystem-safe slug for internal references.
    3. Initialize a validation log with setup status and resolved parameters.
    mkdir -p /app/results
python - <<'PY'
import json, pathlib
required = ["WEBSITE_URL", "CLIENT_NAME"]
missing = [name for name in required if not globals().get(name)]
pathlib.Path("/app/results/setup_check.json").write_text(json.dumps({"missing": missing}, indent=2))
PY

    If a required input is missing, stop after writing /app/results/validation_report.json with overall_passed=false.

  2. 2
    Step 2

    Fetch Target Pages

    ▶

    Fetch the client's homepage first, then inspect up to `max_pages` additional pages that best expose product UI, pricing, docs, case studies, or marketing layouts. Prefer canonical public pages and same-origin CSS. Record each fetched URL, HTTP status, content type, and whether th

  3. 3
    Step 3

    Extract Color Palette

    ▶

    Inspect CSS custom properties, meta theme colors, explicit CSS color declarations, utility classes, inline styles, and visible page screenshots or rendered styles when available. Group colors into roles:

  4. 4
    Step 4

    Extract Typography

    ▶

    Identify font sources from CSS imports, `@font-face`, Google Fonts links, CSS variables, and computed font-family declarations. Separate display and body typography when the evidence supports it. When proprietary fonts appear, choose practical fallbacks and explain the substituti

  5. 5
    Step 5

    Analyze Visual Patterns

    ▶

    Summarize layout density, corner radius, border usage, shadow treatment, image style, icon style, animation tendencies, CTA shape, and spacing rhythm. Synthesize the brand vibe in concrete design language that can guide slide and asset generation without relying on vague adjectiv

  6. 6
    Step 6

    Generate Brand Artifacts

    ▶

    Write the required artifacts:

  7. 7
    Step 7

    Validate Artifacts

    ▶

    Run structural checks before finishing:

  8. 8
    Step 8

    Iterate on Errors (max 3 rounds)

    ▶

    If validation fails, perform a targeted correction and re-run Step 7. Limit the repair loop to max 3 rounds. If JSON is invalid, fix only the malformed artifact. If a file is missing, regenerate only that file from the existing extraction notes. If the confidence is low because s