Magazine Poster
- 258 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
magazine-poster is a Claude Code design skill that creates editorial magazine layouts and bold poster compositions for developers and designers producing campaigns, events, zines, or print-ready promotional assets.
About
magazine-poster is a visual design skill from nexu-io/open-design for developers and designers creating editorial or promotional print and digital assets. The skill guides composition of magazine-style layouts and bold poster designs suited to campaigns, events, zines, and print-ready promotional materials. Developers reach for magazine-poster when they need structured layout direction, typographic hierarchy, and campaign-ready compositions without opening a separate design toolchain from scratch. Output includes layout concepts, composition guidance, and asset direction suitable for Figma, InDesign, or export-ready production workflows.
- Editorial grids
- Bold typography
- Print-ready layout
- Campaign posters
- Visual storytelling
Magazine Poster by the numbers
- 258 all-time installs (skills.sh)
- +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #862 of 1,880 Design & UI/UX 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 magazine-posterAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 258 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
How do you design editorial magazine and poster layouts?
Create editorial magazine layouts and bold poster compositions for campaigns, events, zines, or print-ready promotional assets.
Who is it for?
Developers or designers producing campaign posters, editorial zines, event materials, or print-ready promotional layouts.
Skip if: Teams that only need responsive web UI components or app screen design without editorial or poster composition work.
When should I use this skill?
A developer asks to design a magazine layout, event poster, zine composition, or print-ready promotional visual asset.
What you get
Magazine layout concepts, poster composition specs, typographic hierarchy guidance, and print-ready promotional asset direction.
- magazine layout concept
- poster composition spec
- print-ready asset direction
Files
Magazine Poster Skill
Produce a single-page editorial poster — looks like a tear-out from a Sunday paper. Long-form, deliberate, type-driven.
Workflow
1. Read the active DESIGN.md (injected above). Pick the heaviest serif token in the DS for the headline, the body serif for the columns, and a typewriter / mono token for the section eyebrows and annotations. 2. Pick the topic from the brief. Write a real, opinionated headline — one with a struck-through word ("a designer", "the template hunt") and an italic accent on a key noun ("first draft", "mood", "specifics"). 3. Layout, in order:
- Top rule — thin black hairline + a dateline ("01 · A · YOUR LAB"
left, "DD · MMM · YYYY" right). Light typewriter font.
- Top eyebrow — a single mono tag like "POSTED TODAY".
- Headline — 2–3 lines, oversized serif. One word struck through
with text-decoration: line-through; text-decoration-thickness: 2px. One word italic, in accent color.
- Deck — a 1–2 sentence subhead in italic serif at ~60% size of
the headline, with a dash separator and a — what works callout fragment in accent.
- Accent rule — short horizontal accent-colored bar (~80px).
- Body grid — six numbered cells in a 2×3 (or 3×2) grid. Each cell:
- eyebrow (
01 · SHIP FAST) in mono, accent color. - bold serif sub-headline.
- 2–3 sentence body in body serif.
- one annotated callout — a quoted "use this prompt" line on a tinted
background block, set in mono.
- Footer band — rule above, three cells: handle / role / date, with a
small "PRO TIP" plate on the left containing one closing line. 4. Write a single HTML document:
<!doctype html>through</html>, CSS inline.- Background uses a creamy paper tint (
#f3eee2or DS canvas) plus a
subtle paper noise (radial-gradient dots at low opacity).
- 2-column body grid via CSS Grid; min-width 1100px page.
data-od-idon header, headline, deck, each cell, footer.
5. Self-check:
- Type hierarchy is unmistakable — headline owns the page.
- Strikethrough + italic accent both appear, exactly once each.
- Body reads like real opinion, not lorem ipsum.
- Looks intentional at 1280–1440px wide.
Output contract
Emit between <artifact> tags:
<artifact identifier="poster-slug" type="text/html" title="Poster 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>You don't need a designer to ship your first draft anymore — AI Enthusiast</title>
<style>
:root {
--paper: #f3eee2;
--ink: #1f1c17;
--muted: #6e6a5d;
--rule: #d3cdbe;
--accent: #b85a3a;
--tint: #ece5d3;
--serif-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
--serif-body: 'Iowan Old Style', 'Charter', Georgia, serif;
--mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;
}
* { box-sizing: border-box; }
body {
margin: 0; color: var(--ink);
background:
radial-gradient(circle, rgba(31,28,23,0.05) 1px, transparent 1.4px) 0 0 / 16px 16px,
var(--paper);
font: 14px/1.55 var(--serif-body);
}
.page {
max-width: 1180px;
margin: 0 auto;
padding: 36px 56px 48px;
}
.top-rule {
display: flex; justify-content: space-between; align-items: center;
font: 10.5px/1.4 var(--mono);
color: var(--muted);
letter-spacing: 0.18em;
text-transform: uppercase;
padding-bottom: 10px;
border-bottom: 1px solid var(--ink);
}
.eyebrow-row {
padding: 14px 0 28px;
font: 10.5px/1.4 var(--mono);
color: var(--muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
h1.headline {
font-family: var(--serif-display);
font-weight: 800;
font-size: clamp(56px, 7vw, 96px);
line-height: 0.98;
letter-spacing: -0.012em;
margin: 0 0 16px;
max-width: 18ch;
}
h1.headline .strike { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--ink); color: var(--ink); }
h1.headline .accent { font-style: italic; color: var(--accent); font-weight: 700; }
.deck {
max-width: 78ch;
font: italic 18px/1.45 var(--serif-body);
color: var(--ink);
margin: 0 0 22px;
}
.deck b { font-style: normal; color: var(--accent); font-weight: 600; padding: 0 4px; background: var(--tint); border-radius: 2px; }
.accent-rule { width: 80px; height: 3px; background: var(--accent); margin: 6px 0 32px; }
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 56px;
padding-top: 4px;
border-top: 1px solid var(--rule);
}
.cell { padding: 28px 0 4px; border-bottom: 1px solid var(--rule); }
.cell:nth-last-child(-n+2) { border-bottom: none; }
.cell .num {
font: 10.5px/1.4 var(--mono);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 6px;
display: flex; align-items: center; gap: 10px;
}
.cell .num span.bar { display: inline-block; width: 20px; height: 1px; background: var(--accent); opacity: 0.6; }
.cell h3 {
font: 700 22px/1.2 var(--serif-display);
letter-spacing: -0.005em;
margin: 0 0 10px;
}
.cell p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; max-width: 46ch; color: var(--ink); }
.cell .quote {
background: var(--tint);
border-left: 2px solid var(--accent);
padding: 10px 12px;
font: 12px/1.55 var(--mono);
color: var(--ink);
max-width: 50ch;
}
.cell .quote::before { content: '"'; }
.cell .quote::after { content: '"'; }
.footer {
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid var(--ink);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: center;
font: 10.5px/1.4 var(--mono);
color: var(--muted);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.pro-tip {
display: flex; gap: 12px; align-items: center;
padding: 10px 14px;
border: 1px solid var(--rule);
background: var(--paper);
max-width: 78%;
}
.pro-tip .badge { font: 9.5px/1 var(--mono); letter-spacing: 0.2em; padding: 6px 8px; border: 1px solid var(--ink); color: var(--ink); }
.pro-tip .text { font: italic 13px/1.4 var(--serif-body); color: var(--ink); text-transform: none; letter-spacing: 0; }
.pro-tip .text b { color: var(--accent); font-style: normal; font-weight: 600; }
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr; }
.cell { border-bottom: 1px solid var(--rule); }
.cell:last-child { border-bottom: none; }
.page { padding: 24px 24px 32px; }
}
</style>
</head>
<body>
<div class="page">
<div class="top-rule" data-od-id="top-rule">
<span>01 · AI ENTHUSIAST</span>
<span>17 · APR · 2026</span>
</div>
<div class="eyebrow-row" data-od-id="eyebrow">— POSTED TODAY</div>
<h1 class="headline" data-od-id="headline">
You don't need <span class="strike">a designer</span><br />
to ship your <span class="accent">first draft</span><br />
anymore.
</h1>
<p class="deck" data-od-id="deck">
Six honest ways I'm using AI to move faster from idea → artifact this week — <b>what works</b>, what I'd still hand to a human, and the exact prompts that got me there.
</p>
<div class="accent-rule"></div>
<div class="grid" data-od-id="grid">
<section class="cell" data-od-id="cell-1">
<div class="num"><span class="bar"></span>01 · SHIP FAST</div>
<h3>Clickable prototype in 90 seconds</h3>
<p>Describe the flow in plain English. Get a real, tappable prototype — not static screens. Export to HTML and share the link.</p>
<div class="quote">Onboarding flow for a fintech app — 5 screens, dark mode, rounded cards, haptic-style transitions.</div>
</section>
<section class="cell" data-od-id="cell-2">
<div class="num"><span class="bar"></span>02 · PITCH</div>
<h3>Investor deck from a napkin idea</h3>
<p>Skip the template hunt. Draft the deck, refine it section-by-section, then export straight to PPTX or PDF — notes included.</p>
<div class="quote">10-slide seed pitch for a RAG tool for lawyers. Keep it minimal, data-first, one chart per slide.</div>
</section>
<section class="cell" data-od-id="cell-3">
<div class="num"><span class="bar"></span>03 · BRAND LOCK</div>
<h3>Your design system, auto-applied</h3>
<p>Point the model at your tokens, components, or a codebase. Every new asset respects your type, color, and spacing scale.</p>
<div class="quote">Use our /design-system tokens. Build a pricing page variant. Match the radius + shadow of the marketing site.</div>
</section>
<section class="cell" data-od-id="cell-4">
<div class="num"><span class="bar"></span>04 · MARKETING</div>
<h3>Landing pages & launch collateral</h3>
<p>One-pagers, email headers, feature comparison grids — editable, on-brand, and ready to hand off in minutes, not days.</p>
<div class="quote">One-pager for a Series A launch. Headline, three proof points, CTA. Editorial feel, no stock photos.</div>
</section>
<section class="cell" data-od-id="cell-5">
<div class="num"><span class="bar"></span>05 · HANDOFF</div>
<h3>Design → engineering bundle</h3>
<p>Finished the mock? Ship the whole handoff to your dev environment. Specs, tokens, components — no translation layer.</p>
<div class="quote">Export this mock to code. Wire the auth screen to Supabase. Add a loading state and empty state.</div>
</section>
<section class="cell" data-od-id="cell-6">
<div class="num"><span class="bar"></span>06 · EXPLORE</div>
<h3>Ten directions in ten minutes</h3>
<p>Generate N visual directions side-by-side. Use sliders to dial tone: playful, brutalist, editorial, corporate — same copy.</p>
<div class="quote">Show six hero section variants. Same copy, different aesthetics. Label each with a mood word.</div>
</section>
</div>
<div class="footer" data-od-id="footer">
<div class="pro-tip">
<span class="badge">PRO TIP</span>
<span class="text">Don't prompt for <b>"a good design."</b> Prompt for a mood — <b>"serene", "brutalist", "Bloomberg terminal," "Sunday newspaper."</b> Aesthetic specificity is the unlock.</span>
</div>
<div></div>
<div>SAVE · REPOST · TRY ONE THIS WEEKEND</div>
</div>
</div>
</body>
</html>
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What assets does magazine-poster create?
magazine-poster creates editorial magazine layouts and bold poster compositions for campaigns, events, zines, and print-ready promotional materials. The skill provides layout structure, typographic hierarchy, and composition guidance for design production.
Is magazine-poster for web or print design?
magazine-poster focuses on editorial and poster compositions for print-ready and promotional use cases. Developers use it for campaign visuals, event posters, and zine layouts rather than responsive application UI screens.