qiaomu-info-card-designer skill
A skill that turns text or a link into a magazine-style info card and shoots a PNG with Playwright, splitting tall ones into parts
- 277 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill runs curl and Python scripts, drives a headless browser and writes PNG and HTML files to disk
- The page address and text go to the third-party services `r.jina.ai` and `defuddle.md`
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/qiaomu-info-card-designerDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill runs curl and Python scripts, drives a headless browser and writes PNG and HTML files to disk
- The page address and text go to the third-party services `r.jina.ai` and `defuddle.md`
This is third-party code. Review the repository files before installing.
What it does
The `qiaomu-info-card-designer` skill takes text, a topic or a link, picks out the main idea and four to six key points, lays them out as an HTML card in a Swiss-typography, magazine style and shoots it to PNG with the Playwright headless browser. The result is meant for posting on X, WeChat and Xiaohongshu. The skill reads links itself: article pages and X posts through `r.jina.ai` with `defuddle.md` as a fallback, arXiv papers through the HTML version with a PDF fallback, WeChat articles through the `markdown-proxy` script when it is installed. Card width is set in words in the request: 480, 600 by default, or 900 pixels. A card taller than 1200 pixels is cut into several images by the `split_card.py` script. Hook mode is on by default: point descriptions are rewritten into short punchy phrases of 10–20 characters. Content comes only `from` the supplied material, and figures keep their original hedges such as "about" and "reportedly".
Who it is for. Authors who share digests of articles and research on social media as a picture instead of a link.
Good fit when
- A long article or an X thread must be squeezed into one picture with the main points and figures
- You want to show colleagues an arXiv paper as a single card with the conclusions
- A card comes out too tall and has to be cut into several frames for a feed
- Descriptions must stay verbatim: `hook` mode is switched off by asking to keep the original
Not a fit when
- You need an interactive diagram of how a system or algorithm works: SKILL.md sends such tasks to another skill, `anatomy`
- You need a data report as a web page: the author points to `qiaomu-chart-report` for that
- Playwright and Chromium cannot be installed: without them the skill does not shoot a PNG
Example request
Make an info card `from` this article https://example.com/post, width 480Limitations
- Python 3, Playwright with Chromium, Pillow and NumPy are required; without Pillow and NumPy tall cards are not split.
- The bundled fonts (TsangerJinKai and Noto Serif SC) are chosen for Chinese text, and the README does not say how a Russian card looks.
- Links are read by the third-party services `r.jina.ai` and `defuddle.md`, so the page text goes to their servers.
- The README gives the address `joeseesun/info-card-designer`; the repository is now `qiaomu-info-card-designer` and GitHub redirects the request.
How to disable. Remove the skill by deleting the `qiaomu-info-card-designer` folder `from` the agent's skills directory. Playwright, Pillow and NumPy are removed separately with pip3 uninstall.
FAQ
How do I install the skill?
Run npx skills add `joeseesun/info-card-designer`. The address comes `from` the README; the repository is now called `qiaomu-info-card-designer`, but GitHub redirects the old name.
How do I switch off rewriting descriptions into short phrases?
Hook mode is turned off by asking to keep the original text: the README triggers are in Chinese ("保持原文", "不改描述") and "keep the original descriptions" in English. Add the English wording to a Russian request.
How wide will the card be?
Widths of 480, 600 and 900 pixels are available, 600 by default. The shot is taken at double density, so 600 pixels give a picture 1200 wide. Name the width in the request, for example "make the card 480 wide".
What if the script complains about Playwright or PIL?
Run pip3 install playwright and python3 -m playwright install chromium. On No module named PIL install pip3 install Pillow numpy. The README problems table lists the same commands.
What if the card contains invented data?
Send the source link or paste the text straight into the request and run the skill again: it must take content only `from` the supplied material.
Discussion
No questions or reviews yet.
Related
SkillsAn agent skill that builds a dense, magazine-style information card from text and returns it as HTML and PNG
Agent skill that builds social card carousels and paired covers from an article, screenshots, notes or video in two visual systems
The skill lays an article or case out as a 3:4 Xiaohongshu carousel from 20 templates: storyboard first, then PNG and HTML.
A WeChat article layout skill: turns Markdown into paste-ready HTML with inlined styles that survives pasting into the official account editor
Eleven skills for Claude Code and Codex turn an article or video into Xiaohongshu cards, long images and a narrated short video.
A skill reads your article, asks about style and outputs a ready prompt for a Xiaohongshu or WeChat cover in 10 compositions
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| qiaomu-info-card-designer (this card) | no | 277 | |
| infocard-skills | no | 517 | another author, also a magazine-style card; here the focus is on reading links, three widths and splitting tall cards |
| qiaomu-design | no | 685 | the same author, but a skill about interface design rather than cards from text |
README in short
The README is bilingual. It covers features, a dependency list with check commands, trigger phrases, width options, a table of common problems and the design inspiration. A block about the author comes first.
README badge
Original SKILL.md
---
name: qiaomu-info-card-designer
description: |
将任意文本/URL/信息转化为杂志质感 HTML 信息卡片，并自动截图保存为图片。
支持直接输入 URL（X/Twitter、网页文章等），自动抓取内容、提炼要点、生成卡片。
适合分享到 X (Twitter)、微信、小红书等平台。
触发词："生成信息卡"、"做张信息卡"、"把这段内容做成卡片"、"信息卡片"、"make info card"、"generate card"、"把这个链接做成卡片"。
卡片特点：大字号、强排版张力、瑞士国际主义 + 杂志质感风格，生成后自动截图，超长智能分割输出图片。
不用于讲解“某个系统/算法如何运作”的交互式等距机制图（交给 anatomy）、数据报告网页（交给 qiaomu-chart-report）或可编辑白板画布（交给 qiaomu-tldraw-skill）。
---
# Info Card Designer
将任意内容转化为杂志质感信息卡，自动截图 + 超长分割，适配 X/Twitter、微信、小红书分享。
## 工作流
### Step 0：获取内容（如果输入是 URL）
如果用户给的是 URL 而非纯文本，先抓取内容再进入 Step 1。
**路由规则**：
| URL 类型 | 抓取方式 |
|----------|---------|
| `arxiv.org/abs/` | 提取论文 ID，优先抓 HTML 版 `https://arxiv.org/html/{id}v1`，失败则抓 PDF `https://arxiv.org/pdf/{id}.pdf` |
| `x.com` / `twitter.com` | `curl -sL "https://r.jina.ai/{url}"` |
| `mp.weixin.qq.com` | `python3 ~/.claude/skills/markdown-proxy/scripts/fetch_weixin.py "{url}"` （如存在） |
| 其他网页 | `curl -sL "https://r.jina.ai/{url}"`，失败则 `curl -sL "https://defuddle.md/{url}"` |
**arXiv 专用逻辑**（抓全文，不是摘要）：
```bash
# 从 https://arxiv.org/abs/2603.25694 提取 ID
paper_id=$(echo "$url" | grep -oP 'arxiv.org/abs/\K[\d.]+')
# 优先抓 HTML 版（内容最完整）
html_url="https://arxiv.org/html/${paper_id}v1"
curl -sL "$html_url" 2>/dev/null || curl -sL "https://r.jina.ai/https://arxiv.org/pdf/${paper_id}.pdf"
```
**通用代码**（覆盖 90% 场景）：
```bash
curl -sL "https://r.jina.ai/{url}" 2>/dev/null
```
> **原则**：skill 自己能抓就自己抓，不依赖外部 skill。r.jina.ai 免费、无需 API key、支持 X/Twitter/普通网页。arXiv 论文优先抓 HTML 版（比 PDF 更易提取），只有公众号等特殊页面才回退到专用脚本。
### Step 1：提炼核心信息（最重要）
> **目标**：让读者只看图片就能理解文章最核心、最重要的概念和信息，不需要点进原文。