灵感看板 (Networked Visual Board)

更像灵感看板、研究地图和视觉数据库的浏览系统,卡片、标签与关联路径和首图一样重要。

灵感库研究地图案例收集

真实网站参考 / Real References

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

SiteInspire screenshot

代表网站 / Reference

SiteInspire

如果要把看板做得更可筛选,可以借它的目录感。

打开网站 / Open Site

长这样 / 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

  • 卡片标题和标签必须易扫
  • 元数据密度允许更高
  • 短描述比长段落更有效

版式规则 / Layout Rules

  • 支持收藏、关联、回访
  • 卡片、标签、关系同时存在
  • 从一张图可以走到一串相关内容

图片处理 / Image Treatment

  • 缩略图既要能代表内容,也要能在群组里协同工作
  • 不要同页大量重复
  • 允许局部更像看板而不是统一宣传图

交互节奏 / Motion

  • hover 只做轻量反馈
  • 重点是路径切换和关联探索
  • 不要把看板做成舞台演出

AI Prompt / AI Prompt

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

请参考灵感看板(Networked Visual Board)风格建站: 视觉特征:关系感强 / 卡片可延展 / 标签驱动 / 收藏与下钻并存 适合场景:灵感库 / 研究地图 / 案例收集 不适合:单一品牌首页 / 高转化落地页 / 严格流程工具 推荐页面组织:关系网络型 / Network Graph / Cluster / 目录索引型 / Catalog Explorer 历史来源:达达主义 / Dada / 后现代 / 孟菲斯 / Postmodern / Memphis / 瑞士风格 / Swiss Style 参考网站:Are.na: https://www.are.na/ / Behance: https://www.behance.net/ / SiteInspire: https://www.siteinspire.com/ 配色系统:中性底色更稳 / 颜色用于分组或状态 / 不要靠大量装饰色制造‘灵感感’ 排版系统:卡片标题和标签必须易扫 / 元数据密度允许更高 / 短描述比长段落更有效 版式规则:支持收藏、关联、回访 / 卡片、标签、关系同时存在 / 从一张图可以走到一串相关内容 图片处理:缩略图既要能代表内容,也要能在群组里协同工作 / 不要同页大量重复 / 允许局部更像看板而不是统一宣传图 风格要求:Use a networked visual board family: a living card field, tag-driven paths, cross-links between references, and a layout that supports collecting, comparing, and revisiting rather than just presenting one hero story.
历史来源 / Historical Roots

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

1916-1924

达达主义 (Dada)

用拼贴、偶然、反秩序和讽刺去拆解既有规则。

1981-1988 and beyond

后现代 / 孟菲斯 (Postmodern / Memphis)

反对过度理性和过度秩序,强调图案、冲突、俏皮和反规范的组合方式。

1950s-1970s

瑞士风格 (Swiss Style)

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