Back to portfolio

Brand Scout

URL or Screenshot to Brand Guide

Uploads a website URL or screenshot to Gemini Vision AI and extracts a structured brand guide — colors, typography, visual style — for instant use in design or competitor analysis.

01The Problem

Creating a brand guide requires manually inspecting a website or screenshot, identifying font families, extracting color codes, and documenting the visual hierarchy. It's time-consuming and the result is inconsistently formatted. Designers and marketers need brand guides for competitor analysis, pitch decks, or client onboarding — and doing it manually is friction for a task that AI can automate in seconds.

02What the AI Does

Takes a URL (scraped) or uploaded screenshot as input. Sends it to Google Gemini Vision AI for multi-dimensional analysis. Extracts: primary and accent colors with hex codes, font families/weights/hierarchy, visual style and imagery mood, brand personality summary. Exports the result as a PDF or Markdown file ready for use. Built on: Node.js + Vite (frontend), Google Gemini Vision AI (analysis), URL scraping or direct image upload.

03Design Decisions

01 · Choice

URL scraping + direct image upload as parallel input methods

Why

Some brand references are behind login walls or don't have a shareable URL — screenshots cover those cases. URL scraping covers public sites. Both paths produce the same structured output, so the user choice of input method doesn't affect the downstream workflow.

Constraint

URL scraping quality depends on the site's structure. Single-page apps, sites with heavy JavaScript rendering, and sites that block scraping may produce poor results.

02 · Choice

Gemini Vision AI as the analysis engine

Why

At the time, Gemini's vision capabilities were the most capable for this task at reasonable cost. The multimodal nature (image + text analysis in one call) made it a natural fit. **[Creator: add rationale]** for why Gemini was chosen over alternatives (GPT-4V, Claude, etc.) and what specific prompting produces the structured brand guide output.

03 · Choice

Markdown export as default, PDF as secondary

Why

Markdown is instantly usable in any documentation context — Notion, GitHub, Obsidian. PDF is for presentations and client deliverables. Prioritizing Markdown reflects a technical user bias in the product.

Constraint

Markdown export loses color swatches (can't render visual color chips in pure text). The PDF export is the visually faithful format.

04Tradeoffs & Limits

- **Font identification is approximate.** Vision models identify font families by visual similarity, not from metadata. Serif vs. sans-serif is reliable; specific font names (e.g., "Inter" vs. "DM Sans") are hit-or-miss. - **Color extraction on complex images produces noise.** Screenshots with photography, gradients, or UI chrome generate color palettes that include photochopped tones rather than brand colors. Clean brand sites work well; complex pages degrade. - **The brand guide is descriptive, not prescriptive.** It describes what exists, not what should change. It's useful for replication and analysis but not for brand redesign guidance. - **No historical version tracking.** If a brand updates its website, the previous brand guide isn't preserved unless the user manually saves it.

05Key Insight

Brand guide extraction is a task where the AI's value isn't in being better than a human designer — it's in being instant and consistent. A human can do it more accurately; an AI does it in 10 seconds without the tedium. The product wins on speed and scale, not quality.