参考目录 (Curated Reference Directory)
以索引、缩略图和分类入口为核心的参考目录型页面，先让用户浏览，再让用户钻取。
灵感库模板库参考站
真实网站参考 / 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
- 切换视图和筛选优先
- 不要靠花哨动画来吸引
- 扫描效率高于情绪化过渡
AI Prompt / AI Prompt
复制后直接粘贴给 Cursor / Claude / Paste directly into Cursor / Claude
请参考参考目录（Curated Reference Directory）风格建站：
视觉特征：缩略图密集 / 分类先行 / 浏览优先 / 索引清楚
适合场景：灵感库 / 模板库 / 参考站
不适合：单一品牌首页 / 强剧情叙事页 / 情绪化发布页
推荐页面组织：目录索引型 / Catalog Explorer / 关系网络型 / Network Graph / Cluster
历史来源：瑞士风格 / Swiss Style / 后现代 / 孟菲斯 / Postmodern / Memphis
参考网站：SiteInspire: https://www.siteinspire.com/ / Awwwards / Websites: https://www.awwwards.com/websites/ / Behance: https://www.behance.net/
配色系统：主色保持中性 / 重点靠缩略图而非底色 / 筛选控件要稳定清楚
排版系统：卡片标题和分类标签清楚 / 正文字很少 / 浏览优先而非阅读优先
版式规则：首页就是入口和分类 / 先索引再详情 / 搜索、筛选、视图切换都要稳定
图片处理：缩略图密度高但比例统一 / 避免同页重复图 / 每张图都要能代表一个方向
风格要求：Use a curated reference directory family: category-forward browsing, visible filters, dense but breathable thumbnails, and a clear separation between index and detail pages.
历史来源 / Historical Roots
这部分放在最后看，用来补背景，而不是先决定风格。 / Use this section to add background after the direction is already clear.
1950s-1970s
瑞士风格 (Swiss Style)
网格、对齐、无衬线、秩序感。它是今天大量知识型、设计型、档案型网页的基础语法之一。
1981-1988 and beyond
后现代 / 孟菲斯 (Postmodern / Memphis)
反对过度理性和过度秩序，强调图案、冲突、俏皮和反规范的组合方式。