Social Carousel

Name: Social Carousel
Author: nexu-io

nexu-io/open-design

256 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

social-carousel is an Open Design agent skill that generates a three-panel 1080×1080 HTML social carousel with connected headlines, branding tokens, and cinematic CSS gradients for developers who need LinkedIn, Instagram

About

social-carousel is an Open Design design-template skill from nexu-io/open-design that renders a self-contained HTML page with three 1080×1080 square panels on a dark stage. Each panel uses layered radial and linear CSS gradients (no image assets), serif display headlines that read as one sentence across the series, mono brand stamps, loop indicators, and captions pulled from an active DESIGN.md token file. Developers reach for social-carousel when a brief asks for carousel posts, Instagram series, LinkedIn threads-as-cards, or X thread visuals and they want screenshot-ready output instead of hand-building slides in Figma. The skill accepts a theme plus three connected captions and stages cards with responsive clamp sizing so three panels fit desktop and stack below 1100px.

Multi-slide layouts
Hook-first frames
Brand consistency
Platform sizing
Campaign CTAs

Social Carousel by the numbers

256 all-time installs (skills.sh)
+3 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #887 of 1,879 Marketing & SEO skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/open-design --skill social-carousel

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/social-carousel.svg)](https://skillselion.com/skills/nexu-io/open-design/social-carousel)

Installs	256
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

How do you build a branded social carousel in HTML?

Design multi-slide social carousels with consistent branding, hooks, and CTAs for LinkedIn, Instagram, or X launch and growth campaigns.

Who is it for?

Developers using Open Design or agent-driven workflows who need on-brand, screenshot-ready carousel posts without opening a separate design tool.

Skip if: Skip social-carousel when you need animated video reels, data-driven chart slides, or editable Figma source files instead of static HTML panels.

When should I use this skill?

A brief mentions carousel post, social carousel, Instagram carousel, LinkedIn series, X thread cards, or 三连发 with a theme and three captions.

What you get

Self-contained HTML page with three 1080×1080 carousel panels, connected captions, and design-system typography tokens

Self-contained HTML carousel page

By the numbers

Produces 3 panels at 1080×1080 pixels each
Uses CSS gradients only with no image assets

Files

SKILL.mdMarkdownGitHub ↗

Social Carousel Skill

Produce a 3-panel social carousel on a single dark stage. Each panel is a 1080×1080 cinematic still — connected as a series, but each readable on its own.

Workflow

1. Read the active DESIGN.md (injected above). Pick the loudest serif token for the headline lockups and a mono token for stamps / counters. 2. Pick the theme + 3 captions from the brief. The captions must read as one sentence when stacked: ("onwards." → "to the next one." → "looking ahead." or "input." → "iterate." → "ship."). 3. Stage — full-bleed dark page. Top header strip:

Left: serif italic display "Three posts. One beat."
Just below the title: a one-line description in muted mono ("1080×1080

· cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.").

Right: small mono badge "SERIES · 01 → 03".

4. Cards — 3 squares in a horizontal row (wraps to stack on narrow viewports). Each card is aspect-ratio: 1 / 1 with rounded 12px corners and a subtle 1px border, plus a soft drop shadow.

Background: a layered gradient that suggests a cinematic photo — for

example, panel 1 = warm dawn meadow (stacked greens with a cyan sky wash); panel 2 = forest dusk (warm oranges fading into deep teals); panel 3 = pink-mountain ridge (rosy peaks against a dim violet sky). Use radial-gradient + linear-gradient only — no images.

Top-left chip: brand wordmark in serif italic ("Jerrod Lew") with a

small accent dot.

Top-left below chip: micro mono index "AI · 01 / 03" (and 02, 03).
Bottom-left: the headline lockup in white serif display, italic accent

on one word.

Bottom-right corner: a 1× LOOP mono stamp inside a thin border.
Bottom strip caption: small caps mono describing the imagined frame

("Man, walking forward — close.", "Woman, stepping into frame.", "Woman, overlooking the city."). 5. Write a single HTML document:

<!doctype html> through </html>, CSS inline.
Cards are sized via width: clamp(280px, 30vw, 380px) so 3 fit

comfortably across most desktops and stack at < 1100px.

data-od-id on stage, each card, each headline.

6. Self-check:

The three headlines together form one sentence and feel cinematic.
Mono is used only for the wordmark index, the loop stamp, and the

bottom captions. The headlines stay serif.

Each panel's color story is distinct — no two share a dominant hue.

Output contract

Emit between <artifact> tags:

<artifact identifier="carousel-slug" type="text/html" title="Carousel — Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Three posts. One beat. — social carousel</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <style>
    :root {
      --stage: #0a0a0a;
      --stage-2: #141414;
      --paper: #f4ede0;
      --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255,255,255,0.04), transparent 70%),
        var(--stage);
      color: #f4ede0;
      font: 14px/1.5 -apple-system, system-ui, sans-serif;
    }

    .stage {
      max-width: 1280px; margin: 0 auto; padding: 60px 32px 80px;
    }
    .stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
    .stage-head h1 { margin: 0; font: italic 700 36px/1 var(--serif); letter-spacing: -0.005em; }
    .stage-head h1 em { font-style: normal; }
    .stage-head h1 .dot { color: #a4a09a; }
    .stage-head .lede { margin: 8px 0 0; font: 11px/1.6 var(--mono); color: rgba(244,237,224,0.5); letter-spacing: 0.06em; max-width: 60ch; text-transform: uppercase; }
    .stage-head .badge { font: 10.5px/1 var(--mono); padding: 7px 10px; border: 1px solid rgba(244,237,224,0.3); color: rgba(244,237,224,0.7); letter-spacing: 0.18em; flex-shrink: 0; }

    .row { display: flex; gap: 22px; justify-content: center; align-items: stretch; flex-wrap: wrap; }

    .card {
      width: clamp(280px, 30vw, 380px);
      aspect-ratio: 1 / 1;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 30px 60px rgba(0,0,0,0.45);
      position: relative;
      overflow: hidden;
      color: #ffffff;
    }
    .card .scrim {
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
      pointer-events: none;
    }
    .card .top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; }
    .card .brand { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); border-radius: 999px; }
    .card .brand .name { font: italic 700 13px/1 var(--serif); }
    .card .brand .dot { width: 5px; height: 5px; background: var(--paper); border-radius: 50%; opacity: 0.9; }
    .card .index { font: 11px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.16em; text-align: right; padding: 6px 10px; background: rgba(0,0,0,0.30); backdrop-filter: blur(4px); border-radius: 4px; }

    .card .lockup { position: absolute; left: 22px; right: 22px; bottom: 78px; }
    .card .lockup h2 { margin: 0; font: 700 60px/1 var(--serif); letter-spacing: -0.005em; color: #ffffff; }
    .card .lockup h2 em { font-style: italic; }
    .card .lockup h2 .accent { font-style: italic; }

    .card .footer { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; }
    .card .footer .caption { font: 10.5px/1.4 var(--mono); color: rgba(255,255,255,0.85); letter-spacing: 0.14em; text-transform: uppercase; max-width: 70%; }
    .card .loop { font: 10.5px/1 var(--mono); padding: 6px 8px; border: 1px solid rgba(255,255,255,0.55); border-radius: 4px; color: rgba(255,255,255,0.85); letter-spacing: 0.18em; }

    /* Card 1 — dawn meadow, blue sky */
    .card.c1 {
      background:
        linear-gradient(180deg, #5b8cb6 0%, #92aebd 32%, #b0a679 50%, #6f8a4d 70%, #2a4a2a 100%),
        #4a6a8a;
    }
    .card.c1 .figure {
      position: absolute; left: 50%; top: 56%;
      width: 80px; height: 200px;
      transform: translate(-50%, 0);
      background:
        radial-gradient(ellipse 30px 14px at 50% 30%, #2a1f15 0%, #2a1f15 60%, transparent 70%),
        linear-gradient(180deg, #2a1f15 0%, #4a3018 22%, #6a3a1a 60%, transparent 100%);
      filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
      clip-path: polygon(35% 0%, 65% 0%, 78% 26%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 22% 26%);
      opacity: 0.92;
    }

    /* Card 2 — forest dusk, warm orange center */
    .card.c2 {
      background:
        radial-gradient(ellipse 80% 50% at 50% 100%, #f49255 0%, #c95a30 35%, transparent 60%),
        radial-gradient(ellipse 80% 80% at 50% 90%, rgba(255,180,120,0.5), transparent 60%),
        linear-gradient(180deg, #1c2a25 0%, #2a3a30 30%, #4a3a26 70%, #2a1a14 100%);
    }
    .card.c2 .trees {
      position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    }
    .card.c2 .trees::before, .card.c2 .trees::after {
      content: ''; position: absolute; bottom: 0; width: 50%; height: 70%;
      background:
        radial-gradient(circle at 20% 90%, #0f1a14 6px, transparent 7px),
        radial-gradient(circle at 50% 88%, #0f1a14 8px, transparent 9px),
        radial-gradient(circle at 80% 92%, #0f1a14 6px, transparent 7px);
    }
    .card.c2 .trees::before { left: 0; background:
      linear-gradient(180deg, transparent 0%, transparent 30%, rgba(15,26,20,0.85) 30%, #0f1a14 100%);
      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
    }
    .card.c2 .trees::after { right: 0; background:
      linear-gradient(180deg, transparent 0%, transparent 36%, rgba(15,26,20,0.85) 36%, #0f1a14 100%);
      mask: radial-gradient(ellipse 60% 90% at 50% 100%, black 70%, transparent 100%);
    }
    .card.c2 .figure {
      position: absolute; left: 52%; top: 56%; width: 56px; height: 130px;
      transform: translate(-50%, 0);
      background: linear-gradient(180deg, #2a1810 0%, #4a2818 100%);
      clip-path: polygon(40% 0%, 60% 0%, 70% 22%, 70% 56%, 65% 100%, 35% 100%, 30% 56%, 30% 22%);
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
    }

    /* Card 3 — pink ridge / mountain */
    .card.c3 {
      background:
        linear-gradient(180deg, #1b1e3a 0%, #4a3956 28%, #c9627e 60%, #d57f86 75%, #b8d2d8 100%);
    }
    .card.c3 .ridge {
      position: absolute; inset: 0;
      background:
        linear-gradient(180deg, transparent 60%, rgba(60,30,40,0.4) 80%, rgba(40,20,30,0.7) 100%);
    }
    .card.c3 .ridge::before {
      content: ''; position: absolute; left: 0; right: 0; bottom: 24%;
      height: 30%;
      background:
        linear-gradient(180deg, #b3526a 0%, #7a3148 100%);
      clip-path: polygon(0% 60%, 12% 30%, 22% 50%, 36% 18%, 50% 40%, 60% 22%, 72% 48%, 86% 26%, 100% 50%, 100% 100%, 0% 100%);
    }
    .card.c3 .ridge::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0;
      height: 32%;
      background: linear-gradient(180deg, #2a1f2a 0%, #1a1018 100%);
      clip-path: polygon(0% 50%, 8% 20%, 18% 38%, 30% 8%, 44% 32%, 56% 12%, 68% 36%, 82% 18%, 100% 40%, 100% 100%, 0% 100%);
    }
    .card.c3 .figure {
      position: absolute; right: 18%; bottom: 14%; width: 30px; height: 56px;
      background: #1a0d12;
      clip-path: polygon(35% 0%, 65% 0%, 75% 30%, 60% 100%, 40% 100%, 25% 30%);
      filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
    }

    @media (max-width: 1180px) {
      .row { flex-direction: column; align-items: center; }
      .card { width: min(96vw, 480px); }
      .card .lockup h2 { font-size: 56px; }
    }
  </style>
</head>
<body>
  <div class="stage" data-od-id="stage">
    <div class="stage-head">
      <div>
        <h1>Three posts<span class="dot">.</span> One <em>beat</em><span class="dot">.</span></h1>
        <p class="lede">1080×1080 · cinematic video loops · minimal type. Drop into Instagram, LinkedIn, or X — each post stands on its own or runs as a three-part series.</p>
      </div>
      <span class="badge">SERIES · 01 → 03</span>
    </div>

    <div class="row" data-od-id="cards">

      <article class="card c1" data-od-id="card-1">
        <div class="figure"></div>
        <div class="scrim"></div>
        <div class="top">
          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
          <div class="index">01 · ONWARDS</div>
        </div>
        <div class="lockup"><h2>onwards<em>.</em></h2></div>
        <div class="footer">
          <div class="caption">Man, walking forward — close.</div>
          <div class="loop">1× LOOP</div>
        </div>
      </article>

      <article class="card c2" data-od-id="card-2">
        <div class="trees"></div>
        <div class="figure"></div>
        <div class="scrim"></div>
        <div class="top">
          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
          <div class="index">02 · TO THE NEXT ONE</div>
        </div>
        <div class="lockup"><h2><span class="accent">to the</span><br/><em>next one.</em></h2></div>
        <div class="footer">
          <div class="caption">Woman, stepping into frame.</div>
          <div class="loop">1× LOOP</div>
        </div>
      </article>

      <article class="card c3" data-od-id="card-3">
        <div class="ridge"></div>
        <div class="figure"></div>
        <div class="scrim"></div>
        <div class="top">
          <div class="brand"><span class="dot"></span><span class="name">Jerrod Lew</span></div>
          <div class="index">03 · LOOKING AHEAD</div>
        </div>
        <div class="lockup"><h2>looking<br/><em>ahead.</em></h2></div>
        <div class="footer">
          <div class="caption">Woman, overlooking the city.</div>
          <div class="loop">1× LOOP</div>
        </div>
      </article>

    </div>
  </div>
</body>
</html>

Related skills

Seo AuditRun structured SEO audits on their SaaS site or content hub and receive a prioritized action plan.173k42.2k

CopywritingGenerate, rewrite, or strengthen persuasive website and landing-page copy that converts visitors into users.164k42.2k

Viral Short FormQuickly generate high-retention hooks, scripts, and outlines for TikTok, Reels, YouTube Shorts, and carousels.132k67

Viral HooksWrite and critique viral hooks for short-form video opening sequences.123k67

Viral Captions And CtasOptimize social media captions and CTAs for viral short-form video reach and saves.123k67

Viral Youtube ShortsWrite and diagnose YouTube Shorts for Shorts Feed and long-form funnel.123k67

How it compares

Pick social-carousel over generic landing-page skills when the deliverable is a multi-slide social series rather than a single marketing page.

FAQ

What does social-carousel output?

social-carousel outputs a single self-contained HTML page with three 1080×1080 square panels, each using CSS gradient backgrounds, serif headlines, mono brand stamps, and captions that connect as one sentence across the series.

Which platforms is social-carousel sized for?

social-carousel sizes every panel at 1080×1080 for screenshot export to Instagram, LinkedIn, and X. The HTML header documents the format and cards stack on viewports narrower than 1100px.

Marketing & SEOcontentdistribution