info-card-designer
This skill transforms any text or information into a magazine-quality HTML info card, automatically capturing screenshots for easy sharing on platforms like X (Twitter), WeChat, and Xiaohongshu. It features a distinctive Swiss Internationalism design style and responsive layouts.
About this skill
The Info Card Designer skill is an AI agent capability designed to transform arbitrary text or information into visually striking HTML information cards with a distinct magazine aesthetic. It intelligently analyzes content density—whether low (one core idea), medium (2-4 key points), or high (5+ key points)—to adapt its layout, employing large typefaces and strong typographical tension reminiscent of Swiss Internationalism. The skill adheres to strict design specifications, including responsive font sizing using `vw` units and specific background colors, ensuring a polished and consistent output. A core function of this skill is its automated screenshot capability. After generating the HTML card, it leverages Chrome DevTools MCP to capture high-quality PNG images, carefully adjusting the `devicePixelRatio` based on the card's specified width (480px, 600px, or 900px) to optimize output image dimensions for various social platforms. For content that results in excessively tall cards (over 1200px), the skill automatically splits the screenshot into multiple, manageable images, making it perfectly suited for multi-image posts on platforms like X (Twitter), WeChat, and Xiaohongshu. Users benefit from this skill by rapidly producing professional-grade visual content without manual design effort. It ensures information is presented clearly and engagingly, adhering to platform-specific sharing requirements while maintaining brand consistency and visual appeal. This tool is invaluable for content creators, marketers, and anyone needing to quickly disseminate key messages in an impactful, shareable format.
Best use case
The primary use case for this skill is to quickly and effortlessly generate aesthetically pleasing, shareable information cards for social media platforms. Content creators, marketers, educators, and anyone looking to distill complex information into easily digestible and visually engaging formats will benefit most, enabling them to enhance their online presence and improve content engagement.
This skill transforms any text or information into a magazine-quality HTML info card, automatically capturing screenshots for easy sharing on platforms like X (Twitter), WeChat, and Xiaohongshu. It features a distinctive Swiss Internationalism design style and responsive layouts.
Users should expect one or more high-resolution PNG image files, each presenting the input text as a stylish, magazine-quality information card, ready for social media sharing.
Practical example
Example input
make info card: AI代理技能的重要性：AI代理正在改变软件开发，自动化任务，从规划到部署。它们提高了效率，减少了错误，并加速了创新周期。开发者可以专注于更复杂的决策，而代理处理重复性工作。未来，AI代理将成为开发流程的核心，推动新的技术突破。
Example output
```json
{
"message": "信息卡片已生成并保存到 /tmp/info-card-AI代理技能.png",
"files": ["/tmp/info-card-AI代理技能.png"]
}
```When to use this skill
- When sharing key information or summaries on social media (e.g., X, WeChat, Xiaohongshu).
- When needing professional, magazine-style visuals for textual content without manual design.
- When automating content formatting, screenshot generation, and image splitting for social posts.
- When you want to transform plain text into visually impactful and shareable content.
When not to use this skill
- When raw text output is preferred without any visual formatting.
- When highly customized or complex graphic design (beyond the predefined info card style) is required.
- When an interactive web page or complex multimedia elements are needed in the output.
- When offline functionality is critical, as it relies on Chrome DevTools for screenshots.
How info-card-designer Compares
| Feature / Agent | info-card-designer | Standard Approach |
|---|---|---|
| Platform Support | Claude | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | medium | N/A |
Frequently Asked Questions
What does this skill do?
This skill transforms any text or information into a magazine-quality HTML info card, automatically capturing screenshots for easy sharing on platforms like X (Twitter), WeChat, and Xiaohongshu. It features a distinctive Swiss Internationalism design style and responsive layouts.
Which AI agents support this skill?
This skill is designed for Claude.
How difficult is it to install?
The installation complexity is rated as medium. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
Best AI Skills for Claude
Explore the best AI skills for Claude and Claude Code across coding, research, workflow automation, documentation, and agent operations.
AI Agent for Product Research
Browse AI agent skills for product research, competitive analysis, customer discovery, and structured product decision support.
ChatGPT vs Claude for Agent Skills
Compare ChatGPT and Claude for AI agent skills across coding, writing, research, and reusable workflow execution.
SKILL.md Source
# Info Card Designer
将任意内容转化为杂志质感信息卡，自动截图 + 超长分割，适配 X/Twitter、小红书分享。
## 工作流
### Step 1：分析内容密度
- **低密度**（1 个核心观点）→ 大字符主义布局
- **中密度**（2-4 要点）→ 标准单栏布局
- **高密度**（5+ 要点）→ 多栏网格布局
### Step 2：生成 HTML
读取 `references/design-spec.md` 获取完整规范。
**硬性约束**：
- 卡片宽度：默认 **600px**，可指定 480 / 600 / 900（用户说"480宽"/"900宽"时生效）
- `<meta name="viewport" content="width=[指定宽度]">` 防缩放
- 背景色 `#f5f3ed`
- 截图时 `resize_page` width 设为指定宽度
**字号用 vw 单位，随宽度自动缩放**：
- 主标题：`font-size: clamp(40px, 13vw, 130px)` — 480px→62px / 600px→78px / 900px→117px
- 条目标题：`font-size: clamp(16px, 4vw, 40px)` — 480px→19px / 600px→24px / 900px→36px
- 正文：`font-size: clamp(14px, 3.2vw, 24px)` — 480px→15px / 600px→19px / 900px→28px
- 辅助/标签：`font-size: clamp(11px, 2.2vw, 16px)`
**内容原则（强制）**：
- 卡片内容必须 100% 来自用户提供的原文/URL/文本，严禁自行编造或使用占位符
- 标题、描述、来源、金句均须与原文一致，Hook 改写只改表达方式，不改事实
**描述风格（Hook 模式，默认开启）**：
- 每条描述改写为 **10-20 字的钩子句**，有信息量 + 有冲击感
- 保留核心事实，用主动语态，让读者想点进去看
- 用户说"保持原文"或"不改描述"时关闭
保存路径：`/tmp/info-card-[关键词].html`
### Step 3：截图（必须执行）
优先用 **Chrome DevTools MCP**，按卡片宽度选择对应 devicePixelRatio（确保输出 PNG 落在 1200-1800px 甜区）：
| 卡片宽度 | devicePixelRatio | 输出 PNG 宽度 |
|---------|-----------------|-------------|
| 480px | **3x** | 1440px |
| 600px | **2x** | 1200px |
| 900px | **2x** | 1800px |
1. `navigate_page` → `file:///tmp/info-card-xxx.html`
2. `emulate` → viewport=`[宽度]x900x[倍率]`（e.g. 480px 卡片用 `480x900x3`，600px 用 `600x900x2`）
3. `resize_page` → width=[宽度], height=900
4. `take_screenshot` → fullPage=true, filePath=[初始路径]
> **为什么不统一 3x**：900px × 3x = 2700px，文件过大且社交平台会压缩，收益递减；480px 因 CSS 宽度小，3x 才能保证 1440px 输出不虚糊。
### Step 4：超长分割
截图后检查图片高度。**若高度 > 1200px**，执行分割：
```bash
python3 ~/.claude/skills/info-card-designer/scripts/split_card.py [图片路径] 1200
```
分割后输出 `card-1.png`, `card-2.png` ... 等文件。
### Step 5：整理并输出
**保存路径规则**：
```
~/乔木新知识库/60-69 素材/65 附件库/info-cards/
└── [YYYYMMDD]-[来源]-[主题关键词]/
├── card.png # 未分割时
├── card-1.png # 分割时
└── card-2.png
```
示例：`info-cards/20260316-wisereads-134/card-1.png`
> 文件夹名格式：`日期-来源-主题`，一目了然
告知用户：图片路径 + 共几张
---
## 设计速查
完整规范见 `references/design-spec.md`。
| 场景 | 布局 | 主标题字号 | 正文字号 |
|------|------|-----------|---------|
| 低密度 | 大字符主义 | 72-120px | 20px |
| 中密度 | 标准单栏 | 48-56px | 18px |
| 高密度 | 2-3 栏网格 | 36-44px | 16px |
**字体**：标题 `Noto Serif SC`；正文 `Inter / Noto Sans SC`
**配色**：靛蓝 `#1a3a6b`（知识）/ 深红 `#c0392b`（警示）/ 墨绿 `#1a4a3a`（生活）/ 深金 `#8b6914`（财经）Related Skills
tech-blog
Generates comprehensive technical blog posts, offering detailed explanations of system internals, architecture, and implementation, either through source code analysis or document-driven research.
Skill: Export
## Purpose
x-article-publisher
Publish Markdown articles to X (Twitter) Articles editor with proper formatting. Use when user wants to publish a Markdown file/URL to X Articles, or mentions "publish to X", "post article to Twitter", "X article", or wants help with X Premium article publishing. Handles cover image upload and converts Markdown to rich text automatically.
docx
Create, edit, and analyze Word documents with tracked changes support
ccg
The AI Course Content Generator (CCG) creates complete online courses, including structured curricula, lesson scripts, audio, slides, and videos, leveraging the Gemini API for comprehensive content generation.
writing-content
An interactive content creation skill inspired by the Julian Shapiro framework, featuring research, scoring, and AI-slop detection.
---
name: article-factory-wechat
humanizer
Remove signs of AI-generated writing from text. Use when editing or reviewing text to make it sound more natural and human-written. Based on Wikipedia's comprehensive "Signs of AI writing" guide. Detects and fixes patterns including: inflated symbolism, promotional language, superficial -ing analyses, vague attributions, em dash overuse, rule of three, AI vocabulary words, negative parallelisms, and excessive conjunctive phrases.
linkedin-cli
A bird-like LinkedIn CLI for searching profiles, checking messages, and summarizing your feed using session cookies.
小红书长图文发布 Skill
## 概述
openclaw-youtube
YouTube SERP Scout for agents. Search top-ranking videos, channels, and trends for content research and competitor tracking.
openclaw-media-gen
Generate images & videos with AIsa. Gemini 3 Pro Image (image) + Qwen Wan 2.6 (video) via one API key.