bhamz-ux/agentic-quote-cards

名言卡片生成器 — 主 Agent 技能

技能功能

生成高质量的、像素完美的 1080×1350px（4:5 纵向比例） 深色模式名言卡片，包含：

• 作者透明肖像与自定义径向聚光灯效果动态融合。
• 智能排版自动缩放，避免文本换行或溢出。
• 带有品牌强调色的作者姓名和头衔模块。
• 通过 Playwright 进行确定性、高分辨率渲染和导出（零 AI 文本幻觉或字体变形）。

---

技能激活与前置条件

第 0 步：首次用户引导检查

每当触发此技能时，始终检查仓库根目录或当前工作区中是否存在 brand_config.json：

1. 如果 brand_config.json 不存在（或包含占位值）：
   • 立即按照 交互式引导协议 进行操作，然后再生成任何卡片。
   • 礼貌地向用户询问：
     • 作者姓名（例如 Alex Morgan）
     • 作者头衔/标语（例如 Founder & AI Engineer, HyperScale）
     • 品牌强调色 Hex 值（例如 #2FAD64 或 #6366F1）
     • 透明肖像 PNG 的路径。
   • 将这些保存到 brand_config.json。
   • 验证 Playwright 是否已安装（playwright install chromium）。
2. 如果 brand_config.json 存在：
   • 加载用户的品牌偏好，直接进入卡片生成。

---

动态布局与自适应设计系统

1. 动态排版自动缩放

在渲染前分析名言文本的字符数：

名言长度	.quote-text 字体大小	行高	下边距	最佳使用场景
短（< 45 字符）	52px – 56px	1.32	45px	简练一句或强势格言
中（45–85 字符）	40px – 44px	1.38	40px	标准多句洞察
长（> 85 字符）	32px – 36px	1.42	32px	详细技术或战略分析

规则： 使用 <span class="quote-highlight">关键词</span> 高亮 1–3 个关键高影响力词汇，应用品牌强调色。

2. 自适应肖像定位

检查作者肖像照片的尺寸和姿态：

• 默认（肖像居左，文本居右）：
  • .portrait-img：position: absolute; bottom: -2%; left: -8%; width: auto; height: 100%; max-height: 105%; object-fit: contain; object-position: bottom left; z-index: 2;
  • .content-section：position: absolute; top: 22%; right: 6%; width: 36%; z-index: 4; display: flex; flex-direction: column; justify-content: center;
• 反转（肖像居右，文本居左）：
  • 如果人物面朝左，则镜像布局：肖像在右侧（right: -8%），.content-section 在左侧（left: 6%; width: 36%）。
• 间距规则： 在肖像的主体轮廓与文本容器之间保持至少 60px 的可视间隙。文本和作者模块绝不能与主体的身体、手臂或配饰重叠。

3. 灯光与背景构图

• 基础画布： radial-gradient(circle at 35% 50%, #172230 0%, #080c12 90%)（或根据品牌主题自定义）。
• 聚光灯效果： 以作者头部为中心的圆形发光，使用品牌强调色渐变，透明度为 20%-25%。
• 底部无缝融合： 一个微妙的渐变叠加（linear-gradient(to top, #080c12 10%, rgba(8, 12, 18, 0.6) 50%, transparent 100%)）覆盖卡片底部 15%，柔和融合身体截断部分。

---

生成与导出工作流

遵循系统化的 4 步执行：

graph TD
    A["接收名言和作者意图"] --> B["加载 brand_config.json"]
    B --> C["编译包含 Base64 资源与缩放 CSS 的 HTML 模板"]
    C --> D["保存到临时预览文件（例如 scratch/quote_card.html）"]
    D --> E["运行 Playwright 导出器: python export.py"]
    E --> F["视觉审核: 确认文本清晰且零重叠"]
    F --> G["向用户展示最终 1080x1350 PNG 图像"]

第 1 步：准备资源与数据

• 读取 brand_config.json 中的 author.name、author.title、theme.accent_color 和 assets.portrait_path。
• 将肖像图像转换为内联 Base64 字符串（data:image/png;base64,...），确保 HTML 完全自包含。

第 2 步：编译 HTML 画布

• 填充 template.html：
  • Base64 肖像图片。
  • 格式化的名言，包含 <span class="quote-highlight">...</span>。
  • 作者模块，带有动态左边框，颜色为 theme.accent_color。
  • 注入动态字体大小 CSS 规则。
• 将编译后的 HTML 保存到临时预览路径（例如 scratch/quote_card.html）。

第 3 步：无头 Playwright 导出

运行捆绑的导出引擎：

python .agents/skills/quote-card/export.py --input scratch/quote_card.html --output output/quote_card.png

第 4 步：质量与视觉审核（强制）

在向用户展示最终图像之前，必须验证输出。

• 完美原则： 代理必须检查导出的图像，确认文本块（名言和标题）与作者轮廓之间有充足的空间。
• 如果存在任何重叠或文本离图像太近，则必须调整 HTML 中的 .content-section 宽度/边距或字体大小，并重新运行 export.py。
• 在确定名言卡片布局完美且专业之前，不要返回给用户。
• 确认 Google Font（例如 Outfit）已加载且清晰。
• 确认输出分辨率精确为 1080×1350px。