Skip to content

Social Carousel Designer

Generates a three-card 1080×1080 social media carousel as a single HTML page.

Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent produces a self-contained HTML page showing three square social-media cards that read as one connected series, such as 'onwards.' then 'to the next one.' then 'looking ahead.'. Each card has a brand mark, a numbered index, a headline in serif type, a caption and a small 'loop' stamp, with backgrounds made only from CSS gradients rather than photos. It is a layout and copy-design template, not an image or video generator.

Great for

  • Marketers preparing Instagram, LinkedIn or X carousel posts who want a quick visual concept
  • Designers who want a starting layout and colour direction for a three-part series
  • Teams already using the Open Design system with a DESIGN.md file

Skip it if

  • Producing publishable photos or real imagery: the skill explicitly uses gradients only, not images, so the 'cinematic photo' look is only suggested.
  • Brands needing their own identity: the template includes a hard-coded example brand name ('Jerrod Lew') that must be replaced before any real use.

Try asking

  • “Design a 3-card cinematic social carousel with the headlines 'onwards.', 'to the next one.', 'looking ahead.'”
  • “Make a three-post Instagram carousel series about our product launch in 1080×1080 squares”
  • “Create a LinkedIn series of three square cards for a weekly update”
Step-by-step guide: how to use Social Carousel DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    social-carousel.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip social-carousel.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip social-carousel.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide your own brand name, colours and captions in the brief, and replace the sample wordmark before publishing.
  • Ask for captions that read as one sentence across the three cards so the series flows.
  • Open the generated HTML in a browser and screenshot each card to export images for social platforms.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.