---
name: swiss-grid
description: "瑞士网格 (Swiss Typographic Grid) style skill for AI website building."
---

# 瑞士网格 (Swiss Typographic Grid)

## 适用场景 / Use When

档案站 / 设计工作室 / 参考库 / 设计系统入口

## 适合做 / Best For

- 档案站
- 工作室
- 参考库

## 不适合做 / Not For

- 娱乐发布
- 霓虹科技页
- 重情绪电商

## 长这样 / Visual Traits

- 严格网格
- 大量留白
- 排印主导
- 黑白为主

## 配色系统 / Color System

- 背景接近纯白或纯黑
- 只用黑白灰作为主系统
- 强调层级而不是装饰色

## 排版系统 / Typography

- 一个无衬线主字体
- 标题和元数据都要严格对齐
- 字号系统以层级和标签为主

## 版式规则 / Layout Rules

- 12 列或明确模数网格
- 所有卡片和段落都对齐到同一边界
- 元数据要像导航一样可读

## 图片处理 / Image Treatment

- 图片视为网格中的内容块
- 避免漂浮卡片和圆角浏览器壳
- 截图统一裁切比例

## 动效节奏 / Motion

- 动效极少
- 更多依靠 hover 的边框和对齐反馈
- 不要做情绪化转场

## 推荐结构 / Recommended Structures

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

## 历史来源 / Historical Roots

- 瑞士风格 / Swiss Style

## 参考网站 / Reference Sites

- Signal-A Studio: https://signal-a.studio/
- Studio Feixen: https://www.studiofeixen.ch/
- Pentagram: https://www.pentagram.com/

## 注意避坑 / Avoid

- 装饰性渐变
- 软糯圆角组件
- 不规则瀑布流

## Prompt DNA

```text
请参考瑞士网格（Swiss Typographic Grid）风格建站：
视觉特征：严格网格 / 大量留白 / 排印主导 / 黑白为主
适合场景：档案站 / 工作室 / 参考库
不适合：娱乐发布 / 霓虹科技页 / 重情绪电商
推荐页面组织：目录索引型 / Catalog Explorer / 档案堆栈型 / Archive Stack
历史来源：瑞士风格 / Swiss Style
参考网站：Signal-A Studio: https://signal-a.studio/ / Studio Feixen: https://www.studiofeixen.ch/ / Pentagram: https://www.pentagram.com/
配色系统：背景接近纯白或纯黑 / 只用黑白灰作为主系统 / 强调层级而不是装饰色
排版系统：一个无衬线主字体 / 标题和元数据都要严格对齐 / 字号系统以层级和标签为主
版式规则：12 列或明确模数网格 / 所有卡片和段落都对齐到同一边界 / 元数据要像导航一样可读
图片处理：图片视为网格中的内容块 / 避免漂浮卡片和圆角浏览器壳 / 截图统一裁切比例
风格要求：Use a Swiss typographic grid: modular alignment, visible metadata, tight typographic hierarchy, and structure carried by the grid rather than decoration.
```