瑞士风格UI设计 是做什么的？
本技能将瑞士学派的原则转化为具体的UI决策。该学派的核心理念来自Ernst Keller：设计方案必须来自问题的内容本身。以下所有内容都遵循这一理念：网格是逻辑，字体是图像，色彩是带有明确功能的强烈平面，留白是结构，没有装饰。
第二个目标：结果绝对不能看起来像AI生成的。通用的AI界面都长一个样（居中hero、紫色渐变、带柔和阴影的圆角卡片、三个图标功能、模糊的文案）。瑞士风格与这种样貌恰恰相反，因此严格应用它便能解决大部分问题；第5部分处理剩下的部分。
第三个目标：结果必须有力量。一个干净整洁、奶油色背景带一个橙色色块的页面，仅在其网格上算是瑞士风格。这种风格闻名的海报铺满了色彩：强烈的纯色或黑色占据纸张的83-97%，或者一种彩色墨水承载所有内容，一个染色面板填充其余部分。因此，步骤4在任何布局之前选择一种Look（底色、色彩方案、图片处理）。references/looks.md包含了从真实海报中采样的五种Look及其经过测试的CSS；scripts/color_power.py用于测量结果。
本文档组织结构
- 工作流程——按顺序的步骤
- 网格、间距、字体和颜色——标记、比例、调色板、布局配方、基础CSS
- 阿拉伯语和RTL
- 组件
- 看起来不像是AI生成的——检查清单
- 来源：瑞士学派简述（来自小册子《瑞士设计学派》）
此技能还包含：references/looks.md（外观、对比对、经过测试的CSS机制）和scripts/color_power.py（截图色彩强度检查）。
第1部分 —— 工作流程
1. 从内容开始
- 写下屏幕存在的唯一目的（一个信息，一个操作）。它将变成主导元素。
- 将其余内容按照最多3-4个层级进行排列。
- 如果用户没有提供内容，请用目标语言撰写具体、真实的内容：真实的本地姓名、准确的数字、日期、价格、地点。永远不要使用占位拉丁文，不要使用营销套话（“释放……的力量”或其阿拉伯语对应版本“发现……的力量”）。具体内容是表明该页面出自人类之手最有力的单一信号。告诉用户哪些细节是假设，需要替换。
- 以瑞士式的方式撰写文案：客观且基于事实，摆脱广告和宣传的夸张主张（Meggs对该风格的定义）。设计师是信息的清晰传递者，而非销售人员。在这里，事实、数字、条件和朴实的动词比形容词更有说服力。
- 决定语言和方向。阿拉伯语 ->
dir="rtl"并应用第3部分，这会改变对齐方式、字体和行高。
2. 有目的地选择方向
瑞士学派并非只有一种面貌。根据先驱或学派的原则（使用原则，绝不复制他们的海报），选择以下方向之一：
| 方向 | 特点 | 适用场景 |
|---|---|---|
| 苏黎世——Müller-Brockmann | 严谨的网格，有时可见；客观的语调；小而精准的字体配一张大照片或抽象几何形态；大量留白。 | 文档、密集应用、仪表盘、机构、金融 |
| 巴塞尔——Hofmann | 黑白，高对比度，图形与背景，很少的几个大形状，字体作为形式。 | 文化、作品集、活动、建筑 |
| Ballmer | 基于网格构建的标题，粗体字重，红色+黑色，堆叠的词语，可见的结构。 | 品牌、活动、发布会、有态度的落地页 |
| Keller | 大胆的纯色区域，简单的几何形状，被边缘裁剪的超大字体。 | 消费品、教育、社区、博物馆 |
| 巴塞尔客观海报（Sachplakat） | 一个物体（产品、工具、菜肴、设备）被展示得巨大、特写和锐利拍摄，除了名称几乎别无他物。 | 实体产品、食品、零售、硬件 |
| 摄影蒙太奇（Herbert Matter） | 以截然不同的比例组合照片，在网格上裁剪，字体锁定在其中。 | 旅游、地点、活动、媒体 |
有助于选择的背景知识：瑞士国家图书馆描述了战后的两个阵营，苏黎世 = 具体艺术（数学建构、纯几何平面；Max Bill在20世纪30年代末构建了第一个真正的布局网格）和巴塞尔 = 新客观性（物体、照片、形式对比）。Keller本人没有教授固定风格：他相信解决方案应从内容中涌现，因此他自己的作品非常多样化。本技能遵循他的理念：方向来自内容，而非习惯。
苏黎世是“安全”的选择，并且很容易每次都选择它；那会使每个输出看起来都一样。当内容密集且功能性强时，请选择苏黎世。对于落地页、品牌和活动，请优先选择Ballmer、Keller或巴塞尔——它们能给页面带来一个强有力的瞬间（一整片强烈的色彩、一个巨大的裁剪词语、一个高对比度的形状），这是安静的页面所缺乏的。用一句话告诉用户你选择哪个方向以及原因。不要把它写在界面内部。
方向和Look是不同的选择。方向决定结构；Look（步骤4）决定颜色。苏黎世网格可以搭配“太阳”Look，Ballmer也可以搭配“黑色+光谱”。
3. 在内容中寻找概念
巴塞尔学派如此表述（Kenneth Hiebert，Hofmann的学生）：抽象结构是交流的载体，找到它迫使你在任何表面风格之前提炼出信息的本质。在设计之前书面完成这一步：
- 从内容中列出5-8个具体事实：一个数字、一个地点、一个物理对象、一个时间、一个过程、一个名称、一个对比（之前/之后、小/大）。
- 写出三个不同的概念，每个一句话，每个建立在不同的事实上。例如一个联合办公空间：(a) 建筑地址和平面图作为图像；(b) 一天的15小时作为你可以直接预订的网格；(c) 实际的物品——一张桌子、一把钥匙、一把椅子——展示得巨大（客观海报）。
- 选择对这个产品最具体、仅仅改个名字就不能用于竞争对手页面的那一个概念。用一句话说明你的选择。
巨大的元素必须来自内容，而非行动号召。 一个巨大的祈使动词（“预订”、“开始”或其阿拉伯语对应版本）是噱头：它适用于任何产品，并会很快成为新的模板。使用只有这个产品才有的名词、数字或名称：地点、关键数字、物品、日期。
4. 选择Look，然后设定系统
Look优先。 在任何布局之前，选择一个Look并打开references/looks.md获取其标记、字体配对、构图和经过测试的CSS。底色先行：强烈的纯色或墨水至少覆盖首屏的60%。两个纸张底色Look是例外：一种彩色墨水承载所有字体，一个染色面板填充至少30%。根据内容选择，不要连续两次使用相同的Look，每个页面使用一个Look（不同部分变化构图，而非调色板）。
| Look | 底色 | 调色板 | 适用场景 |
|---|---|---|---|
| 1 太阳 | 一种强烈的色调及其互补色 | 黄色 #FFC611 · 靛蓝 #3A3A9C · 深蓝 #16154A | 落地页、活动、文化、教育 |
| 2 紫墨水 | 白色；一种彩色墨水用于所有字体 | 紫罗兰 #4F2A7D · 长春花蓝 #CFDBF1 · 兰花紫 #BD9CBB | 编辑、期刊、报告 |
| 3 原色带 | 3-4条堆叠的满版色带 | 蓝 #2F7BFF · 绿 #0FA23A · 黄 #EFB83E · 红 #E6040A · 墨水黑 | 事实型落地页、活动、机构 |
| 4 黑色+光谱 | 墨水黑 | 6-9种纯色调，每种至少出现两次 | 目录、预订、产品系列、仪表盘图例 |
| 5 演出海报 | 奶油色或黑色 | 墨水黑 + 红、青、黄、紫，带叠印 | 活动、音乐、社区、发布 |
橙色+深蓝、钴蓝+黄、粉红+深绿以及其他底色都在同一个文件中。如果简报指定了品牌色，则它成为底色或一个色块，合作伙伴按方案选择。
然后是标记（第2部分）：主体行（字号和行高）、由此衍生的网格（默认12/8/4列，如果内容要求也可以是其他数字）、基线单位（8px）、一个字体家族（或一个阿拉伯语+一个拉丁语配对）带陡峭的字阶、以及Look的调色板，每个表面使用一种文字颜色，每对都检查过对比度。
5. 用不对称进行构图
源文描述通过视觉力量的分布，而非对称来实现平衡。
- 不要居中hero。将沉重元素（巨大标题、大照片、色块）放在一侧，由留白和小号文字在另一侧平衡。
- 使用不等分栏宽：5+7、4+8、3+9、2+6+4。处处都是三等分是AI的默认做法。
- 有目的地偏移：标题在1-9列，介绍在它下方7-11列，元数据在1-3列。
- 让每个部分在同一个网格上具有不同的构图。在每个部分重复“居中标题+卡片网格”是强烈的AI痕迹。
- 在编码一个部分之前，将其跨度写为注释（
/* hero: h1 1–10, meta 1–3, lead 6–11 */）。这能让网格保持诚实。
6. 添加海报层——让它具有瑞士风格，而不仅仅是干净
这一步是瑞士设计和整洁设计之间的区别。源文本身指出，瑞士原则已成为现代UI的基础。这意味着仅靠功能性规则（网格、细线、左对齐文本、索引列表、统计条、一个强调色）现在产生的是每个设计系统看起来都一样的东西。它很干净，但并不新颖，也不具有可识别的瑞士风格。使瑞士学派与众不同的是其海报：字体用作图像、大胆的色彩平面、几何图形、尺度张力和可见的结构。将这些语言带入界面。
资料从两方面说明了同样的事情。一项关于扁平设计的研究（Aristova & Vasilieva）将扁平网页设计追溯至国际风格，并警告其传播使网站趋同，削弱了每个网站和机构的独特性。一本设计史教科书指出，一旦瑞士风格变得普遍，其视觉语言就变得不那么创新了。解决方法并非放弃原则。而是像原始设计师那样使用它们，作为为每份内容找到特定形式的方法。
规则： 落地页、营销网站或品牌页面至少需要三个标志性手法。一个放在hero，至少另外两个放在其他部分。产品UI（仪表盘、应用）保持功能性，但它获得一个海报时刻：页面标题、登录屏幕、空状态或部分分隔符。
标志性手法（每个都来自源文海报示例中体现的原则；使用原则，绝不复制海报）：
| # | 手法 | 如何在UI中实现 | CSS |
|---|---|---|---|
| 1 | 字母作为建筑（Ballmer） | 基于网格模块构建的单词或首字母：被列线分割的巨大字母，或由方块组成的字母。在阿拉伯语中，方形库法体是天然的对等物，因为它是在网格上构建的脚本。用于字标或英雄词，用SVG通过方块绘制，并保持可读性。 | 基于模块网格的SVG <rect>；grid 单元格 |
| 2 | 巨型裁剪字体（Keller） | 标题大于视口，被一个或两个边缘裁剪。页面的身份就是这个词本身。 | font-size: 28vw; line-height: .8; margin-inline-start: -.05em; 部分 overflow: clip |
| 3 | 连锁类型（Hofmann） | 单词堆叠，使用负行距使其接触或重叠，形成一个排版块。 | line-height: .75，负边距，第二种颜色上使用 mix-blend-mode: multiply |
| 4 | 旋转平面（Müller-Brockmann） | 一块内容、一个网格或一小片散射的正方形，置于旋转45°或90°的平面上，与笔直的网格相对。 | 在包装器上使用 transform: rotate(-45deg)；保持内部文本可读或旋转90° |
| 5 | 图形-背景几何（Hofmann） | 一个大圆形、半圆形或环形，用墨水或强烈的调色板颜色，被屏幕边缘裁剪。文本位于形状内部或环绕它。 | border-radius: 50% 元素 / SVG，clip-path，shape-outside |
| 6 | 垂直词语列（Ballmer） | 一条狭窄的全高彩色列，内含一个垂直设置的词语。阿拉伯语：旋转整个单词（绝不堆叠字母）。 | writing-mode: vertical-rl，transform: rotate(180deg) |
| 7 | 色块+墨块（Keller） | 整个部分使用强烈的场域颜色，内有一个实心黑色矩形承载文本，或两种强烈颜色边对边相接。 | 网格上的两个块，无阴影 |
| 8 | 网格即内容（Müller-Brockmann） | 有目的地绘制网格线，将数据、数字或文本捕捉到单元格中。用于时间表、价格网格或部分索引。 | 单元格边框，或 repeating-linear-gradient 线条 |
| 9 | 单行内的尺度张力 | 一个200px的词语旁边，同一基线上是12px的元数据。 | 使用 align-items: baseline 的 flex |
| 10 | 色调叠加 | 两层显示词语，一层浅灰色背景，一层墨水色或纸色前景，在网格上偏移。 | 网格单元格内的绝对定位 |
| 11 | 物体英雄（巴塞尔Sachplakat） | 一个真实的物体，特写拍摄，比实物大，剪裁或紧密裁剪，仅显示名称和一个事实。 | object-fit: cover，图像跨越8-12列，被边缘裁剪 |
| 12 | 摄影蒙太奇（Matter） | 两张或三张照片以截然不同的比例（一个细节巨大，一个广角视图小）切割成网格区域，字体放置在其上或之间。 | 具有 overflow: clip 的网格区域，图像对齐到区域边缘 |
| 13 | 对抗（Hofmann） | 两个不同的元素有目的地相遇：一个字母与一个几何形式，一个密集文本块与一个空白区域，一个圆形与笔直网格，黑色与白色。 | 共享边缘或重叠的两个网格区域 |
（本文档内容较多，已进行关键部分翻译。完整版请参考原始SKILL.md文件。）
注：由于原始内容较长，此处提供了核心部分的中文翻译。完整的references/looks.md和scripts/color_power.py等附属文件也已纳入技能体系。