Skip to content
Content
Skill

/design-linkedin-post

Generate a LinkedIn post artifact — a 1200×627 image canvas (LinkedIn's recommended share image dimension) plus a companion text suggestion (1300-char limit, hook-first structure). Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "linkedin

Boost this skill
@slogsdonslogsdon@slogsdon
From plugin
skills-design
319 skills
Install
$ npx -y skills add slogsdon/skills-design --skill design-linkedin-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-linkedin-post

Context preview

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

Generate a LinkedIn post artifact — a 1200×627 image canvas (LinkedIn's recommended share image dimension) plus a companion text suggestion (1300-char limit, hook-first structure). Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "linkedin

SKILL.md

design-linkedin-post.SKILL.md
name: design-linkedin-post
description: Generate a LinkedIn post artifact — a 1200×627 image canvas (LinkedIn's recommended share image dimension) plus a companion text suggestion (1300-char limit, hook-first structure). Reads ./design/<brand-slug>/DESIGN.md, tokens.css, and components.html. Triggers include "linkedin post about X", "linkedin artifact", "generate a linkedin image", "/linkedin-post".

Skill: linkedin-post

Produces a pixel-exact 1200×627 HTML canvas suitable for screenshotting and uploading to LinkedIn as a post image, plus a markdown block with the recommended companion text. Reads from a brand's `DESIGN.md` system — never hardcodes brand values.

When to use

  • User wants a visual asset for a LinkedIn post (announcement, milestone, opinion piece, takeaway from a project)
  • A `DESIGN.md` exists for the brand. If it doesn't, stop and tell the user to run `/design-plan` → `/design-system` first.

Inputs

  • **Required:** brand slug, post topic / headline (1 line)
  • **Optional:** key claim or supporting line, CTA text, attribution (author name + role), variation hints

Output

`./design/<brand-slug>/artifacts/linkedin-YYYY-MM-DD-<topic-slug>.html`

Steps

1. Verify brand exists

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

If missing, stop and instruct the user to build the design system first.

2. Gather the brief

Ask in one message:

1. Headline — the single sentence on the image (max 8 words for legibility at feed scale)
2. Optional supporting line (max 14 words)
3. Optional CTA text (e.g. "Read more →") — leave blank to omit
4. Attribution — your name + role, or leave blank for a clean unsigned look
5. Companion text style: insight | story | announcement | question

3. Pick variation — ARCHITECTURE FIRST

Before anything else, pick ONE architecture archetype. This is the structural skeleton; everything else is decoration. The single biggest cause of AI-editorial output is reaching for `chrome-led` by default.

  • **Architecture archetype** (most-important choice — pick FIRST):
  • `chrome-led` — eyebrow + headline + signature-row footer. **Treat as the LAST resort.** This is the AI-editorial default; using it more than once per brand creates structural sameness.
  • `type-only` — nothing but the type. No eyebrow, no footer, no rules. The headline IS the artifact.
  • `number-led` — one oversized number/stat dominates ~60%+ of canvas; the rest is short caption. Everything bows to the figure.
  • `object-of-content` — the artifact IS the thing being communicated. Looks like a fragment of the product (a transcript, a printed page, a list of entries, a receipt). The "post" frame disappears.
  • `pattern-led` — typographic pattern or repetition fills the canvas; one element breaks the pattern as the punctum.
  • `inverse-text` — text becomes surface. Massive headline with body text wrapping the negative space; or a block of body type with the headline carved out as a void.

After the archetype, pick ONE from each remaining axis:

  • **Layout**: `symmetric | asymmetric | off-grid | full-bleed | split`
  • **Type pressure**: `display-dominant | body-dominant | mono-led | mixed-weight`
  • **Color usage**: `monochrome | single-accent | duotone | inverted` (inverted = surface-as-ink)
  • **Composition focus**: `headline-led | quote-led | mark-led | data-led`

**Cross-artifact rule (mandatory):** before picking, list `./design/<brand-slug>/artifacts/` and read the variation comments of the most recent 2–3 artifacts. If your archetype matches any recent one, pick a DIFFERENT archetype. Same with secondary axes — don't repeat combos within a brand.

4. Generate the canvas HTML

Template (canvas dimensions are NOT negotiable — exact 1200×627):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><Brand> — LinkedIn — <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 from DESIGN.md>&display=swap">
<style>
/* Embed tokens.css verbatim */
<contents of tokens.css>

/* Page-level — center the canvas in the viewport for preview */
html, body { margin: 0; padding: 0; background: #2a2a2a; min-height: 100vh; display: grid; place-items: center; font-family: var(--type-body-md-family); }

/* THE CANVAS — exact LinkedIn dimensions */
.canvas {
  width: 1200px;
  height: 627px;
  background: var(--color-surface);
  color: var(--color-ink);
  position: relative;
  overflow: hidden;
  /* Set padding using a token, NOT a magic number */
  padding: var(--space-3xl);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Layout justification depends on the variation chosen */
  justify-content: <space-between | center | flex-start>;
}

/* Headline — uses display-xl or display-lg from tokens depending on length */
.headline {
  font: var(--type-display-xl-weight) var(--type-display-xl-size)/var(--type-display-xl-leading) var(--type-display-xl-family);
  letter-spacing: var(--type-display-xl-tracking);
  margin: 0;
  /* For long headlines, use clamp() to scale down */
  font-size: clamp(40px, 5vw, 72px);
}

/* Eyebrow above headline */
.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);
  margin-bottom: var(--space-md);
}

/* Footer row: brand + date + cta */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-md);
  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-s
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
Maintained
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