feat: 导出 SproutClaw .sproutclaw 配置
包含 extensions、skills、prompts、settings、auth、models、mcp 等配置。 排除 node_modules、npm 缓存、sessions 等运行时数据。
This commit is contained in:
@@ -0,0 +1 @@
|
||||
大家好,今天这场 lecture 我们聊一个看起来很冷、其实关系到每一张幻灯片、每一篇文章、每一个网页的话题——网格系统。完整的题目叫"瑞士网格系统:The Grid as a Way of Seeing"。我会带大家从十九世纪末瑞士苏黎世的一所小学校讲起,一直走到屏幕上你今天写的 CSS Grid。整场大约二十五分钟。这本身就是一张瑞士极简风格的封面页——纯白底、几何网格、一枚红圆——它就是接下来要讲的内容的视觉提要。
|
||||
@@ -0,0 +1 @@
|
||||
进入正题之前,先听一段穆勒·布罗克曼在 1981 年写下的话。他说:网格系统是一种辅助工具,不是一种保证。它允许多种用法,每个设计师可以找到适合自己个性的解决方案。但是,必须学会怎样去使用网格——它是一门需要练习的艺术。这句话定下了我们今天的基调。网格不会替你做设计,它只是给你一个可以让你做出好设计的骨架。
|
||||
@@ -0,0 +1 @@
|
||||
很多人以为瑞士国际主义风格是一夜之间冒出来的几个大师做出来的事情,其实它来自整整六十年的累积。1896 年,柏林的 Berthold 铸字行发行了 Akzidenz-Grotesk,第一款现代意义的商业无衬线字体。1908 年,巴塞尔设计学院完成改革。1918 年,Ernst Keller 进入苏黎世应用艺术学院,奠定"形式跟随内容"的教学原则。1936 年,22 岁的穆勒·布罗克曼在苏黎世开设独立工作室。最后,1957 年,Helvetica 和 Univers 同年问世。理性主义不是凭空而至,它是字体、学校、教学这三条线索半个世纪共同长出来的果实。
|
||||
@@ -0,0 +1 @@
|
||||
那么这套风格的核心原则是什么?穆勒·布罗克曼总结了八条。第一,客观先于表达——信息传达高于设计师的个人情绪。第二,数学网格为骨架——列、行、间距、模数都从基本单位派生。第三,非对称构图——拒绝古典对称带来的中心权威。第四,无衬线字体。第五,齐左不齐右,字距均匀。第六,客观摄影代替装饰性插画。第七,留白是结构而不是剩余——这一条是整个体系最容易被忽视也最难做到的,我们后面会单独用一页来讲它。第八,可重复、可教学、可规模化。
|
||||
@@ -0,0 +1 @@
|
||||
这套体系不是一个人做出来的,它是一群人共同建造的。Ernst Keller 在苏黎世奠基;Théo Ballmer 把 De Stijl 的几何引入海报,是桥梁式人物;Max Bill 是包豪斯学生,后来去乌尔姆设计学院当首任校长,把瑞士理性延伸到产品设计;Emil Ruder 是巴塞尔学派核心,他写的 Typographie 至今是字体设计的圣经;Armin Hofmann 是巴塞尔另一根支柱,他的影响一直延续到耶鲁。Müller-Brockmann 是苏黎世学派的核心,我们下一页详细讲他。最后两位是字体设计师:Max Miedinger 在 1957 年和 Hoffmann 一起做出了 Helvetica;同一年,Adrian Frutiger 做出了 Univers。
|
||||
@@ -0,0 +1 @@
|
||||
让我们单独看一下 Müller-Brockmann 这个人。他 1914 年生于瑞士的小镇拉珀斯维尔,距苏黎世大约 40 公里。1936 年,22 岁的他在苏黎世开设独立工作室,做平面、做展览、做摄影三个方向。真正的转折点是 1950 年——他开始为苏黎世音乐厅设计 Musica Viva 系列海报,用圆、弧、线、矩形这些纯几何元素抽象表达音乐结构。这一系列直到今天都还是构成主义海报的教科书。1957 年他成为苏黎世应用艺术学院教授;1958 年和三位同道一起创办了三语并行的 Neue Grafik 期刊,把瑞士理念正式输出到国际设计共同体。1981 年他出版了 Grid Systems in Graphic Design——这本书就是我们今天讲座的底本。1996 年,他在 Unterengstringen 逝世,享年 82 岁。
|
||||
@@ -0,0 +1 @@
|
||||
讲完了人,讲三款字体。Akzidenz-Grotesk,1896 年由柏林的 Berthold 铸字行发行——这是第一款现代意义的商业无衬线字体,比 Helvetica 早整整六十一年,奠定了无衬线美学全部的基调。Helvetica,1957 年由 Miedinger 和 Hoffmann 设计,它的字面意思就是"瑞士",取自拉丁文 Helvetia;中性、客观、可读至极,是二十世纪传播范围最广的字体。同样在 1957 年,Adrian Frutiger 做出了 Univers——他第一次用 21 个字重的二维编号系统,把"家族、字重、宽度"这三个维度工程化,是现代字体家族结构的祖先。一年之内,瑞士同时拿出两款决定性字体——这是一个时代的爆发。
|
||||
@@ -0,0 +1 @@
|
||||
Müller-Brockmann 把网格归纳为四种基本类型。第一种是手稿网格,单栏满版,最古老,书籍正文和长篇散文几乎只能用这一种。第二种是列状网格,多栏并列,列宽、行高、间距全部可以计算,是期刊报纸出版业的语法基础。第三种是模数网格——横列乘以纵行的方格矩阵,海报和目录的利器,也是瑞士国际主义最具识别度的网格类型;右下角这个红色的小方块标记,就是我们今天讲座背景里那张封面图的逻辑。第四种是层级网格,不规则但内部有逻辑,复合排版、杂志专题、网页布局都用它。四种网格的共同前提是一句话:所有距离都是可计算的。
|
||||
@@ -0,0 +1 @@
|
||||
这一页我们把抽象变具体。挑一个基本单位,比如 16 像素,然后所有其他尺寸都从它派生。安全边距 64 像素等于 4 个 16;列宽 264 像素是 16 的整数倍加八;列间距 32 像素等于 2 个 16;行高 96 像素等于 6 个 16;正文行高 27 像素是 1.5 倍正文字号;标题字号 32 像素等于 2 个 16。一旦这个基本单位确定下来,整个版面就成了一个可以计算的系统。右边这张图就是这场讲座所有内容页用的 4 列 6 行模数网格——红色高亮的两块是图像区,纯白色高亮的是文字区。设计师不再"画"版面,而是"建立系统并按系统落子"。
|
||||
@@ -0,0 +1 @@
|
||||
这一页我想单独停下来,讲第七条原则——留白即结构。看看背景这张图,整张画面 92% 是纯白,只有一枚红圆和一根极短的黑色水平线。这两个元素之间什么也没有,但你会强烈感觉到张力——红圆在哪里,黑线为什么这么短,为什么是水平的。这种感觉就是留白在工作。留白不是设计师不知道放什么的剩余,留白是信息的载体。瑞士国际主义最深刻的一条是:当你减少元素,剩下的元素就被赋予了重量。The space between is the message。
|
||||
@@ -0,0 +1 @@
|
||||
讲完风格本身,看它的影响。从 1960 年代开始,瑞士理性被输出到四个方向。第一个是企业 VI——IBM 在 Paul Rand 主导下、Knoll、Lufthansa、Olivetti、Braun 这一系列大公司,把瑞士理性变成了一个叫"识别系统"的产业;Müller-Brockmann 本人从 1967 年起任 IBM 顾问。第二个是机场和地铁标识——纽约地铁 1966 年的 Unimark 设计手册、戴高乐机场的 Frutiger 字体、慕尼黑奥运会的 Otl Aicher,公共空间的可读性其实是瑞士理性的直接延伸。第三个是出版业,从瑞士本土的 Du 杂志到 Eye、Domus、Wallpaper,至今仍是文化出版的范本。第四个是设计教育,巴塞尔和苏黎世两条教学路径,通过耶鲁、RISD、Cooper Union 这些学校的瑞士背景教师,一代一代地把这套语法传下去。
|
||||
@@ -0,0 +1 @@
|
||||
风格从纸面跳到屏幕只用了二十年,但语法没有变。2008 年,Nathan Smith 做了 960 Grid System,12 栏、960 像素宽,第一次把网格语法系统地搬上 Web。2011 年,Twitter 开源了 Bootstrap,同样的 12 栏结构,把模数网格民主化到全球前端开发者手里。2017 年,CSS Grid 在所有主流浏览器获得原生支持,模数网格第一次成为 Web 平台的基础设施。再到 2020 年代,Material Design、苹果的人机界面指南、Adobe Spectrum、Microsoft Fluent,大企业 VI 完成了在屏幕上的延续,从一套规则变成了组件库。一句话——从印刷海报到 CSS Grid,介质变了,但模数、列、留白、数学比例这四件套从未改变。
|
||||
@@ -0,0 +1 @@
|
||||
把目光投向你今天每天都在用的产品,瑞士血脉到处都是。Apple 是最显眼的继承者,从乔布斯时代的 Keynote 到今天的人机界面指南,极简理性是产品语言的底色。Google 的 Material 设计系统用 8dp 网格加几何字体,把瑞士工程化到了移动端。Spotify 的版面用大字号加网格分块,把音乐变成了视觉故事,是杂志感的延续。Airbnb 的 DLS 设计语言系统用模数 grid 加极简识别,连摄影都走客观纪实路线。IBM 是直系血统——1967 年 Müller-Brockmann 本人就在那里任顾问,Paul Rand 同期接手识别。Lufthansa 的 VI 是 Otl Aicher 1962 年的作品,基本沿用至今六十多年。半个世纪过去,这套语法仍然是当代品牌的默认坐标系。
|
||||
@@ -0,0 +1 @@
|
||||
让我用穆勒·布罗克曼最常被引用的一句话结束——网格不是限制,是自由的语法。The grid is not a constraint. It is a grammar of freedom. 如果你今天只带走一个东西,希望是这个:当设计师抱怨网格限制创意,他真正抱怨的是自己还没有学会怎么用它;当设计师真正掌握网格,他得到的不是束缚,而是一种可以承载几乎任何内容、任何风格、任何媒介的通用骨架。谢谢大家。
|
||||
@@ -0,0 +1,81 @@
|
||||
# 01_cover
|
||||
|
||||
大家好,今天这场 lecture 我们聊一个看起来很冷、其实关系到每一张幻灯片、每一篇文章、每一个网页的话题——网格系统。完整的题目叫"瑞士网格系统:The Grid as a Way of Seeing"。我会带大家从十九世纪末瑞士苏黎世的一所小学校讲起,一直走到屏幕上你今天写的 CSS Grid。整场大约二十五分钟。这本身就是一张瑞士极简风格的封面页——纯白底、几何网格、一枚红圆——它就是接下来要讲的内容的视觉提要。
|
||||
|
||||
---
|
||||
|
||||
# 02_quote
|
||||
|
||||
进入正题之前,先听一段穆勒·布罗克曼在 1981 年写下的话。他说:网格系统是一种辅助工具,不是一种保证。它允许多种用法,每个设计师可以找到适合自己个性的解决方案。但是,必须学会怎样去使用网格——它是一门需要练习的艺术。这句话定下了我们今天的基调。网格不会替你做设计,它只是给你一个可以让你做出好设计的骨架。
|
||||
|
||||
---
|
||||
|
||||
# 03_origin
|
||||
|
||||
很多人以为瑞士国际主义风格是一夜之间冒出来的几个大师做出来的事情,其实它来自整整六十年的累积。1896 年,柏林的 Berthold 铸字行发行了 Akzidenz-Grotesk,第一款现代意义的商业无衬线字体。1908 年,巴塞尔设计学院完成改革。1918 年,Ernst Keller 进入苏黎世应用艺术学院,奠定"形式跟随内容"的教学原则。1936 年,22 岁的穆勒·布罗克曼在苏黎世开设独立工作室。最后,1957 年,Helvetica 和 Univers 同年问世。理性主义不是凭空而至,它是字体、学校、教学这三条线索半个世纪共同长出来的果实。
|
||||
|
||||
---
|
||||
|
||||
# 04_principles
|
||||
|
||||
那么这套风格的核心原则是什么?穆勒·布罗克曼总结了八条。第一,客观先于表达——信息传达高于设计师的个人情绪。第二,数学网格为骨架——列、行、间距、模数都从基本单位派生。第三,非对称构图——拒绝古典对称带来的中心权威。第四,无衬线字体。第五,齐左不齐右,字距均匀。第六,客观摄影代替装饰性插画。第七,留白是结构而不是剩余——这一条是整个体系最容易被忽视也最难做到的,我们后面会单独用一页来讲它。第八,可重复、可教学、可规模化。
|
||||
|
||||
---
|
||||
|
||||
# 05_figures
|
||||
|
||||
这套体系不是一个人做出来的,它是一群人共同建造的。Ernst Keller 在苏黎世奠基;Théo Ballmer 把 De Stijl 的几何引入海报,是桥梁式人物;Max Bill 是包豪斯学生,后来去乌尔姆设计学院当首任校长,把瑞士理性延伸到产品设计;Emil Ruder 是巴塞尔学派核心,他写的 Typographie 至今是字体设计的圣经;Armin Hofmann 是巴塞尔另一根支柱,他的影响一直延续到耶鲁。Müller-Brockmann 是苏黎世学派的核心,我们下一页详细讲他。最后两位是字体设计师:Max Miedinger 在 1957 年和 Hoffmann 一起做出了 Helvetica;同一年,Adrian Frutiger 做出了 Univers。
|
||||
|
||||
---
|
||||
|
||||
# 06_brockmann
|
||||
|
||||
让我们单独看一下 Müller-Brockmann 这个人。他 1914 年生于瑞士的小镇拉珀斯维尔,距苏黎世大约 40 公里。1936 年,22 岁的他在苏黎世开设独立工作室,做平面、做展览、做摄影三个方向。真正的转折点是 1950 年——他开始为苏黎世音乐厅设计 Musica Viva 系列海报,用圆、弧、线、矩形这些纯几何元素抽象表达音乐结构。这一系列直到今天都还是构成主义海报的教科书。1957 年他成为苏黎世应用艺术学院教授;1958 年和三位同道一起创办了三语并行的 Neue Grafik 期刊,把瑞士理念正式输出到国际设计共同体。1981 年他出版了 Grid Systems in Graphic Design——这本书就是我们今天讲座的底本。1996 年,他在 Unterengstringen 逝世,享年 82 岁。
|
||||
|
||||
---
|
||||
|
||||
# 07_typefaces
|
||||
|
||||
讲完了人,讲三款字体。Akzidenz-Grotesk,1896 年由柏林的 Berthold 铸字行发行——这是第一款现代意义的商业无衬线字体,比 Helvetica 早整整六十一年,奠定了无衬线美学全部的基调。Helvetica,1957 年由 Miedinger 和 Hoffmann 设计,它的字面意思就是"瑞士",取自拉丁文 Helvetia;中性、客观、可读至极,是二十世纪传播范围最广的字体。同样在 1957 年,Adrian Frutiger 做出了 Univers——他第一次用 21 个字重的二维编号系统,把"家族、字重、宽度"这三个维度工程化,是现代字体家族结构的祖先。一年之内,瑞士同时拿出两款决定性字体——这是一个时代的爆发。
|
||||
|
||||
---
|
||||
|
||||
# 08_grid_types
|
||||
|
||||
Müller-Brockmann 把网格归纳为四种基本类型。第一种是手稿网格,单栏满版,最古老,书籍正文和长篇散文几乎只能用这一种。第二种是列状网格,多栏并列,列宽、行高、间距全部可以计算,是期刊报纸出版业的语法基础。第三种是模数网格——横列乘以纵行的方格矩阵,海报和目录的利器,也是瑞士国际主义最具识别度的网格类型;右下角这个红色的小方块标记,就是我们今天讲座背景里那张封面图的逻辑。第四种是层级网格,不规则但内部有逻辑,复合排版、杂志专题、网页布局都用它。四种网格的共同前提是一句话:所有距离都是可计算的。
|
||||
|
||||
---
|
||||
|
||||
# 09_modular
|
||||
|
||||
这一页我们把抽象变具体。挑一个基本单位,比如 16 像素,然后所有其他尺寸都从它派生。安全边距 64 像素等于 4 个 16;列宽 264 像素是 16 的整数倍加八;列间距 32 像素等于 2 个 16;行高 96 像素等于 6 个 16;正文行高 27 像素是 1.5 倍正文字号;标题字号 32 像素等于 2 个 16。一旦这个基本单位确定下来,整个版面就成了一个可以计算的系统。右边这张图就是这场讲座所有内容页用的 4 列 6 行模数网格——红色高亮的两块是图像区,纯白色高亮的是文字区。设计师不再"画"版面,而是"建立系统并按系统落子"。
|
||||
|
||||
---
|
||||
|
||||
# 10_negative_space
|
||||
|
||||
这一页我想单独停下来,讲第七条原则——留白即结构。看看背景这张图,整张画面 92% 是纯白,只有一枚红圆和一根极短的黑色水平线。这两个元素之间什么也没有,但你会强烈感觉到张力——红圆在哪里,黑线为什么这么短,为什么是水平的。这种感觉就是留白在工作。留白不是设计师不知道放什么的剩余,留白是信息的载体。瑞士国际主义最深刻的一条是:当你减少元素,剩下的元素就被赋予了重量。The space between is the message。
|
||||
|
||||
---
|
||||
|
||||
# 11_outputs
|
||||
|
||||
讲完风格本身,看它的影响。从 1960 年代开始,瑞士理性被输出到四个方向。第一个是企业 VI——IBM 在 Paul Rand 主导下、Knoll、Lufthansa、Olivetti、Braun 这一系列大公司,把瑞士理性变成了一个叫"识别系统"的产业;Müller-Brockmann 本人从 1967 年起任 IBM 顾问。第二个是机场和地铁标识——纽约地铁 1966 年的 Unimark 设计手册、戴高乐机场的 Frutiger 字体、慕尼黑奥运会的 Otl Aicher,公共空间的可读性其实是瑞士理性的直接延伸。第三个是出版业,从瑞士本土的 Du 杂志到 Eye、Domus、Wallpaper,至今仍是文化出版的范本。第四个是设计教育,巴塞尔和苏黎世两条教学路径,通过耶鲁、RISD、Cooper Union 这些学校的瑞士背景教师,一代一代地把这套语法传下去。
|
||||
|
||||
---
|
||||
|
||||
# 12_digital_era
|
||||
|
||||
风格从纸面跳到屏幕只用了二十年,但语法没有变。2008 年,Nathan Smith 做了 960 Grid System,12 栏、960 像素宽,第一次把网格语法系统地搬上 Web。2011 年,Twitter 开源了 Bootstrap,同样的 12 栏结构,把模数网格民主化到全球前端开发者手里。2017 年,CSS Grid 在所有主流浏览器获得原生支持,模数网格第一次成为 Web 平台的基础设施。再到 2020 年代,Material Design、苹果的人机界面指南、Adobe Spectrum、Microsoft Fluent,大企业 VI 完成了在屏幕上的延续,从一套规则变成了组件库。一句话——从印刷海报到 CSS Grid,介质变了,但模数、列、留白、数学比例这四件套从未改变。
|
||||
|
||||
---
|
||||
|
||||
# 13_brands
|
||||
|
||||
把目光投向你今天每天都在用的产品,瑞士血脉到处都是。Apple 是最显眼的继承者,从乔布斯时代的 Keynote 到今天的人机界面指南,极简理性是产品语言的底色。Google 的 Material 设计系统用 8dp 网格加几何字体,把瑞士工程化到了移动端。Spotify 的版面用大字号加网格分块,把音乐变成了视觉故事,是杂志感的延续。Airbnb 的 DLS 设计语言系统用模数 grid 加极简识别,连摄影都走客观纪实路线。IBM 是直系血统——1967 年 Müller-Brockmann 本人就在那里任顾问,Paul Rand 同期接手识别。Lufthansa 的 VI 是 Otl Aicher 1962 年的作品,基本沿用至今六十多年。半个世纪过去,这套语法仍然是当代品牌的默认坐标系。
|
||||
|
||||
---
|
||||
|
||||
# 14_closing
|
||||
|
||||
让我用穆勒·布罗克曼最常被引用的一句话结束——网格不是限制,是自由的语法。The grid is not a constraint. It is a grammar of freedom. 如果你今天只带走一个东西,希望是这个:当设计师抱怨网格限制创意,他真正抱怨的是自己还没有学会怎么用它;当设计师真正掌握网格,他得到的不是束缚,而是一种可以承载几乎任何内容、任何风格、任何媒介的通用骨架。谢谢大家。
|
||||
Reference in New Issue
Block a user