Mike Futia에 의해 생성 | **SCALE AI **.

Claude 및 One Firecrawl API 키를 사용하여 모든 공공 웹 사이트를 증거 백업 시각적 브랜드 시스템 및 연마 프리젠 테이션 대시보드로 전환하십시오.

무엇 그것

웹 사이트 URL과 기술을 Claude에게 제공 :

1. 홈페이지, 모바일 홈페이지 보기 및 Firecrawl를 통해 3개의 유용한 지원 페이지를 캡처합니다.
2. 추출물과 reconcile 색깔, 전기, 성분, 배치, 심상 방향 및 근원 증거.
3. 텍스트 보고서에 멈출 대신 Screen-recording-ready 시각적 대시보드 생성.

모든 실행 생성:

• visual-dashboard.html - 대화형, 반응형 프레젠테이션 대시보드
• VISUAL-BRAND-DNA.md - 읽기 쉬운 시각적 정체 가이드
• brand-manifest.json - 구조화된 브랜드 시스템 데이터
• brand-tokens.css - 재사용 가능한 CSS 사용자 정의 속성
• evidence/ - 캡처 된 브랜드 데이터, 페이지 내용, HTML 및 스크린 샷

요구 사항

-Code 실행 및 파일 생성을 가진 Claude 계정 활성화

• Firecrawl API 키
• 웹 사이트 URL 분석

Gemini 키, Anthropic API 키, ScaleBot 계정, 또는 Firecrawl MCP 설정이 필요하지 않습니다.

Claude에 설치

1. 다운로드 visual-brand-dna.zip
2. 명세.

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