用途
social-card 用于生成社交媒体分享卡片图片。当用户要求生成社交媒体卡片图、OG 图、Twitter 卡片、链接预览图或社交分享图形时使用。它明确不用于整页（full-page）类截图需求。
主要能力
- 输出固定为 1200×630 的 PNG，无例外。
- 提供三种布局变体：
- Centered（默认）：仅标题，或标题加简短副标题，整洁简约。结构为居中标题、副标题位于左下、顶部有强调色条。模板位于 assets/centered.html。
- Logo + Title：带公司/产品 Logo 的品牌卡片。结构为 Logo 位于左上、标题居中、副标题位于左下、顶部有强调色条。模板位于 assets/logo-title.html。
- Avatar + Quote：作者引言、证言、个人品牌。结构为圆形头像位于中央上方，标题渲染为醒目引用（pull-quote），下方为署名（姓名 + 账号）。模板位于 assets/avatar-quote.html。
- 强制对比度要求：文字必须满足 WCAG AA 最低标准（普通文字 4.5:1，大字 3:1）。默认白底黑字 #1A1A1A，或近黑 #0F172A 底白字。品牌色仅在与所选背景对比度通过 WCAG AA 时才可用于文字；若不达标，则将其用于装饰元素（强调色条、边框、背景图案），文字保持合规颜色。
- 禁止占位文本：若用户未提供内容则询问，绝不使用 lorem ipsum 或填充文本。
使用方式
技能按步骤执行，不得跳过：
- 提取内容：从用户请求中识别标题/主标题（必填）、副标题（可选，可为标语、URL 或作者署名）、品牌色（可选，十六进制色值，用于强调色条与头像+引用符号，未提供默认 #1A1A1A）、Logo/头像（可选，URL 或本地路径）。若标题缺失，询问：“What should the card say as its main headline?”
- 选择布局变体（见上文三种）。
- 转义用户文本：替换前将 & 转为 &、< 转为 <、> 转为 >、" 转为 "，对标题和副标题分别执行一次。
- 选择字号：依据标题长度与字符类型。拉丁字符 ≤60 字符用 72px，61–100 字符用 56px，>100 字符用 44px；CJK/阿拉伯文/天城文 ≤30 字符用 72px，31–50 字符用 56px，>50 字符用 44px。混合文字时将每个 CJK/阿拉伯文/天城文字符按 2 个拉丁字符计算长度。RTL 文字（阿拉伯文、希伯来文）在此尺寸下无需修改模板，由浏览器处理方向，需在验证步骤目视检查。
- 构建 HTML：从 assets/ 读取所选变体对应模板，替换 {{ESCAPED_TITLE}}、{{ESCAPED_SUBTITLE}}、{{ACCENT_COLOR}}、{{FONT_SIZE}}，以及（仅 Logo+Title）{{LOGO_SRC}}、（仅 Avatar+Quote）{{AVATAR_SRC}}。模板使用 Mustache 风格 {{#BLOCK}}…{{/BLOCK}} 标记，若 SUBTITLE、LOGO 或 AVATAR 缺失，删除整个块及标记。将替换后的 HTML 写入 /tmp/social-card.html（macOS/Linux）、%TEMP%/social-card.html（Windows）或 <project-root>/.claude/tmp/social-card.html（回退）。
- 截图：优先使用 Playwright MCP（browser_navigate、browser_resize 到 1200×630、browser_wait_for 1 秒、browser_take_screenshot 输出 PNG）。若不可用，按顺序回退：Playwright CLI（npx playwright screenshot --viewport-size=1200,630 "file:///tmp/social-card.html" social-card.png；若无浏览器需先执行 npx playwright install chromium，注意下载约 100MB）；仅在项目已安装 puppeteer 时使用约 10 行 Node 脚本，用后删除；或手动方式，告知用户自行在浏览器打开并以 1200×630 截图保存为 PNG。
- 验证：若任一失败则修复并重新截图，最多重试 3 次。检查项包括尺寸（用 Playwright 的 page.evaluate 确认 1200×630，或检查截图元数据）；文字溢出（用 page.evaluate 检查标题/引用元素的 scrollHeight/scrollWidth 是否超出容器 1.05 倍、元素边界是否在卡片内，若 fits 为 false 则按字号表降一档重新生成）；无占位符残留（人工扫描最终 HTML 中未替换的 {{TOKEN}} 或未剥离的块标记，所有可见字符串必须是用户内容）；布局专项（Centered 副标题不与底部强调色条冲突；Logo+Title 的 Logo 遵守 max-height: 48px 且不与标题重叠；Avatar+Quote 头像为圆形（已应用 border-radius）、标题前可见波浪引用符号、署名清晰位于引用下方）。
验证通过后，返回截图文件路径与一行摘要（所选变体 + 所用字号）。若用户需要变体（如同一内容的深色模式），从第 2 步重新运行迭代。若用户需要动画或多帧输出，转交 visual-design；该技能在单个 1200×630 PNG 处结束。
适用场景
- 博客文章的 OG 图。
- Twitter 卡片、链接预览图。
- 社交分享图形。
- 作者引言、证言或个人品牌卡片。
- 带品牌 Logo 的公司/产品卡片。
限制
- 输出尺寸固定为 1200×630 PNG，无例外。
- 不用于整页截图类需求。
- 必须满足 WCAG AA 对比度要求，不达标品牌色不得用于文字。
- 禁止使用占位文本。
- 该技能在单个 1200×630 PNG 处结束，不支持动画或多帧输出（需转交 visual-design）。
- 截图依赖 Playwright MCP、Playwright CLI 或已安装的 puppeteer；Playwright 浏览器安装可能需下载约 100MB。