デザインシステム
industrial-brutalist-ui
硬質なスイス印刷様式、あるいはアナログの粒子感を持つ CRT 端末風のインターフェースを作る。
概要
スイスのタイポグラフィ印刷と軍用端末の美学を融合したインターフェースのためのデザインシステム。硬質なグリッド、極端なタイプスケールのコントラスト、警戒色の赤 1 色のアクセント、擬似的なアナログ劣化を規定する。
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,
デザインにとっての意味
- プロジェクトごとに下地を 1 つだけ選ぶので、明と暗が混ざることはない。
- border-radius は完全に排除され、すべての角が 90 度のまま保たれる。
- ハーフトーン、スキャンライン、ノイズのフィルターが、面が平板なベクターに見えるのを防ぐ。
カバーする内容
- Visual archetypes
- Typographic architecture
- Color system
- Layout and spatial engineering
- UI components and symbology
- Textural and post-processing effects
インストール方法
industrial-brutalist-ui
-
リポジトリをクローンする。
git clone https://github.com/Leonxlnx/taste-skill -
スキルファイルの場所を Codex に指定する。
skills/brutalist-skill/SKILL.md -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
スイスの工業印刷、あるいは戦術テレメトリの CRT 端末という、いずれか 1 つの原型を選ぶ。
-
大見出しは負のトラッキングを持つ clamp を使い、メタデータは小さな大文字のモノスペースを使う。
-
コントラストのある背景と組み合わせた 1px のグリッドの隙間が、剃刀のように細い区切り線を生む。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。