card-generator

Name: card-generator
Availability: InStock
Author: wensia

Convert user content into downloadable card deck visuals as HTML and PNG ZIP.

2|1|Updated Dec 30, 2025

Search Tags:#templates #poster #react #svg #web-design #zip-download #card-generator

Ready to run

npx skills add https://github.com/wensia/xiaohongshu-poster-generator --skill card-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: card-generator
Source: https://github.com/wensia/xiaohongshu-poster-generator/tree/main/skills/card-generator
Command: npx skills add https://github.com/wensia/xiaohongshu-poster-generator --skill card-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

这项技能解决了将内容快速转化为可下载的多卡海报/卡片集的问题，省去手工排版和重复添加模板的繁琐。

Core Features & Use Cases

支持多种卡片模板（科技风、简约风、渐变风、暗黑风等），生成单 HTML 文件并内置打包为 PNG 的 ZIP。
能将任意内容拆分成 4-6 张卡片，适用于产品介绍、教程、知识科普、小红书风格图文等场景。
提供一键下载功能，输出为 ZIP，包含每张卡片的 PNG。

Quick Start

Input your content and click Download to generate a ZIP of card PNGs.

Frequently Asked Questions about card-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I convert long-form text content into a downloadable multi-card poster set?▼

Card generation from raw content works by splitting input text into 4-6 cards, rendering each as a client-side SVG visual via React in a single HTML file, and bundling them into a downloadable PNG ZIP using JSZip and FileSaver.

Can I generate a ZIP of PNG images from card templates entirely in the browser?▼

Generating a PNG ZIP from card templates works entirely client-side; the skill uses JSZip and FileSaver to export SVG-rendered React visuals without requiring any server-side processing.

Do I need a backend server to export React SVG card decks as a ZIP file?▼

No backend server is needed to export React SVG card decks as a ZIP file; all rendering and ZIP packaging executes locally in the browser using client-side JavaScript libraries.

What is the best way to create Xiaohongshu-style visual cards from educational content?▼

The best way to create Xiaohongshu-style visual cards from educational content is using template-based card generation, which splits input into 4-6 styled SVG visuals suitable for social storytelling.

Does this card generator support different visual styles for marketing and social media posts?▼

Yes, this card generator supports different visual styles for marketing and social media posts by offering multiple built-in templates including tech, minimalist, gradient, and dark modes to match various content themes.