mcpField
W
web-prototype-taste-brutalist

web-prototype-taste-brutalist

github.com/nexu-ioデザイン・UI104.6k162 回インストール今日更新
リポジトリ

web-prototype-taste-brutalist について

スイスの工業印刷を基調とする Web プロトタイプ向けデザインスキルです。エディトリアルページ、ポートフォリオ、マニフェスト向けに、新聞紙の配色、直線的なレイアウト、文字階層、機械的な動きを定めています。

主な機能

  1. 01新聞紙とカーボンインクに赤を加えた配色
  2. 02太い大文字ディスプレイ書体と等幅メタデータ
  3. 03直角の形状と可視グリッドの区切り線
  4. 04番号付きテーゼ、データ索引、書体見本
  5. 05最小限の表示効果と即時反転するリンク

活用シーン

  1. 01スイス風のデザイン会社ポートフォリオ制作
  2. 02新聞風またはマニフェストサイトの試作
  3. 03印刷物風レイアウトでの構造化データ提示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/nexu-io/open-design --skill web-prototype-taste-brutalist

インストール後、Claude Code で/web-prototype-taste-brutalistを入力して読み込まれたか確認します。

同梱ファイルexample.html

詳細

Web Prototype — Industrial Brutalist (Swiss Print)

「エディトリアル」「新聞」「エージェンシーのポートフォリオ」「スイスデザイン」「マニフェストサイト」、あるいは親しみやすさではなく厳格さと物質感を表現することが目的のブリーフ向けです。このスキルでは、単一の基調（明るいスイス印刷物）を採用します。同じ成果物でダークな CRT モードと混在させないでください。

Source

Leonxlnx/taste-skill — skills/brutalist-skill/SKILL.md §2.1（Swiss Industrial Print）から要点を抽出しています。ダークな CRT モードを取り入れたデッキについては、design-templates/html-ppt-taste-brutalist/ を参照してください。

Hard rules

  • 基調： 漂白していない新聞用紙 #F4F4F0 または #EAE8E3。前景色はカーボンインク #050505。
  • アクセント： 1色のみ — 航空／危険を示す赤 #E61919。区切り線、取り消し線、警告に使用します。大きな面の塗りつぶしには使用しないでください。
  • ディスプレイ書体： 太字のネオ・グロテスク体（Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black）。流動的なスケール clamp(4rem, 10vw, 15rem)。字間 -0.04em。行送り 0.88。すべて大文字のみ。
  • マイクロ書体： 等幅（JetBrains Mono / IBM Plex Mono）。固定サイズ 10–13px。字間 0.1em。大文字。ナビゲーション、メタデータ、キャプション、座標に使用します。
  • 形状： すべての場所で border-radius: 0。角は90°のみ。
  • グリッド： インク色の背景に gap: 1px を設定した可視の CSS グリッドで、数学的に正確な1pxの区切り線を描画します。
  • ネガティブスペース： 非対称にします — ヒーローにはビューポートからはみ出す数字または文字を配置し、データのまとまりは密に詰めます。
  • ASCII 構文： [ LABEL ]、>>>、///、登録商標 ® / 商標 ™ を構造的な装飾としてセクションにあしらいます。

Banned

  • 0を超える border-radius。
  • ドロップシャドウ、グラデーション、グラスモーフィズム、光彩。
  • 中央揃えの本文テキスト。両端揃え、または左端揃えのみ。
  • インク、紙、危険を示す赤以外の色。
  • Inter/Archivo/Plex/Mono以外のサンセリフ本文書体。この美学はそれらよりも古いため、ここでは「プレミアム」なグロテスク体は使用しません。
  • 曲線的、または「柔らかい」アイコン表現。
  • AIらしいありきたりな文言。簡潔で断定的な印刷雑誌の語り口を使います。

Required components

  • トップのレジスターストリップ： 号数、日付、座標を載せた等幅のメタ情報帯。上下に極細の罫線を引き、端から端まで配置します。
  • ヒーロー： 左側に、ビューポートからはみ出すスケールの巨大な数字または単語を配置します。右側のカラムには、等幅のメタデータブロックを3つまたは4つ詰め込みます。
  • マニフェストセクション： 番号付きの主張（01. / 02.）を配置し、各項目の間に極細の <hr> を引いて、左端揃えにします。
  • インク色の背景に display: grid; gap: 1px を設定して描画するデータテーブルまたは索引。
  • 標本ブロック： タイポグラフィのデモ — 書体ファミリー／ウェイト／大文字小文字を3つのサイズで表示します。
  • クロージング・コロフォン： 印刷所、用紙、版数、使用書体を記した等幅ブロック。

Motion

この美学は機械的であり、アニメーション的ではありません。動きは精密な仕組みとしてのみ使用します。

  • IntersectionObserver による表示：瞬時に opacity 0 → 1 にし、移動／ぼかしは加えません。
  • 任意で、トップのレジスターストリップに一定速度のティッカー／マーキーを使用できます。
  • リンクの :active：インクと紙の色を瞬時に反転させます。120ms を超えるトランジションは使用しません。
  • ページ全体のレイアウトプロパティはアニメーションさせないでください。

Pre-flight

  • 基調は新聞用紙、前景色はカーボンインク、アクセントは危険を示す赤のみ
  • すべての border-radius が 0
  • ディスプレイ書体は、ビューポートからはみ出すスケール（≥ 8vw）の太字グロテスク体
  • マイクロ UI は大文字の等幅書体で固定サイズ 10–13px、letter-spacing: 0.1em
  • インク色の背景に display: grid; gap: 1px を設定したモジュールが少なくとも1つある
  • ASCII 構文の装飾（[ ... ]、>>>、///）が少なくとも3回登場する
  • 数値データには tabular-nums と等幅書体を使用し、プロポーショナル数字は使用しない
  • 絵文字、曲線、グラデーション、シャドウ効果を使用しない

コメント

Markdown 対応