industrial-brutalist-ui

1实现原理 · 为什么它能做到

双范式二选一作为宪法级约束：Swiss Industrial Print（浅色工业印刷）与 Tactical Telemetry & CRT Terminal（暗色终端）只能选一种并全程承诺，禁止混用。

skills/brutalist-skill/SKILL.md

The design system operates by merging two distinct but highly compatible visual paradigms. **Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.**

注：Section 2 的 Pick-ONE 直接把风格一致性写死——防『浅色页面中间插一块暗色模块』这类最常见 AI 事故；与 redesign-skill 审计里『Random dark sections in a light mode page』的问题互为镜像。

三轨字体架构（§3）：宏标题用重 sans + 负字距压缩行高、数据遥测用等宽小字 + 宽字距全大写、装饰性衬线只作极少量的『被打散』文本。

skills/brutalist-skill/SKILL.md

* **Optimal Web Fonts:** Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.

注：注意与家族其它 skill 不同：Inter 在此被列为宏字体选项——说明家族禁令禁的是『默认感使用』而非字体本身；宏/微字体由 clamp 流式字号与 tracking 参数支撑（§3.1/3.2）。

色彩被写成『介质模拟』：禁渐变/柔影/现代半透明，必须在单基板（浅色纸感或暗色 CRT）上以单红为主 accent，终端绿仅限单一 UI 元素可选。

skills/brutalist-skill/SKILL.md

The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.

注：§4 给两套完整 substrate 色板（#F4F4F0/#EAE8E3 纸感 vs #0A0A0A/#121212 CRT，且暗色禁纯 #000000），红色 #E61919/#FF2A2A 唯一、#4AF626 终端绿受限——颜色稀缺纪律比家族其它成员更极端。

布局即工程：CSS Grid 锚定、可见分区线、双态密度（极端数据密集 ↔ 巨大负空间）、绝对 90 度角。

skills/brutalist-skill/SKILL.md

* **Geometry:** Absolute rejection of `border-radius`. All corners must be exactly 90 degrees to enforce mechanical rigidity.

注：『border-radius 全禁』是 brutalist 语言最可判定的规则之一；§5 另要求元素『anchored precisely to grid tracks and intersections』。

符号系统工业化：ASCII 框线/方向符、®©™ 注册符当结构几何、十字准星/条形码/随机编号字符串制造『机器在运行』的假象。

skills/brutalist-skill/SKILL.md

* **Syntax Decoration:** Utilization of ASCII characters to frame data points.

注：§6 具体给 framing 模板（`[ DELIVERY SYSTEMS ]`、`< RE-IND >`、`>>>`/`///`/`\\`）与 REV 2.6 / UNIT / D-01 之类字符串样例。

模拟退化质感用纯 CSS/SVG 实现：halftone/1-bit 抖动、CRT 扫描线 repeating-linear-gradient、全局低透明噪点——全部是前端可写效果而非贴图。

skills/brutalist-skill/SKILL.md

* **CRT Scanlines:** For terminal interfaces, applying a `repeating-linear-gradient` to the background to simulate horizontal electron beam sweeps

注：§7 的工程落地方式让『复古硬件感』不需要任何图片资产；噪点要求固定层 + 低透明度，与家族性能纪律一致。

§8 四条工程指令收口：gap:1px 网格细线技巧、语义 DOM（data/samp/kbd/output/dl）、clamp() 宏字体缩放。

skills/brutalist-skill/SKILL.md

1. **Grid Determinism:** Utilize `display: grid; gap: 1px;` with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.

注：gap:1px + 底色对比是画『完美细线』的知名 CSS 技巧，被写成显式规则；整份文件无脚本、无外部资源调用。

2核心能力

01双视觉语言选择器：Swiss Industrial Print / Tactical Telemetry & CRT（选一承诺不混用）

02宏/微字体体系：负字距压缩巨字（clamp 流式）+ 等宽数据字全大写宽字距

03单基板色板纪律：纸感浅色或 CRT 暗色二选一，单一航空红 accent，终端绿单点受限

04工程化布局：grid 锚定、可见分区、90 度角、双态密度

05CSS/SVG 模拟退化质感：halftone 抖动、CRT 扫描线、机械噪点

06语义 DOM 与工业符号（ASCII 框、注册符、准星、编号串）

3外部依赖

类型	依赖
package	字体栈建议：Neue Haas Grotesk / Archivo Black / Monument Extended / JetBrains Mono / VT323 等

4风险提醒风险提醒：绿色 · 放心使用

风险提醒：绿色 · 放心使用

绝对化几何/色彩纪律对多数消费级品牌过激 — 无圆角、全大写、单红色可能让非目标受众感到冷硬；若用户品牌约束冲突，文件无豁免仲裁。
字体可用性依赖宿主 — Neue Haas Grotesk/Monument Extended 等商业字体若宿主未授权，agent 可能引入外链或退回默认字体。
效果滥用风险 — scanlines/noise 若被过度使用会伤害可读性与性能；文件未给出使用上限提示（仅说固定层低透明度）。
风格强、适用范围窄 — 仅适合数据密集/工业/编辑/档案感场景；营销快消、温暖消费品牌等场景明显错配。

风险提醒：绿色，放心使用（证据：目录仅 SKILL.md 单文件，git ls-files 证实；token 扫描零命中，'fs.' 命中为 'sans-serifs.' 单词误报）。skill 级零脚本、零网络外发、零凭证接触、零本地读写；CSS/SVG 质感效果是交付代码样板，非 skill 执行物。注意点仅为字体选型建议可能诱导生成代码引入外链、绝对化风格约束与用户需求冲突无仲裁，均属对话/生成层。

5第二遍独立确认

[ok] 目录资产面（含隐藏/未跟踪文件） — git ls-files + ls -A 双查：该 skill 目录仅 1 个文件 SKILL.md，无 scripts/references/模板/数据/隐藏文件，无可执行代码。
[ok] 执行类 token 扫描 — 逐文件扫描 bash/exec/child_process/curl/wget/fetch/axios/process.env/API_KEY/.env/fs./writeFile/.github 等零命中（brutalist 一处 'sans-serifs.' 单词结尾 fs. 为误报，人工复核排除）。
[ok] 引文逐条 grep -F 字节复核 — 本 JSON 所用全部 quote 均以 grep -F 在 pin commit 工作树中逐条验证存在，无 paraphrase 冒充。
[ok] 元数据与 pin 核对 — 本地 git HEAD == 任务 pin ccbc15639c97057cbfcf32ecebc38ef716e4bb37（README 显示该提交为 docs/sponsor 修订 #102，2026-08-24）；GitHub API 实查 stars=85698、MIT、pushed_at=2026-08-24T15:23:56Z。frontmatter name 与任务给定名一致。
[ok] 功能声明 vs 实际能力夸大检查 — description 声称均由 SKILL.md 正文纯 prompt 机制兑现，无脚本可调用、无越界承诺（详见本文件 how_it_works 引文）。
[ok] 家族矛盾点：Inter 在其它成员被禁、此处被列为主字体 — §3.1 原文将 Inter (Extra Bold/Black) 列入 Optimal Web Fonts，且上下文要求负字距压缩大写——与 soft/minimalist 的『禁 Inter 默认用法』不冲突：禁令针对默认感，此处为 Black 字重风格化使用。已在 traits 中如实记录该家族内差异。
[ok] 『Never mix light and dark substrates』与 §2 Pick-ONE 是否一致 — §4 CRITICAL 行与 §2 双重声明（'Never mix light and dark substrates within the same interface.'），两处互证，无矛盾。
[ok] 红色『ONLY accent』与 terminal green 是否冲突 — §4 明示 #4AF626 仅限单一 UI 元素且『If it doesn't serve a clear purpose, omit it entirely』，受限例外被显式声明，非矛盾。

6结论

语言纯粹且判定成本极低：90 度角、单红 accent、禁渐变/柔影/圆角都是可机械检查的规则。

双范式自选 + Pick-ONE 承诺，既给风格选择又锁死一致性。

质感效果全部给可照抄的 CSS/SVG 样板，复古硬件感不需要图片资产，实现成本低。

工程与视觉一体：gap:1px 网格线技巧、语义 DOM、clamp 宏字体都是可直接进生产的前端实践。

明确服务于数据密集型界面：密度是特性不是缺陷，适合 dashboard/遥测/工业产品语境。

适合：适合目标明确为『工业粗野/战术遥测』气质的界面：数据密集型 dashboard、监控/运维终端式界面、作品集、编辑/档案类站点（declassified blueprint 感）；同样适合 greenfield React/Tailwind/HTML 且运行在支持自定义字体的宿主。

不适合：不适合柔和/高价品牌营销页（soft-skill 更合适）、极简工作台（minimalist-ui）、消费级大众产品；不适合用户无法接受无圆角/全大写/单一红的企业品牌场景；不适合已有代码库渐进改造（用 redesign-existing-projects）。

安装 agent 直装可复制

① 本站镜像更新 2026-09-09

方式 A · 人下载镜像包下载 industrial-brutalist-ui.tar.gz

sha256: 5e11235d90ac1192…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit 3cca18b368；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库leonxlnx / leonxlnx/taste-skill

原始 GitHubleonxlnx/taste-skill ↗

Stars85698

最近推送2026-08-24

本 skill commit3cca18b368

本站信息

收录日期2026-09-06

分类设计

侦查报告2026-09-06 · 2 遍

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

1实现原理 · 为什么它能做到

2核心能力

3外部依赖

4风险提醒 风险提醒：绿色 · 放心使用

5第二遍独立确认

6结论

4风险提醒风险提醒：绿色 · 放心使用