card-skill

What it is

card-skill turns articles, notes, arguments, and technical decisions into publish-ready visual cards for coding agents (Claude Code, Codex, OpenCode, Pi, etc.).

Unlike generic AI image generators that produce unpredictable illustrations, card-skill focuses on information hierarchy, readable typography, and structured reasoning. Everything renders locally via headless browser and undergoes automatic layout checks before export in a signature tactile paper aesthetic (Kenny Style).

Core uses

• Editorial covers: Article headers, blog covers, and mood visuals with metaphors.
• In-article diagrams & whiteboards: Compress complex arguments, causal chains, and system trade-offs into structured visual cards.
• Social card series: Break down opinions into multi-card carousels or high-density reading cards.

(It is not a UI builder, chart plotter, website generator, or photo editor.)

Good fit / poor fit

Good fit	Poor fit
WeChat covers, blog headers, article atmosphere images	Websites, landing pages, app/component UI
Xiaohongshu / social opinion cards and carousels	Figma prototypes, logo / brand identity systems
Argument whiteboards, system relations, technical decisions	Chart-library plotting (ECharts and similar)
In-article diagrams: formula cards, relations, flows, boundaries	Generic photo editing or file conversion
WeChat Reading highlights and monthly reports (when requested)	Silently scanning an entire reading account
Consistent batch PNGs with automated crop/overflow quality checks	One-off chat illustrations with no quality gate

See it in 30 seconds

One consistent visual grammar adapts to different publishing tasks: an article cover sets the mood, an in-article card explains a relation, and a whiteboard maps a trade-off.

One visual grammar, three publishing jobs: a claim becomes a social poster, core tension becomes an editorial cover, and a reasoning chain becomes a whiteboard.

Supported formats

You don't need to memorize mode names—describe what you want to publish in natural language, and the agent picks the best mode.

Publishing goal	Mode	Tier	What it produces	Reference
WeChat or blog cover	editorial-image	Stable	Mood, tension, and metaphor (not a text summary)	Docs
In-article explanation	article-diagram	Stable	Formula cards, relation maps, process flows, boundaries	Docs
Social card series	poster	Stable	Multi-card breakdown for social media (Xiaohongshu, X)	Docs
Technical decisions & systems	whiteboard	Stable	Problems, constraints, decision paths, and trade-offs	Docs
Long reading cards	long	Stable	Immersive long-form reading with rich typography	Docs
Single-line claims & quotes	big	Stable	High-impact statements and headline cards	Docs
Dense data & comparison	infograph	Studio	High-density information and structural comparisons	Docs
Narrative & conflict	comic	Studio	Step-by-step conflict, turn, or before/after stories	Docs
Personal reflections	sketchnote	Studio	Warm, notebook-style visual notes	Docs

Stable vs. Studio:

• Stable modes use deterministic built-in templates—fast, consistent, and ideal for batch generation.
• Studio modes support bespoke HTML/CSS layouts for complex narratives and custom visual metaphors.

How to install

Install the complete package (includes render scripts, templates, fonts, and checkers). Do not install only the repository-root SKILL.md, as it lacks the runtime.

Claude Code / Codex (recommended)

# Claude Code
claude plugin marketplace add KKenny0/card-skill
claude plugin install card-skill@card-skill

# Codex
codex plugin marketplace add KKenny0/card-skill
codex plugin add card-skill@card-skill

On first render, the agent runs node scripts/setup-runtime.mjs once inside the skill directory to install locked npm dependencies and Playwright Chromium. Subsequent runs reuse this runtime.

Other agents or one-off use

Install the skill package (replace -a codex with your agent ID):

npx skills add KKenny0/card-skill/plugins/card-skill/skills/card-skill -a codex -g -y
cd ~/.agents/skills/card-skill
npm install
npx playwright install chromium

Run once without permanent install:

npx skills use KKenny0/card-skill/plugins/card-skill/skills/card-skill --skill card-skill

Requirements: Node.js 22+, npm, and Playwright Chromium. Fonts are bundled; rendering runs offline.

In Codex desktop sessions supporting interactive cards, you can request direction options before rendering:

Give me 3 WeChat cover directions first. Show each direction's visual metaphor, aspect ratio, why it fits, and risks on cards. Render the PNG only after I pick one.

Quick examples

No slash commands required. Prompts work in plain English or Chinese:

WeChat / editorial cover

Turn the article below into a WeChat cover image. Do not restate it as a summary. Extract the core tension, render it with a quiet paper feel, and check crop, line breaks, and readability before delivery:

[paste article or URL]

In-article diagram / formula card

Turn the compressible sections of this article into in-article explanation diagrams. Keep only the core relational formula and one judgment per card. Skip pure setup and mood sections.

Social card series

Split the argument below into a social card series. Card 1 is the main judgment; each later card covers one supporting point. Keep the tone restrained—no marketing voice.

Technical whiteboard

Draw this technical decision as a whiteboard card: state the problem, constraints, option paths, and final trade-off so someone who missed the discussion can follow it.

WeChat Reading highlights / monthly report

Turn my personal highlights and thoughts from *A Thousand Brains* into a card set. Keep source quotes unedited. Place my thoughts under the matching highlight; label the source.

Turn this month's WeChat Reading stats into a monthly reading report. Use only real duration, day counts, finished books, and preferences. Omit missing modules. Do not invent insights.

Key features

• Tactile aesthetic (Kenny Style): Warm paper texture ("Quiet Paper"), disciplined typography, balanced spacing, and subtle geometry.
• Automated quality checks: Built-in verification catches text overflow, awkward line breaks, broken images, and poor contrast before exporting.
• 100% local & private: Rendering and checks run entirely on your machine via Playwright Chromium. Your text and images are never uploaded.
• Retina-ready export: Outputs crisp @2x PNGs (e.g., ~2160px wide for standard canvases) ready for publishing.
• Mood tones without layout drift: Switch color mood (reflective, sharp, warm, technical) without breaking typography or spacing.
• Content-adaptive layout: Adapts card counts (1–4 cards) based on actual content density rather than forcing arbitrary filler.
• Zero watermarks: Names, logos, and sources appear only when explicitly provided; otherwise layouts stay clean and unbranded.

Adaptive open-source showcase

card-skill automatically adapts card counts and structure to the material. For example, a product launch generates a 4-card evidence sequence, while a CLI tool generates a 3-step task flow:

All project data above is fictional and repository-owned. See the reproducible showcase.

How it works

Unlike tools that rely on a single generative prompt, card-skill runs a deterministic pipeline from text to PNG:

1. Parse content: Analyzes raw text, notes, URLs, or data to extract core claims and relationships.
2. Pick layout: Selects the best visual mode (e.g., whiteboard for decisions, editorial cover for articles).
3. Render locally: Generates semantic markup and renders high-res PNGs via Playwright Chromium.
4. Quality gate: Inspects the output for overflow, bad wrapping, and readability issues.
5. Deliver: Saves the verified PNG directly to your ~/Downloads/ folder.

Standalone CLI

You can run the structured CLI directly:

node scripts/card.js --input /path/to/input.json --output ~/Downloads/card.png

File size optimization

Default PNG exports are lossless. For smaller files, compress with pngquant:

pngquant --quality=80-95 --force --output card.png card.png

Updates and privacy

The CLI checks GitHub for releases at most once daily. Updates are never performed mid-render. To disable update checks:

export CARD_SKILL_DISABLE_UPDATE_CHECK=1

To allow checks but disable auto-updates:

export CARD_SKILL_DISABLE_AUTO_UPDATE=1

FAQ

What is card-skill?

It is a local content-to-image skill for coding agents. It turns articles, notes, and technical decisions into quality-checked PNG cards.

Do I need design skills or HTML knowledge?

No. Describe what you want in plain text; the agent selects the mode, formats the data, and renders the image.

Which agents are supported?

Claude Code, Codex, OpenCode, Pi, and any environment supporting agent skills. Claude Code and Codex should use the plugin marketplace.

Does it watermark or add author names?

No. Author name, avatar, and sources are only rendered if explicitly provided in your input.

How is this different from asking an AI to draw an image?

card-skill uses deterministic HTML/CSS templates, typography rules, Playwright capture, and strict visual checks. The result is a crisp, reproducible, publish-ready card rather than a random AI image.

Will it upload my articles or data?

No. All rendering and visual checks run locally on your machine. Version checks only query GitHub Releases.

Full gallery

WeChat Reading integration

card-skill pairs with Tencent's official WeChatReading Skill to turn personal highlights from a specific book into a card set, or reading statistics into reports.

It never scans arbitrary books or accounts without instruction. The Tencent skill handles auth; card-skill only formats and renders the data locally.

npx skills add Tencent/WeChatReading -g

Author & community

card-skill is created and maintained by Kenny Wu (@KKenny0).

If card-skill helped you publish something, share your results or feedback in GitHub Issues. You can also support maintenance via Support.

Credits

card-skill is inspired by:

• awesome-design-md by VoltAgent — brand design reference library
• ljg-card by lijigang — content-to-image practice and taste rules
• Kami by tw93 — Quiet Paper constraints on paper, ink, and rhythm
• The New Yorker cover practice & GOV.UK image guidance — editorial purpose and restraint

License

MIT © 2026 Kenny Wu