| name | ads-dna |
| description | Brand DNA extractor for paid advertising. Scans a website URL to extract visual identity, tone of voice, color palette, typography, and imagery style. Outputs brand-profile.json to the current directory. Run before /ads create or /ads generate for brand-consistent creative. Triggers on: "brand DNA", "brand profile", "extract brand", "brand identity", "brand colors", "what is the brand voice", "analyze brand", "brand style guide".
|
Ads DNA — Brand DNA Extractor
Extracts brand identity from a website and saves it as brand-profile.json
for use by /ads create, /ads generate, and /ads photoshoot.
Quick Reference
| Command | What it does |
|---|
/ads dna <url> | Full brand extraction → brand-profile.json |
/ads dna https://acme.com --quick | Fast extraction (homepage only) |
Process
Step 1: Collect URL
If the user hasn't provided a URL, ask:
"What website URL should I analyze for brand DNA? (e.g. https://yoursite.com)"
Step 2: Fetch Pages
Use the WebFetch tool to retrieve each page. For each URL, use this fetch prompt:
"Return all visible text content, the full contents of any <style> blocks, inline
style= attributes, <meta> tags, Google Fonts @import URLs, and any og:image
values found on this page."
Fetch in this order:
- Homepage (
<url>)
- About page — try
<url>/about, then <url>/about-us, then <url>/our-story
- Product/Services page — try
<url>/product, then <url>/products, then <url>/services
If --quick flag was provided: fetch the homepage only — skip steps 2 and 3.
If a secondary page returns a 404 or redirect error, continue with fewer pages and note:
"Secondary pages unavailable — extraction based on homepage only. Confidence may be lower."
Step 2b: Capture Brand Screenshots
After fetching pages, capture desktop screenshots of the website. These serve as
visual style references during /ads generate — the same approach Pomelli uses
to anchor ad images to the actual brand aesthetic.
Run for the homepage:
python ~/.Codex/skills/ads/scripts/capture_screenshot.py [url]
This saves ./brand-screenshots/[domain]_desktop.png (default naming from the script).
Also attempt one secondary page (pricing or product page, whichever was accessible):
python ~/.Codex/skills/ads/scripts/capture_screenshot.py [url]/pricing
If --quick flag was provided: skip screenshot capture entirely.
If capture fails (Playwright not installed, network error, JS-heavy SPA that times out):
- Log:
"Screenshot capture skipped — run: python3 -m playwright install chromium"
- Continue without screenshots
- Do NOT set the
screenshots field in brand-profile.json
Step 3: Extract Brand Elements
From the fetched HTML, extract:
Colors:
og:image meta tag → analyze dominant colors (note 2-3 prominent hex values)- CSS
background-color on body, header, .hero, .btn-primary
- CSS
color on h1, h2, .btn
- CSS
border-color or background on .cta, .button
- Identify: primary (most prominent brand color), secondary (supporting colors), background, text
Typography:
@import url(https://fonts.googleapis.com/...) → extract font names from URL path- CSS
font-family on h1, h2, body, .headline
- If Google Fonts URL contains
family=Inter:wght@..., heading_font = "Inter"
Voice:
Analyze hero headline, subheadline, About page intro, and CTA button text.
Score each axis 1-10 using these heuristics:
| Signal | Score direction |
|---|
| Uses "you/your" frequently | formal_casual → casual (+2) |
| Uses technical jargon | expert_accessible → expert (-2) |
| Short punchy sentences (≤8 words) | bold_subtle → bold (+2) |
| Data/stats in hero | rational_emotional → rational (-2) |
| "Transform", "revolutionize", "disrupt" | traditional_innovative → innovative (+2) |
| Customer testimonials lead | rational_emotional → emotional (+2) |
| Industry awards, "trusted by X" | traditional_innovative → traditional (-1) |
Imagery style (from og:image and any visible hero image descriptions):
- Photography vs. illustration vs. flat design
- Subject matter (people, product, abstract, data)
- Composition style (clean/minimal vs. busy/editorial)
Forbidden elements (infer from brand positioning):
- Enterprise/B2B brands → add "cheesy stock photos", "consumer lifestyle imagery"
- Healthcare → add "unqualified medical claims", "before/after imagery"
- Finance → add "get rich quick imagery", "unrealistic wealth displays"
- Consumer brands → usually no forbidden elements
Step 4: Build brand-profile.json
Read ~/.Codex/skills/ads/references/brand-dna-template.md for the exact schema.
Construct the JSON object following the schema precisely. Use null for any
field that cannot be confidently extracted — do not guess.
Example of a low-confidence field:
"typography": {
"heading_font": null,
"body_font": "system-ui",
"pairing_descriptor": "system default (Google Fonts not detected)"
}
Step 5: Write brand-profile.json
Write the JSON to ./brand-profile.json in the current working directory
(where the user is running Codex).
If screenshots were captured successfully in Step 2b, include a screenshots field:
"screenshots": {
"homepage": "./brand-screenshots/[domain]_desktop.png",
"secondary": ["./brand-screenshots/[domain]_pricing_desktop.png"]
}
Omit the screenshots field entirely if Step 2b was skipped or failed.
Step 6: Confirm and Summarize
Show the user:
✓ brand-profile.json saved to ./brand-profile.json
Brand DNA Summary:
Brand: [brand_name]
Voice: [descriptor 1], [descriptor 2], [descriptor 3]
Primary Color: [hex]
Typography: [heading_font] / [body_font]
Target: [age_range] [profession]
Screenshots: [N captured → ./brand-screenshots/] OR [skipped]
Run `/ads create` to generate campaign concepts from this profile.
Limitations
- Sparse content: Sites with <200 words of body text produce lower-confidence profiles.
Note: "Low confidence extraction — limited content available for analysis."
- Dynamic sites: JavaScript-rendered content may not be captured. Playwright is not
used by default. If the site appears to be SPA/React with no static HTML, note this.
- Multi-brand enterprises: This tool creates one profile per URL. Run separately
for each brand/product line.
- Dark mode sites: If body background is #333 or darker, swap background/text values.
- CSS-in-JS: Modern React sites may not have extractable CSS. Use og:image colors as fallback.
brand-profile.json Schema
{
"schema_version": "1.0",
"brand_name": "string",
"website_url": "string",
"extracted_at": "ISO-8601",
"voice": {
"formal_casual": 1-10,
"rational_emotional": 1-10,
"playful_serious": 1-10,
"bold_subtle": 1-10,
"traditional_innovative": 1-10,
"expert_accessible": 1-10,
"descriptors": ["adjective1", "adjective2", "adjective3"]
