website-brand-analysis

name	website-brand-analysis
description	Analyze a website and generate a comprehensive brand bible (positioning, offers, voice, visual style, layout patterns) PLUS extractable design tokens for page building. Screenshots sent live during analysis. Use when creating brand guidelines, style guides, or preparing context for LLM-powered content/design.

Website Brand Analysis

Generate a comprehensive brand bible from a website, suitable for dropping into LLM context for copy and design work.

Outputs:

1. {brand}-brand-bible.md — Positioning, voice, copy guidelines
2. {brand}-design-system.css — Extractable CSS variables and component styles for /page_designer

Workflow

Phase 1: Live Crawl & Screenshot

IMPORTANT: Send each screenshot to the user via Telegram immediately after capturing it.

This creates a visual, demo-friendly experience where the user sees progress in real-time.

For each page:
1. Navigate to page
2. Take full-page screenshot
3. IMMEDIATELY send to user via message tool with caption (page name)
4. Extract key data (colors, fonts, copy patterns)
5. Move to next page

Pages to analyze (in order):

1. Homepage
2. Main product/service pages (look for nav links)
3. Pricing page (if exists)
4. About page (if exists)
5. Blog/content page (for tone analysis)
6. Any course/offer detail pages
7. Contact/demo page

For each page, extract:

• Screenshot (full page)
• Key copy (headlines, CTAs, value props)
• Visual patterns (colors via computed styles, layout structure)

Phase 2: Checkpoint with User

STOP before writing the report and check in:

"Here's what I've analyzed so far:
• Homepage
• [Product page 1]
• [Product page 2]
• [Pricing]
• [etc.]

Are there any other pages I should check before I generate the brand bible?"

Wait for user response. They may point out:

• Missing product pages
• Specific landing pages
• Case studies or examples
• Other important sections

If user provides additional pages, go back to Phase 1 for those pages.

Phase 3: Extract Design System

Before generating the brand bible, extract actual CSS values from the site.

Run this extraction script on the homepage (or most representative page):

// Extract design tokens via browser evaluate
(() => {
  const styles = {
    colors: {},
    typography: {},
    spacing: {},
    borders: {},
    shadows: {},
    components: {}
  };
  
  // Get CSS custom properties from :root
  const rootStyles = getComputedStyle(document.documentElement);
  const cssVars = {};
  for (const prop of document.styleSheets) {
    try {
      for (const rule of prop.cssRules) {
        if (rule.selectorText === ':root') {
          for (const style of rule.style) {
            if (style.startsWith('--')) {
              cssVars[style] = rule.style.getPropertyValue(style).trim();
            }
          }
        }
      }
    } catch(e) {}
  }
  styles.cssVariables = cssVars;
  
  // Sample key elements
  const h1 = document.querySelector('h1');
  const h2 = document.querySelector();
   p = .();
   btn = .();
   card = .();
   nav = .();
  
   (h1) {
     s = (h1);
    styles.. = {
      : s.,
      : s.,
      : s.,
      : s.,
      : s.,
      : s.
    };
  }
  
   (h2) {
     s = (h2);
    styles.. = {
      : s.,
      : s.,
      : s.,
      : s.,
      : s.
    };
  }
  
   (p) {
     s = (p);
    styles.. = {
      : s.,
      : s.,
      : s.,
      : s.,
      : s.
    };
  }
  
   (btn) {
     s = (btn);
    styles.. = {
      : s.,
      : s.,
      : s.,
      : s.,
      : s.,
      : s.,
      : s.,
      : s.,
      : s.
    };
  }
  
   (card) {
     s = (card);
    styles.. = {
      : s.,
      : s.,
      : s.,
      : s.,
      : s.
    };
  }
  
   (nav) {
     s = (nav);
    styles.. = {
      : s.,
      : s.,
      : s.
    };
  }
  
  
  styles.. = (.).;
  
   .(styles, , );
})()

Save extracted values to reference when generating the design system CSS.

Phase 4: Generate Brand Bible

Only after user confirms all pages are covered, generate the report.

Report structure:

# [Brand] Brand Bible

## Table of Contents
1. Positioning & ICP
2. Offers & Products
3. Voice & Tone
4. Copy Guidelines
5. Visual Style
6. Layout Patterns

## Positioning & ICP
- Who they are (one-line summary)
- Core value proposition
- Target audience (primary + secondary)
- Pain points they address
- Positioning statement
- Competitive differentiation

## Offers & Products
- Product/service table with prices
- Product structure/tiers
- Guarantee/risk reversal (if any)

## Voice & Tone
- Overall voice description
- Tone attributes (with examples)
- Do's and Don'ts
- Headline patterns
- Common phrases/language
- Section labels they use

## Copy Guidelines
- Headline patterns (with examples)
- Subheadline patterns
- Body copy style
- CTA patterns
- Social proof copy patterns
- Feature/benefit copy patterns

## Visual Style
- Color palette (hex, RGB, usage)
- Typography (fonts, weights, sizes)
- Imagery style (photos, graphics, icons)
- Spacing & layout values
- Border radius, shadows
- Component patterns (buttons, cards, etc.)

## Layout Patterns
- Page structure patterns
- Grid system
- Section backgrounds
 Responsive behavior


One-page brand overview for quick reference

Phase 4: Deliver

1. Save markdown to ~/clawd/output/{brand-slug}-brand-bible.md
2. Send file to user via Telegram
3. Offer to expand any section or add screenshots to a zip

Technical Notes

Extracting Colors & Fonts

// Run via browser evaluate
(() => {
  const allElements = document.querySelectorAll('*');
  const colors = new Set();
  const fonts = new Set();
  allElements.forEach(el => {
    const s = getComputedStyle(el);
    if (s.color) colors.add(s.color);
    if (s.backgroundColor) colors.add(s.backgroundColor);
    if (s.fontFamily) fonts.add(s.fontFamily);
  });
  return JSON.stringify({
    colors: [...colors].slice(0, 30),
    fonts: [...fonts].slice(0, 10)
  });
})()

Sending Screenshots Live

message action=send channel=telegram target={user_id} filePath={screenshot_path} caption="{Page Name}"

Always send immediately after capturing — don't batch them.

Finding Pages to Analyze

1. Check navigation menu for main sections
2. Look for footer links (often has full sitemap)
3. Check for /pricing, /about, /contact, /blog standard paths
4. Follow CTAs to see product/offer detail pages

Example Session

User: Analyze https://example.com

[Navigate to homepage]
[Screenshot → send to Telegram: "Homepage"]

[Navigate to /pricing]
[Screenshot → send to Telegram: "Pricing page"]

[Navigate to /product]
[Screenshot → send to Telegram: "Product page"]

[Navigate to /about]
[Screenshot → send to Telegram: "About page"]

Agent: "Here's what I've analyzed:
• Homepage
• Pricing page
• Product page
• About page

Any other pages I should check before generating the brand bible?"

User: "Also check /features and /case-studies"

[Navigate to /features]
[Screenshot → send to Telegram: "Features page"]

[Navigate to /case-studies]
[Screenshot → send to Telegram: "Case Studies page"]

Agent: "Got those too. Ready to generate the report?"

User: "Yes"

[Generate brand bible markdown]
[Send file to user]

Output

1. Brand Bible (Markdown)

~/clawd/output/{brand-slug}-brand-bible.md

• Positioning, offers, voice, copy guidelines
• For content/copy work

2. Design System (CSS)

~/clawd/output/{brand-slug}-design-system.css

• Actual extracted CSS variables
• Component styles
• For /page_designer to use

Design System CSS structure:

/* {Brand} Design System
 * Extracted from {url} on {date}
 * Use with /page_designer skill
 */

/* ========== COLORS ========== */
:root {
  /* Primary */
  --color-primary: {extracted};
  --color-primary-hover: {extracted};
  
  /* Secondary/Accent */
  --color-accent: {extracted};
  --color-accent-hover: {extracted};
  
  /* Neutrals */
  --color-background: {extracted};
  --color-surface: {extracted};
  --color-text: {extracted};
  --color-text-muted: {extracted};
  --color-border: {extracted};
}

/* ========== TYPOGRAPHY ========== */
:root {
  /* Font Families */
  --font-heading: {extracted};
  --font-body: {extracted};
  
  /* Font Sizes */
  --text-xs: {extracted};
  --text-sm: {extracted};
  --text-base: {extracted};
  --text-lg: {extracted};
  --text-xl: {extracted};
  --text-2xl: {extracted};
  --text-3xl: {extracted};
  --text-4xl: {extracted};
  
  /* Font Weights */
  --font-normal: {extracted};
  --font-medium: {extracted};
  --font-semibold: {extracted};
  --font-bold: {extracted};
  
  /* Line Heights */
  --leading-tight: {extracted};
  --leading-normal: {extracted};
  --leading-relaxed: {extracted};
}

/* ========== SPACING ========== */
:root {
  --space-1: 4px;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;
}


 {
  : {extracted};
  : {extracted};
  : {extracted};
  : ;
  
  : {extracted};
  : {extracted};
  : {extracted};
}




 {
  : (--font-body);
  : {extracted};
  : {extracted};
  : {extracted};
  : {extracted};
  : (--color-primary);
  : {extracted};
  : {extracted};
  : {extracted};
  : all ;
}

 {
  : (--color-primary-hover);
}


 {
  : {extracted};
  : {extracted};
  : (--color-surface);
  : {extracted};
  : {extracted};
}


 {
  : {extracted};
  : {extracted};
  : {extracted};
}


,  {
  : (--font-heading);
  : (--text-xl);
  : (--font-bold);
  : (--leading-tight);
  : (--color-text);
}

,  {
  : (--font-heading);
  : (--text-xl);
  : (--font-bold);
  : (--leading-tight);
}

,  {
  : (--font-heading);
  : (--text-xl);
  : (--font-semibold);
}

,  {
  : (--font-body);
  : (--text-base);
  : (--leading-relaxed);
  : (--color-text-muted);
}


 {
  : {extracted or };
  :  auto;
  :  (--space-);
}


 {
  : (--space-) ;
}

3. Screenshots

Sent live during analysis via Telegram

Integration with /page_designer

When /page_designer is invoked, it should:

1. Check if {brand}-design-system.css exists
2. If yes, import those variables and match the styles
3. If no, prompt user to run /website_brand_analysis first

/page_designer requires:
- {brand}-design-system.css (from /website_brand_analysis)
- Page brief (sections, copy, CTAs)
- frontend-design skill (for quality execution)