skills.rest
shiker1996
shiker1996COMMUNITY
Explore all skills by this author →
WebsiteGitHub

social-card-ai-visual-generator

Generates themed Xiaohongshu visual card HTML from confirmed storyboard and fact data.

5|1|Updated Jul 31, 2026
Search Tags:#html generation#social media#css#storyboard#xiaohongshu#theme design#visual cards
One-click install
npx skills add https://github.com/shiker1996/wechat-editroom --skill social-card-ai-visual-generator-shiker1996
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: social-card-ai-visual-generator
Source: https://github.com/shiker1996/wechat-editroom/tree/main/skills/social-card-ai-visual-generator
Command: npx skills add https://github.com/shiker1996/wechat-editroom --skill social-card-ai-visual-generator-shiker1996

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and references (resource) components.

What problem does it solve? Turning a confirmed storyboard into a set of visually consistent, screenshot-ready Xiaohongshu cards requires manual design work; this Skill translates verified facts and a theme spec into a complete 375x667 HTML document with clear visual hierarchy and rhythm. ## Core Features & Use Cases - Storyboard-to-HTML generation: Reads card-plan.json, fact sheets, and a theme design spec, then writes a complete ai-beautified.html with themed CSS, components, and decorations. - Semantic component mapping: Maps facts like metrics, steps, risks, code, and conclusions to components such as metric-focus, process-rail, warning-panel, and terminal-panel. - Layout and visual contract enforcement: Applies a fixed 375x667 canvas, safe areas, typography scales, and per-page visual focus rules from built-in references. - Use Case: After a content pipeline finalizes a storyboard for a product launch, use this Skill to produce a multi-page Xiaohongshu card set where each page has one primary visual focus and the theme's textures and colors are visibly applied. ## Quick Start Generate the AI visual HTML for the current candidate's storyboard using the confirmed card plan and theme design spec.

Frequently Asked Questions about social-card-ai-visual-generator

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

FAQPage Schema
How do I generate Xiaohongshu visual cards from a storyboard?▼

Provide a confirmed card-plan.json with page order, roles, and content blocks plus a theme design spec. The Skill reads all workspace files, plans per-page visual focus and components, then writes a complete ai-beautified.html with themed CSS.

What input files does the social card visual generator require?▼

It requires card-plan.json as the authoritative source for page order and facts, plus ai-visual-card-plan.json, fact sheets, social-theme-design-spec.md, and a theme snapshot. Missing or conflicting files fall back to card-plan.json as the source of truth.

What canvas size and layout rules apply to Xiaohongshu cards?▼

Pages are fixed at 375x667 pixels with safe areas of at least 16px horizontally and 28px vertically. Typography, spacing, and content-stack structure follow the layout guide, with content pages targeting 60-80% visual occupancy.

Can the generated card HTML use external fonts or images?▼

No. The HTML must be self-contained for direct screenshotting: no scripts, event handlers, @import, external fonts, remote images, or url() references are allowed. All styling and decorations must be inline CSS.

What are the limitations of AI visual card generation?▼

It cannot change page order, invent facts, or alter numbers, names, and causal claims from the storyboard. Page count may deviate by at most 2 from the storyboard baseline, and it does not perform fact collection, event analysis, or programmatic rendering.

Related Skills

Explore More Design & Creative Skills→
ZenkakuHiraganaZenkakuHiragana

public-research

Verify public facts against official sources and cite primary references.

Community
Intermediate
joemccannjoemccann
12

tweet-it

Generate tweet copy and infographic card for financial trades on X.

Community
Advanced
s-choungs-choung
30

slide-audit

Measure slide element bounds and capture PNG screenshots to detect layout bugs in HTML decks.

Community
Advanced
githubgithub
38.5k

mcp-create-adaptive-cards

Generate Adaptive Card response templates for MCP-based API plugins in Microsoft 365 Copilot.

Official
Intermediate