← 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…

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…

  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…

  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…

  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…

  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…