Vibe Coding Discoverguizang-social-card-skill
View on GitHub🪧 Claude Code / Codex skill — generate Xiaohongshu carousels & WeChat 21:9+1:1 cover pairs. Editorial × Swiss visual systems, 28 layouts, 10 themes, single-file HTML → PNG. 小红书图文 + 公众号封面对
A Claude Code / Codex agent skill that turns articles, copy, screenshots or videos into Xiaohongshu carousels, WeChat 21:9+1:1 cover pairs and Live Photo cards. Ships 28 layouts, 10 theme presets, editorial/Swiss style systems, single-file HTML rendered to PNG via Playwright.
Use Cases
Generate Xiaohongshu 3:4 carousel posts from an articleProduce WeChat 21:9 + 1:1 cover pair with consistent visualsTurn product reviews into Swiss-style data cardsCreate Live Photo motion cards from user video clipsBuild 2/3/4-grid video collage social cardsRender travel guide cards with MapLibre mapsBeautify screenshots with device/browser framesConvert long-form copy into multi-page step cardsApply Editorial or Swiss theme presets to card decksValidate card layout overflow and font sizes via Playwright
Built With
- Language
- HTML
- Frameworks
- Claude Code · Codex · Playwright · MapLibre GL JS · WebGL · Node.js
Tags
agent-skill · claude-code · codex · claude-skill · social-cards · xiaohongshu · rednote · wechat · html-to-png · playwright · editorial-design · swiss-design · live-photo · image-generation · layout-templates · carousel