skills.rest
wensia
wensiaCOMMUNITY
Explore all skills by this author →
GitHub

card-generator

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
One-click install
npx skills add https://github.com/wensia/xiaohongshu-poster-generator --skill card-generator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
humanerd-drewhumanerd-drew
2

baoyu-infographic

Generate infographic images from user-specified layout, style, aspect ratio, and language.

Official
Advanced
srgplussrgplus

big3me-content-design

Generate branded HTML templates and PNG assets for Big3.me content.

Community
Advanced
sandecosandeco
158

mira-builder

Automates assembly of interactive HTML slide decks using modular Glassmorphism components.

Community
Advanced
sagunkayasthasagunkayastha

pptx-posters

Generate research posters in PPTX format from HTML/CSS templates.

Community
Advanced