| name | brand-dna |
| description | Extract brand identity from a website URL — voice, colors, typography, imagery, values, and target audience — into a structured brand-profile.json. The profile feeds downstream skills (seo-content-writer, email-composer, frontend-design, pro-deck-builder, cross-platform-audit) for brand-consistent output. Use when the user says brand DNA, brand profile, extract brand, analyze brand, brand voice, brand identity, brand colors, or brand style guide. |
| license | MIT |
| origin | custom |
| author | Rebecca Rae Barton |
| author_url | https://github.com/thatrebeccarae |
| metadata | {"version":"1.0.0","category":"strategy","domain":"brand-identity","updated":"2026-03-16T00:00:00.000Z","tested":"2026-03-17T00:00:00.000Z","tested_with":"Claude Code v2.1"} |
Brand DNA — Brand Identity Extractor
Extracts brand identity from a website and produces a structured brand-profile.json that other skills can consume for brand-consistent output.
Install
git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/brand-dna ~/.claude/skills/
Quick Reference
| Command | What It Does |
|---|
| "Extract brand DNA from https://example.com" | Full extraction → brand-profile.json |
| "Quick brand profile for https://example.com" | Homepage-only extraction (faster, lower confidence) |
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:
- Homepage (
<url>)
- About page — try
<url>/about, then /about-us, then /our-story
- 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:
| Signal | Axis | Direction |
|---|
| Uses "you/your" frequently | formal_casual | +2 toward casual |
| Technical jargon, industry terms | expert_accessible | -2 toward expert |
| Short punchy sentences (≤8 words) | bold_subtle | +2 toward bold |
| Data, stats, percentages in hero | rational_emotional | -2 toward rational |
| "Transform", "revolutionize", "disrupt" | traditional_innovative | +2 toward innovative |
| Customer testimonials lead | rational_emotional | +2 toward emotional |
| "Trusted by X companies", awards | traditional_innovative | -1 toward traditional |
| Humor, wordplay, casual phrasing | playful_serious | +2 toward playful |
| Formal language, third person | playful_serious | -2 toward serious |
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:
