创意媒体 (Creative Media Editorial)

介于杂志封面和内容 feed 之间的创意媒体首页,既要有图像张力,也要有持续更新时的浏览效率。

创意媒体设计博客文化资讯

真实网站参考 / 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

  • 先有 lead story 再有次级栏目
  • 支持高频更新但不失去封面感
  • 首页是编辑入口不是长文全文

图片处理 / Image Treatment

  • 图片必须有张力
  • 缩略图和 lead 图要区分层级
  • 不要全部裁成同一种无差别卡片

交互节奏 / Motion

  • 轻微 reveal 即可
  • 更依赖版面节奏而不是交互动效
  • 不要让 hover 打断浏览

AI Prompt / AI Prompt

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

请参考创意媒体(Creative Media Editorial)风格建站: 视觉特征:栏目感强 / 图文并行 / 更新频繁 / 封面与列表共存 适合场景:创意媒体 / 设计博客 / 文化资讯 不适合:重操作工具页 / 强销售落地页 / 只有少量内容的站 推荐页面组织:档案堆栈型 / Archive Stack / 专题长文型 / Dossier / Feature 历史来源:新字体排印 / New Typography / 瑞士风格 / Swiss Style / 装饰艺术 / Art Deco 参考网站:It's Nice That: https://www.itsnicethat.com/ / Frieze: https://www.frieze.com/ / The New Yorker: https://www.newyorker.com/ 配色系统:以黑白灰为骨架 / 图片自己定调 / 不要把功能色做成主角 排版系统:标题、栏目、时间和作者信息都要清楚 / serif 与 sans 可以并用 / 保持读稿节奏而不是纯海报感 版式规则:先有 lead story 再有次级栏目 / 支持高频更新但不失去封面感 / 首页是编辑入口不是长文全文 图片处理:图片必须有张力 / 缩略图和 lead 图要区分层级 / 不要全部裁成同一种无差别卡片 风格要求:Use a creative media editorial family: a strong lead image or story block, visible section rhythm, live publishing cadence, and enough structure to support frequent updates without losing voice.
历史来源 / Historical Roots

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

1920s-1930s

新字体排印 (New Typography)

以非对称排版、空白场和摄影/版面组织信息清晰度。

1950s-1970s

瑞士风格 (Swiss Style)

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

1920s-1930s

装饰艺术 (Art Deco)

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