industrial-brutalist-ui について
ウェブインターフェース向けのデザインスキルで、スイス工業印刷風または戦術テレメトリー風の表現を扱います。厳格なグリッド、大胆なタイポグラフィ、実用的な配色、アナログ風の質感を設計に取り入れます。
主な機能
- 01スイス工業印刷または戦術 CRT の演出
- 02厳格なグリッドと明確な区切り線
- 03特大見出しと技術的な書体
- 04抑制された実用的な配色
- 05網点、走査線、ノイズ効果
活用シーン
- 01工業・航空宇宙ダッシュボードの設計
- 02高密度なテレメトリー画面の制作
- 03ブルータリズム風ウェブ記事ページの構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/industrial-brutalist-uiを入力して読み込まれたか確認します。
同梱ファイルLICENSE
詳細
スキル：インダストリアル・ブルータリズム＆戦術テレメトリー UI
1. スキルの概要
名前： インダストリアル・ブルータリズム＆戦術テレメトリー・インターフェースエンジニアリング 説明： 20 世紀半ばのスイス・タイポグラフィ・デザイン、工業製造マニュアル、レトロフューチャーな航空宇宙・軍事端末インターフェースを融合するウェブインターフェースを設計する、高度な専門性です。この分野では、厳格なモジュラーグリッド、極端な文字サイズのコントラスト、純粋に実用的なカラーパレット、そしてアナログ劣化（ハーフトーン、CRT スキャンライン、ビットマップディザリング）のプログラムによる再現を完全に習得する必要があります。目標は、生の機能性、機械的な精密さ、高いデータ密度を印象づけ、従来の消費者向け UI パターンを意図的に排除したデジタル環境を構築することです。
2. ビジュアルアーキタイプ
このデザインシステムは、明確に異なりながらも高い親和性を持つ 2 つのビジュアルパラダイムを融合します。プロジェクトごとに 1 つだけ選択し、一貫して適用してください。同じインターフェース内で切り替えたり、両方を混ぜたりしないでください。
2.1 スイス・インダストリアル・プリント
1960 年代の企業アイデンティティシステムと大型機械の設計図を起源とします。
- 特徴： 高コントラストのライトモード（新聞用紙やオフホワイトの下地）。重厚で巨大なサンセリフ体への依存。目に見える区切り線で輪郭を示す、容赦のない構造グリッド。ビューポートから大胆にはみ出す巨大な数字や文字を、余白に非対称に配置します。警告やアクセントカラーとして原色の赤を多用します。
2.2 戦術テレメトリー＆CRT 端末
機密軍事データベース、旧式メインフレーム、航空宇宙分野のヘッドアップディスプレイ（HUD）を起源とします。
- 特徴： ダークモード限定。高密度の表形式データ表示。等幅フォントが圧倒的な存在感を持ちます。技術的なフレーム要素（ASCII 括弧、照準線）を取り入れます。ハードウェア上の制約をシミュレートし（蛍光体の発光、スキャンライン、低ビット深度レンダリング）、表現に反映します。
3. タイポグラフィの構造
タイポグラフィは、構造と装飾の基盤となります。画像は二次的な要素です。このシステムでは、サイズ、ウェイト、字間に極端な差を設ける必要があります。
3.1 マクロタイポグラフィ（構造的な見出し）
- 分類： ネオ・グロテスク／ヘビーサンセリフ。
- 最適なウェブフォント： Neue Haas Grotesk（Black）、Inter（Extra Bold/Black）、Archivo Black、Roboto Flex（Heavy）、Monument Extended。
- 実装パラメーター：
- サイズ： 流体タイポグラフィを使って、非常に大きなサイズで配置します（例：
clamp(4rem, 10vw, 15rem)）。 - 字間（レタースペーシング）： 極端に詰めます。多くの場合、負の値（
-0.03em～-0.06em）にして、文字を建築的な塊として見せます。 - 行送り（行の高さ）： かなり詰めます（
0.85～0.95）。 - 大文字・小文字： 構造的なインパクトを出すため、すべて大文字にします。
- サイズ： 流体タイポグラフィを使って、非常に大きなサイズで配置します（例：
3.2 マイクロタイポグラフィ（データ＆テレメトリー）
- 分類： 等幅／テクニカルサンセリフ。
- 最適なウェブフォント： JetBrains Mono、IBM Plex Mono、Space Mono、VT323、Courier Prime。
- 実装パラメーター：
- サイズ： 固定の小さなサイズにします（
10px～14px／0.7rem～0.875rem）。 - 字間： 機械式タイプライターの字間や端末のマトリクスを再現するため、広めにします（
0.05em～0.1em）。 - 行送り： 標準からやや詰めた値にします（
1.2～1.4）。 - 大文字・小文字： すべて大文字にします。すべてのメタデータ、ナビゲーション、ユニット ID、座標に使用します。
- サイズ： 固定の小さなサイズにします（
3.3 テクスチャのコントラスト（芸術的な崩し）
- 分類： ハイコントラスト・セリフ体。
- 最適なウェブフォント： Playfair Display、EB Garamond、Times New Roman。
- 実装パラメーター： 使用は極めて控えめにします。ベクターの完璧さを損ない、クリーンなサンセリフ体とテクスチャの対比を生むため、強い後処理（ハーフトーンフィルター、1 ビットディザリング）を施す必要があります。
4. カラーシステム
カラー設計に妥協はありません。グラデーション、柔らかなドロップシャドウ、現代的な半透明表現は厳禁です。色は、物理メディアや原始的な発光ディスプレイを模倣します。
重要：プロジェクトごとに基調パレットを1つ選び、一貫して使用してください。同じインターフェース内で明るい基調と暗い基調を混在させてはいけません。
スイス工業印刷（ライト）を選ぶ場合：
- 背景：
#F4F4F0または#EAE8E3（マットな未漂白のドキュメント用紙）。 - 前景：
#050505から#111111（カーボンインク）。 - アクセント：
#E61919または#FF2A2A（航空・危険標識の赤）。使用できるアクセントカラーはこれだけです。取り消し線、太い構造的な区切り線、重要なデータの強調に使用します。
戦術テレメトリー（ダーク）を選ぶ場合：
- 背景：
#0A0A0Aまたは#121212（電源オフのCRT。純粋な#000000は避けてください）。 - 前景：
#EAEAEA（白色蛍光体）。主要なテキストカラーです。 - アクセント：
#E61919または#FF2A2A（航空・危険標識の赤）。同じ赤を同じルールで使用します。 - ターミナルグリーン（
#4AF626）： 任意です。特定のUI要素1つ（例：ステータスインジケーター1つ、データ表示1つ）にのみ使用し、一般的なテキストカラーとしては使用しないでください。明確な目的がなければ、完全に省略してください。
5. レイアウトと空間設計
レイアウトは数学的に設計されたように見える必要があります。従来のウェブ向けパディングを退け、視覚的に区画化します。
- ブループリントグリッド： CSS Gridの構造を厳格に遵守します。要素を浮かせず、グリッドのトラックと交点に正確に配置します。
- 視覚的な区画化： 実線の境界線（
1pxまたは2px solid）を幅広く用いて、情報の領域を明確に区切ります。水平線（<hr>）は、運用単位を分離するためにコンテナーの全幅にわたって引くことがよくあります。 - 二峰性の密度： レイアウトは、データが極めて高密度な状態（等幅フォントのメタデータを密集させる）と、マクロタイポグラフィを囲む、計算された広大な余白との間を行き来します。
- 形状：
border-radiusは一切使用しません。機械的な剛性を保つため、すべての角を正確に90度にします。
6. UIコンポーネントと記号表現
標準的なウェブUIの慣習に代えて、実用性を重視した工業的なグラフィック要素を使用します。
- 構文の装飾： ASCII文字を使ってデータポイントを囲みます。
- 囲み：
[ DELIVERY SYSTEMS ]、< RE-IND > - 方向：
>>>、///、\\\\
- 囲み：
- 工業用マーカー： 登録商標（
®）、著作権（©）、商標（™）の記号を、法的なテキストではなく、構造的な幾何学要素として目立つように取り入れます。 - 技術的な素材： グリッドの交点に照準線（
+）、反復する縦線（バーコード）、太い水平警告ストライプ、機械が稼働している様子を模倣するランダムな文字列データ（例：REV 2.6、UNIT / D-01）を取り入れます。
7. テクスチャと後処理エフェクト
デザインが純粋なデジタル表現に見えないよう、CSSとSVGフィルターを使って、アナログの劣化をフロントエンドに再現します。
- ハーフトーンと1ビットディザリング： 階調のある画像や大きなセリフ体の文字をドットマトリクスパターンに変換します。前処理を行うか、CSSの
mix-blend-mode: multiplyオーバーレイとSVGの放射状ドットパターンを組み合わせて実現します。 - CRT走査線： ターミナルインターフェースでは、背景に
repeating-linear-gradientを適用し、電子ビームが水平方向に走査する様子を再現します（例：repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)）。 - 機械ノイズ： DOMルートに不透明度の低いSVG静電ノイズフィルターを全体に適用し、ダークモードとライトモードの両方に統一感のある物理的な粒状感を加えます。
8. Web エンジニアリングの指針
- グリッドの決定性：
display: grid; gap: 1px;を使用し、親要素と子要素の背景色にコントラストをつけることで、複雑なボーダー指定を使わずに、数学的に完璧な極細の区切り線を生成します。 - セマンティクスの厳密性： 正確なセマンティックタグ（
<data>、<samp>、<kbd>、<output>、<dl>）を使って DOM を構築し、テレメトリーの技術的な性質を正確に反映します。 - タイポグラフィのクランプ： CSS の
clamp()関数はマクロタイポグラフィにのみ適用し、巨大なテキストを大胆に拡大しながら、さまざまなビューポートで構造の整合性を保ちます。