杂志编辑 (Magazine Editorial)

以封面感和主稿节奏为核心的杂志型页面,首屏像一期杂志的 lead spread,而不是通用 SaaS hero。

出版站内容站专题页

真实网站参考 / Real References

先看这些真实网站 / Open these real sites first

长这样 / Looks Like

  • 封面式首屏
  • 标题与图片张力
  • 栏目层级
  • 阅读节奏

适合做 / Good For

  • 出版站
  • 内容站
  • 专题页

不适合做 / Not For

  • 复杂筛选工具
  • 后台工作台
  • 强操作产品

Skill 包含什么 / What The Skill Controls

截图、排版和规则来自同一套风格包 / The screenshots, layout, and rules come from the same skill packet

配色系统 / Color System

  • 配色服务封面和图片
  • 可以白底也可以深底
  • 比产品站更允许图片定调

排版系统 / Typography

  • 标题与副标题节奏要像杂志
  • 允许 serif + sans 组合
  • 栏目标签要清楚

版式规则 / Layout Rules

  • 首屏像 cover 或 lead spread
  • 正文不是一个大 feed
  • 二级内容按编辑节奏排

图片处理 / Image Treatment

  • 图片是节奏器
  • 尽量使用真实大图
  • 不要用 UI 解释图代替封面图

交互节奏 / Motion

  • 轻微 reveal 足够
  • 不要让 hover 破坏阅读节奏
  • 优先滚动节奏而非微交互

AI Prompt / AI Prompt

复制后直接粘贴给 Cursor / Claude / Paste directly into Cursor / Claude

请参考杂志编辑(Magazine Editorial)风格建站: 视觉特征:封面式首屏 / 标题与图片张力 / 栏目层级 / 阅读节奏 适合场景:出版站 / 内容站 / 专题页 不适合:复杂筛选工具 / 后台工作台 / 强操作产品 推荐页面组织:专题长文型 / Dossier / Feature / 档案堆栈型 / Archive Stack 历史来源:装饰艺术 / Art Deco / 瑞士风格 / Swiss Style 参考网站:Frieze: https://www.frieze.com/ / T Magazine: https://www.nytimes.com/section/t-magazine / The New Yorker: https://www.newyorker.com/ 配色系统:配色服务封面和图片 / 可以白底也可以深底 / 比产品站更允许图片定调 排版系统:标题与副标题节奏要像杂志 / 允许 serif + sans 组合 / 栏目标签要清楚 版式规则:首屏像 cover 或 lead spread / 正文不是一个大 feed / 二级内容按编辑节奏排 图片处理:图片是节奏器 / 尽量使用真实大图 / 不要用 UI 解释图代替封面图 风格要求:Use a magazine editorial family: cover-like lead story, large image-led first fold, supporting story stack, disciplined serif hierarchy, and a publication rhythm instead of a SaaS feature grid.
历史来源 / Historical Roots

这部分放在最后看,用来补背景,而不是先决定风格。 / Use this section to add background after the direction is already clear.

1920s-1930s

装饰艺术 (Art Deco)

几何装饰、流线感和高级感并存。今天它更多以精致和舞台感回到网页中。

1950s-1970s

瑞士风格 (Swiss Style)

网格、对齐、无衬线、秩序感。它是今天大量知识型、设计型、档案型网页的基础语法之一。