甄选展示索引 (Showcase Discovery Index)

更像 SiteInspire、Awwwards 这类甄选展示首页的家族:先给 featured picks,再给 popular categories 和发现墙,策展口味比内部资料管理更强。

甄选案例站奖项展示灵感发现

真实网站参考 / Real References

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

SiteInspire screenshot

代表网站 / Reference

SiteInspire

popular categories 和 curated front page 的组织尤其值得借。

打开网站 / Open Site
SiteInspire / Listings screenshot

代表网站 / Reference

SiteInspire / Listings

如果你要更像案例索引页,可以借它的 listing 一侧。

打开网站 / Open Site

长这样 / Looks Like

  • featured 入口
  • 分类 chips
  • 案例墙密集
  • 策展口味强

适合做 / Good For

  • 甄选案例站
  • 奖项展示
  • 灵感发现

不适合做 / Not For

  • 内部知识库
  • 单一品牌首页
  • 重操作工作台

Skill 包含什么 / What The Skill Controls

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

配色系统 / Color System

  • 中性骨架更衬托案例
  • 重点在标签和精选位
  • 不要把背景做得比作品更抢戏

排版系统 / Typography

  • 分类 chips、精选标题和站点名要很好扫
  • 更像 taste-led curation 而不是内部数据库
  • 文案应短促明确

版式规则 / Layout Rules

  • 先有 featured 或 curated picks 再有案例墙
  • popular categories 要足够醒目
  • 让用户快速从首页进入多条发现路径

图片处理 / Image Treatment

  • 缩略图密度高但必须有主次
  • 精选位和普通 listing 不能完全一样
  • 避免首页只有均匀卡片失去入口层次

交互节奏 / Motion

  • 切换分类和浏览节奏更重要
  • 不要用复杂转场抢注意力
  • 首页应该让人很快想继续点

AI Prompt / AI Prompt

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

请参考甄选展示索引(Showcase Discovery Index)风格建站: 视觉特征:featured 入口 / 分类 chips / 案例墙密集 / 策展口味强 适合场景:甄选案例站 / 奖项展示 / 灵感发现 不适合:内部知识库 / 单一品牌首页 / 重操作工作台 推荐页面组织:目录索引型 / Catalog Explorer / 档案堆栈型 / Archive Stack 历史来源:新字体排印 / New Typography / 瑞士风格 / Swiss Style / 装饰艺术 / Art Deco 参考网站:Awwwards / Websites: https://www.awwwards.com/websites/ / SiteInspire: https://www.siteinspire.com/ / SiteInspire / Listings: https://www.siteinspire.com/ 配色系统:中性骨架更衬托案例 / 重点在标签和精选位 / 不要把背景做得比作品更抢戏 排版系统:分类 chips、精选标题和站点名要很好扫 / 更像 taste-led curation 而不是内部数据库 / 文案应短促明确 版式规则:先有 featured 或 curated picks 再有案例墙 / popular categories 要足够醒目 / 让用户快速从首页进入多条发现路径 图片处理:缩略图密度高但必须有主次 / 精选位和普通 listing 不能完全一样 / 避免首页只有均匀卡片失去入口层次 风格要求:Use a showcase discovery index family: editorially curated featured slots, visible popular categories, dense but premium browsing, and a front page that signals taste first, then helps users discover more through filters and showcases.
历史来源 / 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)

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