design-linkedin-post — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited design-linkedin-post (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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.
DESIGN.md exists for the brand. If it doesn't, stop and tell the user to run /design-plan → /design-system first../design/<brand-slug>/artifacts/linkedin-YYYY-MM-DD-<topic-slug>.html
test -f ./design/<brand-slug>/tokens.cssIf missing, stop and instruct the user to build the design system first.
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 | questionBefore 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.
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:
symmetric | asymmetric | off-grid | full-bleed | splitdisplay-dominant | body-dominant | mono-led | mixed-weightmonochrome | single-accent | duotone | inverted (inverted = surface-as-ink)headline-led | quote-led | mark-led | data-ledCross-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.
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-soft);
}
/* Print: export at exact dimensions */
@page { size: 1200px 627px; margin: 0; }
@media print {
html, body { background: var(--color-surface); }
.canvas { box-shadow: none; }
}
</style>
</head>
<body>
<!--
Variation choices:
layout: <picked>
type-pressure: <picked>
color: <picked>
composition: <picked>
-->
<article class="canvas">
<header>
<span class="eyebrow"><eyebrow text — typically the topic category, never the brand name itself></span>
<h1 class="headline"><headline></h1>
<!-- optional supporting line -->
</header>
<footer class="footer">
<span><Brand mark or name></span>
<span><YYYY.MM.DD></span>
<span><optional CTA, e.g. "Read more →"></span>
</footer>
</article>
</body>
</html>Adapt the layout structure to match the chosen variation. For example:
transform, push the footer to bottom-left only--color-surface and --color-ink for the canvas (use background: var(--color-ink); color: var(--color-surface);)Append a markdown block AFTER the HTML file inside an HTML comment, OR write a sibling .txt file. Default: include in an HTML comment at the end of the artifact for portability.
LinkedIn companion text rules:
Append:
<!--
COMPANION TEXT:
<line 1 hook — must stand alone>
<paragraph 2>
<paragraph 3>
<final line — invitation, claim, or question>
(Reply with link in first comment if needed.)
-->Before claiming done, mentally check:
Report:
LinkedIn artifact at ./design/<brand-slug>/artifacts/linkedin-YYYY-MM-DD-<slug>.html.>
Variation:<layout>×<type-pressure>×<color>×<composition>.
>
To export as PNG: open in browser → DevTools → device toolbar → set viewport to 1200×627 → screenshot the.canvaselement. OrCmd+P→ save as PDF (page size auto-set to 1200×627 by@page).
>
Companion text is in an HTML comment at the end of the file.
Governed by three shared canonical references — read them, do not restate them:
Forbidden (fast scan — the references hold the full list):
hsl(230–280) family on a near-white surface. The single loudest AI tell.Required variation (every invocation):
Authenticity: prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders.
clamp() for headline overflow.var(--*) from tokens.css. The only literal pixel values allowed are 1px for hairlines and 1200px / 627px for the canvas.../design-anti-patterns.md (the hard floor — wins every conflict), ../design-principles.md (the craft floor), and ../design-variation-sop.md (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list. If you find a new tell in the output, add it there.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.