mcpField
W
web-prototype-taste-editorial

web-prototype-taste-editorial

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

web-prototype-taste-editorial について

エディトリアルなミニマリズムを取り入れた単一ページの Web プロトタイプ向けデザインスキルです。マーケティングページやドキュメント風ページの具体的な視覚ルールと必須要素を定めています。

主な機能

  1. 01暖色系オフホワイトとセリフ体
  2. 02細い区切り線と控えめな影
  3. 03非対称ヒーローと高さの異なる Bento グリッド
  4. 04対比セクション、CTA 帯、メタデータ付きフッター
  5. 05控えめなスクロール表示とカードのホバー動作

活用シーン

  1. 01プレミアム SaaS のマーケティングページ制作
  2. 02ドキュメントやナレッジ製品サイトの試作

インストール

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

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

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

同梱ファイルexample.html

詳細

Web Prototype — エディトリアル・ミニマリズム

Notion／Linear のマーケティングサイトや、プレミアムなドキュメントページのような雰囲気の、シングルページの Web プロトタイプです。「クリーン」「エディトリアル」「プレミアムな SaaS」「ドキュメント」「ナレッジプロダクト」といった要望に適しています。

ソース

Leonxlnx/taste-skill の skills/minimalist-skill/SKILL.md と、skills/taste-skill/SKILL.md にある空間リズムのルールをまとめたものです。完成版テンプレートについては、このディレクトリの example.html をご覧ください。

厳守するルール

  • キャンバス： 温かみのあるオフホワイト（#FBFBFA または #F7F6F3）。純白は使用しないでください。
  • 前景色： オフブラック #111111、セカンダリテキストは #787774。#000000 は使用しないでください。
  • ボーダー： 1px solid #EAEAEA のみ。0 1px 2px rgba(0,0,0,0.04) を超えるドロップシャドウは使用しないでください。
  • 書体の組み合わせ： ディスプレイにはエディトリアルなセリフ体（Instrument Serif／Newsreader／Lyon）、本文にはグロテスク体（Geist／Switzer／SF Pro）、メタデータやキーストロークには等幅フォント（Geist Mono／JetBrains Mono）を使用します。
  • ディスプレイの字間： letter-spacing: -0.025em、line-height: 1.05。
  • パステルチップのみ使用： タグやバッジには、彩度を抑えた背景色（#FDEBEC、#E1F3FE、#EDF3EC、#FBF3DB）を使用します。セクションの背景には使用しないでください。
  • コンテナ： border-radius: 8–12px を上限とします。ピル型のコンテナや、カードへの rounded-full の適用は禁止です。
  • セクションのパディング： 最低 py-24、ヒーローには py-32 を使用します。

使用禁止

  • Inter、Roboto、Open Sans（Geist／Switzer／SF Pro を使用してください）。
  • 汎用的な Lucide の細線アイコン（Phosphor Bold または Radix を使用してください）。
  • グラデーション、ネオン、微かなナビゲーションバーのぼかしを超えるグラスモーフィズム。
  • shadow-sm を超えるドロップシャドウ。グローは禁止です。
  • 汎用的なプレースホルダー名（John Doe／Acme／Lorem）。文脈に沿った具体的な内容を使用してください。
  • AI コピーの陳腐な表現：「Elevate」「Seamless」「Unleash」「Next-Gen」。
  • 純黒 #000000。
  • 暗い画像の上に中央揃えで配置したヒーローの H1。

必須コンポーネント

  • 固定表示のピル型ナビゲーションバー（半透明のオフホワイト、backdrop-blur-md、極細のボーダー）。
  • 非対称なヒーロー：左揃えのセリフ体ディスプレイ、その上に小見出しタグ、max-w-[52ch] のリード文。
  • 行の高さにばらつきを持たせ、1px の区切り線が見える Bento 形式の機能グリッド。高さが同じカードを3枚並べないでください。
  • border-t のみで区切った「これは何ではないか」または対比のブロック。カードは使用しないでください。
  • アクセントカラーの CTA を1つ配置した、料金プランまたは登録用のバンド。
  • フッター：等幅フォントのメタデータと、その上に引く1本の極細線。

モーション（控えめに）

  • スクロール時の表示：translateY(12px) → 0 ＋ opacity 0 → 1 を 600ms cubic-bezier(0.16, 1, 0.3, 1) で適用します。IntersectionObserver のみを使用してください。
  • カードのホバー時の浮き上がり：200ms で box-shadow を 0 0 0 から 0 2px 8px rgba(0,0,0,0.04) に変化させます。
  • リストの各項目は --index * 80ms ずつ遅らせます。
  • アニメーション対象は transform と opacity のみにします。

事前確認

  • セリフ体ディスプレイとグロテスク体本文の組み合わせを使用している
  • キャンバスが温かみのあるオフホワイトで、前景色がオフブラックになっている
  • すべてのカードと区切り線に 1px solid #EAEAEA を使用している
  • 非対称なレイアウト（分割、小見出しタグ、不均一な Bento 配置）を少なくとも1つ使用している
  • パステルチップはタグにのみ使用し、ブロックの背景には使用していない
  • セクションのパディングが py-24 以上になっている
  • 絵文字、禁止フォント、AI の陳腐な表現を使用していない

コメント

Markdown 対応