设计系统

industrial-brutalist-ui

做出刚硬的瑞士印刷风或 CRT 终端风界面,带模拟颗粒质感。

这是什么

一套把瑞士印刷排版和军用终端美学融合在一起的设计系统,规定了刚性网格、极端的字号反差、一种警示红强调色,以及模拟出的信号劣化效果。

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios,
来自上游 SKILL.md

它对设计意味着什么

  • 每个项目只选一种底色基调,浅色和深色永远不会混用。
  • 完全拒绝 border-radius,每个角都保持九十度直角。
  • 网点、扫描线和噪点滤镜让表面不会显得像扁平的矢量图。

包含哪些内容

  • Visual archetypes
  • Typographic architecture
  • Color system
  • Layout and spatial engineering
  • UI components and symbology
  • Textural and post-processing effects

如何安装

industrial-brutalist-ui

  1. 克隆这个仓库。

    git clone https://github.com/Leonxlnx/taste-skill
  2. 把 Codex 指向这个 Skill 文件。

    skills/brutalist-skill/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 先选一种原型:瑞士工业印刷风,或者战术遥测 CRT 终端风。

  2. 大标题用 clamp 加负字距,元信息用小号大写等宽字体。

  3. 1px 的网格间距配上反差背景色,做出刀锋般纤细的分隔线。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。