magazine-poster

杂志海报技能

制作一张单页编辑风格海报——看起来像是从周日报纸上撕下来的。长篇、从容、以字体为主。

工作流程

1. 阅读当前的 DESIGN.md（已在上方注入）。从 DS 中挑选最厚重的衬线字体 token 用于标题，正文衬线字体用于分栏，以及打字机／等宽字体 token 用于章节眉题和注释。
2. 从需求简述中挑选主题。写一个真正有观点的标题——其中一个词要加删除线（“一位设计师”“模板搜寻”），并在一个关键名词上用斜体强调（“初稿”“氛围”“具体细节”）。
3. 按顺序排版：
   • 顶端细线——黑色细线 + 日期栏（左侧为“01 · A · 你的实验室”，右侧为“日 · 月 · 年”）。使用轻盈的打字机字体。
   • 顶部眉题——一个等宽字体标签，例如“今日发布”。
   • 标题——2–3 行，超大号衬线字体。一个词加删除线，使用 text-decoration: line-through; text-decoration-thickness: 2px。一个词用斜体，并使用强调色。
   • 副标题——1–2 句斜体衬线字体小标题，字号约为标题的 60%，带破折号分隔符，并加入强调色的 — 哪些有效 提示片段。
   • 强调色细线——一条短的水平强调色线条（约 80px）。
   • 正文网格——六个编号单元格，排成 2×3（或 3×2）网格。每个单元格：
     • 眉题（01 · 快速发布），使用等宽字体和强调色。
     • 粗体衬线字体小标题。
     • 2–3 句正文，使用正文衬线字体。
     • 一处注释式提示——一行引用的“使用此提示词”，置于着色背景块中，并使用等宽字体。
   • 页脚栏——上方有细线，包含三个单元格：账号名／角色／日期，左侧放一块小型“专业提示”标牌，其中包含一句收尾语。
4. 编写一个 HTML 文档：
   • 从 <!doctype html> 到 </html>，CSS 内联。
   • 背景使用奶油色纸张底色（#f3eee2 或 DS 画布色），并叠加细微的纸张噪点（低不透明度的 radial-gradient 圆点）。
   • 正文使用 CSS Grid 创建两列网格；页面最小宽度为 1100px。
   • 在页眉、标题、副标题、每个单元格和页脚上添加 data-od-id。
5. 自检：
   • 字体层级一目了然——标题是页面的主角。
   • 删除线和斜体强调各出现一次，且仅一次。
   • 正文读起来像真实的观点，而不是 Lorem ipsum。
   • 在 1280–1440px 宽度下，版面看起来经过精心设计。

输出要求

在 <artifact> 标签之间输出：

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

在作品前写一个句子，之后不写任何内容。