マイク・フチュティアの制作 |SCALE AI

Claudeと1つのFirecrawl APIキーを使用して、パブリックWebサイトをエビデンスバックビジュアルブランドシステムと洗練されたプレゼンテーションダッシュボードに変えます。

それが何をするか

ウェブサイトのURLをクロードすると、スキルが次のようになります。

1. ホームページのキャプチャ、モバイルホームページのビュー、およびFirecrawlによる3つの便利なサポートページまで。
2. 抽出し、色、タイポグラフィ、コンポーネント、レイアウト、画像の方向、およびソースの証拠を調整します。
3. テキストレポートで停止するのではなく、画面録画対応のビジュアルダッシュボードを作成します。

各実行は作成します:

• 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 設定は必要ありません。

クロードにインストール

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