---
name: institutional-grid
description: "机构项目网格 (Institutional Program Grid) style skill for AI website building."
---

# 机构项目网格 (Institutional Program Grid)

## 适用场景 / Use When

美术馆站点 / 研究机构 / 学院项目页 / 节展与驻留项目

## 适合做 / Best For

- 美术馆站
- 机构项目
- 节展计划

## 不适合做 / Not For

- 强销售首页
- 纯工具后台
- 单一 hero 发布页

## 长这样 / Visual Traits

- 清冷网格
- program 并列
- 栏目克制
- 机构感明确

## 配色系统 / Color System

- 黑白灰或近白底更稳
- 颜色只服务栏目和状态
- 不要用营销型品牌色抢 program 信息

## 排版系统 / Typography

- 标题和栏目层级必须同时成立
- 日期、地点、项目类型这些元数据要很好扫
- 更接近机构排印而不是品牌 slogan

## 版式规则 / Layout Rules

- 首页同时容纳机构介绍、program、日程和申请入口
- 列表与 feature 要并存
- 网格必须帮助导航而不是只做形式

## 图片处理 / Image Treatment

- 图片更像项目资料或展讯封面
- 缩略图比例要稳定
- 避免充满情绪的单一 hero 大图独占整页

## 动效节奏 / Motion

- 只做轻量 reveal 和 hover
- 不要让节目单式浏览被动画打断
- 优先保持浏览稳定

## 推荐结构 / Recommended Structures

- 档案堆栈型 / Archive Stack
- 目录索引型 / Catalog Explorer

## 历史来源 / Historical Roots

- 瑞士风格 / Swiss Style
- 新字体排印 / New Typography
- 包豪斯 / Bauhaus

## 参考网站 / Reference Sites

- Swiss Institute: https://www.swissinstitute.net/
- Frieze: https://www.frieze.com/
- Pentagram: https://www.pentagram.com/

## 注意避坑 / Avoid

- 把机构页做成奢华品牌大片
- 只剩网格没有 program 入口
- CTA 太弱导致申请或购票路径难找

## Prompt DNA

```text
请参考机构项目网格（Institutional Program Grid）风格建站：
视觉特征：清冷网格 / program 并列 / 栏目克制 / 机构感明确
适合场景：美术馆站 / 机构项目 / 节展计划
不适合：强销售首页 / 纯工具后台 / 单一 hero 发布页
推荐页面组织：档案堆栈型 / Archive Stack / 目录索引型 / Catalog Explorer
历史来源：瑞士风格 / Swiss Style / 新字体排印 / New Typography / 包豪斯 / Bauhaus
参考网站：Swiss Institute: https://www.swissinstitute.net/ / Frieze: https://www.frieze.com/ / Pentagram: https://www.pentagram.com/
配色系统：黑白灰或近白底更稳 / 颜色只服务栏目和状态 / 不要用营销型品牌色抢 program 信息
排版系统：标题和栏目层级必须同时成立 / 日期、地点、项目类型这些元数据要很好扫 / 更接近机构排印而不是品牌 slogan
版式规则：首页同时容纳机构介绍、program、日程和申请入口 / 列表与 feature 要并存 / 网格必须帮助导航而不是只做形式
图片处理：图片更像项目资料或展讯封面 / 缩略图比例要稳定 / 避免充满情绪的单一 hero 大图独占整页
风格要求：Use an institutional program grid family: quiet grid-based layout, cultural-program rhythm, clear date or program entry points, restrained typography, and a homepage that balances institution identity with live programming rather than hero-led marketing.
```