SuperAPI AI 工具集

magazine-poster

设计与创作

查看项目

更新于 10-15 18:31

技能介绍

Magazine Poster Skill 用于制作单页编辑风格海报,外观类似从周末报纸上撕下来的一页,整体呈现长篇、克制、以排版为核心的视觉语言。

用途 该技能面向需要生成具有社论或报纸质感的单页 HTML 海报的场景,强调字体层次与版面编排,而非图片或图形堆叠。

主要能力与工作流程 在开始前,先读取当前生效的 DESIGN.md(由系统注入)。随后从设计系统中选取最重的衬线字体用于标题,正文衬线字体用于分栏,打字机或等宽字体用于栏目小标和注释。

从简报中确定主题,撰写一条真实、有观点的标题:标题中需包含一个被删除线划掉的词(如 “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 的强调色短横条。
  • 正文网格:六个编号单元格,排成 2×3 或 3×2 网格。每个单元格包含:等宽字体、强调色的栏目小标(如 “01 · SHIP FAST”);粗体衬线副标题;2–3 句正文衬线内容;一条带注释的引用提示——在浅色底块上以等宽字体呈现 “use this prompt” 行。
  • 页脚区域:上方规则线,三个单元格分别显示 handle / role / date,左侧带一个小 “PRO TIP” 铭牌,内含一句收尾语。

输出方式 生成单个 HTML 文档,从 <!doctype html> 到 </html>,CSS 内联。背景使用奶油纸张色调(#f3eee2 或设计系统的画布色),并叠加细微纸张噪点(低透明度的径向渐变圆点)。正文使用 CSS Grid 实现双栏布局,页面最小宽度 1100px。在 header、headline、deck、每个单元格和 footer 上添加 data-od-id。

自检要点 字体层次需明确无误,标题主导整个版面;删除线与斜体强调各出现且仅出现一次;正文读起来像真实观点而非占位文本;在 1280–1440px 宽度下呈现有意为之的视觉效果。

输出契约 在 <artifact> 标签内输出: <artifact identifier="poster-slug" type="text/html" title="Poster Title"> <!doctype html> <html>...</html> </artifact> artifact 之前只写一句话,之后不写任何内容。

适用场景与限制 适用于需要生成编辑风格、排版驱动的单页 HTML 海报的场景。页面最小宽度为 1100px,自检建议在 1280–1440px 宽度下查看。该技能依赖已生效的 DESIGN.md 与设计系统令牌。关于具体收费、价格、平台支持范围等信息,资料中暂未提供。