关于 brutalist-industrial
brutalist-industrial 是一套用于网页视觉设计的技能规范，面向需要工业蓝图式页面风格的设计者。它以单一信号色、清晰网格和硬朗排版建立统一的视觉规则。
主要功能
- 01固定配色与重型字体规范
- 02以细线和分隔构建网格
- 03方形边框与硬阴影按钮
- 04机械式短时动效规则
- 05页面内容与图标限制
适用场景
- 01设计工业风产品落地页
- 02将功能和价格排成索引表格
- 03统一页面按钮、字体与配色
- 04检查页面是否符合视觉规范
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/brutalist-industrial确认已加载。
详细介绍
brutalist-industrial
唯一的身份：一份解密的蓝图，描绘一台你尚未获准见识的机器。
1. 配色（固定）
- 底色：
#F2F1EC（泛黄纸张）。深色底色变体：#1B1B18。 - 墨色：
#141414（近黑，中性）。 - 信号色——恰好一种：安全橙
#E8540B、工业黄#E3B23C或技术蓝#2B5FA8。根据设计简报选择，之后不得更改。 - 元数据辅助墨色：
#6E6C64。 - 线条／边框：
#141414，不透明度 100%——清晰可见，1px，处处如此。 - 不使用渐变、阴影或辉光。通过错位的实色块和线条营造纵深。
2. 字体排印（固定）
- 展示字体： 粗重的无衬线字体（Archivo、Archivo Black，或回退到 Arial Black），字重 700–900，全部大写，字距紧凑（−0.01em），超大字号
clamp(2.6rem, 7vw, 6rem)。 - 正文： 同一字体系列，字重 400，15–17px，行高 1.5–1.6。
- 标签／元数据： 等宽字体（
IBM Plex Mono、ui-monospace），全部大写，letter-spacing: 0.08–0.12em，10–12px。区块坐标（“01 / 04”）、规格编号（“GS-114”）和状态标签均使用等宽字体。 - 绝不使用斜体或衬线字体；绝不将小写字母用作品牌标识（刻意采用设计例外的情况除外）。
3. 构图（固定）
- 清晰可见的网格规范： 处处使用细线（1px 实线，墨色）——区块分隔线、列分隔线、表格行线。网格就是设计本身。
- 页眉区块： 左对齐的文字标识 + 右侧等宽坐标（“N-01 / REV 3”）；用顶部和底部 1px 线条收住页眉区。
- 主视觉区： 巨大的窄体大写标题横跨全宽，搭配带信号色标记（▪ 或 ▸）的等宽字体引导语，正文右对齐并占据 5/12 列，底部出口行包含小号等宽字体说明 + 信号色 CTA 方框。
- 用结构呈现数据： 功能／定价以带线条的索引表格或分类账行呈现——绝不使用圆角卡片。若使用卡片：必须为直角、1px 墨色边框，不加阴影。选中／精选行使用信号色填充（
#E8540B，墨色文字）。 - 按钮：矩形，1–2px 墨色边框，硬质偏移阴影
4px 4px 0 ink（或信号色）；按下时移除偏移。
4. 内容处理
- 不使用 emoji。除排版标记（▪、▸、■、→）和绘制的方形／十字字形外，不使用图标。
- 数字就是装饰：每个区块都要有等宽索引编号；指标以仪表盘式等宽列排版。
- 默认不使用摄影图片。只有在表达需要时，才使用满幅半色调／灰度图像，并加 1px 墨色边框。
- CTA：一个实色 CTA（信号色或墨色填充），加一个纯等宽字体文本链接。绝不设置两个同等强调的按钮。
5. 动效（机械感，而非美观感）
- 瞬时响应或 80–150ms 快速切换——像机器响应，而非编排动画。
- 悬停：反转（墨色→底色），1px 边框切换为信号色。不上浮、不摇晃、不做视差。
- 仅允许一种入场效果：区块通过裁切／向上平移 8px 显现，时长 150ms。
6. 检查清单（出现以下任一项则页面不合格……）
- 任何主要表面的
border-radius大于 2px。 - 任何渐变、辉光、投影或模糊效果。
- 使用了不止一种信号色。
- 任何 emoji 或俏皮风格的图标。
- 展示字体不是全部大写或不够粗重。
- 标签位置使用了斜体或衬线字体。
- 网格不可见（没有线条，也没有对齐依据）。
- 出现了由三个标准圆角卡片组成的一行。
评论
支持 Markdown