mcpField
M
magazine-poster

magazine-poster

github.com/nexu-ioDesign & UI104.6k256 installsUpdated today
Repository

About magazine-poster

A design skill for creating a single-page, editorial-style poster as an HTML document. It structures the page around expressive serif typography, a six-cell body grid, and a newspaper-inspired layout.

Key features

  1. 01Editorial poster layout
  2. 02Serif headline with typographic accents
  3. 03Six-cell body grid
  4. 04Annotated prompt callouts
  5. 05Inline CSS HTML output

Use cases

  1. 01Designing a long-form editorial poster
  2. 02Presenting a topic in a newspaper-like format
  3. 03Building a typography-led single-page artifact

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/open-design --skill magazine-poster

After installing, type/magazine-posterin Claude Code to confirm it loaded.

Bundled filesexample.htmlopen-design.json

Details

From the project README

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 (#f3eee2 or 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-id on 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.

Comments

Markdown supported