瑞士网格 (Swiss Typographic Grid)
以网格、排印和对齐关系组织信息的系统型页面，适合会持续生长的档案、参考库和知识站。
档案站工作室参考库
真实网站参考 / 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
- 12 列或明确模数网格
- 所有卡片和段落都对齐到同一边界
- 元数据要像导航一样可读
图片处理 / Image Treatment
- 图片视为网格中的内容块
- 避免漂浮卡片和圆角浏览器壳
- 截图统一裁切比例
交互节奏 / Motion
- 动效极少
- 更多依靠 hover 的边框和对齐反馈
- 不要做情绪化转场
AI Prompt / AI Prompt
复制后直接粘贴给 Cursor / Claude / Paste directly into Cursor / Claude
请参考瑞士网格（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.
历史来源 / Historical Roots
这部分放在最后看，用来补背景，而不是先决定风格。 / Use this section to add background after the direction is already clear.
1950s-1970s
瑞士风格 (Swiss Style)
网格、对齐、无衬线、秩序感。它是今天大量知识型、设计型、档案型网页的基础语法之一。