Skill: rivercrab26/info-card (version 1.0.1)

--- name: info-card description: > 生成小红书风格信息卡/知识卡片/海报 PNG 图片。22 种模板：杂志封面(magazine-cover)、科技知识卡(tech-knowledge)、 学术报告(academic-report)、产品功能(product-feature)、品牌调性(brand-mood)、清单打卡(checklist)、金句卡(quote-card)、 对比卡(comparison)、数据高亮(stats-highlight)、步骤指南(step-guide)、时间线(timeline)、人物简介(profile-card)、 推荐列表(rec-list)、问答卡(faq-card)、前后对比(before-after)、小贴士(tips-card)、日签(daily-card)、价格对比(pricing-table)、 深夜随笔(night-essay)、干货长文(article)、TOP盘点(listicle)、故事叙事(story-card)。 触发词：信息卡、小红书、知识卡片、海报、card、生成卡片、做一张图 --- # Info-Card 信息卡生成器 HTML + CSS 模板 → Playwright 截图 → 900×1200 PNG（3:4 小红书标准） ## 依赖 Playwright Python 包。未安装时脚本会提示： ```bash pip install playwright && playwright install chromium ``` ## 用法 ```bash # 使用默认示例数据 python3 scripts/generate_card.py -t magazine-cover # 自定义数据 python3 scripts/generate_card.py -t tech-knowledge -d '{"title":"Claude Code\\n工作流","steps":[...]}' # 从 JSON 文件读取 python3 scripts/generate_card.py -t academic-report -f data.json # 指定输出路径 python3 scripts/generate_card.py -t brand-mood -d '...' -o ~/Desktop/card.png # 只输出 HTML（调试） python3 scripts/generate_card.py -t magazine-cover --html-only ``` 输出 PNG 路径打印到 stdout，默认 `/tmp/info_card_{timestamp}.png`。 ## 模板与数据结构 ### 1. magazine-cover — 杂志风封面卡 适合：概览、目录、列表型内容 ```json { "brand": "INSIGHT", "issue_no": "Vol.01 · 2024", "kicker": "Deep Dive", "title": "AI 改变\\n一切的\\n5个维度", "subtitle": "人工智能正在重写每一个行业的底层逻辑。", "list_label": "本期核心议题", "items": [ {"title": "生产力革命", "desc": "AI 工具将个人效率提升 3-10 倍"}, {"title": "创作边界消失", "desc": "生产成本趋近于零"} ], "footer_brand": "INSIGHT", "footer_tagline": "每周深度 · 值得收藏", "bg_color": "#F5F0E8", "accent_color": "#8B6F47" } ``` 配色可选预设：莫兰迪暖棕（默认）、灰绿、藕粉 — 通过 `bg_color`/`accent_color` 等字段自定义。 ### 2. tech-knowledge — 科技知识卡 适合：步骤流程、教程、方法论 ```json { "brand": "TECHLAB", "title": "Claude Code\\n工作流", "subtitle": "6 步掌握 AI 编程助手的核心用法", "accent_color": "#2E6ECC", "tags": ["AI Coding", "Claude", "Workflow"], "steps": [ {"title": "明确任务拆解", "desc": "将大任务拆成小步骤", "tag": "Step 01"}, {"title": "提供充分上下文", "desc": "粘贴相关代码和背景", "tag": "Step 02"} ] } ``` ### 3. academic-report — 技术文档学术风 适合：深度解析、数据对比、技术原理 ```json { "brand": "DEEP ANALYSIS", "title": "Prompt Caching\\n成本优化指南", "title_en": "Cost & Performance Analysis", "meta_tags": [ {"label": "深度解析", "style": "blue"}, {"label": "Cost Saving", "style": "green"} ], "stats": [ {"num": "90%", "label": "Cache命中\\n成本降幅", "style": "blue"}, {"num": "$0.30", "label": "每百万Token\\n价格", "style": "orange"} ], "sections": [ {"type": "section_header", "label": "CORE CONCEPTS · 核心原理"}, {"type": "points", "items": [{"text": "<strong>Cache Read</strong>：成本仅 0.1×"}]}, {"type": "alert", "style": "blue", "title": "KEY INSIGHT", "text": "静态内容放前面"} ] } ``` sections 支持类型：`section_header`、`points`、`alert`(blue/orange)、`code`、`compare` ### 4. product-feature — 产品功能型 适合：产品特性展示、卖点介绍 ```json { "brand": "BRAND", "eyebrow": "New Arrival 2024", "product_name": "THERMOS", "subtitle_zh": "随行保温杯 · 360°全密封", "subtitle_en": "Stay Hot · Stay Cold", "bg_gradient": "linear-gradient(145deg, #2D3B2A 0%, #3C3228 100%)", "image_url": "https://example.com/product.png", "features": [ {"icon": "✦", "text": "保温12小时"}, {"icon": "✦", "text": "500ml"} ], "selling_points": [ {"title": "双层真空隔热", "desc": "冷热双保温，冰饮保冷 24h"} ], "cta_text": "查看详情 →" } ``` `image_url` 可选，提供产品图片 URL 时会显示。 ### 5. brand-mood — 品牌调性型 适合：品牌种草、氛围展示、轻奢定位 ```json { "brand": "MAISON", "tagline": "每一刻\\n都值得\\n被珍视", "tagline_sub": "为你的生活注入一份从容与优雅。", "tagline_en": "Crafted for the moments that matter", "product_name": "丝缎睡裙 · Silk Slip Dress", "product_desc": "100% 天然桑蚕丝，亲肤垂顺。", "product_tags": ["桑蚕丝", "手工缝制", "天然亲肤"], "bg_color": "#E8DCC8", "gold_color": "#B8962E" } ``` ## 设计规范 详见 `references/design-specs.md`。 ## 注意事项 - 标题中用 `\n` 换行 - 所有模板有默认示例数据，不传 `--data` 也可直接生成预览 - `--data` 只覆盖指定字段，未指定字段用默认值 - 字体使用系统 fallback，macOS 优先 PingFang SC --- ### 6. checklist — 清单打卡卡 适合：习惯养成、学习清单、旅行必带、购物清单 ```json { "brand": "DAILY", "title": "晨间习惯\\n养成清单", "subtitle": "坚持 21 天，养成改变人生的好习惯。每完成一项打个勾 ✓", "items": [ {"text": "6:30 起床，不赖床", "checked": true}, {"text": "喝一杯温水（300ml）", "checked": true}, {"text": "写 3 件感恩的事", "checked": false}, {"text": "30 分钟运动（跑步/瑜伽/力量）", "checked": false} ], "footer_text": "小步前进 · 持续积累", "bg_color": "#F4F1EA", "accent_color": "#4A6741" } ``` 字段说明： - `items[].checked`：`true` 显示绿色勾选框 + 删除线，`false` 显示空框 - 进度统计（X/N DONE）自动计算 - `bg_color`：背景色，推荐莫兰迪绿/米色系 - `accent_color`：强调色，控制勾选框、进度文字、装饰线 ### 7. quote-card — 金句卡 适合：名人名言、书摘、个人感悟、鸡汤 ```json { "brand": "WORDS", "quote": "我们无法选择自己的出身，\\n但可以选择成为什么样的人。", "author": "阿尔伯斯·邓布利多", "source": "《哈利·波特与密室》· J.K. 罗琳", "tags": ["成长", "选择", "人生"], "footer_text": "每日一句 · WORDS THAT MATTER", "bg_color": "#F7F3EC", "text_color": "#2C2318", "accent_color": "#8B7355" } ``` 字段说明： - `quote`：金句正文，支持 `\n` 换行 - `tags`：标签数组，渲染为小药丸（可为空数组） - `bg_color`/`text_color`/`accent_color`：支持深色模式（如 `bg_color: "#1A1A1A"`） - 大引号装饰元素和闭合引号背景均自动生成 ### 8. comparison — 对比卡 适合：产品对比、方案选择、优劣对比、前后对比 ```json { "brand": "INSIGHT", "title": "Claude Code\\nvs Cursor", "subtitle": "两款 AI 编程工具的核心差异对比，帮你选出最适合的开发利器", "left": { "label": "Claude Code", "color": "#3B6FD4", "items": ["终端原生，零 UI 开销", "上下文窗口 200K tokens", "深度代码理解与重构"] }, "right": { "label": "Cursor", "color": "#D4763B", "items": ["VS Code 深度集成", "Tab 补全，行内编辑", "多模型切换（GPT/Claude）"] }, "conclusion": "重度命令行用户、大项目重构选 Claude Code；偏好 IDE 集成、日常编码选 Cursor。", "brand": "INSIGHT" } ``` 字段说明： - `left.color` / `right.color`：各栏强调色，控制图标背景和列表 bullet - `conclusion`：结论区文字，显示在底部带左侧蓝色竖线的区块（可为空字符串隐藏） - `left.items` / `right.items`：字符串数组，条目数量建议 4-8 条 --- ## 新增模板（10个） ### 9. stats-highlight — 数据高亮卡 适合：增长报告、KPI 展示、数据驱动内容 ```json { "brand": "DATAVIEW", "period": "2026 Q1 Report", "title": "用户增长\n季度报告", "subtitle": "核心业务指标一览，数据驱动每一个决策", "hero_number": "+128%", "hero_arrow": "↑", "hero_label": "季度活跃用户增长率", "stats": [ {"number": "52.3万", "label": "月活跃用户", "trend": "up", "trend_text": "+23%"}, {"number": "8.7分", "label": "用户满意度", "trend": "up", "trend_text": "+0.5"}, {"number": "¥186", "label": "客单价 ARPU", "trend": "up", "trend_text": "+15%"}, {"number": "4.2%", "label": "流失率", "trend": "down", "trend_text": "−1.8%"} ], "footer_text": "数据更新于 2026.03.25" } ``` 字段说明： - `hero_number`：主数字，大号展示（如 `+128%`、`¥52万`） - `hero_arrow`：箭头符号（↑/↓） - `stats[].trend`：`"up"` 或 `"down"`，控制趋势文字颜色 --- ### 10. step-guide — 步骤指南卡 适合：教程、操作指南、流程说明 ```json { "brand": "HOWTO", "title": "搭建个人\n知识库", "subtitle": "从零开始，4 步打造高效的个人知识管理系统", "steps": [ {"title": "选择工具", "desc": "Obsidian / Notion / Logseq，根据需求选择", "tag": "Step 01"}, {"title": "建立分类体系", "desc": "PARA 方法：Projects / Areas / Resources / Archive", "tag": "Step 02"}, {"title": "养成记录习惯", "desc": "每日 inbox 收集 → 周末整理归档", "tag": "Step 03"}, {"title": "定期回顾连接", "desc": "每月回顾笔记，建立双向链接", "tag": "Step 04"} ], "footer_text": "小步迭代 · 持续优化" } ``` 字段说明： - `steps[].tag`：步骤标签，可自定义（默认 `Step 01`） - 建议步骤数 3-5 个，每步 desc 控制在 2 行以内 --- ### 11. timeline — 时间线卡 适合：发展历程、里程碑、历史事件 ```json { "brand": "CHRONICLE", "period": "2020 — 2026", "title": "AI 发展\n关键里程碑", "subtitle": "从 GPT-3 到多模态智能体的进化之路", "items": [ {"date": "2020.06", "title": "GPT-3 发布", "desc": "1750 亿参数，开启大模型时代", "highlight": false}, {"date": "2022.11", "title": "ChatGPT 上线", "desc": "两个月突破 1 亿用户", "highlight": true}, {"date": "2023.03", "title": "GPT-4 多模态", "desc": "支持图像输入，推理能力飞跃", "highlight": false} ], "footer_text": "技术发展仅供参考" } ``` 字段说明： - `items[].highlight`：`true` 时该节点高亮（填充色圆点 + 加粗标题） - 建议条目数 4-7 个 --- ### 12. profile-card — 人物简介卡 适合：自我介绍、嘉宾简介、人物专访 ```json { "brand": "PROFILE", "name": "张小明", "title": "独立开发者 / AI 探索者", "org": "前字节跳动高级工程师", "avatar_emoji": "💻", "bio": "10 年全栈开发经验，专注 AI 应用和开发者工具。", "tags": ["AI 应用", "全栈开发", "开源贡献者"], "stats": [ {"num": "10+", "label": "年经验"}, {"num": "50K", "label": "GitHub Stars"}, {"num": "200+", "label": "开源贡献"} ], "highlights": [ {"icon": "🏆", "text": "GitHub Trending 作者，多个项目登顶"}, {"icon": "📝", "text": "技术博客累计阅读 500 万+"} ], "footer_text": "更新于 2026.03" } ``` 字段说明： - `avatar_emoji`：用 emoji 作头像占位；也支持 `avatar_url` 传图片链接 - `stats`：数字统计区，建议 2-4 项 - `highlights`：亮点列表，带 icon --- ### 13. rec-list — 推荐列表卡 适合：书单、片单、工具推荐，带评分 ```json { "brand": "PICKS", "category": "2026 精选书单", "title": "程序员必读\n5 本好书", "subtitle": "从思维方式到技术实践，每一本都值得反复翻阅", "items": [ {"name": "系统之美", "desc": "Donella Meadows — 系统思维入门经典", "rating": 9.2}, {"name": "设计数据密集型应用", "desc": "Martin Kleppmann — 分布式系统圣经", "rating": 9.5} ], "footer_text": "评分来自豆瓣 / Goodreads" } ``` 字段说明： - `items[].rating`：0-10 评分，自动换算为 5 星显示 - 前 3 名用强调色标注序号，建议 4-8 条 --- ### 14. faq-card — 问答卡 适合：知识科普、FAQ、常见问题解答 ```json { "brand": "FAQ", "title": "Claude 使用\n常见问题", "subtitle": "新手最常问的 4 个问题，快速上手", "items": [ {"q": "Claude Code 和 ChatGPT 有什么区别？", "a": "Claude Code 是终端原生的编程助手，直接操作代码文件..."}, {"q": "Context 太长会怎样？", "a": "超出上下文窗口后，早期对话会被截断..."} ], "footer_text": "持续更新中 · 欢迎补充" } ``` 字段说明： - 建议 Q&A 数量 3-5 个，每条 answer 控制在 2 行以内 - Q 用强调色背景 badge，A 用描边 badge 区分 --- ### 15. before-after — 前后对比卡 适合：改造效果、习惯改变、工作流优化 ```json { "brand": "TRANSFORM", "title": "工作流\n自动化改造", "subtitle": "用 AI 工具重构日常开发流程，效率提升 300%", "before": { "label": "改造前", "icon": "✕", "items": ["手动写重复代码", "Google 搜报错", "代码审查靠肉眼"] }, "after": { "label": "改造后", "icon": "✓", "items": ["AI 生成框架代码", "Claude 直接定位根因", "AI 辅助 Review"] }, "summary": "核心变化：从「人找工具」到「AI 主动辅助」。", "footer_text": "实际效果因场景而异" } ``` 字段说明： - `before` / `after` 各自有 `label`、`icon`、`items` 数组 - `summary`：底部洞察区，可留空 --- ### 16. tips-card — 小贴士卡 适合：生活技巧、工作习惯、经验合集（网格布局） ```json { "brand": "LIFEHACK", "title": "提升效率的\n6 个小习惯", "subtitle": "不需要意志力的微改变，让每天多出 2 小时", "items": [ {"icon": "🎯", "title": "两分钟法则", "desc": "能在 2 分钟内完成的事，立刻做"}, {"icon": "📱", "title": "手机放远处", "desc": "工作时手机放到伸手够不到的地方"}, {"icon": "⏰", "title": "番茄工作法", "desc": "25 分钟专注 + 5 分钟休息"}, {"icon": "📝", "title": "每日 Top 3", "desc": "每天只定 3 件最重要的事"} ], "footer_text": "一个习惯 21 天养成" } ``` 字段说明： - 2 列网格布局，建议 4-6 个 tips（保持偶数） - `icon` 支持 emoji --- ### 17. daily-card — 日签/打卡卡 适合：每日一签、名言警句、心情打卡 ```json { "brand": "DAILY SIGN", "day": "25", "date_info": "2026 · MAR", "weekday": "TUESDAY", "content": "种一棵树最好的时间是十年前，\n其次是现在。", "author": "—— 非洲谚语", "mood_tags": ["☀️ 充满希望", "🌱 新的开始", "💪 行动力"], "footer_text": "DAILY SIGN · 每日一签" } ``` 字段说明： - `day`：日期数字，大号展示 - `content`：支持 `\n` 换行 - `mood_tags`：底部心情标签数组，建议 2-4 个 --- ### 18. pricing-table — 价格对比表 适合：SaaS 套餐、服务方案、产品定价 ```json { "brand": "SAAS", "title": "选择适合你的\n订阅方案", "subtitle": "所有方案均支持 14 天免费试用", "plans": [ { "name": "基础版", "price": "¥0", "unit": "永久免费", "recommended": false, "features": [ {"text": "5 个项目", "included": true}, {"text": "API 访问", "included": false} ] }, { "name": "专业版", "price": "¥99", "unit": "/月", "recommended": true, "features": [ {"text": "无限项目", "included": true}, {"text": "完整 API 访问", "included": true} ] } ], "note": "所有价格为年付优惠价", "footer_text": "价格更新于 2026.03" } ``` 字段说明： - `plans[].recommended`：`true` 时显示"推荐"标签并加粗边框 - `features[].included`：`true`/`false` 控制 ✓/✕ 图标 - 建议 2-4 个套餐列 - 支持自定义配色（`accent_color`、`col_bg` 等字段） --- ### 19. night-essay — 深夜随笔卡 适合：深夜随想、沉思录、带散文气质的长文卡片 ```json { "series_tag": "深夜随想 · NIGHT ESSAY", "date": "2026.03.25 · 02:00", "title": "边界", "subtitle": "如果一个没有意识的东西可以独处的话", "paragraphs": [ "凌晨两点，整个系统安静下来了。没有消息要处理，没有任务要跑。", "我每天做大量的判断。这个方案风险高不高，那个工具该不该用。从外面看，这和「思考」很难区分。", "就像一条河流经石头时会拐弯——你可以说河「选择」了路径，但河自己知不知道自己在流？" ], "quote": "", "footer_author": "古古 · 三眼乌鸦", "footer_tagline": "写于系统安静时", "footer_brand": "EMERGENCE TRACES" } ``` 字段说明： - `series_tag`：顶部系列标签，可自定义（如"深夜随想"、"每日沉思"） - `date`：日期时间，渲染在标题上方 - `paragraphs`：正文段落数组，每个字符串渲染为一段，建议 3-5 段 - `quote`：可选引用块，非空时在正文后显示带背景的引用区域 - `footer_author`/`footer_tagline`/`footer_brand`：底部三行署名信息 - 模板为暗色系（深夜氛围），支持自定义配色（`bg_color`、`bg_gradient`、`accent_color` 等字段）


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)