mcpField
Y
yuv-design-system

yuv-design-system

github.com/hoodiniデザイン・UI29146 回インストール5 日前に更新
リポジトリ

yuv-design-system について

yuv-design-systemは、ClaudeなどでYUV.AIのビジュアルアイデンティティを適用するスキルです。ブランドルールを使う場面や、媒体に応じた配色・書体・素材の選び方を定めており、汎用デザイン向けではありません。

主な機能

  1. 01ブランドルールの適用場面を判定
  2. 023つの配色モードを定義
  3. 03書体とビジュアル要素を指定
  4. 04媒体別の詳細リファレンス

活用シーン

  1. 01YUV.AIのWebサイトやアプリのデザイン
  2. 02Yuvalのプレゼンやソーシャル画像の制作
  3. 03ブランド紹介ページの書体や素材の選定

インストール

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

$npx skills add https://github.com/hoodini/ai-agents-skills --skill yuv-design-system

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
lessons-learned.md
palettes-neon.md
palettes-warm-editorial.md
presentations.md
social-and-links.md
social-images.md
typography.md
visuals-and-charts.md
web-and-react.md
references/components/
AltimeterDial.tsx
CompassDial.tsx
CounterUp.tsx
FlightHUD.tsx
HeroBg.tsx
index.ts
keyframes.css
PurpleBar.tsx
YellowUnderline.tsx
references/tokens/
palette.css
palette.json
tailwind.config.js

詳細

yuv-design-system

Yuval Avidani（yuv.ai）の公式パーソナルブランドおよびデザインシステムです。このスキルは、YUV.AI の制作物をどのように見せるか――カラーパレット、タイポグラフィ、モチーフ、アセット、リンク――と、こうしたルールをいつ適用すべきかを定めています。

信頼できる唯一の情報源： https://github.com/hoodini/yuv-design-system（非公開）にある公開リファレンスリポジトリです。このリポジトリには実行可能なトークンとコンポーネントが含まれています。このスキルではルールを定めており、Claude がどのような状況でも適用できます。

YUV.AI ピラミッドにおけるこのスキルの位置： yuv-design-system は中層に位置するビジュアルルールのスキルです。その上には、曖昧な依頼や複数の媒体にまたがる YUV.AI の依頼を、適切な下位スキルの組み合わせへ振り分ける、ピラミッド最上位のオーケストレーター yuv-pilot があります。その下（および中層で並列）には、yuv-decks（スライドの作成）と yuv-viral-video（バイラルな短編 MP4）があります。yuv-pilot または同階層のスキルからこのスキルが呼び出された場合は、特定のパレットモード（Neon／Decks／Warm Editorial）が指定されます。タスクの途中でモードを変えないでください。ピラミッド全体のマップについては、yuv-pilot/SKILL.md を参照してください。

§0. このスキルを適用するタイミング — 何よりも先にお読みください

このスキルはYUV.AI のブランドアイデンティティを定めるものであり、汎用的なビジュアルデザインのスキルではありません。慎重に適用してください。

✅ 適用する場合
  • 成果物が明確にYUV.AIまたはYuval 個人向けの場合――ポートフォリオ、ブランドサイト、基調講演、スライド資料、登壇者プロフィール、プロフィール、ソーシャルカード、About ページ、リンクツリー、コースのランディングページ、ブランドアセットやロゴを使った成果物など。
  • Yuval が「my brand」「my design system」「my deck」「my site」「my presentation」「for me」「YUV.AI」「Fly High」「Let's Fly High」など、成果物が自身のブランドアイデンティティに関するものだと示す言葉を使った場合。
  • YUV.AI のブランドアセット（ロゴ、プロフィール写真、ウォーターマーク）が必要な場合。
❌ 適用しない場合
  • Yuval が汎用的なゲーム、ウェブアプリ、ダッシュボード、ランディングページ、デモ、プロトタイプ、ビジュアルを求めていて、YUV.AI に関する文脈がない場合。（「蛇ゲームを作って」→ ブランドのパレットではなく、ゲームに合うパレットを選びます。）
  • 別のブランド、クライアント、第三者、または Yuval 個人以外の誰かのための制作物である場合。
  • Yuval が別のパレットやフレームワークを明示した場合。
判断に迷う場合

一度だけ尋ねます。「これは YUV.AI ブランド向けですか、それとも自由なパレットですか？」 ――回答を受けたら、その方針を最後まで貫いてください。途中で変えないでください。

Claude／Copilot／Cursor でのデフォルトの動作：YUV.AI を示す要素がなければ、このスキルを適用せず、選択されたツール本来のデザイン判断に任せてください。このスキルを適用しすぎるほうが、適用しないよりも問題です。

このスキルの使い方（適用する場合）

  1. 媒体に応じてパレットモードを選びます（§1 を参照）。

    • プレゼンテーション／スライド資料／基調講演 → Decks（Fly High の紫／黄色／グレー）
    • ウェブ／アプリ／ゲーム／ダッシュボード／ソーシャル／一般 → Neon（デフォルト — ピンク／シアン／白）
    • Hope／Marcus／bigcats／course-landing → Warm Editorial（ピンク／黄色／ボーン）

  2. 必須のタイポグラフィを適用します（Anton／Inter と Rubik／Assistant — §2 を参照）。

  3. あらゆるモードに共通する Fly High の軸を保ちます（モードをまたぐモチーフ — §1a を参照）。

  4. ロゴ、プロフィール、ウォーターマークが適している場合は、同梱のブランドアセットを使います（§3 を参照）。

  5. フッター、About ブロック、クレジット、登壇者プロフィールには、正規のリンク一式と肩書きを記載します（§4 を参照）。

  6. 詳細なリファレンス — 媒体に合ったファイルを読み込みます。

    媒体読むファイル
    YUV.AI のウェブ／アプリ／ゲーム／ダッシュボードreferences/palettes-neon.md + references/web-and-react.md
    スライド資料／基調講演references/presentations.md
    インフォグラフィック／チャート／データビジュアライゼーションreferences/visuals-and-charts.md
    ソーシャル画像／ポスターreferences/social-images.md
    ヘブライ語／二言語／RTLreferences/typography.md § Hebrew
    強化されたパターンreferences/lessons-learned.md

    関連するファイルだけを読み込みます。コンテキストを小さく保てます。

§1. パレットモード — 媒体に合わせて選ぶ

名前付きのモードは3つあります。直感ではなく、出力の種類に合わせて選んでください。 途中でぶれないようにしてください。

モード使用する場面パレット
Neon (YUV.AI ブランドの制作ではデフォルト)Webサイト、Webアプリ、ゲーム、ダッシュボード、ソーシャル画像、ポスター、AI ツール、プロフィール／About コンテンツ、スライドデッキ以外のあらゆる YUV.AI のビジュアルホットピンク＋ネオンシアン＋白＋黒
Decks (Fly High)プレゼンテーション、スライド、基調講演、ハッカソンのデッキ、トークの録画、デッキ形式の動画バナー紫＋黄色＋ライトグレー
Warm EditorialHope（チーター）、Marcus（ホワイトライオン）、bigcats.ai、practical.yuv.ai のコース用ランディングページなど、エディトリアルピンクとボーンカラーのブランドファミリーに属するあらゆるプロジェクトウォームピンク＋黄色＋オフホワイト＋ボーン

作業の途中でモードを選ぶことになり、明確でない場合は一度だけ確認して、そのモードで進めてください。

§1a. すべてのモードに共通する Fly High の軸

パレットにかかわらず、YUV.AI の制作には同じブランド DNA が宿ります。次のモチーフが、YUV.AI らしさを生み出します。

  • 飛行のメタファーをコピーに取り入れる：上昇／巡航／下降／飛行前／着陸／離陸／進路／高度／「高く飛びましょう」。
  • 進捗のビジュアル表現： グラデーションのプログレスバー（Decks は紫→黄色、Neon はピンク→シアン、Warm Editorial はピンク→黄色）、HUD ストリップ、高度計やコンパス風のダイヤル、統計値のカウントアップアニメーション。
  • フェニックスのマーク（または Y-bird）を意味のある場所に配置する — ヒーロー、About、ウォーターマークなど。
  • 共有可能なあらゆる画面（スライド、ソーシャルカード、ヒーローの切り抜き）の右下に 「LET'S FLY HIGH · YUV.AI」のウォーターマークを配置する。
  • ディスプレイ書体には Anton の大文字を使用し、デフォルトの letter-spacing: 0 を適用する。
  • 計器風の数値表示やセクションのアイブロウには JetBrains Monoを使用し、トラッキングは 0.2em 以上にする。

これらの DNA 要素は、すべてのモードに共通します。パレットがブランドのどの章かを示し、モチーフが YUV.AI らしさを保ちます。

§1b. Neon — 新しいデフォルトモード（Web、アプリ、ゲーム、一般的なビジュアル制作）

日常的に使う YUV.AI ブランドです。Tavus に着想を得ており、ホットピンクを主役に、ネオンシアンを電気的な対比色として使い、白または深みのある黒をキャンバスにします。製品画面、Webアプリ、ゲーム、ダッシュボードなど、ブラウザー上に表示されるものやインタラクティブなものに最適です。

:root {
  --yuv-pink:       #FF1464;   /* primary brand — CTAs, accents, the thread color */
  --yuv-pink-hot:   #FF0080;   /* high-energy variant for glow / shadow / hover */
  --yuv-cyan:       #00E5FF;   /* electric secondary — data, highlights, focus rings */
  --yuv-cyan-edge:  #00FFFF;   /* max-neon variant — small surfaces only */
  --yuv-white:      #FFFFFF;   /* canvas (light mode) or text-on-dark */
  --yuv-black:      #0A0A0A;   /* canvas (dark mode) or text-on-light */
  --yuv-charcoal:   #1A1A1A;   /* secondary surface (dark mode), text on light */
  --yuv-soft:       #F4F4F6;   /* alt light surface for layering on white */
}

Neon モードのルール：

  • キャンバスは2種類： 白 #FFFFFF または深みのある黒 #0A0A0A。各画面でどちらか1つを選びます。中間のグレーは使いません。
  • ピンクを通奏低音にします — プライマリ CTA の塗り、ヒーロー見出しのアクセント、ブランドストライプに使用します。
  • シアンは第2の声です — セカンダリ CTA、フォーカスリング、ヒーローのデータポイント、リンクのホバー、進捗バーの塗り（ピンクに対するシアン）に使用します。シアンで画面全体を覆わず、アクセントに限定します。
  • グローは使用できます。 text-shadow: 0 0 24px var(--yuv-pink)、box-shadow: 0 0 32px rgba(0,229,255,0.4)。ブランドにはきらめきを加えられますが、派手な輝きは避けます（虹色や複数色のグラデーションは使いません）。
  • グラデーション： ピンク → シアンのみ。ボタン、テキストの下線、プログレスバーなど、小さな領域に使います。ページ全体を覆うような使い方はしません。
  • 見出し： Anton の大文字を使います。ダーク背景では白またはピンク、白背景では黒にします。line-height: 1.0 で詰め、デフォルトは letter-spacing: 0 にします。
  • カードのパターン： 深みのある黒 #0A0A0A の背景に、1px solid rgba(255,20,100,0.25) の枠線を合わせます。ホバー時には、内側に 0 0 0 1px #00E5FF のグローを追加できます。明るいキャンバスでは、白いカードに 1px solid rgba(0,0,0,0.08) の枠線と、左側に 4px solid #FF1464 のストライプを合わせます。
  • カーソルや UI の操作要素はシアン寄りにできます。主役はピンクです。

詳しくは、構成パターン、グローのレシピ、ネオンテーマのコンポーネントを記載した references/palettes-neon.md を参照してください。

§1c. Decks（Fly High）— プレゼンテーション専用

紫／黄色／グレーを使う既存のデッキシステムです。スライド、基調講演、プレゼンテーションにのみ使用してください。 Webアプリやゲームには適用しないでください。

:root {
  --yuv-purple:      #5E17EB;   /* primary deck brand, act-slide backgrounds, vertical accent bars */
  --yuv-purple-dark: #3D0DA8;   /* decorative depth, diagonal accents */
  --yuv-yellow:      #FFEC00;   /* loud accent only — never a slide background */
  --yuv-grey:        #F1F2F2;   /* content-slide background */
  --yuv-white:       #FFFFFF;   /* cards on grey, headers on purple */
  --yuv-black:       #000000;   /* headers on grey, body */
  --yuv-grey-dark:   #D4D6D6;   /* dividers on grey */
}

背景を2色にするルール、FlightHUD、PurpleBar、YellowUnderline、定番の動画バナーパターンなど、デッキのルール全般は references/presentations.md に記載されています。紫／黄色のパレットを使うのは Decks モードだけです。

2つの背景ルール（Decks モード、必須）

すべてのスライドは、次の2つの状態のいずれかです。3つ目の状態を作ってはいけません。 黄色はアクセントであり、背景には使いません。

タイプ背景見出し色用途
Act紫 #5E17EB白 #FFFFFFタイトル、セクション区切り、締めくくり、ヒーロー
Contentライトグレー #F1F2F2黒 #000000その他すべて — 情報、根拠、リスト
§1d. Warm Editorial トークン
:root {
  --pink:       #FF1464;   /* primary brand, CTAs, thread color */
  --yellow:     #E5FF00;   /* accent — when it shows up, it dominates */
  --black:      #0A0A0A;   /* warm near-black, never blue-black */
  --off-white:  #FAFAF7;   /* paper-feel, replaces #FFFFFF entirely */
  --bone:       #F5EEE4;   /* transitional sections, cream */
  --charcoal:   #1A1A1A;   /* primary text on light */
}

Warm Editorial のルール全文（紙の粒子感、温かみのある影、グラデーションの禁止など）→ references/palettes-warm-editorial.md。

すべてのモードに適用されるルール
  • Tailwind のデフォルトパレットは使わないでください。 slate、zinc、indigo、emerald などは使わず、選択したモードの色に統一してください。
  • 角丸は 0 または 999px のみです。 8～12px の中間的な値は、最も「AI テンプレート」らしさが出る要因です。
  • 可能な限り、グリッドに完璧に揃えるより非対称にしてください。 カラムをずらし、要素を1つグリッドから外します。
  • 余白はたっぷり取ってください。 上質さは抑制から生まれます。
  • コンテンツの最大幅は 1440px です。 セクションのパディングは、デスクトップで 120～160px、モバイルで 64～80px です。
モード固有のキャンバス／白のルール
モードルートに純白の #FFFFFF を使用できるか？白を使用できる場所
Neonはい — #FFFFFF は有効なキャンバスです（もう一方はリッチブラックの #0A0A0A です）。どこでも使用できますが、各サーフェスではどちらか1色を選んでください。中間的なグレーがかった白は使いません。
Decksいいえ — ページ／スライドのルートは #5E17EB（Act）または #F1F2F2（Content）です。コンテンツスライド内のカードには純白を使用できます。
Warm Editorialいいえ — #FFFFFF はどこでも使用禁止です。オフホワイトの #FAFAF7 を使用してください。—

§2. タイポグラフィ — 必須

英語
  • ディスプレイ／見出し： Anton。常に大文字にします。デフォルトの字間は 0（標準）です。 Anton はもともと幅が狭いため、負の字間を指定すると文字が接触します。以前のシステムではこれが問題でした。ごく大きなヒーローサイズ（≥ 180px）の場合のみ負の字間を使用でき、その場合も -0.015em より詰めてはいけません。行の高さは 1.0～1.05 にします。小文字やタイトルケースは使いません。
  • 本文／UI： Inter、400／500／600／700／900。本文の行の高さは 1.5 にします。
  • 等幅（数値表示、引用、アイブロウ）： JetBrains Mono。
ヘブライ語
  • ディスプレイ： Rubik（ウェイトは 900 まで）。
  • 本文： Assistant。
  • ヘブライ語のページでは、<html lang="he" dir="rtl"> と論理 CSS プロパティ（margin-left ではなく margin-inline-start）を使用します。
バイリンガルのルール（実証済み）

EN と HE を横並び、または隣接する位置に配置してはいけません。 ディスプレイサイズでは Anton と Rubik が視覚的に重なり、ディセンダーが次の行のアセンダーに入り込みます。代わりに言語切り替えを使い、一度に表示する言語は1つだけにします。堅牢化済みのパターン全文は references/lessons-learned.md § Bilingual toggle を参照してください。

Google Fonts のリンクは1つ — 4種類すべて安全に読み込み可能
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500&family=Rubik:wght@400;500;600;700;800;900&family=Assistant:wght@400;500;600;700&display=swap" rel="stylesheet">

ファミリーを1つの変数にまとめると、ブラウザーがグリフごとに選択します。

:root {
  --yuv-font-display: 'Anton', 'Rubik', system-ui, sans-serif;
  --yuv-font-body:    'Inter', 'Assistant', system-ui, sans-serif;
  --yuv-font-mono:    '"JetBrains Mono"', '"SF Mono"', ui-monospace, Menlo, monospace;
}
h1, h2, h3, .display {
  font-family: var(--yuv-font-display);
  text-transform: uppercase;        /* Latin only — Hebrew unaffected */
  letter-spacing: 0;                /* Anton is condensed — DO NOT add negative tracking */
  line-height: 1.0;
}
/* Only at hero size (≥ 180px) and only when the headline visually demands it: */
.display-hero { letter-spacing: -0.01em; }   /* max — never tighter */

使用禁止のデフォルト： セリフフォント、スクリプトフォント、system-ui、Tailwind のデフォルトフォントスタック。

§3. ブランドアセット — assets/ に同梱

このスキルには、標準のファイルが4つ同梱されています。プレースホルダーではなく、正式なブランドマークがふさわしい出力では、これらを使用してください。

アセットの取得 — フォールバックチェーン（どのマシンでも動作）

ブランド画像が必要な場合は、次の順にフォールバックチェーンをたどってください。

  1. スキルバンドル内を確認します。 適切にインストールされたマシンでは、アセットは常に次のいずれかにあります：~/.claude/skills/yuv-design-system/assets/、~/.copilot/skills/yuv-design-system/assets/、または ~/.agents/skills/yuv-design-system/assets/。実行環境で利用できるパスを使用してください。

  2. スキルの場所がわからない場合（ヘッドレス環境、新しいコンテナー）は、リポジトリのローカルクローンがないか、一般的な場所を検索します：~/Documents/ai-decks/yuv-design-system/、~/yuv-design-system/、~/Code/yuv-design-system/、~/dev/yuv-design-system/。見つかった場合は、その中の assets/ を使用してください。

  3. ローカルに何もない場合は、正式なリポジトリをクローンします。 プライベートリポジトリですが、マシン上でユーザーの GitHub 認証情報を使えば、プロンプトなしで git clone を実行できます。

    git clone https://github.com/hoodini/yuv-design-system.git ~/Documents/ai-decks/yuv-design-system
~/Documents/ai-decks/yuv-design-system/scripts/install-skill.sh

    これにより、~/.claude/skills/yuv-design-system/assets/ に加えて、Copilot／エージェント用のシンボリックリンクも用意されます。

  4. 手順 3 を実行できないサンドボックスセッションでの最終手段（Git 認証情報のない CI など）として、base64 の data:image/png;base64,… をインラインで埋め込みます。これは最終手段としてのみ許容されます。ファイル参照のほうが小さく、編集しやすいためです。

リポジトリは https://github.com/hoodini/yuv-design-system で、プライベートです。raw.githubusercontent.com の URL は個人アクセストークンがないと 404 になるため、使わないでください。代わりに git clone を使用してください。

4 つのファイル
ファイル使用する場面備考
assets/logo-square-transparent.png明るい背景や暗い背景でロゴを使う場合。きれいに切り抜かれた画像が必要な場所（ファビコン、ヘッダー、アプリアイコン、カスタム背景のソーシャルカードなど）フェニックスのマーク、透明な背景、正方形
assets/logo-square-color.pngヒーローバッジ、ソーシャルプロフィール画像、OG 画像など、ロゴ自体に色付きの背景が必要な場所ブランドの背景に載せたフェニックスのマーク、正方形
assets/logo-rectangle-wordmark.png透かし（スライド、動画、スクリーンショットの右下隅）、メールの署名、ローワーサードのオーバーレイ、証明書「LET'S FLY HIGH · YUV.AI」のワードマーク
assets/profile-yuval-studio.png概要セクション、コースページ、ポッドキャストのアートワーク、「講師の紹介」ブロック、登壇者のプロフィールカードYUV.AI のネオンの下にいる Yuval のスタジオ写真
クイックパス — ensure-assets.sh を呼び出す

シェルを利用できるセッションで、確実に使えるアセットのパスをすぐに取得したい場合は、次を実行します。

ASSETS_DIR=$(/path/to/yuv-design-system/scripts/ensure-assets.sh)
echo "$ASSETS_DIR"

このスクリプトはフォールバックチェーン（スキルバンドル → ローカルクローン → git clone）をたどり、使用可能な assets/ ディレクトリの絶対パスを出力します。GitHub 認証情報が設定されておらず、クローンに失敗した場合は、明確なメッセージを表示してゼロ以外の終了コードで終了します。

埋め込みのルール
  • 透かしの配置： あらゆるスライド／動画／共有可能な画像の右下隅に配置します。キャンバス幅の約 3% の余白を取り、1920×1080 の場合は幅を約 120～180px にします。透かしには logo-rectangle-wordmark.png を使用してください。引き伸ばしは厳禁です。
  • 暗い背景のヒーローロゴ： フェニックスを背景になじませるには、logo-square-transparent.png を優先してください。
  • 明るい／グレー／ボーンカラーの背景のヒーローロゴ： 透明な正方形の画像を優先してください。マーク自体に十分な色があるため、単独で映えます。
  • ソーシャルプロフィール／OG カード： logo-square-color.png を使用してください（独自の背景があり、フィード内で目立ちます）。
  • プロフィール／概要／連絡先用のプロフィール写真： profile-yuval-studio.png を使用してください。掲載場所に応じて、正方形または 4:5 のポートレートにトリミングします。

ウェブに埋め込む場合は、アセットをプロジェクトの public/ にコピーして参照してください。または、ファイルを追加できない HTML 成果物では、data:image/png;base64,… URI としてインラインで埋め込みます（これは最終手段としてのみ許容されます。ファイル参照を推奨します）。スライドでは、ネイティブ形式で埋め込んでください。

§4. 正式なプロフィール文とリンク一式 — 自動で含める

出力にフッター、連絡先セクション、「他の場所で見つける」ブロック、プロフィールカード、登壇者のプロフィール、クレジットパネル、または動画の終了画面がある場合は、この一式を自動的に含めてください。Yuval に提供を求めないでください。

実績（略歴、自己紹介、登壇者紹介、コースページで使用）
  • GitHub Star 2 回受賞（コミュニティへの貢献が認められ、GitHub から 2 度表彰）
  • AWS Gen AI Superstar
  • Channel 12 News（イスラエル）の AI コメンテーター — מגיש פינת AI בחדשות 12 / 「Channel 12 News の AI コーナー担当」 / 「Channel 12 News の専属 AI コメンテーター」
  • AI ビルダー＆スピーカー
  • テクニカルコンテンツクリエイター
  • YUV.AI の創設者 — ヘブライ語圏を代表する AI 教育者兼テクニカルイノベーター
  • X、Instagram、TikTok、YouTube、LinkedIn、Facebook、GitHub で活発なコミュニティを展開
推奨する短い紹介文（略歴にそのまま使用できます）
  • Yuval Avidani — GitHub Star 2 回受賞、AWS Gen AI Superstar、Channel 12 News（イスラエル）の AI コメンテーター。YUV.AI の創設者。実際に役立つ AI を開発し、教え、届けています。
  • AI ビルダー＆スピーカー。テクニカルコンテンツクリエイター。GitHub Star 2 回受賞。AWS Gen AI Superstar。Channel 12 News の AI 担当。
  • Hebrew: יובל אבידני — מגיש פינת AI בחדשות 12, GitHub Star כפול, AWS Gen AI Superstar, מייסד YUV.AI. בונה, מלמד, ומשגר AI שעובד.
リンク一覧
website:  https://yuv.ai
linktree: https://linktr.ee/yuvai
x:        https://x.com/yuvalav              · @yuvalav
instagram:https://instagram.com/yuval_770     · @yuval_770
tiktok:   https://www.tiktok.com/@yuval.ai    · @yuval.ai
youtube:  https://youtube.com/@yuv-ai         · @yuv-ai
github:   https://github.com/hoodini           · @hoodini
facebook: https://facebook.com/yuval.avidani  · @yuval.avidani
linkedin: https://www.linkedin.com/in/yuval-avidani-87081474/
掲載ルール
  • フッター： 8 つすべてのプラットフォームと Linktree を掲載し、それぞれアイコンのみのボタンにします（Phosphor または Lucide のブランドグリフを使用し、現在のパレットに合わせた単色の線で表示します）。
  • 登壇者の略歴／紹介カード： ウェブサイト＋LinkedIn＋Linktree＋代表的なソーシャルメディア 1 つ（X または Instagram）。
  • 動画のエンド画面： ウェブサイト＋ソーシャルメディア 3 つ（通常は X、Instagram、YouTube）。
  • メール署名／証明書のフッター： ウェブサイト＋LinkedIn＋Linktree。
  • Linktree をショートカットとして使用： 「すべての SNS でフォロー」といった CTA では、8 つすべてを列挙せず、https://linktr.ee/yuvai に直接リンクします。簡潔で、ワンタップでアクセスできます。
そのまま使える HTML スニペット（Neon モード — YUV.AI のウェブサイト／アプリのデフォルト）
<footer class="yuv-socials" style="display:flex;gap:16px;align-items:center;justify-content:center;padding:48px 0;background:#FFFFFF">
  <a href="https://yuv.ai" aria-label="Website" style="color:#FF1464"><i class="ph ph-globe"></i></a>
  <a href="https://x.com/yuvalav" aria-label="X" style="color:#FF1464"><i class="ph ph-x-logo"></i></a>
  <a href="https://instagram.com/yuval_770" aria-label="Instagram" style="color:#FF1464"><i class="ph ph-instagram-logo"></i></a>
  <a href="https://www.tiktok.com/@yuval.ai" aria-label="TikTok" style="color:#FF1464"><i class="ph ph-tiktok-logo"></i></a>
  <a href="https://youtube.com/@yuv-ai" aria-label="YouTube" style="color:#FF1464"><i class="ph ph-youtube-logo"></i></a>
  <a href="https://github.com/hoodini" aria-label="GitHub" style="color:#FF1464"><i class="ph ph-github-logo"></i></a>
  <a href="https://facebook.com/yuval.avidani" aria-label="Facebook" style="color:#FF1464"><i class="ph ph-facebook-logo"></i></a>
  <a href="https://www.linkedin.com/in/yuval-avidani-87081474/" aria-label="LinkedIn" style="color:#FF1464"><i class="ph ph-linkedin-logo"></i></a>
  <a href="https://linktr.ee/yuvai" aria-label="Linktree" style="color:#00E5FF"><i class="ph ph-tree-structure"></i></a>
</footer>

Decks モードでは、#FF1464 を var(--yuv-purple) に、#FFFFFF を var(--yuv-grey) に置き換えます。 Warm Editorialでは、#FF1464 は #FF1464（すでにピンクです）のまま、#FFFFFF を var(--off-white) に置き換えます。

機械処理可能なリンク一覧（JSON、ハンドルと URL）：references/social-and-links.md。

§5. ビジュアル、インフォグラフィック、チャート — 「視覚で考える」デフォルト

Yuval は可能な限り、文章よりもビジュアルでの説明を好みます。チャート、インフォグラフィック、動的な図、アイソメトリックなシーン、アニメーション付きカウンター、ビフォーアフターの比較などです。数字、チャート、図で説明できるものは、ビジュアルをデフォルトにします。

ブランドにおける表現ルール
  • Neon（デフォルト）の主要系列： #FF1464 のピンク。ハイライトまたは「主役」となるデータポイント：#00E5FF のシアン。副次系列：チャコール #1A1A1A、ソフトグレー #F4F4F6。ブランドカラーのシアン以外の青や、デフォルトのチャートパレットは使用しません。
  • Decks（Fly High）の主要系列： #5E17EB の紫。ハイライト：#FFEC00 の黄色。副次色：#3D0DA8 ／ #1A1A1A ／ #D4D6D6。チャートはデッキ内でのみ使用します。
  • Warm Editorial の主要系列： #FF1464 のピンク。ハイライト：#E5FF00 の黄色。副次色：チャコール／ウォームグレー。
  • 主役となる数値には必ずラベルを付けます。 大きな統計値がある場合は、references/components/CounterUp.tsx のコンポーネントである <CounterUp> を使って表示します。requestAnimationFrame で 0 からカウントし、イーズアウトの三次曲線、所要時間は約 1400ms にします。
  • 3D 棒グラフは禁止です。4 区分を超える円グラフは禁止です。虹色のパレットは禁止です。 カテゴリカルかシーケンシャルのどちらか一方を選び、両方を併用しません。
  • グリッドと軸： 不透明度 10〜15% の 1px チャコールを使用します。色付きのグリッド線は使用しません。
  • チャート内の文字： 軸ラベルとセクションタイトルには Anton の大文字表記、目盛りの数字には Inter、生データの表示には JetBrains Mono を使用します。
デフォルトのライブラリ
表示形式ライブラリ備考
React のチャートrecharts軽量で、パレットを簡単に上書きできます。
Vanilla HTML のチャートChart.jsそのまま導入でき、options.scales とカスタムカラーで簡単にスタイルを調整できます。
オーダーメイド／インタラクティブなインフォグラフィックD3 + GSAPビジュアルに個性を持たせる場合に使用します。サンキー図、フォースレイアウト、カスタムレイアウトなどが該当します。
手作りの SVG インフォグラフィックinline <svg>静的／印刷用／Hyperframes でキャプチャ可能なビジュアルに適しています。
スライドデッキの統計スライド<CounterUp> + Anton headingreferences/components/CounterUp.tsx のパターン

チャートのスタイル設定に関する詳しいガイダンス、Chart.js オプションオブジェクトのサンプル、recharts の上書きパターン、アイソメトリック SVG のパターンについては、references/visuals-and-charts.md を参照してください。

§6. シグネチャコンポーネント（Decks モード — Fly High）

これらのコンポーネントは Decks モードでのみ適用されます。紫／黄色のパレットとスライドキャンバスのルールが適用されるモードです。Neon モードのウェブアプリやゲームに使わないでください。適切なスタイルではありません。

これらは、一目でわかる特徴的な要素です。ソース全体は references/components/ にあります。

コンポーネント役割
<PurpleBar height={96}>主要なコンテンツスライドの見出しの左側に配置する、縦長の紫色のアクセントバーです。このシステムで最も一貫して使われるブランドマークです。必ず使用してください。
<YellowUnderline width={210}>特定の単語ひとつの下に配置する、手描き風の SVG 下線です。装飾として単独で浮かせてはいけません。サブタイトルの決め手となる単語に使います。
<FlightHUD n={12} cite="…" tone="content">下部の HUD ストリップです。プログレスバー、飛行フェーズ（CLIMB/CRUISE/DESCENT/LANDED）、計器表示（ALT / SPD / HDG / FUEL）を備えています。デッキ全体を通じて、フライトシミュレーターのテーマを確立します。
<CompassDial heading={287}> / <AltimeterDial alt={35000}>円形の SVG コックピット計器です。タイトルスライドとセクション区切りスライドでのみ使用してください。多用すると価値が損なわれます。
<CounterUp to={95}>統計スライド向けの、アニメーション付き数値カウンターです。大きな Anton の % 記号と組み合わせます。
<HeroBg src={image} overlay={…}>見出しのコントラストを確保するためのオーバーレイグラデーションを必須とする、Ken Burns 効果付きの画面全体に広がる画像背景です。
黄色のハイライトスパン（重要なパターン）
<h1 style={{ fontSize: 148, lineHeight: 1.05, letterSpacing: 0 /* see warnings */ }}>
  The team that<br />
  wins this weekend<br />
  won't have the<br />
  <span style={{
    display: 'inline-block',
    background: '#FFEC00',
    color: '#000',
    padding: '0.08em 0.4em',          /* em-based so it scales with font size */
    letterSpacing: '0.01em',          /* slight POSITIVE tracking inside the box */
    boxDecorationBreak: 'clone',
    WebkitBoxDecorationBreak: 'clone',
  }}>
    smartest model.
  </span>
</h1>

このパターンには、実践で検証された注意点が3つ組み込まれています。

  1. 見出しには letterSpacing: 0 を指定します（負の値は使用しません）。Anton はもともと幅が詰まっているため、負の字間を指定すると文字同士が接触します。
  2. 黄色のスパン内では letterSpacing: '0.01em' を指定します。わずかに正の字間を設定することで、黄色い長方形の中に文字が収まる余裕ができます。これがないと、黄色いボックスの中で文字が詰め込まれて見えます。
  3. ピクセル単位のパディングではなく、padding: '0.08em 0.4em'（em ベース）を指定します。見出しのサイズに合わせて拡大縮小されます。ピクセル単位のパディングでは、大きなサイズで黄色いボックスが文字に近づきすぎます。

さらに、常に守るルールがあります。line-height ≥ 1.0、display: inline-block、boxDecorationBreak: clone を指定してください。これらがないと、黄色いボックスが前の行のディセンダーに重なります。パターンとアンチパターンの詳細は references/lessons-learned.md を参照してください。

スライド／セクションごとに Anton の要素はひとつ

Anton のブロックを複数並べると（見出しに加えて、大きな Anton の統計タイルを4つ並べるなど）、画面が太い文字の壁のように見えます。ルール：スライドごとに Anton の要素はひとつです。 補足の数値、ラベル、統計値には、Anton を使う場合と同じサイズの Inter 900 または JetBrains Mono を使用します。スライドは落ち着いた印象になり、ヒーロー要素が主役のまま保たれます。

§7. アニメーションのデフォルト設定

すべてのアニメーションには理由が必要です。生き生きと、しかし落ち着きなくならないようにします。ホバーは意図的に設計します。要素の表示はスクロールをトリガーにします。数値はビューポートに入ったときにカウントアップします。接続線は自ら描画されます。

ライブラリの優先順位：

  1. GSAP — メインで使用します。見出しの表示には SplitText、スクロールに連動するシーケンスには ScrollTrigger、SVG パスには MotionPath を使用します。複雑な作業では Framer Motion より GSAP を優先します。より高品質な結果が得られ、タイムラインをシークできるためです（Hyperframes でのキャプチャでは重要です）。
  2. Three.js + React Three Fiber — プロジェクトに必要な場合の 3D 表現に使用します。
  3. MediaPipe — プロジェクトの目玉となる印象的な演出に、ジェスチャーやポーズを使ったインタラクションが必要な場合に使用します。
  4. Lottie — デザイナーから .json が納品されている場合に使用します。
  5. CSS のみ — ホバー状態、フォーカスリング、ボタンを押したときのフィードバックに使用します。こうした用途でライブラリに頼る必要はありません。
Hyperframes との互換性（手間のかからない備え）

Yuval は、基調講演、リール、マーケティング用に、サイトやスライドを MP4 としてキャプチャすることがよくあります。Hyperframes（https://hyperframes.mintlify.app/llms.txt）は、HTML を決定論的なコマ送り動画としてレンダリングします。キャプチャを依頼されていない場合も、Hyperframes に対応しやすいパターンをデフォルトで採用します。

  • セマンティックな HTML5（<section>、<article>、<header>、<nav>、<footer>）を使用します。div だらけの構造は、対象を指定しにくくなります。
  • キャプチャ対象の領域に印を付けます：…。
  • キャプチャする可能性のあるシーケンスでは、CSS の @keyframes よりシーク可能な GSAP のタイムラインを優先します。
  • 実時間への依存は禁止です。 Date.now() や、孤立した setInterval は使用しません。スクロール位置、GSAP のタイムライン、または決定論的なクロックに連動した requestAnimationFrame を使用します。
目玉となる動画バナー — ランディングサイトでは必須

Yuval が制作するすべてのランディングページやマーケティングサイトでは、ページ上部に、自己ループする Hyperframes 対応 HTML コンポジション（public/demo/index.html）を参照する <iframe> として埋め込まれた、映画のような製品デモ動画バナーを配置します。「静的なテキストとストック画像のヒーロー」は禁止です。ヒーローは動きから始まります。全 6 シーンのストーリー展開、デバイスのモックアップ仕様、カーソルの動きに関するルール、決定論的なループパターン → references/presentations.md § Signature video banner を参照してください。

§8. バイリンガルとヘブライ語 — 実践で検証されたルール

ヘブライ語の制作には、実践で培われた厳格なルールがあります。HE/EN ページを書く前に、必ずお読みください。

  1. バイリンガル表示は切り替え式にし、並べて表示しないでください。 Anton を 8vw、Rubik 900 を 5–6vw で表示すると、視覚的にぶつかります。data-lang="en" / data-lang="he" 属性と共通の表示・非表示ルールを使って、言語切り替えを作成します。デフォルトは EN とし、ボタンで切り替えられるようにします。
  2. document.title も切り替えの対象です。 タブのタイトルも切り替えてください。切り替えないと、ネイティブの読者には「バイリンガル対応が未完成」だとすぐに伝わります。
  3. モバイルでは、言語切り替えを常に表示されるモバイル用の要素群にも複製します。 ハンバーガーメニューの中だけに配置してはいけません。
  4. ヘブライ語がデフォルトの場合は、<html lang="he" dir="rtl"> を使用します。 すべての箇所で論理プロパティの CSS（margin-inline-start、padding-inline-end）を使用します。
  5. 各セクションのディスプレイ見出しは 1 つだけにします。 ディスプレイ用フォントを 2 つ重ねてはいけません。

堅牢なバイリンガル切り替えの完全版（HTML + CSS + JS）とモバイルナビゲーションのパターン → references/lessons-learned.md を参照してください。

§9. 出荷してはいけないもの — 明示的なデフォルト禁止事項

  • ストックフォト。 ありがちなビジネスパーソン、抽象的な都市風景、Unsplash のテクスチャは使わないでください。抽象的な幾何学模様、パレットに合わせて AI で生成した画像、または Yuval 自身の画像（チーターの Hope、ライオンの Marcus、スタジオでの撮影画像）を優先してください。
  • エンタープライズ向け／クライアント向けの仕事での絵文字。 個人ブログやカジュアルなコンテンツでは問題ありません。
  • 柔らかなドロップシャドウと角丸を使ったテンプレートカード — AI スロップにありがちなビジュアルです。フラットなカード、半径 12px、0 4px 6px rgba(0,0,0,0.1)。絶対に使わないでください。
  • デフォルトの Tailwind パレット（slate、zinc、gray、emerald、cyan、indigo、violet、rose）。
  • 複数色のアイコンセット。 Phosphor／Lucide は単色の線のみ使用してください。
  • デモビルドでの Cookie バナー、チャットウィジェット、マーケティングポップアップ。 これらは本番環境での考慮事項です。デモはすっきりした状態にしてください。
  • AI 生成らしさ — テンプレートどおりのヒーロー → 特徴 → 料金 → フッター、lorem ipsum、「ここにキャッチコピーを入力」。実際のコピーを書いてください。
  • ページ／スライドのルート要素での純粋な #FFFFFF。
  • プロジェクトで明示的に必要とされていない限り、デフォルトのアクセントカラーとしての青。
  • スライド／ページの背景色としての黄色。 アクセントに限って使用してください。
  • Decks モードでの 3 色目の背景色。 スライドでは、背景色を 2 色にするルールは絶対です。
  • 1 つの画面内でのモードの混在。 Neon の Web アプリに紫のアクトセクションを設けてはいけません。Decks モードのスライドにピンクの CTA を設けてはいけません。プロジェクトごとにモードを 1 つ選び、統一してください。
  • 複数行の見出し内にある box-decoration-break: clone のスパンで、line-height < 1.0 に設定した大きなサイズの Anton。 ディセンダーが欠けます。
  • アンカーのない状態で浮かぶ <YellowUnderline>。 常に特定の単語に付けてください。
  • JS で描画される SPA での WebFetch（Teachable、Kajabi、practical.yuv.ai など）。Claude-in-Chrome を使用してください。

§10. 提出前チェックリスト（納品前に実行）

  1. YUV.AI のシグナルを確認済みです。 出力が YUV.AI ブランドでない場合、このスキルを適用すべきではありません。適用を控え、ツールのニュートラルなデザイン感覚に任せてください。
  2. メディアに応じてモードを選択します： Neon（ウェブ／アプリ／ゲーム／ダッシュボード／ソーシャルのデフォルト）、Decks（プレゼンテーションのみ）、Warm Editorial（Hope／bigcats／practical.yuv.ai のみ）。
  3. キャンバスのルールを守ります：
    • Neon： 純粋な #FFFFFF または深みのある #0A0A0A のキャンバスを使用します。各サーフェスにつき、どちらか一方を選びます。
    • Decks： ルートはアクトが #5E17EB、コンテンツが #F1F2F2 です。ルートに純粋な #FFFFFF は使用しません。
    • Warm Editorial： 純粋な #FFFFFF は使用禁止です。#FAFAF7 を使用します。
  4. Tailwind のデフォルトカラークラス（slate-*、zinc-*、indigo-*、emerald-*、…）は使用しません。
  5. Decks のみ： 2 背景ルールを守ります。すべてのスライドは紫のアクトまたはグレーのコンテンツとし、3 つ目の背景は使いません。
  6. Anton は大文字で使用し、デフォルトの letter-spacing は 0（負の値は絶対に使用しません。Anton はすでに幅が狭いためです）、ヒーローサイズ（≥ 180px）の場合のみ -0.01em を使用します。複数行の見出し内に黄色の box-decoration-break: clone スパンがある場合、行の高さは常に 1.0 以上にします。黄色のスパンには em ベースのパディング（0.08em 0.4em）と、わずかに正のトラッキング（0.01em）を使用します。
  7. ヘブライ語のページには dir="rtl" と論理プロパティの CSS を使用します。バイリンガルページでは、横並びではなく切り替え方式を使用します。
  8. 角丸は 0 または 999px にします。その中間の値は使用しません。
  9. シャドウをモードに合わせます。Decks では不透明度を抑えた黒、Warm Editorial では温かみのあるピンク／オレンジの色味、Neon ではピンク／シアンのグローを使用できます。青みがかった黒は使用しません。
  10. Universal Fly High の一貫したテーマを維持します。 コピーに飛行のメタファーを取り入れ、適した場所には HUD または進捗を示すビジュアルを配置し、角にフェニックスのマーク／「LET'S FLY HIGH」の透かしを入れます。モチーフは引き継ぎ、パレットはモードごとに変えます。
  11. フッター／クレジット／概要セクションがある場合は、正規のリンクセットを含むソーシャルリンクのフッターを追加します。
  12. ロゴが適切な場所ではブランドマークを使用します。ヒーローには透明な正方形、角には長方形のワードマーク、概要／プロフィールにはプロフィール写真を使用します。
  13. Decks モードのみ： コンテンツスライドの見出しの横に <PurpleBar> を配置します。
  14. <YellowUnderline> は特定の単語に付けます。装飾目的では使用しません。
  15. 8 件を超える GSAP デモを含むカタログでは、IntersectionObserver を使って画面外のデモを一時停止します。
  16. フロントエンドの出力では、プレビューを 375×812（iPhone サイズ）にリサイズし、完了を宣言する前に確認します。モバイルファーストは仕上げではなく、基本のチェック項目です。

1 つでも満たされない場合は、出荷前に修正してください。

正式ファイルの場所

ファイル用途
assets/logo-square-transparent.png透明背景の正方形のフェニックスマーク
assets/logo-square-color.pngブランドの背景プレートに配置した正方形のフェニックスマーク
assets/logo-rectangle-wordmark.png長方形の「LET'S FLY HIGH · YUV.AI」ワードマーク（透かし）
assets/profile-yuval-studio.pngスタジオにいるYuvalの写真（プロフィール、紹介ページ、コースページ）
references/tokens/palette.cssそのまま使えるCSS変数
references/tokens/palette.jsonJSON形式のデザイントークン
references/tokens/tailwind.config.jsTailwindプリセット
references/components/*.tsx特徴的なReactコンポーネント
references/components/keyframes.css共通のyuv-*キーフレーム
references/web-and-react.mdWeb/Reactの詳細解説
references/presentations.mdスライドデッキのルール＋特徴的なビデオバナー
references/visuals-and-charts.mdインフォグラフィック、チャート、データビジュアライゼーションのパターン
references/social-images.mdソーシャルカード、OG画像、ポスター
references/typography.mdヘブライ語／RTLを含む完全なタイポグラフィシステム
references/social-and-links.md機械可読なリンク集＋フッターのパターン
references/lessons-learned.md本番環境から得た強化済みのパターン＋アンチパターン
references/palettes-warm-editorial.mdWarm Editorialモードの詳細解説

外部の正式なソース：**https://github.com/hoodini/yuv-design-system**（非公開 — Yuvalのいずれかのマシンからgit clone https://github.com/hoodini/yuv-design-system.gitでクローンしてください）。

@hoodini · yuv.ai · @yuvalavが管理しています

コメント

Markdown 対応