用途：当用户要求生成社交媒体卡片、OG 图、Twitter 卡片、链接预览或社交分享图时使用；不适用于整页设计。
主要能力：输出固定 1200×630 PNG；提供三种布局模板——Centered（默认，仅标题或标题加短副标题）、Logo + Title（品牌卡片）、Avatar + Quote（作者引言或推荐语）。模板位于 assets/ 目录，分别为 centered.html、logo-title.html、avatar-quote.html。
使用方式：先从用户请求提取标题（必填）、副标题、品牌色、Logo 或头像；标题缺失时须询问。按内容选择布局变体，对用户文本转义（&、<、>、"），再按标题长度与字符类型选择字号：拉丁 ≤60 字符或 CJK/阿拉伯/天城文 ≤30 字符用 72px；61–100 或 31–50 用 56px；超过则用 44px。混合文字中 CJK 等字符按 2 个拉丁字符计算。随后读取对应模板并替换占位符，写入 /tmp/bs-social-card.html（Windows 为 %TEMP%/bs-social-card.html，回退为 <project-root>/.claude/tmp/bs-social-card.html）。截图优先使用 Playwright MCP，其次 Playwright CLI：npx playwright screenshot --viewport-size=1200,630 "file:///tmp/bs-social-card.html" bs-social-card.png；若未安装浏览器先运行 npx playwright install chromium（约下载 100MB）。再次为 Puppeteer 脚本（仅当项目已安装），最后可让用户手动截图。
校验：确认尺寸为 1200×630；用 Playwright 检查文本是否溢出，溢出则降一档字号重生成；检查无未替换的 {{TOKEN}} 或未剥离的 {{#BLOCK}} 标记；按布局检查副标题与色条、Logo 高度 48px、头像圆形与引言符号等。失败最多重试 3 次。
限制：文本须满足 WCAG AA 对比度（普通 4.5:1，大字号 3:1），默认 #1A1A1A 文字配 #FFFFFF 背景，或白字配 #0F172A；品牌色不达标时仅用于装饰元素。不得使用占位文本。该技能只输出单张 1200×630 PNG，动画或多帧输出需转交 bs-visual-design。