灵感看板 (Networked Visual Board)
更像灵感看板、研究地图和视觉数据库的浏览系统,卡片、标签与关联路径和首图一样重要。
灵感库研究地图案例收集
真实网站参考 / 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
- 卡片标题和标签必须易扫
- 元数据密度允许更高
- 短描述比长段落更有效
版式规则 / 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)
网格、对齐、无衬线、秩序感。它是今天大量知识型、设计型、档案型网页的基础语法之一。