graphic-content-creation — Claude Code skill: what it does
Structures multi-slide image carousels for Xiaohongshu. Breaks guides and reviews into 3-7 vertical slides with clear text hierarchy.
npx skills add vivy-yi/xiaohongshu-skills --skill graphic-content-creation -a claude-codeWhat graphic-content-creation does
This skill guides AI agents through planning graphic posts on Xiaohongshu. It organizes material across 3 to 7 carousel slides, setting up a hook image, structured middle slides, and a closing call to action. Each slide receives specific text overlays limited to 3-5 scannable bullet points, keeping the layout clean on mobile screens.
The workflow adheres to platform-specific parameters: vertical portrait ratios of 3:4 or 4:5, minimum dimensions of 1080x1440 pixels, and file sizes under 5MB. It defines structural templates for tutorials, listicles, product showcases, and before-and-after posts. Video production is explicitly redirected to the short-video-production skill.
Because the skill only outputs layout plans, copy, and visual specs, you still need an image editor like Canva or Xingtu to render the actual graphics.
What it helps with
- plan 3-7 slide carousels for Xiaohongshu
- structure step-by-step visual guides and tutorials
- map out product review slides with pros and cons
- draft before-and-after comparison carousels
- organize text hierarchy and overlays for vertical mobile feeds
Example prompts for the agent
- Plan a 5-slide Xiaohongshu carousel reviewing a mechanical keyboard
- Draft a step-by-step skincare guide with 6 vertical slides in 3:4 ratio
- Create a before-and-after transformation carousel layout for Xiaohongshu
How to install graphic-content-creation
1Skills CLI (Vercel)
npx skills add vivy-yi/xiaohongshu-skills --skill graphic-content-creation -a claude-code2Manually: put the files in place
~/.claude/skills/graphic-content-creation/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/graphic-content-creation/
1Skills CLI (Vercel)
npx skills add vivy-yi/xiaohongshu-skills --skill graphic-content-creation -a codex2Manually: put the files in place
.agents/skills/graphic-content-creation/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add vivy-yi/xiaohongshu-skills --skill graphic-content-creation -a cursor2Manually: put the files in place
.cursor/skills/graphic-content-creation/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install vivy-yi/xiaohongshu-skills graphic-content-creation2Manually: put the files in place
.github/skills/graphic-content-creation/SKILL.md1Skills CLI (Vercel)
npx skills add vivy-yi/xiaohongshu-skills --skill graphic-content-creation -a gemini-cli2Platform CLI
gemini skills install https://github.com/vivy-yi/xiaohongshu-skills --path skills/01-内容创作/graphic-content-creationManually: put the files in place
.devin/skills/graphic-content-creation/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add vivy-yi/xiaohongshu-skills --skill graphic-content-creation -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about graphic-content-creation
How to install graphic-content-creation in Claude Code?
Run npx skills add vivy-yi/xiaohongshu-skills --skill graphic-content-creation -a claude-code in your terminal.
What does the graphic-content-creation skill do?
It outlines slide-by-slide copy, visual hierarchy, and hook messaging for 3-7 image carousels optimized for Xiaohongshu's vertical feed.
Does this skill generate image files directly?
No, it provides the content outline and layout instructions. You need external design tools like Canva or Xingtu to assemble and render the final images.
