GIGA UI: 落ち着き、正確さ、生命感は何をしますか？

このスキルは、一行のUIリクエストを洗練されたプロダクション品質のインターフェースに変えます。ビジュアルランゲージは**@marcelkargul（Kargul Studio）の公開デザイン作品にインスパイア**されています。落ち着いたモノクロームに近いプロダクトUI、非常に注意深いタイポグラフィ、重いボーダーの代わりに使われる柔らかなレイヤードシャドウ、1つの確かなアクセントカラー、そして高速で物理的で、決して装飾のためだけではないモーションが特徴です。

あらゆるコーディングモデルとスタックで動作します。例ではReact + Tailwind + Motion（motion/react）を使用しており、それぞれにプレーンCSSの同等のコードがあります。

以下で使用される出典凡例： [seen] 彼の投稿/画像から直接観察された、またはキャプションに記載されているもの。 [inferred] 観察されたものから合理的に推定されたもの（スクリーンショットから測定、または暗黙的に示唆）。 [expert] Motion docs、Emil Kowalski、Apple HIGからの一般的なモーション/UXのベストプラクティス。彼の投稿からではありません。

1. デザイン哲学

削除できるものは削除する。 [seen, caption: "every screen. every component. every frame. if it doesn't need to be there, it shouldn't be. simple is always hard, but simple always wins."]
タイポグラフィが大部分の仕事をする。 [seen: "just master typography and you can make anything look good."] 1つのファミリー（ウェブではデフォルトでInter、オプションでGeist、iOS風モバイルではSF Pro Rounded）と最大2つのウェイトを使用する [seen: "sf pro rounded, maximum 2 font weights, keep it simple"]。
白、黒、そしてシャドウ。 [seen: "No animations, no gradients, no fancy effects. Just FFFFFF, 000000, and some shadows. This is design at its peak."] ほとんどのパレットはニュートラルグレーです。色は状態、カテゴリ、または1つのプライマリアクションなど、意味のために使用されます。
奥行きは、太いボーダーではなく、柔らかなレイヤードシャドウとヘアラインから生まれます。 [seen: "this button only requires 3 shadows!" および§3のセカンダリーボタンレシピ]
モーションはプロダクトの一部であり、装飾ではありません。 [seen: "micro-interactions throughout", "subtle loading animation. not overdone, just perfect", "every website needs this level of animation", "idea → design → animation"] 変更を説明する、アクションを確認する、または注意を誘導するためだけにアニメーションを使用する [expert]。
最後の10%を手作業で仕上げる。 [seen: 彼のプロセスは "design in figma, build with the help of claude, spend hours fixing small details manually and improving code quality"]。§9のQAチェックリストがその最後の10%です。
クリーンは賢いよりも勝る。 彼のキャプションは「クリーン」、「落ち着いた」、「シンプル」という言葉に繰り返し戻ってきます（例：「Every task in one calm list」）。たとえ大量のデータがある場合でも、画面は落ち着いて見えるべきです。

2. 観察されたスタイル（彼の作品の実際の見た目）

2.1 タイポグラフィ

ファミリー： Inter（このスキルのデフォルト）とGeist（オプションの代替）。[seen: "After using 100s of different fonts, I realized nothing beats Inter and Geist."; ジョーク投稿：ジュニアとシニアのデザイナーの両方が "Inter, Geist" を使用している]。モバイルアプリにはSF Pro Rounded [seen, 複数の投稿]。彼はまた、SF Pro Roundedのクロスプラットフォーム代替としてGoogle Sans Roundedを推奨している [seen, 返信]。モノスペース（Geist Mono風）は、大きな数字、ティッカー、コードに使用される [seen: 暗号アプリの残高、StatsnapのKPIカード、サイドバーナビゲーションのバリエーション]。ブランドおよびマーケティング作品では、セリフディスプレイフェイス（エディトリアルトランジショナルセリフ、ライトウェイト）が使用されることがある [seen: fintechランディング「Every payment protected…」、VCランディングページ]。
トラッキング（彼の正確な数値、Geistでデモ、Interにも同様に適用。彼はInterでも-6%をデモしている） [seen]:
- 16px → 0%
- 36px → -3%
- 100px+ → -5%〜-6%
- 「ネバーゴーネガティブのルールはボディテキスト用です。100px+ではデフォルトのスペーシングはルーズに見えます。」
- SF Pro Rounded: +1% レタースペーシング [seen, タイプ仕様]。
ウェイト： Regular (400) と Medium (500) がほとんどのプロダクトUIを担当します。Semibold (600) は見出しと数字に使用されます。Bold/Blackは大きなディスプレイ見出しのみ [スクリーンショットから推測]。
プロダクトUIでのサイズ [推測、1倍スクリーンショットから測定]：ボディとテーブルテキスト13–14px、セカンダリ/メタ12–13px、セクションラベル11–12pxの大文字またはスモールキャップスのグレー（例：「WORKSPACE」、「PINNED TOOLS」）、ページタイトル18–24px Medium、KPI数字24–32px、ヒーロー見出し48–72pxでネガティブトラッキング。ボタンは14px Medium [seen: "Geist/14/Medium"]。
テキストの色： プライマリーはほぼ黒（#171717–#1F1F1F）、セカンダリーはミディアムグレー（#6B6B6B–#737373）、ターシャリー/プレースホルダーは（#A3A3A3）。タグは、飽和した塗りつぶしに白いテキストを使用する代わりに、明るい色合いに暗い色合いのテキストを使用する [seen: 「Do / Don't」の投稿：「Dark text improves overall readability greatly.」]。

2.2 色

スクリーンショットからサンプリング（おおよその値） [seen/inferred]:

役割	ライト	ダーク
キャンバス / ページ	`#FFFFFF`	`#0D0D0D`–`#121212`
微妙なサーフェス（サイドバー、パネル、モバイル背景）	`#F7F7F7` / `#F4F4F4` / `#FAFAFA`	`#1A1A1A`–`#1E1E1E`
モックアップの背景	`#E5E5E5`–`#EDEDED`、ミディアムグレー `#8A8A8A`	`#1F1F1F`–`#262626`
ヘアラインボーダー	`#ECECEC` / `#EBEBEB`	`rgba(255,255,255,0.08)`
プライマリーテキスト	`#171717`	`#FAFAFA`
セカンダリーテキスト	`#737373`	`#A1A1A1`

アクセント（製品ごとに1つ、決して複数を同時に使用しない） [seen]:

バイオレット #7B3AEC（Underlayサインアップ、オンボーディング）、インディゴ #5B5BF0 のバリエーションもあり
ブルー #255CD1 / iOSブルー #2F7BF6（電卓、カレンダー、Statsnap）
オレンジ #FF5A1F / #F97316（Plunio, Nexora）
ティール #0F766E 風（AIパイプライン、AIData）
ライム #B4F05A on ほぼ黒（コードエディタの「Start」ボタン、Somaブランド）
コーラル/レッド #F2435A（睡眠アプリ）
ピュアブラック #0A0A0A をニュートラルアプリのプライマリーボタンカラーとして（睡眠アプリ、電卓の「=」、「Deploy v13」、「New event」） [seen]

セマンティックティント [seen]: グリーン #16A34A テキスト on #ECFDF3; レッド #DC2626 on #FEF2F2; アンバー/オレンジ on #FFF4E5; ブルー on #EEF4FF。アバターのイニシャルは、より暗い同色相テキスト（「SW」、「AJ」、「MP」）とともにパステルサークル上に配置される。

グラデーション： まれに使用されるが効果的 [seen: "the art of using gradients"]。ボタンは微妙なトップダウングラデーション（セカンダリーは #FFFFFF → #F7F7F7、プライマリーはやや明るいトップ）を取得する。ヒーローアートは、Plus-Darkerブレンドとノイズ/グレインオーバーレイを備えたぼやけたマルチカラーブロブを使用する [seen: ヒーローイラストレーションスレッド]。

2.3 シェイプ、スペーシング、奥行き

半径 [seen and inferred]: 小さなコントロールとボタン8–10px [seen: "30px height, 10px radius"]; インプット10–12px; カード12–16px; モーダルとコマンドパレット20–24px; モバイルシートとフォンカード24–32px; ピルとチップは完全に丸みを帯びている。モバイルボタンは多くの場合フルピル [seen]。
スペーシング： 4pxベースグリッド。一般的なギャップは4/8/12/16/24/32/48 [inferred]。コンテンツの周りには十分な余白があり、密度の高いテーブルでも行は約40–48px [inferred]。
コントロールの高さ [seen/inferred]: コンパクトなデスクトップボタン30–32px、標準36–40px、モバイルプライマリーCTA 48–56px。
ボーダー： 非常に薄いグレーの1pxヘアライン。多くの場合、ボーダーは border の代わりに0ブラー1pxスプレッドシャドウから作られる [seen: セカンダリーボタンレシピ]。
シャドウ [seen]: セカンダリーボタン = 0 1px 2px rgba(40,40,40,.08), 0 0 0 1px #ECECEC。フローティングサーフェス（ポップオーバー、パレット、ツールチップ）は、大きな非常に柔らかなアンビエントシャドウとヘアラインを使用する。ダークツールチップはライトUIの上に配置される [seen: Statsnapチャートツールチップ、「Task completed · Undo」トースト]。
モバイル： アートボード430×932 [seen]、トップバーに丸い40–44pxのアイコンボタン、グレーのキャンバス上にグループ化された「インセット」リストカード、フローティングピル型タブバー [seen]。

2.4 レイアウトパターン [seen]

SaaSアプシェル： 左サイドバー（220–260px）は微妙なグレー、小文字の大文字グレーラベルでグループ化されたナビゲーション、アクティブアイテム = ソフトシャドウ付きのホワイトピル（ライト）または #1E1E1E 塗りつぶし（ダーク）; メインコンテンツは白で、細いトップバー（パンくず「Home > Transaction」、/ ヒント付き検索、アイコンボタン）がある。代わりに細いアイコンレール（48–56px）がある場合もある。
テーブル上のフィルターチップロウ： Range Last 30 days ▾, Scope All tools ▾。ラベルはグレーで値はダーク。
テーブル： ゼブラストライプなし、ヘアライン行区切り、小さなグレーのヘッダーテキスト、色付きステータスピル、アバター+名前+メールスタック、右揃えの数字、タブラー数字。
KPIカード： ラベル、大きな数字（多くの場合モノスペース）、デルタピル（▲ +14.7% vs last year）。
認証/オンボーディング： 分割カード。左側にフォーム（ソフトサークル内のロゴ、タイトル、サブタイトル、Googleボタン、「または」区切り、インプット、プライマリー）、右側にグレーパネル内のプロダクトプレビューとカルーセルドット [seen: "just designed the perfect signup page"]。
コマンドパレット： 24px半径、ESC キーキャップ付き検索行、フィルターピル、グループ化された結果、キーボード凡例フッター [seen]。
モバイルオンボーディング： セグメント化されたプログレスバー + 「1/5」、中央揃えの太字質問、円形チェック付き選択可能なオプション行、スティッキーピルCTA [seen]。
ランディングヒーロー： フローティングピルナビゲーションバー、小さな「Backed with X」バッジ、短いパンチの効いた見出し（オールキャップスグロテスクまたはセリフの場合もある）、ダークプライマリー+ホワイトセカンダリーボタン、その下に大きなイラスト [seen]。

2.5 アイコノグラフィとイラストレーション [seen]

アイコン：細いストロークのアウトラインアイコン（Lucide/Phosphor風、約1.5pxストローク、UI内で16–18px）、デフォルトでグレー、アクティブ時は暗め。
フィーチャーカードやカテゴリ用の小さな色付きアプアイコンタイル（グラデーションとグリフが入った角丸四角形）。
イラストスタイル：(a) 破線グリッド上のアイソメトリックラインアート、モノクローム、(b) ノイズの入ったパステル背景上にアイソメトリックグリッドと浮遊する紙吹雪が配置された、鮮やかなグラデーションリボン/ストリーム、(c) コンシューマーアプリやモバイルアプリ向けのフレンドリーなフラットシェードスポットイラストと3D風絵文字アイコン、(d) スキューモーフィックなタッチ（カードを保持するステッチの入った革財布）。
彼のアニメーションパイプライン：「Draw the illustrations in Figma → Animate in AE/Rive → Export to lottie if using AE → Implement onto the website」。あるプロジェクトでは「Figma… Rive for animation, Next.js + Sanity」を使用した。ヒーローセクションはしばしば「デザイン＋イラストレーション＋アニメーション」を取る [seen]。

2.6 ダーク vs ライト [seen]

彼は両方を使用し、一致するセット（「ライト/ダークモード」、「figma tokens are so useful!」）を出荷している。ライトはプロダクティビティSaaSのデフォルト。ダークは暗号/トレーディング、コードエディタ、サイドバー、マーケティングバナーに使用される。ダークサーフェスは、どこもピュアブラックではなく、約6–10の明度増分（#0D0D0D → #121212 → #1A1A1A → #222）で段階的に明るくなる。

3. デザイントークン（CSS変数）

これをグローバルスタイルシートに貼り付けてください。Tailwindユーザーは、これらを @theme（v4）または theme.extend（v3）にマッピングできます。

:root {
  /* Type */
  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Geist Mono", "SF Mono", Menlo, monospace;
  --font-rounded: "SF Pro Rounded", ui-rounded, "Google Sans Rounded", var(--font-sans);

  --text-xs: 12px;   --text-sm: 13px;  --text-base: 14px; --text-md: 16px;
  --text-lg: 18px;   --text-xl: 24px;  --text-2xl: 32px;  --text-3xl: 48px;
  --text-4xl: 64px;  --text-5xl: 96px;
  --tracking-body: 0;       /* <= 16px */
  --tracking-tight: -0.01em;/* 18–24px */
  --tracking-title: -0.03em;/* ~36px  (his rule) */
  --tracking-display: -0.055em; /* 100px+ (his rule: -5% to -6%) */
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Neutrals (light) */
  --bg: #ffffff;
  --bg-subtle: #f7f7f7;
  --bg-muted: #f0f0f0;
  --bg-backdrop: #e8e8e8;
  --border: #ececec;
  --border-strong: #e0e0e0;
  --fg: #171717;
  --fg-secondary: #737373;
  --fg-tertiary: #a3a3a3;
  --fg-inverse: #ffffff;

  /* Accent: pick ONE per product */
  --accent: #7b3aec;             /* violet; alternatives: #255cd1 blue, #ff5a1f orange, #0a0a0a black */
  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
  --accent-soft: color-mix(in oklab, var(--accent), white 90%);
  --accent-fg: #ffffff;
  --ring: color-mix(in oklab, var(--accent), transparent 65%);

  /* Semantic (dark text on soft tint) */
  --success: #16a34a; --success-soft: #ecfdf3;
  --danger:  #dc2626; --danger-soft:  #fef2f2;
  --warning: #d97706; --warning-soft: #fff7e6;
  --info:    #2563eb; --info-soft:    #eef4ff;

  /* Spacing (4px grid) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Radii */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px;
  --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px;

  /* Heights */
  --h-control-sm: 30px; --h-control: 36px; --h-control-lg: 44px; --h-cta-mobile: 52px;

  /* Shadows (layered, soft; hairline via spread) */
  --hairline: 0 0 0 1px var(--border);
  --shadow-xs: 0 1px 2px rgb(40 40 40 / 0.08);
  --shadow-btn: 0 1px 2px rgb(40 40 40 / 0.08), 0 0 0 1px #ececec;     /* his secondary button */
  --shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(0 0 0 / 0.16), 0 0 0 1px color-mix(in oklab, var(--accent), black 12%);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 1px var(--border);
  --shadow-pop: 0 0 0 1px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.10), 0 2px 6px rgb(0 0 0 / 0.04);
  --shadow-modal: 0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 64px -12px rgb(0 0 0 / 0.18);
  --shadow-focus: 0 0 0 3px var(--ring);

  /* Motion (see §5) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* strong ease-out (Emil Kowalski) */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* for on-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like sheet (Vaul) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 200ms;
  --dur-moderate: 250ms; --dur-slow: 350ms; --dur-page: 500ms;
}

[data-theme="dark"], .dark {
  --bg: #0d0d0d;
  --bg-subtle: #141414;
  --bg-muted: #1c1c1c;
  --bg-backdrop: #0a0a0a;
  --border: rgb(255 255 255 / 0.08);
  --border-strong: rgb(255 255 255 / 0.14);
  --fg: #fafafa;
  --fg-secondary: #a1a1a1;
  --fg-tertiary: #6b6b6b;
  --shadow-btn: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px rgb(255 255 255 / 0.08);

4. コンポーネントレシピ

これらは、彼の投稿で直接観察されたり、強く示唆されたりしたレシピです。デザイントークンを使用します。

4.1 ボタン

プライマリーボタン [seen]

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-control); /* 36px */
  padding-inline: var(--space-4); /* 16px */
  border-radius: var(--radius-md); /* 10px */
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--text-base); /* 14px */
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-btn-primary);
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
} /* ホバーはbox-shadowと背景色を暗く変更 */

セカンダリーボタン [seen: "this button only requires 3 shadows!"]

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-control);
  padding-inline: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-btn); /* 0 1px 2px rgb(40 40 40 / 0.08), 0 0 0 1px #ececec */
  transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover {
  box-shadow: 0 1px 2px rgb(40 40 40 / 0.08), 0 0 0 1px #d4d4d4;
}

ゴースト/テキストボタン [inferred]

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--h-control);
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover {
  background: var(--bg-subtle);
  color: var(--fg);
}

4.2 インプット [seen]

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.input-label {
  font-size: var(--text-sm); /* 13px */
  font-weight: var(--weight-medium);
  color: var(--fg-secondary);
}
.input {
  height: var(--h-control); /* 36px */
  padding-inline: var(--space-3); /* 12px */
  border-radius: var(--radius-md); /* 10px */
  background: var(--bg);
  border: none;
  box-shadow: var(--hairline);
  color: var(--fg);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.input:focus {
  outline: none;
  box-shadow: var(--hairline), var(--shadow-focus);
}
.input::placeholder {
  color: var(--fg-tertiary);
}

4.3 カード [seen/inferred]

.card {
  background: var(--bg);
  border-radius: var(--radius-lg); /* 12px */
  padding: var(--space-4); /* 16px */
  box-shadow: var(--shadow-card);
}

4.4 ポップオーバー/パレット [seen]

.popover {
  background: var(--bg);
  border-radius: var(--radius-2xl); /* 20px */
  box-shadow: var(--shadow-pop);
  padding: var(--space-2);
}

4.5 フィルターチップ [seen]

.filter-chip {
  display: inline-flex;
  align-items: center;
  height: var(--h-control-sm); /* 30px */
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--bg);
  box-shadow: var(--hairline);
  font-size: var(--text-sm);
  color: var(--fg);
  gap: var(--space-1);
  cursor: pointer;
}
.filter-chip-label {
  color: var(--fg-secondary);
}

4.6 ステータスピル（テーブル内） [seen]

.status-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: var(--weight-medium);
}
.status-pill--success { background: var(--success-soft); color: var(--success); }
.status-pill--danger  { background: var(--danger-soft);  color: var(--danger); }
.status-pill--warning { background: var(--warning-soft); color: var(--warning); }
.status-pill--info    { background: var(--info-soft);    color: var(--info); }

5. モーションシステム

マルセルのアプローチは、高速で、物理的で、装飾的ではありません。これは、彼の投稿 [seen] と Motion のベストプラクティス [expert] から得られた動きに関する1つのルールセットです。

5.1 原則

持続時間は短く： ほとんどのマイクロインタラクションは100-200ms。ページレベルのトランジションは最大500ms。
イージングは強いイーズアウトがデフォルト： cubic-bezier(0.23, 1, 0.32, 1) を使用（Emil Kowalskiの推奨）。これにより、動きは最初に速く、最後にゆっくりになり、自然で応答性が高く感じられます。
画面に出入りするものにはイーズイン-イーズアウト： cubic-bezier(0.77, 0, 0.175, 1) を使用。
シートとドロワーにはiOSのような弾み： cubic-bezier(0.32, 0.72, 0, 1) （Vaulライブラリの推奨）。
動きを説明するためにのみアニメーション化する： 状態の変化、項目の追加/削除、注意の誘導。決して単なる装飾としてアニメーション化しない。
スタガーと遅延は控えめに： 各項目20-40msのスタガーは、リストやグリッドに良いと感じられます。100msを超える遅延は、アプリが遅く感じられる可能性があります。
物理的な感触を好む： オーバーシュートやバウンスは、購入ボタンや「完了」状態など、意味がある場合にのみ使用する。決してデフォルトにしない。

5.2 コンポーネントアニメーションマップ

コンポーネント	プロパティ	持続時間	イージング	メモ
ボタンホバー	box-shadow, background	150ms	ease-out
ボタンアクティブ/プレス	scale(.97)	100ms	ease-out	プレス感 [expert]
インプットフォーカス	box-shadow	150ms	ease-out
カードホバー	box-shadow, transform	200ms	ease-out	わずかに浮き上がる
ドロワー/シート（開く）	y, opacity	350-500ms	ease-drawer	[seen]
ドロワー/シート（閉じる）	y, opacity	200ms	ease-in-out	[expert]
モーダル（開く）	scale, opacity	200ms	ease-out	ターゲットサイズの1.02倍から
モーダル（閉じる）	scale, opacity	150ms	ease-in-out
ページトランジション	opacity, y	300-500ms	ease-out	わずかなフェード+移動
リストアイテムの追加	opacity, y, height	300ms	ease-out	スタガー: 30ms
リストアイテムの削除	opacity, x, height	200ms	ease-in-out
トースト/通知	x, opacity	300ms	ease-out
ツールチップ	opacity, y	150ms	ease-out
スケルトンローダー	opacity (パルス)	1.5s ループ	linear
プログレスバー	width	300ms	ease-out
アコーディオン	height	200ms	ease-out

5.3 Motion（framer-motion）の使用例

// プライマリーボタン（マルセルのスタイル）
<motion.button
  className="btn-primary"
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: .98 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Get started
</motion.button>

// リストアイテムの追加（スタガー）
<li>
  <motion.div
    initial={{ opacity: 0, y: 8 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
  >
    ...
  </motion.div>
</li>

// モーダル
<motion.div
  initial={{ opacity: 0, scale: 0.98 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.98 }}
  transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
>
  ...
</motion.div>

// ローディングスピナー（マルセルの「完璧なローディングアニメーション」）
<motion.span
  animate={{ rotate: 360 }}
  transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
>
  ⟳
</motion.span>

6. レイアウトテンプレート

プロンプトの例：「新しいSaaSダッシュボードを作成して。左側にサイドバー、KPIカードを含むメインコンテンツ、テーブル、フィルターチップが必要です。@marcelkargulのスタイルで。」

6.1 基本的なSaaSアプシェル（JSX）

<div className="flex h-screen bg-[var(--bg-subtle)]">
  {/* サイドバー */}
  <aside className="w-[240px] bg-[var(--bg)] border-r border-[var(--border)] p-[var(--space-4)] flex flex-col gap-[var(--space-6)]">
    <div className="flex items-center gap-[var(--space-2)]">
      <span className="w-8 h-8 rounded-[var(--radius-md)] bg-[var(--accent)] flex items-center justify-center text-[var(--accent-fg)] font-semibold text-sm">A</span>
      <span className="font-medium text-[var(--fg)]">Acme Inc</span>
    </div>
    <nav className="flex flex-col gap-[var(--space-1)]">
      <span className="text-[11px] uppercase tracking-wider text-[var(--fg-tertiary)] font-medium">メイン</span>
      <a href="#" className="flex items-center gap-[var(--space-2)] px-[var(--space-2)] py-[var(--space-1)] rounded-[var(--radius-md)] text-sm text-[var(--fg-secondary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--fg)] transition-colors">
        <svg className="w-4 h-4" ... /> ダッシュボード
      </a>
      <a href="#" className="flex items-center gap-[var(--space-2)] px-[var(--space-2)] py-[var(--space-1)] rounded-[var(--radius-md)] text-sm bg-[var(--bg)] shadow-[var(--shadow-card)] text-[var(--fg)]">
        <svg className="w-4 h-4" ... /> 取引
      </a>
      {/* ... more nav items ... */}
    </nav>
  </aside>

  {/* メインコンテンツ */}
  <main className="flex-1 flex flex-col overflow-auto">
    {/* トップバー */}
    <header className="h-[48px] flex items-center justify-between px-[var(--space-6)] border-b border-[var(--border)] bg-[var(--bg)]">
      <div className="flex items-center gap-[var(--space-2)] text-sm text-[var(--fg-secondary)]">
        <span>ホーム</span>
        <span className="text-[var(--fg-tertiary)]">/</span>
        <span className="text-[var(--fg)]">取引</span>
      </div>
      <div className="flex items-center gap-[var(--space-2)]">
        <button className="btn-ghost p-[var(--space-2)]">
          <svg className="w-4 h-4" ... />
        </button>
      </div>
    </header>

    {/* コンテンツエリア */}
    <div className="flex-1 p-[var(--space-6)] space-y-[var(--space-6)]">
      {/* KPIカード */}
      {/* ... */}
      {/* テーブル */}
      {/* ... */}
    </div>
  </main>
</div>

7. 色とスタイルのプロンプト

AIモデルにこれらのプロンプトのいずれかを使用して、マルセルのスタイルを呼び出します。

@marcelkargulスタイルのUI：指定されたコンポーネント/ページの完全なUIを生成します。
落ち着いたプロダクトUI：ニュートラルカラー、ソフトシャドウ、クリーンなタイポグラフィに重点を置きます。
モノクローム+1アクセント：パレットをグレーと1つのカラーに制限します。
プレミアムプロダクトデザイン：高いクラフトマンシップ、細部への注意、洗練された仕上がりを示唆します。
ソフトUI / ミニマルプロダクト：優しいエッジ、十分な余白、装飾のないクリーンな機能性を示唆します。
ダークプロダクトUI：暗いテーマのインターフェース。暗い背景、明るいテキスト、微妙なホバー状態。
iOS風デザイン：SF Pro Roundedフォント、丸いコントロール、インセットリスト、フローティングタブバー。

8. コード生成のガイドライン

常にデザイントークン（CSS変数）を使用する。 var(--bg)、var(--fg)、var(--radius-md) などを使用します。ハードコードしないでください。
タイポグラフィには var(--font-sans) を、コードには var(--font-mono) を使用する。
ボーダーには box-shadow を優先する。 border: 1px solid var(--border) の代わりに box-shadow: 0 0 0 1px var(--border) を使用します。
アクセントカラーは1つだけにする。 製品全体で var(--accent) を使用します。1つのUI内で複数のアクセントカラーを混在させないでください。
スペーシングには4pxグリッドを使用する。 var(--space-1) から var(--space-24) の変数を使用します。
上記の半径と高さを使用する。
可能な限りモーション変数（var(--ease-out)、var(--dur-fast)）を使用する。
コードはクリーンでセマンティックに保つ。 賢いトリックよりも読みやすさを優先します。
ライトモードとダークモードの両方を提供する。 ユーザーが両方のテーマを簡単に切り替えられるように、[data-theme="dark"] または .dark クラスを使用します。

9. QAチェックリスト（最後の10%）

出力を確認する際は、以下の各項目をチェックしてください。

10. プロンプトの例

例1：認証画面

プロンプト：@marcelkargulスタイルのサインアップ画面を作成してください。左側にフォーム（ロゴ、タイトル、Googleボタン、メールインプット、パスワードインプット、CTAボタン）、右側にプロダクトプレビューを備えた分割カードレイアウト。

例2：ダッシュボードテーブル

プロンプト：取引用のテーブルコンポーネントを@marcelkargulスタイルで作成してください。日付、名前、金額、ステータスの列があります。ステータスピル（成功、失敗、保留中）と行ホバーを含めてください。アクセントカラーはブルー #255CD1 を使用してください。

例3：ランディングヒーロー

プロンプト：プロダクトページ用の@marcelkargulスタイルのヒーローセクションを作成してください。フローティングピルナビバー、短いパンチの効いた見出し、ダークプライマリーボタンとホワイトセカンダリーボタン、その下に大きなイラスト。滑らかなモーションを少し加えてください。

出典

このスキルの出典資料は、@marcelkargul（Kargul Studio）がX（旧Twitter）と彼のポートフォリオサイトで公開した投稿です。主要な情報源：

Xプロフィール
Kargul Studio
@uidesignsbot UIクローン - 彼のポータブルUIの一部を公開

「[seen]」、「[inferred]」、「[expert]」の凡例は、出典の性質を明確に示すために使用されています。

お気に入りのAIに質問する

ドキュメント

GIGA UI: 落ち着き、正確さ、生命感 は何をしますか？