magazine-poster

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Magazine Poster Skill

杂志海报设计Skill

Produce a single-page editorial poster — looks like a tear-out from a Sunday paper. Long-form, deliberate, type-driven.

制作单页社论风格海报——看起来像是从周日报纸上撕下的版面。采用长篇幅、精心设计的文字主导型布局。

Workflow

工作流程

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.
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").
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.
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.
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.

阅读当前的DESIGN.md（已注入上方内容）。从设计系统（DS）中选择最粗的衬线字体作为标题，正文字体用于栏目标题，打字机/等宽字体用于板块眉题和注释。
从需求中选定主题。撰写一个真实且带有观点的标题——包含一个带删除线的单词（如“a designer”“the template hunt”），并对一个关键名词（如“first draft”“mood”“specifics”）使用斜体强调。
按以下顺序进行排版：
- 顶部分隔线——细黑色发丝线 + 日期线（左侧为“01 · A · YOUR LAB”，右侧为“DD · MMM · YYYY”）。使用浅色打字机字体。
- 顶部眉题——单个等宽标签，例如“POSTED TODAY”。
- 标题——2–3行，大号衬线字体。其中一个单词添加删除线样式：
```
text-decoration: line-through; text-decoration-thickness: 2px
```
  。一个单词使用斜体，颜色为强调色。
- 副标题——1–2句斜体衬线文字，字号约为标题的60%，带有破折号分隔符，且包含一个强调色的
```
— what works
```
  提示片段。
- 强调分隔线——短水平强调色条（约80px）。
- 正文网格——6个编号单元格组成2×3（或3×2）网格。每个单元格包含：
  - 等宽字体、强调色的眉题（如
```
01 · SHIP FAST
```
    ）。
  - 粗体衬线副标题。
  - 2–3句正文字体的正文内容。
  - 一个注释引述——在淡色背景块上的“use this prompt”引用语句，使用等宽字体。
- 页脚栏——上方带有分隔线，分为三个单元格：账号/角色/日期，左侧有一个小型“PRO TIP”板块，包含一句收尾提示。
撰写单个HTML文档：
- 包含
```
<!doctype html>
```
  至
```
</html>
```
  的完整结构，CSS内联。
- 背景使用奶油色纸张色调（
```
#f3eee2
```
  或DS画布色），加上细微的纸张纹理（低透明度的
```
radial-gradient
```
  圆点）。
- 通过CSS Grid实现两栏正文网格；页面最小宽度为1100px。
- 在页眉、标题、副标题、每个单元格、页脚上添加
```
data-od-id
```
  属性。
自我检查：
- 字体层级清晰明确——标题占据页面主导地位。
- 同时包含删除线和斜体强调，各出现一次。
- 正文内容读起来像是真实的观点，而非占位文本。
- 在1280–1440px宽度下显示效果协调自然。

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.

在

<artifact>

标签内输出：

<artifact identifier="poster-slug" type="text/html" title="Poster Title">
<!doctype html>
<html>...</html>
</artifact>

在artifact前输出一句话，之后无内容。