메뉴
从 URL 或文本生成可定制样式的信息卡片图片。先理解内容，再按密度/结构/情绪选择视觉形式与配色。默认输出与原文同语言的单语卡片到 ~/Downloads/infocard-img/。用法：/infocard <URL|文本> [--theme=guofeng|slate|sunset|coral|indigo|forest|purple|dashboard|editorial] [--width=1080] [--lang=auto|zh|en|both]
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/renky1025/agent-skills --skill infocard명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
| name | infocard |
| description | 从 URL 或文本生成可定制样式的信息卡片图片。先理解内容，再按密度/结构/情绪选择视觉形式与配色。默认输出与原文同语言的单语卡片到 ~/Downloads/infocard-img/。用法：/infocard <URL|文本> [--theme=guofeng|slate|sunset|coral|indigo|forest|purple|dashboard|editorial] [--width=1080] [--lang=auto|zh|en|both] |
| user_invocable | true |
| version | 6.7.0 |
没有"默认布局"。先读懂内容，再让视觉形式从内容的思想形状中长出来。
/infocard <URL|文本> [--theme=<theme>] [--width=<width>] [--output=<name>] [--lang=auto|zh|en|both]
| 参数 | 说明 | 默认 |
|---|---|---|
| 输入 | 网页链接或纯文本（必填） | — |
--theme | 配色：guofeng、slate、sunset、coral、indigo、forest、purple、dashboard、editorial(默认) | editorial |
--width | 图片宽度 | 1080 |
--output | 输出文件名（无扩展名） | 自动提取 |
--lang | 语言：auto(自动) / zh / en / both(双语) | auto |
输出：~/Downloads/infocard-img/{name}.png（双语为 _zh.png / _en.png，目录自动创建）。
0. 解析输入：提取首个非 -- 的 token 作输入；http(s):// 开头为 URL，否则为文本。--theme/--width/--output/--lang 取对应值，缺省如上。无输入则提示用户。
1. 获取内容
twitter tweet <URL>；GitHub → gh 或 Jina；微信公众号 → Exa MCP / Camoufox；通用 → curl -s "https://r.jina.ai/<URL>" 或 WebFetch。2. 提取元信息：标题(≤15字)、副标题(≤30字)、来源、核心要点、金句(<25字)、数据。 三类模式：概念解说（提问题 + 类比 + 机制，回答"为什么"）/ 金句（一句话主导，留白≥50%）/ 密集知识（分层编号，留白≤30%）。
内容硬规则（贯穿全程）
3. 三维判断
4. 输出决策（内部自检）：密度 / 结构 / 情绪 / 锚点 / 配色；发布类另列核心优势、对比数据、规格参数。
5. 布局：按结构选形式；dashboard 与 editorial 有专门规范（见「主题配色」）。
6. 语言：auto 按原文生成单语（中文占比>50% 判中文）；zh/en 跨语言须用 /translate-polisher（运行时依赖，未安装时降级为内部直译并标注"未校对"）翻译，严禁直译；术语/品牌名(Claude Code、HTML、MCP…)及无法准确对译的短语(one-shot、intent alignment)保留英文。
7. 生成 HTML（见下「HTML 规范」）。单语：中文 Noto Sans SC / 英文 Inter，写 /tmp/infocard_{name}.html；双语：先译后写，分别 _zh.html / _en.html。
8. 截图
mkdir -p ~/Downloads/infocard-img
node ~/.claude/skills/infocard/assets/capture.js /tmp/infocard_{name}.html ~/Downloads/infocard-img/{name}.png 1080 800 fullpage
# 双语：对 _zh.html / _en.html 各跑一次
capture.js 会强制清除 body 的 padding/margin/flex/min-height，并以 .card 定位边界。务必：
<body> 首子元素为 <div class="card">，所有内容在内。background 与固定 width:1080px；margin/padding 为 0。.card 设 width:1080px; box-sizing:border-box; 并承载全部 padding/布局。100vh/min-height。骨架：
<style>
body { background: var(--bg); width: 1080px; margin: 0; padding: 0; }
.card { width: 1080px; padding: 72px 64px 48px; box-sizing: border-box; color: var(--text-primary); font-family: ...; }
</style>
<body><div class="card"><!-- 内容 --></div></body>
布局：Header 只放标题/副标题；作者名置底栏(Footer, 12-13px, 次级色)；不显示来源/日期。代码块 white-space:pre-wrap。
图标：内联 SVG 雪碧图，禁止 CDN Web Component（<ion-icon> 截图会缺失）。在 <body> 前放 <svg style="display:none"><defs> 雪碧图，用 <svg class="icon"><use href="#i-xxx"/></svg> 引用；每区块至多 1 个图标。通用类：
.icon { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-0.125em; flex-shrink:0; pointer-events:none; }
雪碧图（按需取用）：
<svg style="display:none" xmlns="http://www.w3.org/2000/svg"><defs>
<symbol id="i-flash" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></symbol>
<symbol id="i-sparkles" viewBox="0 0 24 24"><path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z"/><path d="M5 17l1 2.5L8.5 20l-2.5 1L5 23l-1-2.5L1.5 20 4 19.5 5 17z"/><path d="M19 14l.5 1.5L21 16l-1.5.5L19 18l-.5-1.5L17 16l1.5-.5L19 14z"/></symbol>
<symbol id="i-layers" viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></symbol>
图标映射：观点/金句→i-bulb；特性→i-sparkles；步骤/流程→i-layers；对比→i-compare；数据→i-chart；代码→i-code；安全→i-shield；性能→i-flash/i-speed；总结→i-check；来源→i-book。
--bg: #F8FAFC
--text-primary: #0F172A
--text-secondary: #475569
--accent: #0F172A
--border: #E2E8F0
--bg: #FFF1F2
--text-primary: #4C0519
--accent: #E11D48
--border: #FFE4E6
--bg: #EEF2FF
--text-primary: #1E1B4B
--accent: #4F46E5
--border: #E0E7FF
--bg: #F0FDF4
--text-primary: #052E16
--accent: #16A34A
--border: #DCFCE7
--bg: #FFFAF4
--text-primary: #451A03
--accent: #EA580C
--border: #FFEDD5
--bg: #F6F1E7
--card-bg: #FFFFFF
--text-primary: #1A1A1A
--text-secondary: #5A544A
--accent: #15233F
--accent-light: #DDE7F0
--border: #D8CFC0
--highlight-bg: #F1ECDE
--dark-card: #15233F
--gold: #F5C518
--navy: #15233F
布局：无圆角无阴影，靠发丝线与留白分层。①报头 kicker(作者·来源)+描边胶囊按钮；②双色衬线大标题(英文墨黑/中文藏青,56-72px)；③导语+超大黄色数字锚点(如 10K+)；④发丝线分隔的四列元信息；⑤编号分区01-04(藏青大号Oswald)，末区反白(藏青底/黄号/奶白字)；⑥浅蓝引文块+藏青左线；⑦底部藏青反白总结条+署名。字体：标题/编号/引文衬线(Noto Serif SC、Georgia)，kicker/标签 Oswald，正文 Noto Sans SC/Inter。
--bg: #0F111A
--text-primary: #F0F0F5
--text-secondary: #8B8DA3
--accent: #A78BFA
--accent-light: #2A2C3D
--border: #1E2030
--highlight-bg: #181924
--dark-card: #1A1B26
--bg: #0A0A0A
--card-bg: #141414
--text-primary: #FFFFFF
--text-secondary: #A0A0A0
--accent: #4ADE80
--accent-light: rgba(74,222,128,0.1)
--border: #2A2A2A
--highlight-bg: #1A1A1A
--dark-card: #0F0F0F
--green: #4ADE80
--orange: #F59E0B
--blue: #3B82F6
布局：深色底+绿色强调；2-6 个编号区块(1,2,3)带边框；对比数据用表格/并排卡；顶部超大产品名(48-56px)；底部放定价/CTA/来源；区块间距16-24px。
--bg: #F5EDE0
--card-bg: #FAF3E7
--text-primary: #2D1F14
--text-secondary: #7A6A5A
--accent: #C5615C
--accent-light: rgba(197,97,92,0.15)
--border: #E2D4C2
--highlight-bg: #F0E6D6
--dark-card: #2D1F14
.card 才是卡片：间距全写在 .card，body 无 padding/居中/100vh。<ion-icon> CDN。/translate-polisher（运行时依赖，缺失时降级为内部直译并标注"未校对"），禁止直译；保真优先，难译处保留英文。--theme 时采用杂志风（纸色底+白卡、衬线标题、发丝线分层、无圆角无阴影）。--lang=both，不擅自生成两张。