web-prototype-taste-brutalist

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Prototype — Industrial Brutalist (Swiss Print)

For briefs that ask for "editorial", "newspaper", "agency portfolio", "Swiss design", "manifesto site", or anywhere the goal is to project rigor and physicality rather than friendliness. This skill commits to ONE substrate (light Swiss print) — never mix with the dark CRT mode in the same artifact.

适用于要求「社论风」「报纸风」「代理商作品集」「瑞士设计」「宣言网站」的需求场景，或是任何旨在展现严谨感与质感而非亲和力的项目。本Skill专注于一种基底（浅色瑞士印刷风格）——切勿在同一作品中与深色CRT模式混用。

Source

来源

Distilled from Leonxlnx/taste-skill —

skills/brutalist-skill/SKILL.md

§2.1 (Swiss Industrial Print). For decks that lean into the dark CRT mode, see

skills/html-ppt-taste-brutalist/

改编自Leonxlnx/taste-skill —

skills/brutalist-skill/SKILL.md

§2.1（瑞士工业印刷风格）。如需偏向深色CRT模式的演示文稿，请查看

skills/html-ppt-taste-brutalist/

。

Hard rules

硬性规则

Substrate: unbleached newsprint
```
#F4F4F0
```
or
```
#EAE8E3
```
. Foreground
```
#050505
```
carbon ink.
Accent: ONE color — aviation/hazard red
```
#E61919
```
. Used on dividing rules, strikes, alerts. Never as a fill on large surfaces.
Display type: heavy neo-grotesque (Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black). Fluid scale
```
clamp(4rem, 10vw, 15rem)
```
. Tracking
```
-0.04em
```
. Leading
```
0.88
```
. Uppercase only.
Micro type: monospace (JetBrains Mono / IBM Plex Mono). Fixed
```
10–13px
```
. Tracking
```
0.1em
```
. Uppercase. Used for navigation, metadata, captions, coordinates.
Geometry:
```
border-radius: 0
```
everywhere. 90° corners only.
Grid: visible CSS grid with
```
gap: 1px
```
over an ink-colored background to render mathematically perfect 1px dividers.
Negative space: asymmetric — hero has a viewport-bleeding numeral or letterform; data clusters are tightly packed.
ASCII syntax: decorate sections with
```
[ LABEL ]
```
,
```
>>>
```
,
```
///
```
, registration
```
®
```
/ trademark
```
™
```
as structural ornament.

基底： 未漂白新闻纸色
```
#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分隔线。
留白： 非对称布局—— hero区域包含超出视口的数字或字母；数据区块紧凑排列。
ASCII语法装饰： 使用
```
[ LABEL ]
```
、
```
>>>
```
、
```
///
```
、注册商标
```
®
```
/商标
```
™
```
作为结构装饰来划分区块。

Banned

禁用项

```
border-radius
```
above 0.
Drop shadows, gradients, glassmorphism, glows.
Centred body text. Justify or hard-left only.
Color other than ink, paper, and the hazard red.
Sans-serif body fonts other than Inter/Archivo/Plex/Mono. No "premium" grotesques here — this aesthetic predates them.
Curved or "soft" iconography.
AI cliché copy. Use clipped, declarative print-magazine voice.

```
border-radius
```
大于0的设置。
投影、渐变、毛玻璃效果、发光效果。
正文居中对齐。仅允许两端对齐或左对齐。
除墨色、纸色和警示红之外的其他颜色。
除Inter/Archivo/Plex/Mono之外的无衬线正文字体。此处不使用「高端」无衬线字体——这种美学风格早于它们出现。
曲线或「柔和」图标。
AI生成的陈词滥调文案。使用简洁、直白的印刷杂志语气。

Required components

必填组件

Top register strip: monospace meta band — issue, date, coordinates — running edge to edge with hairline rules above and below.
Hero: giant numeral or single word at viewport-bleeding scale on the left; right column packs three or four monospace metadata blocks.
Manifest section: numbered theses (
```
01.
```
/
```
02.
```
) with hairline
```
<hr>
```
between each, hard-left aligned.
Data table or index rendered with
```
display: grid; gap: 1px
```
on an ink background.
Specimen block: typography demo — show the family/weight/case at three scales.
Closing colophon: monospace block stating press, paper stock, edition, set type.

顶部注册条： 等宽字体元信息条——包含期号、日期、坐标——从一端延伸至另一端，上下带有细线条分隔。
Hero区域： 左侧是超大号数字或单个单词，尺寸超出视口；右侧列包含三到四个等宽字体元数据区块。
宣言区块： 编号论点（
```
01.
```
/
```
02.
```
），每个论点间用细线条
```
<hr>
```
分隔，左对齐。
数据表或索引： 在墨色背景上使用
```
display: grid; gap: 1px
```
渲染。
字体样本块： 排版演示——展示字体家族/字重/大小写的三种尺寸。
结尾版权页： 等宽字体区块，标明印刷商、纸张类型、版本号、排版信息。

Motion

动效

This aesthetic is mechanical, not animated. Use motion only as a precision mechanism:

```
IntersectionObserver
```
reveal: instant
```
opacity 0 → 1
```
, no translate/blur.
Optional ticker/marquee for the top register strip at constant speed.
```
:active
```
on links: invert ink/paper instantly. No transitions over
```
120ms
```
.
Never animate page-level layout properties.

这种美学风格偏向机械感，而非动画感。仅将动效用作精准的交互机制：

```
IntersectionObserver
```
显示效果：瞬间从
```
opacity 0 → 1
```
，不使用位移/模糊效果。
可选：顶部注册条以恒定速度滚动的跑马灯效果。
链接
```
:active
```
状态：瞬间反转墨色/纸色。过渡时长不超过
```
120ms
```
。
切勿对页面级布局属性添加动画。

Pre-flight

预检清单

Substrate is newsprint, foreground is carbon ink, only accent is hazard red
All
```
border-radius
```
is
```
0
```
Display uses heavy grotesque at viewport-bleeding scale (≥
```
8vw
```
)
Micro UI uppercase monospace at fixed
```
10–13px
```
,
```
letter-spacing: 0.1em
```
At least one
```
display: grid; gap: 1px
```
ink-background module
ASCII syntax decoration appears at least three times (
```
[ ... ]
```
,
```
>>>
```
,
```
///
```
)
Numeric data uses tabular-nums + monospace — no proportional figures
No emojis, no curves, no gradients, no shadow effects

基底为新闻纸色，前景为炭黑色墨水，仅使用警示红作为强调色
所有
```
border-radius
```
均为
```
0
```
标题使用粗重无衬线字体，尺寸超出视口（≥
```
8vw
```
）
微UI使用大写等宽字体，固定字号
```
10–13px
```
，
```
letter-spacing: 0.1em
```
至少有一个在墨色背景上使用
```
display: grid; gap: 1px
```
的模块
ASCII语法装饰至少出现三次（
```
[ ... ]
```
、
```
>>>
```
、
```
///
```
）
数字数据使用tabular-nums + 等宽字体——不使用比例数字
无表情符号、无曲线元素、无渐变、无阴影效果