---
name: reference-directory
description: "参考目录 (Curated Reference Directory) style skill for AI website building."
---

# 参考目录 (Curated Reference Directory)

## 适用场景 / Use When

灵感库 / 模板库 / 风格参考站 / 收藏目录

## 适合做 / Best For

- 灵感库
- 模板库
- 参考站

## 不适合做 / Not For

- 单一品牌首页
- 强剧情叙事页
- 情绪化发布页

## 长这样 / Visual Traits

- 缩略图密集
- 分类先行
- 浏览优先
- 索引清楚

## 配色系统 / Color System

- 主色保持中性
- 重点靠缩略图而非底色
- 筛选控件要稳定清楚

## 排版系统 / Typography

- 卡片标题和分类标签清楚
- 正文字很少
- 浏览优先而非阅读优先

## 版式规则 / Layout Rules

- 首页就是入口和分类
- 先索引再详情
- 搜索、筛选、视图切换都要稳定

## 图片处理 / Image Treatment

- 缩略图密度高但比例统一
- 避免同页重复图
- 每张图都要能代表一个方向

## 动效节奏 / Motion

- 切换视图和筛选优先
- 不要靠花哨动画来吸引
- 扫描效率高于情绪化过渡

## 推荐结构 / Recommended Structures

- 目录索引型 / Catalog Explorer
- 关系网络型 / Network Graph / Cluster

## 历史来源 / Historical Roots

- 瑞士风格 / Swiss Style
- 后现代 / 孟菲斯 / Postmodern / Memphis

## 参考网站 / Reference Sites

- SiteInspire: https://www.siteinspire.com/
- Awwwards / Websites: https://www.awwwards.com/websites/
- Behance: https://www.behance.net/

## 注意避坑 / Avoid

- 英雄论式单一叙事
- 只有图片没有分类逻辑
- 首屏塞满理论解释

## Prompt DNA

```text
请参考参考目录（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.
```