Brand Dna

Zero Dependencies

This skill uses only the WebFetch tool — no Python scripts, no Playwright, no external APIs. It works anywhere Claude Code runs.

Extraction Process

Step 1: Collect URL

If the user hasn't provided a URL, ask:

"What website URL should I analyze? (e.g., https://yoursite.com)"

Step 2: Fetch Pages

Use the WebFetch tool to retrieve page content. For each URL, request:

• All visible text content
• Full contents of <style> blocks
• Inline style= attributes
• <meta> tags (especially og:image, description)
• Google Fonts @import URLs
• Any <link> tags referencing external stylesheets

Fetch order:

1. Homepage (<url>)
2. About page — try <url>/about, then /about-us, then /our-story
3. Product/Services page — try <url>/products, then /product, then /services

Quick mode: If the user requests a quick extraction, fetch homepage only — skip pages 2 and 3.

If a secondary page returns 404 or redirects to homepage, continue with fewer pages and note reduced confidence.

Step 3: Extract Brand Elements

Colors

• Primary color: Most prominent brand color from CSS background-color on .hero, .btn-primary, header, or og:image dominant color
• Secondary colors: Supporting palette from CTAs, accents, borders
• Background/text: body background-color and color
• Forbidden: Infer from brand positioning (e.g., competitor colors if identifiable)
• Dark mode detection: If body background is #333 or darker, swap background/text values

CSS targets: background-color, color, border-color on body, header, .hero, .btn, .cta, h1, h2

Typography

• Google Fonts: Extract from @import url(https://fonts.googleapis.com/css2?family=...) — parse font name from URL
• CSS font-family: Check h1, h2, body, .headline declarations
• Fallback: If no Google Fonts detected, set heading_font to null and body_font to "system-ui"

Voice (1-10 scale per axis)

Analyze hero headline, subheadline, about page intro, and CTA button text:

Start each axis at 5 (neutral) and adjust based on signals found.

Descriptors: Choose 3-5 adjectives that capture the overall voice tone. These should complement the numerical scores, not repeat them.

Imagery

• Style: Professional photography, illustration, flat design, 3D renders, or mixed
• Subjects: What appears in hero images and product shots (people, products, abstract, data)
• Composition: Clean/minimal, busy/editorial, dark/dramatic, light/airy
• Forbidden elements: Infer from industry (healthcare → no unqualified medical claims imagery; B2B → no cheesy stock photos)

Aesthetic

• Mood keywords: 3 adjectives describing the visual mood (e.g., "trustworthy", "modern", "premium")
• Texture: minimal, textured, or mixed
• Negative space: generous, moderate, or dense

Brand Values

Extract from about page, mission statement, or footer. Look for repeated themes. Choose 3-5 core values.

Target Audience

Infer from copy, pricing signals, and positioning:

• Age range: Estimate from visual design, language complexity, and product type
• Profession: Who the product/service is for
• Pain points: What problems the brand addresses (from hero copy and feature descriptions)
• Aspirations: What the audience wants to achieve (from benefit-oriented copy)

Step 4: Build brand-profile.json

Construct the JSON following the schema in REFERENCE.md precisely. Use null for any field that cannot be confidently extracted — never guess.

Step 5: Write and Confirm

Write brand-profile.json to the current working directory.

Display a summary:

Brand DNA extracted → brand-profile.json

  Brand: [brand_name]
  Voice: [descriptor 1], [descriptor 2], [descriptor 3]
  Primary Color: [hex]
  Typography: [heading_font] / [body_font]
  Audience: [age_range], [profession]

This profile can be consumed by:
  - seo-content-writer (voice matching)
  - email-composer (tone calibration)
  - frontend-design (visual identity)
  - pro-deck-builder (brand colors/fonts)
  - cross-platform-audit (brand consistency checks)

Limitations

• Sparse sites: <200 words of body text produce lower-confidence profiles. Note this in output.
• SPA/React sites: JavaScript-rendered content may not be fully captured by WebFetch. Note this if detected.
• Multi-brand enterprises: Creates one profile per URL. Run separately for each brand.
• CSS-in-JS: Modern React/Next.js sites may not have extractable CSS. Use og:image analysis as fallback.

How to Use This Skill

Ask questions like:

• "Extract the brand DNA from https://example.com"
• "Build a brand profile for my client's website"
• "Analyze the brand voice and colors of https://competitor.com"
• "Quick brand profile — homepage only — for https://example.com"
• "What's the brand identity of this website?"