Brand Studio: Visual Brand DNA for Claude

Created by Mike Futia | SCALE AI.

Turn any public website into an evidence-backed visual brand system and a polished presentation dashboard using Claude and one Firecrawl API key.

What it does

Give Claude a website URL and the skill will:

1. Capture the homepage, a mobile homepage view, and up to three useful supporting pages through Firecrawl.
2. Extract and reconcile colors, typography, components, layouts, imagery direction, and source evidence.
3. Produce a screen-recording-ready visual dashboard instead of stopping at a text report.

Every run creates:

• visual-dashboard.html - interactive, responsive presentation dashboard
• VISUAL-BRAND-DNA.md - readable visual identity guide
• brand-manifest.json - structured brand system data
• brand-tokens.css - reusable CSS custom properties
• evidence/ - captured branding data, page content, HTML, and screenshots

Requirements

• A Claude account with Code execution and file creation enabled
• A Firecrawl API key
• A public website URL to analyze

No Gemini key, Anthropic API key, ScaleBot account, or Firecrawl MCP setup is required.

Install in Claude

1. Download visual-brand-dna.zip.
2. In Claude, open Customize > Skills.
3. Click Add or Create skill, then choose Upload a skill.
4. Upload visual-brand-dna.zip and enable the skill.
5. Start a new conversation and use the prompt below.

Recommended demo prompt

Build a complete Visual Brand DNA dashboard for https://getwinks.com/. Use the Visual Brand DNA skill, ask me for my Firecrawl API key if needed, and present visual-dashboard.html as the primary deliverable when finished.

Claude will ask for your Firecrawl key if it cannot find FIRECRAWL_API_KEY. The key is used for Firecrawl requests and is never written to the generated brand package.

Install in Claude Code

git clone https://github.com/mikefutia/brand-studio-claude-skill.git
mkdir -p ~/.claude/skills
cp -R brand-studio-claude-skill/skills/visual-brand-dna ~/.claude/skills/

Set your Firecrawl key before starting Claude Code:

export FIRECRAWL_API_KEY="your-firecrawl-key"
claude

Then ask:

Build a complete Visual Brand DNA dashboard for https://example.com/.

How the dashboard works

The included renderer turns the structured brand manifest into a portable visual-dashboard.html with:

• Brand-adaptive colors and presentation styling
• Overview metrics
• Large copyable color swatches
• Typography specimen cards
• Component previews
• Layout and imagery direction
• Desktop and mobile source-page captures
• Confidence labels, evidence, and caveats