Swiss Poster 设计系统基于 1950 年代至 1980 年代的瑞士海报设计,使用 Tailwind CSS 实现。其风格特征包括 grotesque 字体的极端尺度、打破网格的布局、重叠图层、对角线动势以及裁切形态,灵感来自 Weingart、Troxler、Odermatt & Tissi、Hofmann 和 Ruder 等设计师。
用途:当用户要求为网页、组件、落地页或 Tailwind/UI 进行样式设计时,该技能提供可实现的 HTML/Tailwind/CSS 输出。它明确要求:除非用户明确要求 SVG、印刷资产或静态海报文件,否则不应以独立 SVG 海报来满足网页/UI 任务。
主要能力与硬性要求:
- 从明确的 grid-cols-12 网格结构开始,再让选定元素脱离网格。
- 每个项目仅使用一个强调色(默认 #C8102E),允许该色的透明度变体,不允许额外强调色、紫色 SaaS 渐变或多强调色调色板。
- 极端尺度对比:将视口级 text-[clamp(...)] 展示字体与 text-[11px] 标签配对,目标尺寸比 10 倍以上,并使用 leading-[0.85]、更紧的自定义行高或展示尺度下的 leading-none。
- 防止横向滚动:任何有出血、负边距、绝对定位突破、宽 vw 元素或裁切文字的区域,都需要在包裹层上使用 overflow-hidden、overflow-x-hidden 或 overflow-clip。
- 检查 320px 边界:默认 col-span-12、流式 clamp() 字体、减少偏移(激进负边距仅用于 md: 及以上)、无强制横向滚动的固定宽度元素、最小 44px 触摸目标。
- 对于密集海报 HTML,标注阅读契约:在关键文本上放置 data-critical="title"、data-critical="body"、data-critical="date" 或 data-critical="cta",并保持装饰性锚点 aria-hidden="true"/pointer-events-none。
- 对于历史依据充分、来源密集、图像密集或图表化的海报,在标记中保留不可见的实现证据:data-reference 表示所体现的历史手法,data-source/data-beat 表示来源账本条目,data-encoding/data-variable 表示真实图表映射。这些属性用于可审计性,不应作为可见海报文案展示评估/来源标签。
使用方式:该技能以设计系统形式提供,通过 Tailwind CSS 类实现。用户提出网页/UI 样式需求时,返回可实现的 HTML/Tailwind/CSS。它包含戏剧性海报配方、保护阅读区域启发式、对比通道纪律、历史时期与流派选择、渲染海报证明等指导原则。
适用场景:适用于需要瑞士海报风格布局的网页、组件、落地页或 Tailwind/UI 样式任务,尤其是希望以单一主导图形事件打破网格、具有强烈尺度对比和裁切形态的设计。也适用于历史依据充分、来源密集、图像密集或图表化的海报设计。
限制:
- 不适用于瑞士地理、税务/法律居住、瑞士德语翻译或其他非海报含义的“Swiss”。如果因非设计瑞士查询而加载此技能,应明确说明 Swiss Poster 设计不适用,仅在适当时正常回答。
- 如果用户要求干净的企业瑞士极简主义并明确拒绝海报戏剧性,应克制构图,而不是强行使用此风格。
- 避免将网页 UI 语言(如 CTA 按钮堆叠、功能卡片、仪表盘面板、定价表行、“了解更多”模块、产品营销块)用于非 UI 主题。
- 不得编造缺失的名称、演讲、日期或事实;如果无法验证确切来源事实,不要幻觉具体性,应使用更宽泛的真实标签或在作品外说明缺失输入。
- 关键文本不得直接置于高对比度巨型字体、路线、图表或照片之上,除非碰撞是概念本身且完整标题在三秒内仍可读。
- 不得降低海报对比度,而应分配对比度;最大对比度不能成为未解决的竞争。
- 不可见属性是审计钩子,不是成就;渲染图像必须证明所声称的谱系。
- 避免圆角卡片、柔和阴影、按钮组、导航式页眉、SaaS 功能矩阵和应用仪表盘网格,除非主题明确是 UI。
- 来源网站常包含导航/按钮文案(如 View documentation、Get started、Read the docs、Open GitHub),不要自动将这些标签提升为海报 CTA。
该技能还提供了历史谱系选择表,涵盖 Sachplakat/物体海报、旅行/照片蒙太奇/石版海报、苏黎世国际排版风格、巴塞尔/Hofmann 图底、Geigy/科学系统、Matter 风格照片蒙太奇、Weingart/新浪潮排版、Troxler/表演节奏以及当代瑞士文化海报等,并给出各自最佳适用、使用与避免事项。同时包含具体反崩溃规则,如调色板广度、排版暴力预算、网格不可见性、材料工艺、图表克制、克制即戏剧、流派广度等。