web-prototype-taste-brutalist

网页原型 — 工业粗野主义（瑞士印刷风格）

适用于要求采用“编辑风”“报纸风”“机构作品集”“瑞士设计”“宣言网站”，或旨在展现严谨与实体感而非亲和力的场景。此技能坚持使用一种基底（浅色瑞士印刷风格）——绝不在同一作品中与深色 CRT 模式混用。

来源

摘编自 Leonxlnx/taste-skill — skills/brutalist-skill/SKILL.md §2.1（瑞士工业印刷风格）。对于偏向深色 CRT 模式的演示文稿，请参阅 design-templates/html-ppt-taste-brutalist/。

硬性规则

• 基底： 未漂白新闻纸色 #F4F4F0 或 #EAE8E3。前景色为碳墨色 #050505。
• 强调色： 一种颜色——航空／警示红 #E61919。用于分隔线、删除线、警报。绝不用于大面积填充。
• 展示字体： 粗重的新无衬线字体（Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black）。流体字号 clamp(4rem, 10vw, 15rem)。字距 -0.04em。行高 0.88。仅使用大写。
• 微型字体： 等宽字体（JetBrains Mono / IBM Plex Mono）。固定为 10–13px。字距 0.1em。大写。用于导航、元数据、说明文字、坐标。
• 几何： 所有位置的 border-radius: 0。仅使用 90° 直角。
• 网格： 在墨色背景上使用可见的 CSS 网格，设置 gap: 1px，渲染出数学上精准的 1px 分隔线。
• 留白： 不对称——主视觉区域使用延伸至视口边缘的数字或字形；数据簇则紧密排列。
• ASCII 语法： 使用 [ LABEL ]、>>>、///、注册商标 ®／商标 ™ 作为结构性装饰来点缀各个版块。

禁用项

• border-radius 大于 0。
• 投影、渐变、玻璃拟态、辉光。
• 正文居中。仅可两端对齐或严格左对齐。
• 除墨色、纸色和警示红以外的颜色。
• 除 Inter/Archivo/Plex/Mono 以外的无衬线正文字体。此处不使用“高级感”无衬线字体——这种美学早于它们。
• 曲线或“柔和”的图标风格。
• AI 陈词滥调式文案。采用精简、断言式的印刷杂志语气。

必需组件

• 顶部套准信息条： 等宽字体元信息栏——期号、日期、坐标——从一边延伸至另一边，上下以细线框定。
• 主视觉区域： 左侧以延伸至视口边缘的字号显示巨大数字或单个词；右侧栏密集排列三到四个等宽字体元数据区块。
• 宣言版块： 编号论点（01. / 02.），每条之间以细线 <hr> 分隔，并严格左对齐。
• 使用 display: grid; gap: 1px 在墨色背景上渲染数据表或索引。
• 字体样张区块： 字体排版演示——以三种字号展示字体系列／字重／大小写。
• 结尾版权信息： 等宽字体区块，注明印刷机、纸张规格、版次、排版字体。

动效

这种美学强调机械感，而非动画。动效仅用于精准呈现：

• IntersectionObserver 显示效果：立即从 opacity 0 → 1，不使用位移／模糊。
• 可选：顶部套准信息条使用恒定速度的 ticker／marquee。
• 链接的 :active 状态：立即反转墨色／纸色。过渡时间不得超过 120ms。
• 绝不为页面级布局属性添加动画。

上线前检查

• 基底为新闻纸色，前景为碳墨色，唯一强调色为警示红
• 所有 border-radius 均为 0
• 展示字体使用粗重无衬线字体，字号延伸至视口边缘（≥ 8vw）
• 微型 UI 使用大写等宽字体，固定为 10–13px，letter-spacing: 0.1em
• 至少有一个使用 display: grid; gap: 1px 且背景为墨色的模块
• ASCII 语法装饰至少出现三次（[ ... ]、>>>、///）
• 数字数据使用 tabular-nums 和等宽字体——不使用比例数字
• 无表情符号、曲线、渐变或阴影效果