由Mike Futia创作 |SCALE AI。

利用Claude和一个Firecrawl API密钥，将任何公共网站变成一个有证据支持的视觉品牌系统和精致的演示仪表盘。

它的作用

给Claude一个网站网址，技能将：

1. 通过Firecrawl捕获首页、移动首页视图及最多三个有用的辅助页面。
2. 提取并协调颜色、排版、组件、布局、图像方向和来源证据。
3. 制作一个适合屏幕录制的可视化仪表盘，而非仅停留在文本报告。

每次运行都会创造：

• visual-dashboard.html - 交互式、响应式演示仪表盘
• VISUAL-BRAND-DNA.md - 可读的视觉识别指南
• brand-manifest.json - 结构化品牌系统数据
• brand-tokens.css - 可重用的 CSS 自定义属性
• evidence/ - 捕获品牌数据、页面内容、HTML和截图

要求

• 一个支持 代码执行和文件创建的 Claude 账户
• Firecrawl API 密钥
• 用于分析的公共网站URL。

不需要Gemini密钥、Anthropic API密钥、ScaleBot账户或Firecrawl MCP设置。

安装在Claude中

1. 下载 visual-brand-dna.zip。

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