Skip to content
Content
Skill

/design-instagram-post

Generate an Instagram post artifact — pixel-exact HTML canvas at 1080×1350 (portrait, default — Instagram's max-real-estate format) with opt-in 1080×1080 (square) and 1080×1920 (story / reel cover) modes. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html.

Boost this skill
@slogsdonslogsdon@slogsdon
From plugin
skills-design
319 skills
Install
$ npx -y skills add slogsdon/skills-design --skill design-instagram-post --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/design-instagram-post

Context preview

The summary Claude sees to decide when to auto-load this skill.

Generate an Instagram post artifact — pixel-exact HTML canvas at 1080×1350 (portrait, default — Instagram's max-real-estate format) with opt-in 1080×1080 (square) and 1080×1920 (story / reel cover) modes. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html.

SKILL.md

design-instagram-post.SKILL.md
name: design-instagram-post
description: Generate an Instagram post artifact — pixel-exact HTML canvas at 1080×1350 (portrait, default — Instagram's max-real-estate format) with opt-in 1080×1080 (square) and 1080×1920 (story / reel cover) modes. Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "instagram post about X", "ig post", "ig story", "instagram artifact", "/instagram-post".

Skill: instagram-post

Produces a pixel-exact HTML canvas for Instagram. Three canvas modes:

  • **`portrait`** (default, 1080×1350) — feed post in 4:5 ratio, the maximum vertical real estate Instagram allows
  • **`square`** (1080×1080) — classic feed square, useful for grid coherence
  • **`story`** (1080×1920) — vertical 9:16 for Stories and Reels covers

Plus an optional caption suggestion (2200-char limit; first 125 chars visible before "more").

When to use

  • User wants a visual asset for Instagram (feed post, carousel cover, story, reel cover)
  • A `DESIGN.md` exists for the brand

Inputs

  • **Required:** brand slug, post topic / title (1 line)
  • **Optional:** mode (`portrait` | `square` | `story`, default `portrait`), supporting line, attribution, caption style, hashtag set

Output

`./design/<brand-slug>/artifacts/instagram-<mode>-YYYY-MM-DD-<slug>.html`

Steps

1. Verify brand exists

test -f ./design/<brand-slug>/tokens.css

2. Pick mode

Default `portrait` (1080×1350) — gets the most feed space and converts best. Use `square` if user explicitly asks for grid coherence with existing square posts. Use `story` for Stories or Reel covers.

3. Gather the brief

Ask in one message:

1. Headline — the dominant text on the canvas (max 8 words for portrait/square, max 6 for story)
2. Optional supporting line (max 12 words)
3. Attribution — name + handle, or leave blank
4. Caption style: insight | story | announcement | carousel-intro | reel-cover | none
5. Hashtag set: any specific tags, or leave blank for none

4. Pick variation — ARCHITECTURE FIRST

Pick ONE archetype before any other axis. Portrait dimensions invite vertical type stacking and number-led layouts that horizontal formats don't — use them.

  • **Architecture archetype** (pick FIRST):
  • `chrome-led` — eyebrow + headline + footer band. **Last resort.** AI-editorial default.
  • `type-only` — pure type, no chrome.
  • `number-led` — one oversized number dominates; rest is short caption. Portrait format suits this beautifully.
  • `object-of-content` — looks like the thing being communicated (a list, a transcript fragment, a printed page, a journal entry).
  • `pattern-led` — typographic repetition or grid fills canvas; one element breaks it.
  • `inverse-text` — headline carved from a block of body copy; or massive headline with body wrapping negative space.
  • `vertical-stack` — words stacked one per line in display weight, leveraging portrait height. Each line is its own statement.

After archetype, pick from:

  • **Layout**: `centered-poster | top-anchored | bottom-anchored | split-vertical | corner-stamp`
  • **Type pressure**: `display-dominant | mixed-weight | mono-led`
  • **Color usage**: `monochrome | single-accent-block | inverted | duotone-split-vertical`
  • **Composition focus**: `headline-led | quote-led | data-led | mark-led`

**Cross-artifact rule:** different archetype than the most recent artifact in this brand. Read variation comments in `./design/<brand-slug>/artifacts/`.

5. Crop safety (Instagram-specific)

Instagram crops portrait posts to a square in the explore feed and to ~1:1 thumbnails on profile grids. Keep critical content (headline + brand mark) within the **center 1080×1080 of a portrait canvas**, with safe margins of `var(--space-2xl)` from the top and bottom edges. The top/bottom 135px regions can carry secondary content (eyebrow, footer) but should remain readable when cropped out.

For Story mode (1080×1920), Instagram's interface chrome covers the top 250px and bottom 220px. Keep critical content within `y: 250–1700`.

6. Generate the canvas HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — Instagram <mode> — <topic></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=<families>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>

html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; display: grid; place-items: center; font-family: var(--type-body-md-family); }

.canvas {
  /* Per mode:
     portrait: 1080x1350
     square:   1080x1080
     story:    1080x1920 */
  width: 1080px;
  height: <1350 | 1080 | 1920>px;
  background: var(--color-surface);
  color: var(--color-ink);
  position: relative;
  overflow: hidden;
  padding: var(--space-3xl);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Story mode — content respects IG's interface chrome */
.canvas--story {
  padding: 270px var(--space-3xl) 240px;
}

/* Portrait/square — the safe-crop center ring (visual aid for design, removed in export) */
.canvas--portrait::after {
  /* Uncomment during design to visualize crop safety
  content: ""; position: absolute; left: 0; right: 0; top: 135px; bottom: 135px;
  border: 1px dashed var(--color-rule);
  pointer-events: none;
  */
}

.eyebrow {
  font: var(--type-label-caps-weight) var(--type-label-caps-size)/var(--type-label-caps-leading) var(--type-label-caps-family);
  letter-spacing: var(--type-label-caps-tracking);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.headline {
  font-family: var(--type-display-xl-family);
  font-weight: var(--type-display-xl-weight);
  letter-spacing: var(--type-display-xl-tracking);
  font-size: clamp(72px, 9vw, 132px);
  line-height: 1.04;
  margin: var(--space-md) 0 0;
}

.support {
  font-family:
Read more
Read it on GitHub ↗
Ships withskills-design

Brand-agnostic design system and artifact generators for Claude Code, plus a figure-worth audit and PDF and HTML-to-PNG export utilities. 19 skills total. Install via the slogsdon-claude-code-config marketplace.

Get the whole plugin
Stats
JavaScriptHTMLCSSGitHubAnthropic
3
Stars
0
Forks
Active
Maintenance
HTML
Language
MIT
License
1mo ago
Last commit
4mo ago
Created

Repo: slogsdon/skills-design

In this plugin
19 skills
See everything inside

Other skills on skills-design.

See all 19 skills in skills-design