仅当用户明确选择或已确认的项目配置指定时,才使用此技能。对于未经说明的新 UI 请求,请改用样式选择器(例如),而不是在此处替用户决定其品味。现有的品牌、可访问性和用户覆盖规则优先于以下所有示例。以下样式指南并非在样式选择之前就开始 UI 编码的许可。
风格包:瑞士 / 编辑
ID: swiss-editorial
特征: 严谨的网格驱动排版层次、极端的比例对比、结构性的细线规则、编号索引以及有意的留白。
这是一个风格包,而非强制性默认值。仅在用户明确选择或确认适用项目风格后加载。项目说明可以覆盖个别选择。保留可访问性、实用性和品牌约束。字体为建议,而非必需的依赖。仅包含黑色无衬线文本的普通页面不符合瑞士编辑风格。
适用场景 / 权衡
- 适用于: 高端设计机构、建筑出版物、编辑作品集、文化杂志、年度报告和奢侈品叙事。
- 需谨慎使用: 快节奏事务性操作工具,其中大量展示排版会拖慢重复性数据录入。
- 参考方向:
- 经典苏黎世国际风格: 清晰的纸白色背景(
#FFFFFF或#F7F7F7),极黑 typography(#111111),1px 结构性分割线,编号索引(01、02),以及一抹瑞士红(#E3000F)。 - 现代编辑克莱因蓝: 极致简洁的单色画布,以国际克莱因蓝(
#002FA7)作为导航和主要操作的高精度焦点强调色。
- 经典苏黎世国际风格: 清晰的纸白色背景(
瑞士编辑保真度门控 — 强制要求
在宣布 swiss-editorial 页面完成之前,打开的视口必须在视觉上清晰呈现为一个严谨、网格对齐的排版编辑作品。 如果用户选择了此风格,而页面仅显示为缺乏强烈比例对比和结构性规则的泛泛简约页面,则视为失败。
一个成功的 swiss-editorial 实现必须展示所有以下要素:
- 极端排版比例对比: 在庞大的 grotesk 展示标题(桌面端 48px–72px / 移动端 32px–44px,紧缩字距)与克制的正文(16px,行高 1.55)之间,存在果断、不妥协的对比,并配合大写的跟踪章节标签(
letter-spacing: 0.08em)。 - 结构性水平细线规则: 内容区域、列边界和元数据标题由清晰的 1px 实线规则(
border-top: 1px solid #111111)划分,建立清晰的视觉层次。 - 编号章节层次: 在主要文章块上方或旁边放置独特的编辑索引编号(
01、02、03),创建可扫描的视觉锚点。 - 严谨的多列网格对齐: 布局严格遵循桌面端 12 列网格,具有宽松的不对称边距。内容绝不能在没有网格锚定的情况下松散浮动。
- 单色基础 + 1 个高影响力强调色: 布局保持严格的单色(黑色、米白、纸灰),仅使用一种有意的信号强调色(瑞士红
#E3000F或克莱因蓝#002FA7),并谨慎应用于活动链接、索引标签或主要行动号召按钮。
首视窗测试: 在桌面端截图中,在不阅读页面标题的情况下,识别出巨大的标题比例、1px 结构性分割线、编号章节标记以及有意的非对称网格。如果看起来像标准博客模板,请提升排版比例和网格规则。
明确的瑞士编辑排版例外 — 需要戏剧性比例
瑞士编辑特定覆盖: 针对“过大字体或过多空白”的通用反草率警告,在此处不得被解释为禁止使用大型展示标题(48px–72px)或慷慨的白边。在瑞士排版(Josef Müller-Brockmann, Max Bill)中,积极的留白和大胆的比例对比是主要的构成材料,用于替代装饰性图形或阴影。
- 允许的排版处理: 大型展示比例(最大 72px)、编号索引排版、细线结构边框、大写跟踪元数据和单一强调色的高对比度链接。
- 反草率边界: 不要粘贴无编辑上下文的随机浮动引文、虚假的出版物期号,或挤占实际可读内容空间的过大标题。
- 反草率解释: 通过网格纪律、排版节奏和信息清晰度来评估瑞士布局,而不是试图用卡片填满每个角落。能够引导注意力的留白是真正的设计。
排版与字体
客观的 grotesk 无衬线字体:Helvetica Neue, Neue Haas Grotesk, Arial, Inter 或系统无衬线字体。标题:48–72 px 桌面端(字重 700–800,letter-spacing: -0.03em);副标题:24–32 px;正文:16–18 px(行高 1.55–1.65);索引数字和说明文字:12–14 px 大写(letter-spacing: 0.08em)。
色彩方向
- 浅色模式(清晰画廊白纸):
- 画布底色: 纸白色(
#FFFFFF或温暖画廊白#FBFBFA)。 - 墨水 / 排版: 深黑曜石黑(
#111111)。 - 分割线: 实心细线描边(
#111111或#D1D5DB)。 - 次要灰色: 编辑中性色(
#6B7280)。
- 画布底色: 纸白色(
- 深色模式(戏剧性深色巨碑):
- 画布底色: 黑曜石画布(
#0D0D0D)。 - 墨水 / 排版: 骨白色展示排版(
#F5F5F5)。 - 分割线: 半透明白色细线规则(
rgba(255, 255, 255, 0.20)或#2A2A2A)。 - 次要灰色: 石灰色(
#9CA3AF)。
- 画布底色: 黑曜石画布(
- 单一信号强调色: 瑞士红(浅色模式
#E3000F/ 深色模式#EF4444)或国际克莱因蓝(浅色模式#002FA7/ 深色模式#3B82F6)。 - 主题反转规则: 在瑞士编辑风格中,深色/浅色模式是一种权威性的排版极性翻转。在深色模式中,画布为
#0D0D0D,排版为#F5F5F5。主要按钮应干净地反转(浅色模式:实心黑色块配白色文字;深色模式:实心白色块配黑色文字)。严格禁止在深色画布上使用黑色文字,或在白色画布上使用白色文字。
布局与几何
边角为锐利直角(默认 0px 圆角,最多 2px);宽松的外边距;严格的 12 列网格对齐。结构性的 1px 水平规则框定内容块。
表面、深度、纹理
表面完全平坦、无装饰、墨水般锐利。零阴影、零背景渐变、零模糊。深度仅通过排版比例、字重和空间并置来传达。
组件结构与交互
- 编辑主要行动号召按钮: 清晰的实心黑色块配白色文字,或干净的带 2px 描边偏移的下划线文本链接。
- 编号索引标签: 小写大写标签:
[ 01 / 建筑 ]。 - 分割线:
border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;。 - 表格状元数据: 由细线分隔符分隔的双列键值对。
动效
最小化、瞬时或 120–160 ms 的干净线性过渡。无弹簧弹跳、无浮动视差。专注于清晰的状态变化。
可选的 Anime.js v4 配方
- 动效决策: 滚动时干净的文本透明度淡入或水平规则展开。
- 起始持续时间: 140ms(0 = 立即);根据任务和用户偏好调整。
- 避免: 弹性动效、3D 旋转、俏皮的摆动。
- 依赖: 默认使用 CSS/原生。仅当请求的交互证明其合理性时,才使用 Anime.js v4。当有 Taste Engine
references/motion-engine.md时遵循其规则;独立使用时,技能遵循上述减少动效和无装饰循环原则。
UI 文案与微副本
文化、简洁、善于表达。示例:“Selected Works 2026”、“Index”、“Read Documentation”、“01 / Overview”。避免口语化俚语或热情的销售营销语。
起始令牌(建议,非完整主题)
| 令牌 | 浅色模式默认值 | 深色模式默认值 |
|---|---|---|
--taste-swiss-bg | #ffffff | #0d0d0d |
--taste-swiss-ink | #111111 | #f5f5f5 |
--taste-swiss-accent | #e3000f | #ef4444 |
--taste-swiss-muted | #6b7280 | #9ca3af |
--taste-swiss-rule | 1px solid #111111 | 1px solid rgba(255, 255, 255, 0.20) |
--taste-swiss-radius | 0px | 0px |
--taste-swiss-font-heading | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-font-body | 'Helvetica Neue', Inter, system-ui, sans-serif | 'Helvetica Neue', Inter, system-ui, sans-serif |
--taste-swiss-motion-duration | 120ms | 120ms |
令牌代表一个方向,并非保证适用于每个调色板/平台的复制粘贴解决方案。在项目级别定义 --taste-swiss-*,确保颜色对比度,并通过主题令牌进行适配,而不是散布字面值。
英雄区域构成(完整首视窗)
当面向公共的作品集/落地页/首页/主页包含英雄区域时: 使用一屏可见的页眉+英雄区域组合。基础高度为 min-height: 100svh,并回退到 100vh,仅在页眉处于正常流中时减去实际的页眉高度;让英雄区域为可访问性和短移动屏幕扩展。不要将此应用于私有仪表板或其他任务屏幕;用户直接覆盖规则优先。特定样式方向: 用一个权威的、庞大的展示标题、清晰的章节编号以及英雄叙述与关键导航之间的非对称网格分割来锚定起始屏幕。留白必须感觉有目的性和构成感,而非空荡。参见路由器中的 references/hero-layout.md(如有)。独立使用遵循相同的响应式和反草率原则。
样式特定质量门控
- 需做: 验证严格的 12 列网格对齐;维持戏剧性的标题与正文比例;确保 1px 细线规则干净地分隔区域;保持强调色严格单一;验证深色/浅色模式切换,使排版、画布、细线规则和主要操作干净地翻转,无颜色冲突(最低 4.5:1 对比度)。
- 禁止: 不要添加投影、圆角气泡或装饰性渐变;不要用无意义的徽章芯片填充留白;避免在小型标签上使用低对比度灰色文字;不要在深色黑曜石画布上留下黑色排版。
- 确认桌面端和移动端的一致性;可见的键盘焦点指示(
:focus-visible);加载、空状态、禁用、错误和成功状态;减少动效行为(prefers-reduced-motion)。 - 不要将特定样式的假设注入不相关的项目。当组合样式时,明确命名主要样式和借用的功能。
通用反草率门控(独立)
每个元素都必须有其存在的理由。内容优于装饰。不要装饰不确定性。 不要捏造余额、指标、推荐、用户、标志、批准/已验证/在线状态、虚假活动或成功确认;改用诚实的空/加载/错误状态。仅在被要求时且可见标记为演示数据的情况下,才允许使用演示数据。
不要添加装饰性的 卡片内嵌卡片 层:嵌套表面必须代表不同的交互或信息边界。避免自动生成的 3 功能网格、4 统计仪表板、虚假的英雄主张、无目的的图表、徽章/芯片/图标垃圾信息、无关的装饰性艺术,以及仅仅为了填充视口的随机循环。优先使用排版、间距、对齐和分隔符进行分组。同等级的节点需要有意的视觉平衡。
反草率文案: 不得出现通用的“释放你的潜力”、“体验未来”、“为你的工作流赋能”、“无缝”声称或翻译等价物。标题必须传达实际内容,行动号召按钮必须命名操作,空/错误/成功文本必须描述真实状态和后续步骤。避免虚假紧迫感、捏造的计数、模糊的 AI 宣传、无意义的表情符号和不可访问的全大写文本块。根据此风格和用户语言调整措辞,但不改变事实。
主题和模式对比完整性: 当用户请求深色模式或浅色模式(或构建主题切换器)时,所有表面、文本、边框、输入和语义徽章上的背景和前景颜色必须同步成对翻转。决不允许在深色背景上留下黑色文本、在白色背景上留下白色文本,或出现不可读的低对比度状态药丸。所有状态必须满足 WCAG AA 对比度(正文/普通文本至少 4.5:1,大型标题和交互边界至少 3:1)。
响应式和动效: 有意识地设计移动端,检查长标签、焦点状态和可访问对比度;不要为了迎合时髦布局而裁剪文本。默认静态;为有意义的交互使用动效,尊重减少动效偏好,避免在没有真实状态的情况下使用弹跳/浮动/脉冲装饰。
关键/高严重性问题阻碍完成: 必须修复伪造的状态/数据、损坏的操作、不可访问/截断的控件、误导性文案、主题对比度冲突或显著的移动端失败。报告实际验证的内容;不要声称未运行的测试。
这不是审美否决权: 富有表现力的颜色、阴影、渐变、卡片布局或装饰性处理是合法的,只要它们是所选美学的有意组成部分并通过可用性检查。不要强行推行简约主义。
反草率:特定于样式
排版权威,而非泛泛简约主义。
- 拒绝: 软弱的标题、围绕文本的装饰性卡片包装、多个冲突的强调色、低对比度的小型说明文字以及主题冲突(例如,黑色排版出现在深色编辑画布上)。
- 取而代之: 依赖比例对比、精确的列对齐、单一的信号强调色以及同步的深色/浅色极性反转。
- 文案检查: 文本必须读起来像一份编辑出版物——清晰、结构化和有意图。
- 审计: 运行通用反草率检查:目的、真相、嵌套表面、文案、响应式…
(原文档已截断,此处保持截断状态)