技能概述
Web Prototype — Industrial Brutalist 係一個瑞士工業印刷風格嘅網頁原型技能。設計語言來自 Leonxlnx/taste-skill 嘅 brutalist-skill，專注於一種基底（淺色瑞士印刷）—— 唔會同深色 CRT 模式混合使用。
適用場景：簡報要求「editorial」、「newspaper」、「agency portfolio」、「Swiss design」、「manifesto site」，或者任何需要展現嚴謹感同物理質感嘅設計。
觸發關鍵字
- editorial、newspaper、agency portfolio、Swiss design、manifesto site
- 工業風、瑞士設計、報紙風格、宣言網站
- brutalist web prototype、Swiss print
什麼時候用
- 需要展現嚴肅、冷峻、理性嘅品牌形象
- 設計工作室 portfolio 或藝術宣言網站
- 需要強對比、大字号、硬邊角嘅視覺衝擊
- 用戶問「我想要 Monocle 雜誌嗰種冷峻感」
使用方法
自然語言觸發
用 brutalist 風格做個 landing page
做一個瑞士印刷風格嘅 prototype
工業風 web prototype
設計規則
基底色： 未漂白新聞紙色 #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 Grid，gap: 1px 叠加墨色背景實現完美 1px 分割線。
禁止事項
border-radius大於 0。- 陰影、漸變、毛玻璃、光暈。
- 居中文本，僅限對齊或硬左對齊。
- 除墨水、紙張、危險紅之外嘅任何顏色。
- Inter/Archivo/Plex/Mono 以外嘅無襯線正文。
- AI 陳詞濫調文案，使用簡潔嘅印刷雜誌語氣。
必需組件
| 組件 | 說明 |
|---|---|
| 頂部登記條 | 等寬字體元數據帶 —— issue、date、coordinates，滿版加 1px 邊框線 |
| Hero | 左側滿版大數字或單詞；右側 3-4 個等寬元數據塊 |
| 宣言區塊 | 編號論點（01. / 02.），用 1px <hr> 分隔，硬左對齊 |
| 數據表格/索引 | display: grid; gap: 1px 墨色背景模塊 |
| 字體樣本 | 展示字族/字重/大小寫嘅三級比例演示 |
| 結尾出版信息 | 等寬字體塊，標註印刷廠、紙張、版本、字體 |
動畫
此美學係機械化而非動畫化：
IntersectionObserver顯示：即時opacity 0 → 1，唔用 translate/blur。- 頂部登記條可選 ticker/marquee 恆速滾動。
:active鏈接：即時墨水/紙張反轉，過渡唔超過120ms。
實際例子
用戶：「用 brutalist 風格做一個獨立設計工作室嘅 portfolio landing page。」
生成結果：
- Hero：左側
28滿版大數字，右側 4 個等寬元數據塊 - 宣言區塊：3 個編號論點，用 1px 分割線分隔
- 數據表格：
display: grid; gap: 1px渲染項目列表 - 結尾：等寬字體出版信息