xuanqing-visual-explainer-cardslisted

Create illustrated Xiaohongshu/Rednote knowledge-card series that combine GPT Image 2 explanatory illustrations with editorial HTML layout (serif display + IKB Blue structure + Mustard Yellow emphasis). Use when turning abstract concepts, tutorials, AI knowledge, product mechanisms, comparisons, or educational content into clear 3:4 social cards with small in-image Chinese labels, accurate outer typography, reusable layouts, and automated validation. Use this skill whenever the user mentions creating social cards, knowledge posts, visual explanations, educational infographics, Xiaohongshu/Rednote content, or illustrated explainer series — even if they don't explicitly ask for "visual explainer cards."
xuanqing-95/xuanqing-visual-explainer-cards · ★ 1 · AI & Automation · score 66

Install: claude install-skill xuanqing-95/xuanqing-visual-explainer-cards

## Dependencies This skill requires the following to be installed: | Dependency | Install | Purpose | |---|---|---| | Playwright (npm) | Preinstalled by the hosting/deploy environment | Renders HTML to PNG | | Pillow (Python) | Preinstalled by the hosting/deploy environment | Background normalization for generated illustrations | Image generation may use either the host's built-in image tool, such as Codex `imagegen`, or the user's own OpenAI-compatible image API. > `<skill-dir>` in the commands below refers to the directory containing this SKILL.md file. --- # Visual Explainer Cards Create social cards that readers understand visually before reading closely. This skill is **Editorial-first**: serif display titles (Playfair Display + Noto Serif SC), sans body, mono meta. IKB Klein Blue is the visible system color on every page (chrome, foot, section labels, dividers, page numbers). Mustard Yellow appears exactly once per set, on the cover horizontal bar — nowhere else. It pairs that strict typography system with GPT Image 2 illustrations that may carry a small number of exact Chinese labels. Default to a hybrid composition: - Render the outer card, large titles, body copy, bottom takeaways, page rhythm, and editorial structure in HTML. - Generate illustrations for most content pages — text leads, illustration explains. Use small, supporting illustrations (160-560px depending on page role), not one full-canvas centerpiece per set. - Allow only small, high-value in-i