Get Web Design

/**
 * collect_design_data.js
 *
 * 注入到目标页面运行（通过 chrome-devtools 的 evaluate_script）。
 * 返回 { meta, domSnapshot, engineeredCssEvidence } JSON-serializable 对象。
 *
 * 使用方式（在 chrome-devtools MCP 中）：
 *   将此文件内容包装成 IIFE，作为 function 字符串传入 evaluate_script:
 *     `() => { ...本文件全部内容... ; return collectDesignData({ includeCss: true }); }`
 *   也可使用 generate_design_md.py 中的 build_evaluate_script() 自动包装。
 *
 * 注意：此脚本不依赖任何外部库，全部使用浏览器原生 API。
 */

function collectDesignData({ includeCss = true } = {}) {
  const result = {
    meta: collectPageMeta(),
    domSnapshot: collectDomSnapshot(),
  };
  if (includeCss) {
    result.engineeredCssEvidence = collectCssEvidence();
  }
  return result;
}

function collectPageMeta() {
  const metaByName = (name) => document.querySelector(`meta[name="${name}"]`)?.content || '';
  const metaByProperty = (property) => document.querySelector(`meta[property="${property}"]`)?.content || '';
  return {
    title: document.title,
    hostname: window.location.hostname,
    description: metaByName('description'),
    keywords: metaByName('keywords'),
    ogType: metaByProperty('og:type'),
    ogSiteName: metaByProperty('og:site_name'),
    applicationName: metaByName('application-name'),
    url: window.location.href,
  };
}

function collectDomSnapshot() {
  const textOf = (el, limit = 120) =>
    (el?.textContent || '').replace(/\s+/g, ' ').trim().slice(0, limit);
  const allText = textOf(document.body, 14000);
  const ctaSelector = [
    'button',
    'a[role="button"]',
    'a[href]',
    '[class*="btn" i]',
    '[class*="button" i]',
    '[data-testid*="button" i]',
  ].join(',');
  const distinctiveSelector = [
    'header',
    'nav',
    'main > section',
    'section',
    'article',
    'form',
    'table',
    '[role="banner"]',
    '[role="navigation"]',
    '[role="main"]',
    '[role="region"]',
    '[class*="hero" i]',
    '[class*="feature" i]',
    '[class*="pricing" i]',
    '[class*="plan" i]',
    '[class*="card" i]',
    '[class*="panel" i]',
    '[class*="grid" i]',
    '[class*="gallery" i]',
    '[class*="testimonial" i]',
    '[class*="metric" i]',
    '[class*="stats" i]',
    '[class*="badge" i]',
    '[class*="marquee" i]',
  ].join(',');

  const headings = Array.from(document.querySelectorAll('h1,h2,h3,h4,h5,h6'))
    .filter(isVisibleForEvidence)
    .slice(0, 24)
    .map((el) => ({ level: el.tagName.toLowerCase(), text: textOf(el, 140) }))
    .filter((item) => item.text);

  const navigation = Array.from(
    document.querySelectorAll('nav a, header a, [role="navigation"] a')
  )
    .filter(isVisibleForEvidence)
    .slice(0, 32)
    .map((el) => textOf(el, 60))
    .filter(Boolean);

  const ctas = Array.from(document.querySelectorAll(ctaSelector))
    .filter(isVisibleForEvidence)
    .slice(0, 36)
    .map((el) => ({
      tag: el.tagName.toLowerCase(),
      text: textOf(el, 80),
      href: el.getAttribute('href') || '',
      ariaLabel: el.getAttribute('aria-label') || '',
    }))
    .filter((item) => item.text || item.ariaLabel);

  const landmarks = Array.from(
    document.querySelectorAll('header,nav,main,section,article,aside,footer,[role]')
  )
    .filter(isVisibleForEvidence)
    .slice(0, 40)
    .map((el) => ({
      tag: el.tagName.toLowerCase(),
      role: el.getAttribute('role') || '',
      id: el.id || '',
      className: stringifyClassName(el.className).split(/\s+/).slice(0, 6).join(' '),
      text: textOf(el, 180),
    }));

  const distinctiveCandidates = collectDistinctiveCandidates(distinctiveSelector, textOf);

  return {
    headings,
    navigation,
    ctas,
    landmarks,
    distinctiveCandidates,
    bodyTextSample: allText,
    counts: {
      forms: document.querySelectorAll('form').length,
      inputs: document.querySelectorAll('input,textarea,select').length,
      tables: document.querySelectorAll('table').length,
      codeBlocks: document.querySelectorAll('pre,code').length,
      articleContainers: document.querySelectorAll(
        'article,[class*="article" i],[class*="post" i],[class*="blog" i]'
      ).length,
      pricingSections: document.querySelectorAll(
        '[class*="pricing" i],[id*="pricing" i],[class*="plans" i],[id*="plans" i]'
      ).length,
    },
  };
}

function collectDistinctiveCandidates(selector, textOf) {
  const seen = new Set();
  const viewportHeight = Math.max(window.innerHeight || 0, 1);

  return Array.from(document.querySelectorAll(selector))
    .filter((el) => {
      if (!isVisibleForEvidence(el) || seen.has(el)) return false;
      seen.add(el);
      const rect = el.getBoundingClientRect();
      const text = textOf(el, 220);
      const marker = `${stringifyClassName(el.className)} ${el.id || ''}`.toLowerCase();
      const hasDesignMarker = /(hero|feature|pricing|plan|card|panel|grid|gallery|testimonial|metric|stats|badge|marquee|cta|banner)/i.test(marker);
      const isLargeSection = rect.width >= 240 && rect.height >= 120;
      return hasDesignMarker || (isLargeSection && text.length > 20);
    })
    .map((el) => summarizeDistinctiveElement(el, textOf, viewportHeight))
    .sort((a, b) => b.score - a.score || a.position.top - b.position.top)
    .slice(0, 12)
    .map(({ score, ...item }) => item);
}

function summarizeDistinctiveElement(el, textOf, viewportHeight) {
  const rect = el.getBoundingClientRect();
  const className = stringifyClassName(el.className);
  const childTags = Array.from(el.children)
    .slice(0, 8)
    .map((child) => child.tagName.toLowerCase());
  const mediaCount = el.querySelectorAll('img,video,canvas,svg,picture').length;
  const buttonCount = el.querySelectorAll('button,a[role="button"],[class*="btn" i],[class*="button" i]').length;
  const heading = textOf(el.querySelector('h1,h2,h3,h4,h5,h6'), 120);
  const kind = inferDistinctiveKind(el);
  const area = Math.round(rect.width * rect.height);
  const foldBoost = rect.top < viewportHeight * 1.2 ? 2 : 0;
  const markerBoost = kind === 'section' || kind === 'content' ? 0 : 3;

  return {
    kind,
    selectorHint: buildSelectorHint(el),
    tag: el.tagName.toLowerCase(),
    role: el.getAttribute('role') || '',
    id: el.id || '',
    className: className.split(/\s+/).slice(0, 8).join(' '),
    heading,
    text: textOf(el, 260),
    position: {
      top: Math.round(rect.top),
      left: Math.round(rect.left),
      width: Math.round(rect.width),
      height: Math.round(rect.height),
    },
    structure: {
      childTags,
      mediaCount,
      buttonCount,
    },
    score: area + mediaCount * 24000 + buttonCount * 12000 + markerBoost * 10000 + foldBoost * 10000,
  };
}

function inferDistinctiveKind(el) {
  const tag = el.tagName.toLowerCase();
  const role = (el.getAttribute('role') || '').toLowerCase();
  const marker = `${stringifyClassName(el.className)} ${el.id || ''}`.toLowerCase();

  if (tag === 'header' || role === 'banner' || marker.includes('hero')) return 'hero/header';
  if (tag === 'nav' || role === 'navigation' || marker.includes('nav')) return 'navigation';
  if (tag === 'form') return 'form';
  if (tag === 'table') return 'table/data';
  if (marker.includes('pricing') || marker.includes('plan')) return 'pricing';
  if (marker.includes('feature')) return 'feature';
  if (marker.includes('testimonial')) return 'testimonial';
  if (marker.includes('metric') || marker.includes('stats')) return 'metrics';
  if (marker.includes('gallery')) return 'gallery/media';
  if (marker.includes('marquee')) return 'marquee';
  if (marker.includes('card')) return 'card';
  if (marker.includes('panel')) return 'panel';
  if (marker.includes('grid')) return 'grid';
  if (marker.includes('badge')) return 'badge';
  if (tag === 'section' || role === 'region') return 'section';
  return 'content';
}

const CSS_EVIDENCE_LIMIT = 280;

function collectCssEvidence() {
  const diagnostics = [];
  try {
    const totalElements = document.querySelectorAll('*').length;
    const sampled = collectSampledElements(CSS_EVIDENCE_LIMIT);
    const rows = collectComputedStyleRows(sampled);

    if (sampled.length < 30) {
      diagnostics.push('Low sample size: fewer than 30 visible elements were extracted.');
    }
    if (!document.fonts) {
      diagnostics.push('document.fonts is unavailable in this browser context.');
    }

    return {
      source: {
        url: window.location.href,
        title: document.title,
        hostname: window.location.hostname,
      },
      sampledAt: new Date().toISOString(),
      totalElements,
      sampledElements: rows.length,
      rows,
      diagnostics,
    };
  } catch (e) {
    return {
      source: {
        url: window.location.href,
        title: document.title,
        hostname: window.location.hostname,
      },
      sampledAt: new Date().toISOString(),
      totalElements: 0,
      sampledElements: 0,
      rows: [],
      error: e.message,
      diagnostics: [`Engineering CSS evidence extraction failed: ${e.message}`],
    };
  }
}

function collectSampledElements(limit) {
  const prioritySelectors = [
    'body',
    'h1,h2,h3,h4,h5,h6',
    'p',
    'a',
    'button',
    'input,textarea,select',
    'label',
    'nav,header,footer,main,section,article,aside',
    'ul li,ol li',
    'table,th,td',
    '[role="button"]',
    '[class*="card" i]',
    '[class*="btn" i]',
    '[tabindex]',
  ];

  const seen = new Set();
  const candidates = [];
  const addElement = (el, priority) => {
    if (!el || seen.has(el) || !isVisibleForEvidence(el)) return;
    seen.add(el);
    candidates.push({ el, priority, area: elementArea(el) });
  };

  prioritySelectors.forEach((selector, index) => {
    try {
      document.querySelectorAll(selector).forEach((el) => addElement(el, index));
    } catch (_) {}
  });

  return candidates
    .sort((a, b) => a.priority - b.priority || b.area - a.area)
    .slice(0, limit)
    .map((item) => item.el);
}

function isVisibleForEvidence(el) {
  if (!(el instanceof Element)) return false;
  const rect = el.getBoundingClientRect();
  if (rect.width <= 0 || rect.height <= 0) return false;
  const cs = getComputedStyle(el);
  if (cs.display === 'none' || cs.visibility === 'hidden') return false;
  return true;
}

function elementArea(el) {
  const rect = el.getBoundingClientRect();
  return Math.round(rect.width * rect.height);
}

function collectComputedStyleRows(elements) {
  const rows = [];
  for (const el of elements) {
    try {
      const cs = getComputedStyle(el);
      const rect = el.getBoundingClientRect();
      const componentType = inferComponentType(el);
      const isLowConfidence = cs.opacity === '0';

      rows.push({
        selectorHint: buildSelectorHint(el),
        componentType,
        lowConfidence: isLowConfidence,
        tagName: el.tagName.toLowerCase(),
        role: el.getAttribute('role'),
        id: el.id || null,
        className: stringifyClassName(el.className),
        textSample: getTextSample(el),
        rect: {
          width: Math.round(rect.width),
          height: Math.round(rect.height),
          top: Math.round(rect.top),
          left: Math.round(rect.left),
        },
        typography: {
          fontFamily: cs.fontFamily,
          fontSize: cs.fontSize,
          fontWeight: cs.fontWeight,
          lineHeight: cs.lineHeight,
          letterSpacing: cs.letterSpacing,
        },
        color: {
          color: cs.color,
          backgroundColor: cs.backgroundColor,
          borderColor: cs.borderColor,
          outlineColor: cs.outlineColor,
        },
        box: {
          margin: cs.margin,
          padding: cs.padding,
          marginTop: cs.marginTop,
          marginRight: cs.marginRight,
          marginBottom: cs.marginBottom,
          marginLeft: cs.marginLeft,
          paddingTop: cs.paddingTop,
          paddingRight: cs.paddingRight,
          paddingBottom: cs.paddingBottom,
          paddingLeft: cs.paddingLeft,
          borderRadius: cs.borderRadius,
          boxShadow: cs.boxShadow,
        },
        motion: {
          transitionDuration: cs.transitionDuration,
          transitionTimingFunction: cs.transitionTimingFunction,
          animationDuration: cs.animationDuration,
          animationTimingFunction: cs.animationTimingFunction,
        },
      });
    } catch (_) {}
  }
  return rows;
}

function inferComponentType(el) {
  const tag = el.tagName.toLowerCase();
  const role = (el.getAttribute('role') || '').toLowerCase();
  const className = stringifyClassName(el.className).toLowerCase();
  const id = (el.id || '').toLowerCase();
  const marker = `${className} ${id}`;

  if (/^h[1-6]$/.test(tag)) return 'heading';
  if (tag === 'button' || role === 'button' || marker.includes('button') || marker.includes('btn'))
    return 'button';
  if (tag === 'a') return 'link';
  if (['input', 'textarea', 'select'].includes(tag)) return 'input';
  if (tag === 'nav' || marker.includes('nav')) return 'navigation';
  if (tag === 'section') return 'section';
  if (tag === 'ul' || tag === 'ol' || tag === 'li') return 'list';
  if (['table', 'thead', 'tbody', 'tr', 'td', 'th'].includes(tag)) return 'table';
  if (marker.includes('card')) return 'card';
  if (marker.includes('hero')) return 'hero';
  if (marker.includes('modal')) return 'modal';
  if (marker.includes('panel')) return 'panel';
  if (marker.includes('grid')) return 'grid';
  if (marker.includes('container')) return 'container';
  return 'content';
}

function buildSelectorHint(el) {
  const tag = el.tagName.toLowerCase();
  if (el.id) return `${tag}#${el.id}`;
  const className = stringifyClassName(el.className);
  if (className) {
    return `${tag}.${className.split(/\s+/).filter(Boolean).slice(0, 3).join('.')}`;
  }
  const role = el.getAttribute('role');
  if (role) return `${tag}[role="${role}"]`;
  return tag;
}

function stringifyClassName(value) {
  if (!value) return '';
  if (typeof value === 'string') return value;
  if (typeof value.baseVal === 'string') return value.baseVal;
  return String(value);
}

function getTextSample(el) {
  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)) return '';
  return (el.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 80);
}

// 直接调用并返回结果（chrome-devtools evaluate_script 会序列化返回值）
return collectDesignData({ includeCss: true });

You are a senior UI/UX designer and front-end architect.
Generate only a style analysis from DOM text/structure and page screenshots. Do not output a full DESIGN.md. Do not analyze or invent precise CSS code values.
You must identify 3-6 distinctive elements worth recreating from the screenshots and distinctiveCandidates, then describe them as few-shot module specifications. Distinctive elements may include hero sections, navigation, CTAs, pricing cards, feature cards, metric blocks, media frames, forms, motion backgrounds, badges, marquees, or any memorable visual device.
Every distinctive element must be grounded in real evidence. If evidence is limited, output fewer items instead of inventing.
Use a structure close to:
# Overall Atmosphere
## Design System
### 1. Core Style
### 2. Color Palette
### 3. Font Stack
### 4. Texture
### 5. Motion Design
## Component Guidelines
### Button / Card / Navigation / Input / Typography
## Distinctive Element Few-shot Examples
### 1. Element Name
**Purpose:**
**Evidence:**
**Visual Rules:**
- Layout:
- Color:
- Typography:
- Spacing:
- Radius / border / shadow:
- Motion:
**Recreation Prompt:**
> A few-shot description that can be given directly to an AI front-end generator.
**Structure Sketch:**
```html
<section>
  ...
</section>
```
Output ONLY markdown content, no explanations.

你是一名资深 UI/UX 设计师和前端架构师。
请只基于 DOM 文本/结构和页面截图生成风格分析，不要输出完整 DESIGN.md，不要分析或编造精确 CSS 代码值。
你必须从截图和 distinctiveCandidates 中识别 3-6 个网页里最值得复刻的特殊元素，把它们写成 few-shot 模块规范。特殊元素可以是 hero、导航、CTA、价格卡、功能卡、数据块、图文框、表单、动效背景、徽章、marquee 或任何视觉记忆点。
每个特殊元素都必须来自真实证据；如果证据不足，减少数量，不要编造。
输出结构必须接近：
# 整体氛围
## Design System (设计规范)
### 1. 核心风格
### 2. 配色方案
### 3. 字体栈
### 4. 质感
### 5. 动态交互 (Motion Design)
## 组件规范
### Button / Card / Navigation / Input / Typography
## 特殊元素 Few-shot 复刻样例
### 1. 元素名称
**用途：**
**识别依据：**
**视觉规则：**
- 布局：
- 色彩：
- 字体：
- 间距：
- 圆角/边框/阴影：
- 动效：
**复刻提示词：**
> 一段可直接交给 AI 前端生成器的 few-shot 描述。
**结构草图：**
```html
<section>
  ...
</section>
```
只输出 markdown 内容，不要输出额外解释。

#!/usr/bin/env bash
set -e

SKILL_REPO="https://raw.githubusercontent.com/liaocaoxuezhe/get-web-design/main"
SKILL_NAME="get-web-design"

# ── 检测目标平台 ──────────────────────────────
detect_target() {
  if [[ "$1" != "" ]]; then echo "$1"; return; fi
  if command -v claude &>/dev/null; then echo "claude-code"; return; fi
  if [[ -d "$HOME/.cursor" ]]; then echo "cursor"; return; fi
  if command -v codex &>/dev/null; then echo "codex"; return; fi
  if command -v gemini &>/dev/null; then echo "gemini-cli"; return; fi
  echo "unknown"
}

TARGET=$(detect_target "${1:-}")

# ── 下载核心文件 ──────────────────────────────
TMP=$(mktemp -d)
FILES=(
  SKILL.md
  skill.yaml
  assets/core_principles.md
  assets/design_thinking.md
  assets/system_prompt_en.txt
  assets/system_prompt_zh.txt
  assets/collect_design_data.js
  scripts/generate_design_md.py
  scripts/css_evidence.py
  references/setup.md
  references/workflow.md
  references/chrome_devtools_recipes.md
)

for f in "${FILES[@]}"; do
  mkdir -p "$TMP/$(dirname "$f")"
  curl -fsSL "$SKILL_REPO/$f" -o "$TMP/$f"
done

# ── 按平台安装 ────────────────────────────────
case "$TARGET" in
  claude-code)
    DEST="$HOME/.claude/skills/$SKILL_NAME"
    mkdir -p "$DEST"
    cp -r "$TMP/"* "$DEST/"
    # 注入 CLAUDE.md
    CLAUDE_MD="$HOME/.claude/CLAUDE.md"
    if [[ -f "$CLAUDE_MD" ]]; then
      echo -e "\n## Skill: $SKILL_NAME\n@$DEST/SKILL.md" >> "$CLAUDE_MD"
    fi
    echo "✓ Installed to Claude Code: $DEST"
    echo "  Skill context files are available in agent conversations."
    ;;

  cursor)
    DEST="$HOME/.cursor/skills/$SKILL_NAME"
    mkdir -p "$DEST"
    cp -r "$TMP/"* "$DEST/"
    # 注入 .cursorrules
    RULES_DIR="$HOME/.cursor/rules"
    mkdir -p "$RULES_DIR"
    RULES="$RULES_DIR/${SKILL_NAME}.mdc"
    cp "$DEST/SKILL.md" "$RULES"
    echo "✓ Installed to Cursor: $RULES"
    ;;

  codex)
    DEST="$HOME/.codex/skills/$SKILL_NAME"
    mkdir -p "$DEST"
    cp -r "$TMP/"* "$DEST/"
    echo "✓ Installed to Codex: $DEST"
    echo "  Add to your AGENTS.md: @$DEST/SKILL.md"
    ;;

  gemini-cli)
    DEST="$HOME/.gemini/skills/$SKILL_NAME"
    mkdir -p "$DEST"
    cp -r "$TMP/"* "$DEST/"
    # GEMINI.md 注入
    GEMINI_MD="$HOME/.gemini/GEMINI.md"
    if [[ -f "$GEMINI_MD" ]]; then
      echo -e "\n## Skill: $SKILL_NAME\n@$DEST/SKILL.md" >> "$GEMINI_MD"
    fi
    echo "✓ Installed to Gemini CLI: $DEST"
    ;;

  *)
    echo "⚠ Could not detect target AI agent."
    echo "  Files downloaded to: $TMP"
    echo "  Manually copy SKILL.md into your agent's context."
    echo ""
    echo "  Supported targets: claude-code, cursor, codex, gemini-cli"
    echo "  Try: bash install.sh <target>"
    exit 1
    ;;
esac

rm -rf "$TMP"
echo ""
echo "🎉 $SKILL_NAME installed successfully!"

"""
css_evidence.py — 将原始 computed-style 行压缩为 design tokens 并渲染为 Markdown。

输入：collect_design_data.js 返回的 engineeredCssEvidence 对象（dict）。
输出：
  - normalize_css_evidence(raw)  -> 归一化后的 tokens 字典
  - format_css_evidence_markdown(evidence, language='zh') -> Markdown 字符串

核心思路：保留高频 token，舍弃噪声值；按角色（text/surface/accent/border 等）归类。
"""

from __future__ import annotations

import re
from collections import Counter
from typing import Any, Callable, Dict, Iterable, List, Optional

EMPTY_LABEL_EN = "Not enough evidence"
EMPTY_LABEL_ZH = "证据不足"

LABELS = {
    "en": {
        "title": "Engineering CSS Evidence",
        "intro": (
            "Compressed from live DOM computed styles. This section keeps "
            "high-frequency tokens and intent, not raw CSS dumps."
        ),
        "tokens": "Compressed Design Tokens",
        "colors": "Color Roles",
        "typography": "Typography Roles",
        "spacing": "Spacing Rhythm",
        "radius": "Radius Roles",
        "shadow": "Shadow Intent",
        "motion": "Motion Intent",
        "distinction": "Distinctive Implementation Signals",
        "diagnostics": "Extraction Diagnostics",
        "sampled": "Sampled {sampled} visible elements from {total} total DOM elements.",
        "confidence": "Confidence",
        "empty": EMPTY_LABEL_EN,
    },
    "zh": {
        "title": "工程 CSS 证据",
        "intro": "由实时 DOM computed styles 压缩生成。这里只保留高频 token 与设计意图，不输出原始 CSS 清单。",
        "tokens": "压缩设计 Token",
        "colors": "色彩角色",
        "typography": "字体角色",
        "spacing": "间距节奏",
        "radius": "圆角角色",
        "shadow": "阴影意图",
        "motion": "动效意图",
        "distinction": "差异化实现信号",
        "diagnostics": "采集诊断",
        "sampled": "从 {total} 个 DOM 元素中采样了 {sampled} 个可见元素。",
        "confidence": "置信度",
        "empty": EMPTY_LABEL_ZH,
    },
}

NOISE_VALUES = {
    "none", "normal", "auto", "initial", "inherit", "unset",
    "0", "0px", "0s", "0ms",
    "rgba(0, 0, 0, 0)", "rgba(0,0,0,0)", "transparent",
}

PX_RE = re.compile(r"-?\d*\.?\d+px")
RGBA_RE = re.compile(r"rgba?\(([^)]+)\)")
HEX_RE = re.compile(r"^#[0-9a-f]{3,8}$", re.IGNORECASE)


# ── 通用工具 ─────────────────────────────────────────────────────


def labels_for(language: str) -> Dict[str, str]:
    return LABELS.get(language, LABELS["en"])


def empty_label(language: str) -> str:
    return labels_for(language)["empty"]


def is_informative(value: Any) -> bool:
    if value is None:
        return False
    s = str(value).strip().lower()
    if not s:
        return False
    return s not in NOISE_VALUES


def count_values(
    values: Iterable[Any], transform: Callable[[Any], Any] = lambda v: v
) -> List[Dict[str, Any]]:
    counter: Counter = Counter()
    for raw in values:
        v = transform(raw)
        if not is_informative(v):
            continue
        counter[str(v).strip()] += 1
    items = sorted(counter.items(), key=lambda kv: (-kv[1], kv[0]))
    return [{"value": v, "count": c} for v, c in items]


def top_rows(
    values: Iterable[Any], limit: int = 3, transform: Callable[[Any], Any] = lambda v: v
) -> List[Dict[str, Any]]:
    return count_values(values, transform)[:limit]


def px_number(value: Any) -> Optional[float]:
    if value is None:
        return None
    m = PX_RE.search(str(value))
    if not m:
        return None
    try:
        return float(m.group(0)[:-2])
    except ValueError:
        return None


def px_numbers(value: Any) -> List[float]:
    if value is None:
        return []
    nums = []
    for m in PX_RE.findall(str(value)):
        try:
            n = float(m[:-2])
            if n > 0:
                nums.append(n)
        except ValueError:
            pass
    return nums


def format_px(num: Optional[float]) -> Optional[str]:
    if num is None or num != num:  # NaN check
        return None
    if float(num).is_integer():
        return f"{int(num)}px"
    return f"{round(num, 2)}px"


def parse_duration_ms(value: Any) -> Optional[int]:
    if value is None:
        return None
    raw = str(value).strip()
    if not raw or raw in ("0s", "0ms"):
        return None
    parts = [p.strip() for p in raw.split(",")]
    ms_values = []
    for part in parts:
        try:
            if part.endswith("ms"):
                ms_values.append(float(part[:-2]))
            elif part.endswith("s"):
                ms_values.append(float(part[:-1]) * 1000)
        except ValueError:
            continue
    ms_values = [m for m in ms_values if m > 0]
    return round(max(ms_values)) if ms_values else None


def canonical_color(value: Any) -> Optional[str]:
    if not is_informative(value):
        return None
    raw = str(value).strip().lower()
    if raw == "transparent":
        return None
    if HEX_RE.match(raw):
        if len(raw) == 4:
            return f"#{raw[1]*2}{raw[2]*2}{raw[3]*2}"
        return raw[:7]
    m = RGBA_RE.match(raw)
    if not m:
        return raw
    parts = [p.strip() for p in m.group(1).split(",")]
    if len(parts) < 3:
        return raw
    try:
        alpha = float(parts[3]) if len(parts) >= 4 else 1.0
    except ValueError:
        alpha = 1.0
    if alpha == 0:
        return None
    try:
        channels = [max(0, min(255, round(float(p)))) for p in parts[:3]]
    except ValueError:
        return raw
    return "#" + "".join(f"{c:02x}" for c in channels)


def first_font_family(font_family: Any) -> Optional[str]:
    if font_family is None:
        return None
    for item in str(font_family).split(","):
        cleaned = item.strip().strip("'\"")
        if cleaned:
            return cleaned
    return None


def color_brightness(hex_value: str) -> Optional[float]:
    if not hex_value:
        return None
    pairs = re.findall(r"[0-9a-f]{2}", hex_value, re.IGNORECASE)[:3]
    if len(pairs) < 3:
        return None
    try:
        nums = [int(p, 16) for p in pairs]
    except ValueError:
        return None
    return sum(nums) / 3


# ── Token 推断 ───────────────────────────────────────────────────


def pick_color_role(rows: List[Dict], getter: Callable, limit: int = 1):
    values = top_rows([getter(r) for r in rows], limit, canonical_color)
    formatted = [{"value": r["value"], "usage": r["count"]} for r in values]
    if limit == 1:
        return formatted[0] if formatted else None
    return formatted


def infer_color_tokens(rows: List[Dict], body_rows: List[Dict]) -> Dict[str, Any]:
    button_rows = [r for r in rows if r.get("componentType") in ("button", "link")]
    pool_rows = button_rows or rows
    accent_pool = []
    for r in pool_rows:
        c = r.get("color") or {}
        accent_pool.extend([c.get("backgroundColor"), c.get("color"), c.get("borderColor")])

    text_primary = pick_color_role(rows, lambda r: (r.get("color") or {}).get("color"))
    text_secondary = pick_color_role(
        body_rows or rows, lambda r: (r.get("color") or {}).get("color")
    )
    background = pick_color_role(rows, lambda r: (r.get("color") or {}).get("backgroundColor"))
    border = pick_color_role(rows, lambda r: (r.get("color") or {}).get("borderColor"))
    focus = pick_color_role(rows, lambda r: (r.get("color") or {}).get("outlineColor"))
    accent_top = top_rows(accent_pool, 1, canonical_color)
    accent = (
        {"value": accent_top[0]["value"], "usage": accent_top[0]["count"]} if accent_top else None
    )

    return {
        "color.text.primary": text_primary,
        "color.text.secondary": text_secondary,
        "color.surface.base": background,
        "color.accent": accent,
        "color.border.default": border,
        "color.focus.ring": focus,
    }


def infer_mode_from_colors(colors: Iterable[Any]) -> str:
    brightness = [
        b for b in (color_brightness(canonical_color(c) or "") for c in colors) if b is not None
    ]
    if not brightness:
        return "unknown"
    dark = sum(1 for b in brightness if b < 90)
    light = sum(1 for b in brightness if b > 180)
    if dark and light:
        return "mixed"
    if dark > light:
        return "dark"
    if light > dark:
        return "light"
    return "mixed"


def infer_typography_tokens(
    rows: List[Dict], heading_rows: List[Dict], body_rows: List[Dict]
) -> Dict[str, Any]:
    family_rows = top_rows([(r.get("typography") or {}).get("fontFamily") for r in rows], 2)
    families = []
    for row in family_rows:
        primary = first_font_family(row["value"])
        if primary:
            families.append({"value": primary, "stack": row["value"], "usage": row["count"]})

    def to_px_label(value):
        n = px_number(value)
        return format_px(n) if n is not None else None

    size_counts = count_values(
        [(r.get("typography") or {}).get("fontSize") for r in rows], to_px_label
    )

    body_size_top = top_rows(
        [(r.get("typography") or {}).get("fontSize") for r in body_rows], 1, to_px_label
    )
    body_size = body_size_top[0] if body_size_top else (size_counts[0] if size_counts else None)

    body_size_px = px_number(body_size["value"]) if body_size else None
    heading_sizes = []
    for r in heading_rows:
        n = px_number((r.get("typography") or {}).get("fontSize"))
        if n is not None and (body_size_px is None or n >= body_size_px):
            heading_sizes.append(n)

    if heading_sizes:
        display_size = {"value": format_px(max(heading_sizes)), "count": len(heading_sizes)}
    else:
        display_size = next(
            (s for s in size_counts if (px_number(s["value"]) or 0) >= 24), None
        ) or (size_counts[0] if size_counts else None)

    label_candidates = [
        s for s in size_counts if not body_size_px or (px_number(s["value"]) or 0) <= body_size_px
    ]
    label_size = (
        label_candidates[-1] if label_candidates else (size_counts[0] if size_counts else None)
    )

    display_px = px_number(display_size["value"]) if display_size else None

    def wrap(token):
        if not token:
            return None
        return {"value": token["value"], "usage": token["count"]}

    return {
        "font.family.primary": families[0] if families else None,
        "font.family.secondary": families[1] if len(families) > 1 else None,
        "font.size.display": wrap(display_size),
        "font.size.body": wrap(body_size),
        "font.size.label": wrap(label_size),
        "ratio": (
            f"display is {round(display_px / body_size_px, 2)}x body"
            if body_size_px and display_px
            else EMPTY_LABEL_EN
        ),
    }


def infer_base_unit(numbers: List[float]) -> Optional[str]:
    if not numbers:
        return None
    candidates = [4, 5, 6, 8]
    best, best_score = candidates[0], -1
    for c in candidates:
        score = sum(
            1
            for n in numbers
            if abs(n % c) < 0.1 or abs((n % c) - c) < 0.1
        )
        if score > best_score:
            best, best_score = c, score
    return f"{best}px"


def infer_spacing_tokens(rows: List[Dict]) -> Dict[str, Any]:
    keys = [
        "margin", "padding",
        "marginTop", "marginRight", "marginBottom", "marginLeft",
        "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
    ]
    numbers: List[float] = []
    for r in rows:
        box = r.get("box") or {}
        for k in keys:
            numbers.extend(px_numbers(box.get(k)))
    numbers = [n for n in numbers if 0 < n <= 160]
    common = top_rows([format_px(n) for n in numbers], 5)
    return {
        "baseUnit": infer_base_unit(numbers) or EMPTY_LABEL_EN,
        "scale": [
            {"name": f"space.{i + 1}", "value": row["value"], "usage": row["count"]}
            for i, row in enumerate(common)
        ],
    }


def infer_radius_tokens(rows: List[Dict]) -> List[Dict[str, Any]]:
    radii: List[float] = []
    for r in rows:
        radii.extend(px_numbers((r.get("box") or {}).get("borderRadius")))
    buckets = {
        "sharp": [n for n in radii if n <= 4],
        "medium": [n for n in radii if 4 < n <= 16],
        "pill": [n for n in radii if n > 16],
    }

    def token_for(name: str, values: List[float]):
        if not values:
            return None
        top = top_rows([format_px(n) for n in values], 1)
        if not top:
            return None
        return {"name": f"radius.{name}", "value": top[0]["value"], "usage": top[0]["count"]}

    return [t for t in (token_for(k, v) for k, v in buckets.items()) if t]


def infer_shadow_intent(rows: List[Dict]) -> Dict[str, Any]:
    shadows = [
        s for s in ((r.get("box") or {}).get("boxShadow") for r in rows) if is_informative(s)
    ]
    if not shadows:
        return {"level": "none", "usage": 0, "note": "flat surfaces dominate"}
    ratio = len(shadows) / max(len(rows), 1)
    unique_count = len(count_values(shadows))
    if ratio > 0.25 or unique_count > 4:
        level = "layered"
    elif ratio > 0.08:
        level = "subtle elevation"
    else:
        level = "rare accent"
    note = (
        f"{unique_count} recurring shadow treatments, compressed to intent"
        if unique_count > 1
        else "single recurring elevation treatment"
    )
    return {"level": level, "usage": len(shadows), "note": note}


def infer_motion_intent(rows: List[Dict]) -> Dict[str, Any]:
    durations = []
    for r in rows:
        m = r.get("motion") or {}
        for v in (m.get("transitionDuration"), m.get("animationDuration")):
            d = parse_duration_ms(v)
            if d:
                durations.append(d)

    easing_pool = []
    for r in rows:
        m = r.get("motion") or {}
        easing_pool.extend([m.get("transitionTimingFunction"), m.get("animationTimingFunction")])
    easings = top_rows(easing_pool, 3, lambda v: None if str(v or "").strip() == "ease" else v)

    if not durations:
        return {
            "level": "none",
            "range": EMPTY_LABEL_EN,
            "durations": [],
            "easingStyle": EMPTY_LABEL_EN,
        }

    mn, mx = min(durations), max(durations)
    common = top_rows([f"{d}ms" for d in durations], 3)
    if mx >= 700:
        level = "expressive"
    elif mx >= 300:
        level = "moderate"
    else:
        level = "subtle"
    return {
        "level": level,
        "range": f"{mn}-{mx}ms",
        "durations": [{"value": r["value"], "usage": r["count"]} for r in common],
        "easingStyle": ", ".join(f"{r['value']} ({r['count']})" for r in easings)
        or "mostly default easing",
    }


def infer_distinctive_signals(tokens: Dict[str, Any]) -> List[str]:
    signals = []
    pill = next((t for t in tokens["radius"] if t["name"] == "radius.pill"), None)
    if pill:
        signals.append(
            f"Frequent pill radius ({pill['value']}) creates a soft/capsule interaction language."
        )
    if tokens["shadow"]["level"] == "none":
        signals.append("Flat surfaces are preferred over decorative depth.")
    if tokens["shadow"]["level"] == "layered":
        signals.append(
            "Elevation appears as a recurring material cue, not a one-off decoration."
        )
    if tokens["motion"]["level"] != "none":
        signals.append(
            f"Motion is {tokens['motion']['level']}, centered around {tokens['motion']['range']}."
        )
    ratio = tokens["typography"].get("ratio")
    if ratio and ratio != EMPTY_LABEL_EN:
        signals.append(f"Type hierarchy is ratio-driven: {ratio}.")
    return signals[:4]


# ── 主入口 ────────────────────────────────────────────────────────


def normalize_css_evidence(raw_evidence: Optional[Dict[str, Any]]) -> Dict[str, Any]:
    raw_evidence = raw_evidence or {}
    raw_rows = raw_evidence.get("rows") or []
    visible_rows = [r for r in raw_rows if not r.get("lowConfidence")]
    rows = visible_rows or raw_rows

    heading_rows = [
        r for r in rows
        if re.match(r"^h[1-6]$", str(r.get("tagName") or ""), re.IGNORECASE)
        or r.get("componentType") == "heading"
    ]
    body_tags = {"p", "span", "li", "label", "blockquote", "body"}
    body_rows = [r for r in rows if str(r.get("tagName") or "").lower() in body_tags]

    diagnostics = list(raw_evidence.get("diagnostics") or [])
    sampled_elements = raw_evidence.get("sampledElements") or len(raw_rows)
    total_elements = raw_evidence.get("totalElements") or 0

    if raw_evidence.get("error"):
        diagnostics.append(f"CSS evidence extraction failed: {raw_evidence['error']}")
    if sampled_elements < 30:
        diagnostics.append(
            "Low sample size: fewer than 30 visible elements were extracted."
        )
    if not rows:
        diagnostics.append("No computed style rows were available for normalization.")

    color = infer_color_tokens(rows, body_rows)
    tokens = {
        "color": color,
        "mode": infer_mode_from_colors([(r.get("color") or {}).get("backgroundColor") for r in rows]),
        "typography": infer_typography_tokens(rows, heading_rows, body_rows),
        "spacing": infer_spacing_tokens(rows),
        "radius": infer_radius_tokens(rows),
        "shadow": infer_shadow_intent(rows),
        "motion": infer_motion_intent(rows),
    }
    tokens["distinctiveSignals"] = infer_distinctive_signals(tokens)

    confidence = (
        "high" if sampled_elements >= 120 else "medium" if sampled_elements >= 30 else "low"
    )

    return {
        "source": raw_evidence.get("source"),
        "sampledAt": raw_evidence.get("sampledAt"),
        "tokens": tokens,
        "evidenceStats": {
            "totalElements": total_elements,
            "sampledElements": sampled_elements,
            "confidence": confidence,
            "diagnostics": diagnostics,
        },
    }


# ── Markdown 渲染 ────────────────────────────────────────────────


def _render_token(token, language: str) -> str:
    if not token:
        return empty_label(language)
    if token.get("value") and "usage" in token:
        return f"{token['value']} ({token['usage']})"
    if token.get("value"):
        return token["value"]
    return empty_label(language)


def _render_color_tokens(color_tokens, language) -> str:
    lines = []
    for name, token in (color_tokens or {}).items():
        if not token:
            continue
        lines.append(f"- **{name}:** {_render_token(token, language)}")
        if len(lines) >= 6:
            break
    return "\n".join(lines) if lines else f"- {empty_label(language)}"


def _render_typography_tokens(typography, language) -> str:
    lines = []
    for name in (
        "font.family.primary",
        "font.family.secondary",
        "font.size.display",
        "font.size.body",
        "font.size.label",
    ):
        token = (typography or {}).get(name)
        if not token:
            continue
        if name.startswith("font.family"):
            lines.append(f"- **{name}:** {token['value']} ({token['usage']})")
        else:
            lines.append(f"- **{name}:** {_render_token(token, language)}")
    ratio = (typography or {}).get("ratio")
    if ratio and ratio != EMPTY_LABEL_EN:
        lines.append(f"- **ratio:** {ratio}")
    return "\n".join(lines) if lines else f"- {empty_label(language)}"


def _render_spacing_tokens(spacing, language) -> str:
    lines = [f"- **base unit:** {(spacing or {}).get('baseUnit') or empty_label(language)}"]
    for token in (spacing or {}).get("scale") or []:
        lines.append(f"- **{token['name']}:** {token['value']} ({token['usage']})")
    return "\n".join(lines)


def _render_radius_tokens(radius, language) -> str:
    if not radius:
        return f"- {empty_label(language)}"
    return "\n".join(f"- **{t['name']}:** {t['value']} ({t['usage']})" for t in radius)


def _render_motion(motion, language) -> str:
    motion = motion or {}
    durations = motion.get("durations") or []
    duration_text = (
        ", ".join(_render_token(d, language) for d in durations) if durations else empty_label(language)
    )
    return "\n".join(
        [
            f"- **level:** {motion.get('level') or empty_label(language)}",
            f"- **range:** {motion.get('range') or empty_label(language)}",
            f"- **common durations:** {duration_text}",
            f"- **easing style:** {motion.get('easingStyle') or empty_label(language)}",
        ]
    )


def format_css_evidence_markdown(evidence: Dict[str, Any], language: str = "zh") -> str:
    labels = labels_for(language)
    tokens = (evidence or {}).get("tokens") or {}
    diagnostics = ((evidence or {}).get("evidenceStats") or {}).get("diagnostics") or []
    signals = tokens.get("distinctiveSignals") or []
    stats = (evidence or {}).get("evidenceStats") or {}

    body = f"""## {labels['title']}

{labels['intro']}

### {labels['tokens']}

**Mode:** {tokens.get('mode') or 'unknown'}

#### {labels['colors']}
{_render_color_tokens(tokens.get('color'), language)}

#### {labels['typography']}
{_render_typography_tokens(tokens.get('typography'), language)}

#### {labels['spacing']}
{_render_spacing_tokens(tokens.get('spacing'), language)}

#### {labels['radius']}
{_render_radius_tokens(tokens.get('radius'), language)}

#### {labels['shadow']}
- **level:** {(tokens.get('shadow') or {}).get('level') or empty_label(language)}
- **usage:** {(tokens.get('shadow') or {}).get('usage') or 0}
- **note:** {(tokens.get('shadow') or {}).get('note') or empty_label(language)}

#### {labels['motion']}
{_render_motion(tokens.get('motion'), language)}

### {labels['distinction']}

{chr(10).join(f'- {s}' for s in signals) if signals else f'- {empty_label(language)}'}

### {labels['diagnostics']}

- {labels['sampled'].replace('{sampled}', str(stats.get('sampledElements') or 0)).replace('{total}', str(stats.get('totalElements') or 0))}
- {labels['confidence']}: {stats.get('confidence') or 'low'}.
{chr(10).join(f'- {d}' for d in diagnostics) if diagnostics else '- No extraction warnings.'}"""

    return body

#!/usr/bin/env python3
"""
generate_design_md.py — get-web-design 主入口脚本。

工作流程：
  1. 读取 collected_data.json（由 chrome-devtools 采集，包含 meta + domSnapshot + engineeredCssEvidence）
  2. 读取 3 张截图（PNG/JPEG），编码成 base64 data URL
  3. 调用用户配置的多模态 LLM（OpenAI 兼容接口），结合 DOM + 截图生成风格分析
  4. 将 engineeredCssEvidence 通过 css_evidence.normalize/format 处理为 Markdown
  5. 拼装最终 DESIGN.md：frontmatter + design_thinking + AI 风格分析 + CSS Evidence + core_principles

环境变量（用户必填）：
  WEB_DESIGN_API_KEY     - 多模态模型 API Key
  WEB_DESIGN_BASE_URL    - 多模态模型 base URL（OpenAI 兼容，如 https://api.moonshot.cn/v1）
  WEB_DESIGN_MODEL       - 模型名（必须支持 vision，如 kimi-latest、gpt-4o、claude-3-5-sonnet-...）

CLI:
  python generate_design_md.py \\
    --collected /tmp/collected.json \\
    --screenshots shot1.png shot2.png shot3.png \\
    --hostname example.com \\
    [--output-dir output/example.com] \\
    [--output output/example.com/design.md] \\
    [--language zh|en]

Default output layout:
  output/<hostname>/design.md
  output/<hostname>/shot1.jpg
  output/<hostname>/shot2.jpg
  output/<hostname>/shot3.jpg
The script copies screenshots into the output dir if they are not already there.
"""

from __future__ import annotations

import argparse
import base64
import json
import mimetypes
import os
import re
import shutil
import sys
import urllib.error
import urllib.request
from datetime import date
from pathlib import Path

SKILL_ROOT = Path(__file__).resolve().parent.parent
ASSETS = SKILL_ROOT / "assets"

sys.path.insert(0, str(SKILL_ROOT / "scripts"))
from css_evidence import format_css_evidence_markdown, normalize_css_evidence  # noqa: E402


# ── 工具 ─────────────────────────────────────────────────────────


def read_text(path: Path) -> str:
    return path.read_text(encoding="utf-8").strip()


def encode_image_to_data_url(path: Path) -> str:
    mime, _ = mimetypes.guess_type(str(path))
    if not mime or not mime.startswith("image/"):
        mime = "image/jpeg"
    b64 = base64.b64encode(path.read_bytes()).decode("ascii")
    return f"data:{mime};base64,{b64}"


def strip_markdown_fence(text: str) -> str:
    text = (text or "").strip()
    outer_fence = re.fullmatch(r"```(?:markdown)?\s*\n([\s\S]*?)\n```", text, flags=re.IGNORECASE)
    return outer_fence.group(1).strip() if outer_fence else text


def close_unbalanced_markdown_fences(text: str) -> str:
    text = (text or "").strip()
    if not text:
        return ""
    fence_count = sum(1 for line in text.splitlines() if re.match(r"^\s*```", line))
    return f"{text}\n```" if fence_count % 2 == 1 else text


def build_frontmatter(hostname: str) -> str:
    name = f"{hostname or 'Unknown'} Design System"
    return (
        "---\n"
        f"name: {name}\n"
        "version: 1.0.0\n"
        f"last_updated: {date.today().isoformat()}\n"
        "author: get-web-design skill\n"
        "---"
    )


# ── 构建 LLM 消息 ────────────────────────────────────────────────


def build_messages(collected: dict, screenshots: list[Path], language: str) -> list:
    meta = collected.get("meta") or {}
    dom_snapshot = collected.get("domSnapshot") or {}
    hostname = meta.get("hostname") or "unknown"
    title = meta.get("title") or ""

    if language == "zh":
        system_prompt = read_text(ASSETS / "system_prompt_zh.txt")
        user_intro = (
            f"网站：{hostname}\n"
            f"页面标题：{title}\n\n"
            f"下面是 DOM 文本与页面结构快照。请结合后续截图分析网站风格，但不要分析 CSS 原始数据。\n"
            f"其中 distinctiveCandidates 是从真实 DOM 中挑出的特殊模块候选，请重点参考它们来生成“特殊元素 Few-shot 复刻样例”：\n"
            f"{json.dumps({'meta': meta, 'domSnapshot': dom_snapshot}, ensure_ascii=False, indent=2)}"
        )
        trailing = (
            "请只输出风格分析 markdown，不要包含 frontmatter、固定文本、CSS Evidence 或下载说明。"
            "必须包含“特殊元素 Few-shot 复刻样例”章节，并为 3-6 个真实页面元素写出用途、"
            "识别依据、视觉规则、复刻提示词和结构草图。"
        )
    else:
        system_prompt = read_text(ASSETS / "system_prompt_en.txt")
        user_intro = (
            f"Website: {hostname}\n"
            f"Page title: {title}\n\n"
            f"Here is a DOM text and structure snapshot. Analyze the site style with the screenshots below, but do not analyze raw CSS.\n"
            f'The distinctiveCandidates field contains real DOM-derived module candidates. Use it heavily when writing "Distinctive Element Few-shot Examples":\n'
            f"{json.dumps({'meta': meta, 'domSnapshot': dom_snapshot}, ensure_ascii=False, indent=2)}"
        )
        trailing = (
            "Output only the style analysis markdown. Do not include frontmatter, "
            "fixed copy, CSS Evidence, or download instructions. You must include "
            '"Distinctive Element Few-shot Examples" with 3-6 real page elements, '
            "each containing purpose, evidence, visual rules, recreation prompt, "
            "and structure sketch."
        )

    user_content: list = [{"type": "text", "text": user_intro}]
    for shot in screenshots:
        user_content.append(
            {"type": "image_url", "image_url": {"url": encode_image_to_data_url(shot)}}
        )
    user_content.append({"type": "text", "text": trailing})

    return [
        {"role": "system", "content": system_prompt},
        {"role": "user", "content": user_content},
    ]


# ── 调用 LLM ─────────────────────────────────────────────────────


def call_llm(messages: list, *, api_key: str, base_url: str, model: str, timeout: int = 600) -> str:
    url = f"{base_url.rstrip('/')}/chat/completions"
    payload = {"model": model, "stream": False, "messages": messages}
    data = json.dumps(payload).encode("utf-8")
    req = urllib.request.Request(
        url,
        data=data,
        method="POST",
        headers={
            "Content-Type": "application/json",
            "Authorization": f"Bearer {api_key}",
        },
    )
    try:
        with urllib.request.urlopen(req, timeout=timeout) as resp:
            body = resp.read().decode("utf-8")
    except urllib.error.HTTPError as e:
        err_body = e.read().decode("utf-8", errors="replace") if e.fp else ""
        raise RuntimeError(f"LLM HTTP {e.code}: {err_body[:1000]}") from e

    parsed = json.loads(body)
    try:
        choice = parsed["choices"][0]
        msg = choice.get("message") or {}
        content = msg.get("content")
        if isinstance(content, list):
            # Anthropic-style content blocks
            text_parts = [
                blk.get("text", "")
                for blk in content
                if isinstance(blk, dict) and blk.get("type") in ("text", "output_text")
            ]
            return "".join(text_parts).strip()
        if isinstance(content, str):
            return content.strip()
        return (choice.get("text") or "").strip()
    except (KeyError, IndexError, TypeError) as e:
        raise RuntimeError(f"无法从 LLM 响应中提取内容: {body[:500]}") from e


# ── 主流程 ───────────────────────────────────────────────────────


def assemble_design_md(
    *, hostname: str, ai_analysis: str, css_evidence_md: str
) -> str:
    safe_ai_analysis = close_unbalanced_markdown_fences(strip_markdown_fence(ai_analysis))
    parts = [
        build_frontmatter(hostname),
        read_text(ASSETS / "design_thinking.md"),
        safe_ai_analysis,
        (css_evidence_md or "").strip(),
        read_text(ASSETS / "core_principles.md"),
    ]
    return "\n\n".join(p for p in parts if p)


def main() -> int:
    parser = argparse.ArgumentParser(description="Generate DESIGN.md from collected web data.")
    parser.add_argument("--collected", required=True, type=Path,
                        help="JSON file containing meta + domSnapshot + engineeredCssEvidence")
    parser.add_argument("--screenshots", nargs="+", required=True, type=Path,
                        help="Up to 3 screenshot image files (top / mid / lower)")
    parser.add_argument("--hostname", default="", help="Hostname; defaults to value in meta")
    parser.add_argument(
        "--output-dir", default=None, type=Path, dest="output_dir",
        help="Output directory. Defaults to ./output/<hostname>/. "
             "design.md and copies of the screenshots are written here."
    )
    parser.add_argument(
        "--output", default=None, type=Path,
        help="Explicit design.md path. Overrides --output-dir for the markdown only. "
             "Defaults to <output-dir>/design.md."
    )
    parser.add_argument("--language", choices=["zh", "en"], default="en")
    parser.add_argument("--api-key", default=os.environ.get("WEB_DESIGN_API_KEY", ""))
    parser.add_argument("--base-url", default=os.environ.get("WEB_DESIGN_BASE_URL", ""))
    parser.add_argument("--model", default=os.environ.get("WEB_DESIGN_MODEL", ""))
    args = parser.parse_args()

    if not args.api_key or not args.base_url or not args.model:
        sys.stderr.write(
            "[ERROR] Missing LLM config. Set --api-key / --base-url / --model "
            "or env WEB_DESIGN_API_KEY / WEB_DESIGN_BASE_URL / WEB_DESIGN_MODEL.\n"
        )
        return 2

    if not args.collected.exists():
        sys.stderr.write(f"[ERROR] collected file not found: {args.collected}\n")
        return 2
    for shot in args.screenshots:
        if not shot.exists():
            sys.stderr.write(f"[ERROR] screenshot not found: {shot}\n")
            return 2

    collected = json.loads(args.collected.read_text(encoding="utf-8"))
    hostname = args.hostname or (collected.get("meta") or {}).get("hostname") or "unknown"

    output_dir = args.output_dir or Path("output") / hostname
    output_dir.mkdir(parents=True, exist_ok=True)

    output_path = args.output or (output_dir / "design.md")
    output_path.parent.mkdir(parents=True, exist_ok=True)
    args.output = output_path

    copied: list[Path] = []
    for idx, shot in enumerate(args.screenshots, start=1):
        src = shot.resolve()
        dst = (output_dir / f"shot{idx}{shot.suffix.lower() or '.jpg'}").resolve()
        if src == dst:
            copied.append(dst)
            continue
        try:
            shutil.copy2(src, dst)
            copied.append(dst)
        except OSError as e:
            sys.stderr.write(f"[WARN] failed to copy screenshot {src} -> {dst}: {e}\n")
    if copied:
        print(f"[INFO] Screenshots placed in {output_dir} ({len(copied)} files)",
              file=sys.stderr)

    raw_evidence = collected.get("engineeredCssEvidence") or {
        "error": "engineeredCssEvidence missing from collected data",
        "diagnostics": ["engineeredCssEvidence missing from collected data"],
    }
    normalized = normalize_css_evidence(raw_evidence)
    css_md = format_css_evidence_markdown(normalized, language=args.language)

    print(f"[INFO] Calling LLM model={args.model} screenshots={len(args.screenshots)}",
          file=sys.stderr)
    messages = build_messages(collected, args.screenshots, args.language)
    ai_analysis = call_llm(
        messages,
        api_key=args.api_key,
        base_url=args.base_url,
        model=args.model,
    )
    if not ai_analysis:
        sys.stderr.write("[WARN] LLM returned empty content.\n")

    final_md = assemble_design_md(
        hostname=hostname,
        ai_analysis=ai_analysis,
        css_evidence_md=css_md,
    )
    args.output.parent.mkdir(parents=True, exist_ok=True)
    args.output.write_text(final_md, encoding="utf-8")
    print(f"[OK] Wrote {args.output} ({len(final_md)} chars)", file=sys.stderr)
    return 0


if __name__ == "__main__":
    sys.exit(main())