UI Scanner — Website Design System Extraction

Given a website URL, automatically crawl the page and reverse-engineer its visual design system, outputting a structured design specification document.

Use Cases

Suitable for competitive design analysis, UI replication, design system reverse engineering, and style transfer.

Usage

Provide a target website URL; the skill performs crawl → analyze → structured output. Result written to {domain}_design.md.

Workflow

URL input → Page crawl → Visual element classification → Style extraction → Structured output → Write file

Output Format

Output file uses standard YAML frontmatter + Markdown structure:

Design Overview

---
version: alpha
name: {brand name}
description: {1-3 sentence brand visual style description, including base color, core tone, font scheme}
colors:
  primary: "{primary brand color HEX}"
  primary-active: "{primary hover/active HEX}"
  ink: "{darkest text color HEX}"
  body: "{body text color HEX}"
  body-strong: "{emphasis text color HEX}"
  muted: "{secondary text color HEX}"
  muted-soft: "{weakest text color HEX}"
  hairline: "{border color HEX}"
  hairline-soft: "{weak border color HEX}"
  hairline-strong: "{emphasis border color HEX}"
  canvas: "{page background HEX}"
  canvas-soft: "{weak background HEX}"
  surface-card: "{card background HEX}"
  surface-strong: "{emphasis surface HEX}"
  on-primary: "{text color on primary HEX}"
  semantic-error: "{error color HEX}"
  semantic-success: "{success color HEX}"
typography:
  display-mega:
    fontFamily: "{font stack}"
    fontSize: {px}
    fontWeight: {numeric}
    lineHeight: {numeric}
    letterSpacing: {px}
  display-lg: {same}
  display-md: {same}
  body-md: {same}
  body-sm: {same}
  caption: {same}
  code: {same}
  button: {same}
  nav-link: {same}
rounded:
  none: 0px
  sm: {px}
  md: {px}
  lg: {px}
  xl: {px}
  pill: {px}
spacing:
  xs: {px}
  sm: {px}
  base: {px}
  lg: {px}
  xl: {px}
  xxl: {px}
  section: {px}
components:
  top-nav: {common page component style map}
  button-primary: {backgroundColor, textColor, typography, rounded, padding, height}
  button-secondary: {same format}
  hero-band: {same}
  feature-card: {same}
  code-block: {if applicable}
  text-input: {if applicable}
  footer: {same}
---

Analysis Dimensions

1. Design Style Description

After crawling, assess from these dimensions:

• Brand tone: Warm/cool/neutral, pure white/cream/dark base
• Visual language: Skeuomorphic/flat/neumorphic/minimalist/editorial/magazine/tech
• Brand color strategy: Single/dual/multi-color system, restrained vs expansive usage
• Depth rendering: Shadow levels, borders, layering
• Typography tone: Weight strategy (bold brand / 400 magazine), letter spacing (tight/loose)
• Code/technical rendering: Code block style, monospace font strategy
• UI texture: Border radius strategy, edge treatment, card style

Output a 3-5 sentence description in the description field of the frontmatter.

2. Color System

Extract the following color categories:

Extract precise HEX values from CSS (inline/computed/CSS variables/design system).

3. Typography

Extract the following typography levels:

Record: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing.

4. Spacing & Border Radius

5. Component Styles

Extract styles for common visible components:

6. Design Guidelines

Output under the ## Design Guidelines section:

• Do list: Verifiable specification points for the brand design system (color usage boundaries, font strategy, spacing rules, etc.)
• Don't list: Explicit prohibitions (don't introduce a second brand color, don't use pure white background, etc.)
• Responsive breakpoints: If inferable, record breakpoints and layout changes

Extraction Method

1. Use web_fetch to get the page HTML
2. Extract style information from:
   • CSS in \x3Cstyle> tags
   • Inline style attributes
   • CSS variables --var-name
   • Computed style patterns (inferred from class names, Tailwind classes, etc.)
   • @font-face declarations
   • Design system files like manifest.json / design tokens
3. For information not directly accessible from HTML (e.g., hover colors), infer through industry conventions
4. All color values normalized to HEX format

Notes

• If precise values cannot be extracted (e.g., design system rendered by JS), mark as estimated with reasoning
• Font stacks ordered by priority, first entry being the actual brand font
• Only output components visible on the page; do not construct components not present
• Information not accessible through static HTML (e.g., animation timings) should be marked as out of scope