Ads Dna
Extract a website’s visual identity, voice, colors, and imagery style into brand-profile.json before generating paid-ad creative with the Claude Ads workflow.
Overview
Ads DNA is an agent skill for the Launch phase that scans a website URL and outputs brand-profile.json for brand-consistent paid-ad creative.
Install
npx skills add https://github.com/agricidaniel/claude-ads --skill ads-dnaWhat is this skill?
- Scans a site URL and writes brand-profile.json to the working directory for downstream /ads commands
- Captures visual identity, tone of voice, color palette, typography, and imagery style from live pages
- Full `/ads dna <url>` crawl vs `--quick` homepage-only extraction
- Grounded in the ads 10-Principle Thinking Framework (observe and listen before labeling the brand)
- Intended as the mandatory prelude to /ads create, /ads generate, and /ads photoshoot
- Outputs brand-profile.json for /ads create, /ads generate, and /ads photoshoot
- Supports full extraction vs --quick homepage-only mode
Adoption & trust: 753 installs on skills.sh; 5.8k GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want to run paid ads but lack a portable brand spec your agent can follow when generating visuals and copy.
Who is it for?
Solo builders using the Claude Ads stack who have a live marketing site and need a machine-readable brand baseline before creative generation.
Skip if: Teams without a public site to scan, purely organic-only channels with no paid creative pipeline, or brand work that needs legal trademark review beyond website observation.
When should I use this skill?
Triggers on brand DNA, brand profile, extract brand, brand identity, brand colors, brand voice, analyze brand, or brand style guide—run before /ads create or /ads generate.
What do I get? / Deliverables
You get brand-profile.json in the current directory, ready to invoke /ads create or /ads generate with matched colors, voice, and imagery style.
- brand-profile.json
Recommended Skills
Journey fit
Paid-ad creative depends on a consistent brand baseline; this skill sits at the start of the launch distribution workflow before /ads create or generate. Distribution covers paid channels and campaign assets—brand DNA is the observe-and-listen step that keeps creatives on-brand.
How it compares
Use as a structured brand extractor ahead of ad generators—not as a generic web-scraper or MCP analytics integration.
Common Questions / FAQ
Who is ads-dna for?
Solo and indie builders running Claude Ads who need consistent brand voice and visuals across generated paid creative.
When should I use ads-dna?
At Launch when preparing distribution and paid campaigns—before /ads create or /ads generate—and whenever you need brand colors, voice, or style extracted from a URL.
Is ads-dna safe to install?
It fetches user-supplied URLs over the network; review the Security Audits panel on this Prism page and only point it at sites you are authorized to analyze.
SKILL.md
READMESKILL.md - Ads Dna
# 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`. Brand DNA extraction is OBSERVE and LISTEN made concrete (see the **10-Principle Thinking Framework** in `ads/references/thinking-framework.md`). The website is the input; the brand profile is what the site is *saying* about itself when no one is curating the message. Listen to the voice before you label it. Observe the visual choices before you classify them. ## 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: 1. **Homepage** (`<url>`) 2. **About page**: try `<url>/about`, then `<url>/about-us`, then `<url>/our-story` 3. **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 3 screenshots for comprehensive brand anchoring. These serve as visual style references during `/ads generate`; the same approach Pomelli uses to anchor ad images to the actual brand aesthetic. Capture the following: 1. **Homepage hero section** (above the fold): ```bash python ~/.claude/skills/ads/scripts/capture_screenshot.py [url] ``` Saves: `./brand-screenshots/{domain}_homepage.png` 2. **Product or services page**: ```bash python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]/products ``` Saves: `./brand-screenshots/{domain}_product.png` 3. **About page** (brand personality): ```bash python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]/about ``` Saves: `./brand-screenshots/{domain}_about.png` If a page is not found or returns an error, skip it gracefully and continue with the remaining pages. **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