casper-design-system

Name: casper-design-system
Author: casper-studios

github.com/casper-studiosデザイン・UI15265 回インストール8 週間前に更新

casper-design-system について

casper-design-systemは、Casper StudiosのWeb・モバイルアプリのUI生成向けデザインガイドスキルです。React、Tailwind CSS v4、shadcn/uiのコンポーネントやテーマ、レイアウトを定め、コード生成前にプラットフォームとダークモードの要件を確認します。

主な機能

01React、Tailwind CSS v4、shadcn/uiの規則
02ブランドカラーとテーマトークン
03タイポグラフィ、余白、影の規則
04Web・モバイル向けレイアウト資料
05UI生成前のプラットフォームとダークモード確認

活用シーン

01Casper Studiosのクライアントデモ作成
02社内ツールのUI構築
03短時間でのプロトタイプ作成

インストール

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

$npx skills add https://github.com/casper-studios/casper-marketplace --skill casper-design-system

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

同梱ファイル

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

assets/

logo-mono-black.svg

logo-mono-white.svg

logo-on-white-default.svg

logo-on-white-variant.svg

references/

components.md

mobile.md

theme.css

web-layouts.md

詳細

Casper Studios デザインシステム

shadcn/ui、Tailwind CSS v4、**React（Vite）**をベースに構築された、洗練された SaaS デザインシステムです。クライアント向けデモ、社内ツール、簡易プロトタイプなど、Casper Studios 向けに生成するすべてのインターフェースは、チーム全体で一貫したプロフェッショナルなビジュアルアイデンティティを保つため、これらのルールに従う必要があります。

UI コードを生成する前に、このファイルを最後まで必ず読み、以下に記載されているリファレンスファイルも読んでください。リファレンスファイルは必ず読む必要があります。正しい出力に必要なルールやコード例が含まれています。読み飛ばすと、誤ったブランドイメージの UI になってしまいます。

すべてのプロジェクトで必須：

references/components.md — 必ず読んでください。再利用可能なパーツ：統計カード、リスト項目、フィルターバー、カンバンボード、プロフィールカード、製品カード、アクティビティフィード、トースト通知、フォームの検証状態。レイアウト内に UI 要素を構築する際は必須です。
references/theme.css — 必ず読んでください。Tailwind CSS v4 のテーマトークンが含まれています。このファイルをそのままプロジェクトにコピーしてください。
assets/ — Casper Studios のロゴ SVG が 4 種類（デフォルト、バリアント、モノクロ・ブラック、モノクロ・ホワイト）含まれています。背景色に応じて適切なバリアントを使用してください。詳しくは以下の「ロゴ」セクションを参照してください。

プラットフォームに応じて必須：

references/web-layouts.md — プロジェクトがウェブアプリケーションの場合、必ず読んでください。ウェブ固有のレスポンシブなルールとコード例：アプリシェル、サイドバーナビゲーション、ダッシュボードグリッド、データテーブルページ、ページヘッダー。
references/mobile.md — プロジェクトがモバイルアプリケーションの場合、必ず読んでください。モバイル固有のルールとコード例：デバイスフレーム、トップバー、ボトムタブナビゲーション、フォームのパターン、固定ボタンのレイアウト、リストビュー、カードのスタック、全画面の構成、コンテキストに応じたアクション（メニュー＋ボトムシート）。

必須事項： プラットフォームのリファレンスファイルを読むまでは、UI を生成しないでください。プロジェクトがウェブ向けかモバイル向けか不明な場合は、作業を進める前にユーザーに確認してください。

生成前に確認すること：必須のコンテキスト

UI コードを作成する前に、以下の内容をユーザーに確認してください。ユーザーのプロンプトですでに明確な回答が得られている場合は、確認せずに進めてください。不明な場合は、何も生成する前に質問してください。

プラットフォーム — ウェブアプリケーションですか、それともモバイルアプリケーションですか？（従うリファレンスファイルが決まります。）
ダークモード — インターフェースはダークモードに対応する必要がありますか、それともライトモードのみですか？（.dark クラスのオーバーライドを実装するか、サーフェスに bg-neutral-0 を使用するか、モノクロ・ホワイトのロゴバリアントを含めるかが決まります。）

デフォルトを決めつけてはいけません。ユーザーが「ダッシュボードを作って」と言っただけでは、ウェブ向けかモバイル向けか、ダークモードが必要かどうかはわかりません。確認してください。

概要

Casper の美学は洗練された信頼感です。気負わずに上質さを感じさせる、プロフェッショナルな SaaS スタイルです。ゆったりとした余白、控えめなパープルのアクセント、柔らかな角丸のサーフェスによって、信頼できてモダンな印象のインターフェースを作ります。Linear と Notion の融合をイメージしてください。構造的で、ゆとりがあり、静かな自信を感じさせます。

基本原則

余白もデザインの一部です。 パディングは十分に取り、セクション間にゆとりを持たせてください。詰め込みは厳禁です。
アクセントカラーはひとつだけ、控えめに使います。 ブランドカラーのパープル（#5900FF）は、アクティブ状態、プライマリボタン、主要な CTA のみに使用します。それ以外には使いません。すべてがパープルなら、何も目立ちません。
丸みはあっても、過度に可愛らしくしないでください。 カードのデフォルトの角丸は 10px（shadcn のデフォルト）です。ボタンと入力欄は 8px にします。おもちゃのような印象を避けつつ、モダンに仕上げます。
フラットさを保ち、控えめに奥行きを出します。 強いシャドウは使いません。カードには shadow-sm、ポップオーバーには shadow-md を使います。ページ内の要素に shadow-lg は使用しないでください。
装飾よりコンテンツを優先します。 UI は意識されない存在であるべきです。ユーザーの目に留まるのはデザインではなく、データです。

技術スタック

React（Vite）と TypeScript
Tailwind CSS v4 — Casper ブランドのオーバーライドとして、references/theme.css のテーマファイルを使用します
shadcn/ui — まず標準的な shadcn/ui プロジェクトを初期化し（shadcn init）、その上に references/theme.css の Casper ブランドトークンを重ねます。shadcn のセマンティックレイヤー（bg-background、text-foreground、bg-primary、border-border など）がベースです。Casper の theme.css は置き換えるのではなく、その上にブランドカラー、タイポグラフィ、シャドウ、余白を追加します。shadcn コンポーネントを直接使用してください。shadcn の機能を重複させるカスタムの基本コンポーネントは作成しないでください
Lucide React — アイコンライブラリです。常に Lucide を使用し、Heroicons や FontAwesome は使用しないでください
フォント — すべての UI テキストに、フォールバックとして sans-serif を指定した DM Sans を使用します。Google Fonts から読み込むか、バンドルしてください

カラーシステム

カラーパレットは意図的に抑えています。UI の大部分はニュートラルなグレーと白で構成し、紫は際立つアクセントとして使用します。

使用ルール

役割	トークン	Hex	使用する場面
ブランドアクセント	`brand-500`	`#5900FF`	アクティブなナビゲーション項目、プライマリボタン、リンク、フォーカスリング
ブランド控えめ	`brand-50`	`#EEE5FF`	アクティブなナビゲーションの背景、選択行のハイライト、ホバー時の色合い
ブランドライト	`brand-100`	`#DECCFF`	アイコンの円形背景、淡いタグの塗りつぶし
デフォルトテキスト	`neutral-950`	`#0A0A0A`	ページタイトル、見出し
本文テキスト	`neutral-900`	`#171717`	主な本文テキスト
補助テキスト	`neutral-500`	`#737373`	メタデータ、タイムスタンプ、補助ラベル
境界線	`neutral-200`	`#E5E5E5`	カードの境界線、区切り線、テーブルの罫線
サーフェス	`neutral-50`	`#FAFAFA`	カードの背後にあるページ背景
カードサーフェス	`neutral-0`	`#FFFFFF`	カードの背景、パネル（ダークモードとの互換性のため、`bg-neutral-0` を使用してください。ダークモードのセクションを参照）

セマンティックカラー

これらはステータス表示、バッジ、コンテキストに応じたフィードバックにのみ使用してください。装飾的なアクセントとしては使用しないでください。

成功 — バッジ／アイコンには success-500（#22C55E）、ピル型背景には success-50
エラー — バッジ／アイコンには error-500（#EF4444）、ピル型背景には error-50
警告 — バッジ／アイコンには warning-500（#F59E0B）、ピル型背景には warning-50

避けること

広い面積の背景にブランドカラーの紫を使用しないでください
セマンティックカラーを装飾目的で使用しないでください
新しい色を追加しないでください。新しい色合いが必要な場合は、ニュートラルのスケールを使用してください
トークンがある場合は、透明度ベースの色を使用しないでください（例：text-black/50 ではなく neutral-500 を使用してください）

タイポグラフィ

すべてのテキストに、フォールバックとして sans-serif を指定した DM Sans を使用します（font-family: 'DM Sans', sans-serif）。等幅フォント（font-mono）は、コードブロック、データラベル、ID に限り使用できます。

スケール

スタイル	サイズ	ウェイト	行の高さ	用途
見出し 1	30px	500	36px	ページタイトルのみ。1つのビューにつき1つ。
見出し 2	20px	500	24px	ページ内のセクションタイトル
見出し 3	16px	500	20px	カードタイトル、小見出し
本文	14px	400	20px	標準の段落および UI テキスト
本文・太字	14px	500	20px	本文内の強調、テーブルのヘッダー
キャプション	12px	400	16px	タイムスタンプ、補助テキスト、メタデータ
キャプション・太字	12px	500	16px	バッジのラベル、小さなカテゴリタグ

ルール

見出しは常にmediumウェイト（500）にし、bold（700）は使用しません
小さなメタデータラベル（例：テーブルの列見出しの「STATUS」「OWNER」）をキャプションサイズで表示する場合を除き、すべて大文字の表記は絶対に使用しません
リンクにはbrand-500色を使い、既定では下線を付けず、ホバー時に下線を付けます
このスケール以外のフォントサイズは使用しないでください。違和感がある場合は、フォントサイズではなく余白を調整してください

余白とレイアウト

余白のスケール

Tailwind の既定の余白スケールを使用します。主な値は次のとおりです。

4px (p-1) — アイコンのパディング、狭い間隔
8px (p-2) — バッジのパディング、小さな間隔
12px (p-3) — 入力欄のパディング、カード内の間隔
16px (p-4) — カードのパディング、セクション間の間隔
24px (p-6) — カード間、コンテンツセクション間
32px (p-8) — 大きなセクション間の区切り
48px (p-12) — 大きな画面でのページ全体のパディング

レイアウトのルール

ページの背景：neutral-50 (#FAFAFA)
コンテンツは常にカード内に整理します（白い背景、枠線、角丸）
コンテンツの最大幅：1280px、中央揃え
サイドバーのあるページでは、サイドバーの幅を240pxに固定します
メインコンテンツ領域は残りのスペースを使用し、24pxのパディングを設定します

影とエレベーション

デザインは主にフラットです。影はレイヤーを示すために使い、装飾としては使いません。

トークン	用途
`shadow-sm`	カード、通常時の入力欄
`shadow-md`	ドロップダウンメニュー、ポップオーバー、ツールチップ
`shadow-lg`	モーダル、コマンドパレット、オーバーレイのみ
`shadow-overlay`	`shadow-lg`の意味的な別名 — 同じ値です。コード上で意図が明確になるよう、モーダルやシートに使用します

カードやページ内の要素にshadow-lg（またはその別名shadow-overlay）を適用することは絶対に避けてください。これらはフローティングレイヤー専用です。

角丸

テーマファイル（references/theme.css）では、shadcn/ui の角丸システムを使用しています。:root 内の単一のベース変数 --radius が、calc() を通じて角丸の全段階を制御します。これは @theme inline によって Tailwind クラスにマッピングされています。Tailwind v4 のデフォルト値は上書きしていません。

トークン	Tailwind クラス	デフォルト値	用途
`--radius-sm`	`rounded-sm`	6px	内側の要素、ナビゲーション項目、小さな入れ子のコントロール
`--radius-md`	`rounded-md`	8px	ボタン、入力欄、ポップオーバー、ツールチップ、チャートのツールチップ
`--radius-lg`	`rounded-lg`	10px	カード、パネル、大きなコンテナー
`--radius-xl`	`rounded-xl`	14px	モーダルコンテナー、ダイアログ、ヒーローカード
（Tailwind 組み込み）	`rounded-full`	9999px	バッジ、ピル、アバター、アイコンの円形背景

ベース値 --radius: 0.625rem（10px）は shadcn のデフォルトです。UI 全体をより角ばった、または丸みのあるデザインにするには、この単一の値を変更します。すべてのトークンが自動的に再計算されます。

カードには常に rounded-lg（10px）を使用します。ボタンと入力欄には常に rounded-md（8px）を使用します。カード内の入れ子要素には、視覚的な階層を保つため、インタラクティブでない要素で rounded-sm（6px）を使用します。内側の角丸は、常に外側より小さくしてください。

アイコン

Lucide Reactのみを使用します。次のようにインポートします：import { IconName } from "lucide-react"
アイコンのデフォルトサイズ：インラインでは 16px、単独では 20px
アイコンの色は周囲のテキストの文脈に合わせます（例：補足テキストには neutral-500、アクティブ状態には brand-500）
円形背景内のアイコン（リストやダッシュボードでよく使用）：
- 円：直径 40px、背景色は brand-50 または brand-100、rounded-full
- アイコン：20px、色は brand-500
- セマンティックな文脈では、対応するセマンティックカラーの組み合わせに置き換えます（例：error-50 の背景色と error-500 のアイコン）

Casper Studios のロゴ

Casper Studios のロゴには、assets/ に保存されている4種類のバリエーションがあります。ロゴを配置する背景に応じて、適切なバリエーションを使用してください。

バリエーション	ファイル	使用場面
デフォルト（フルカラー）	`assets/logo-on-white-default.svg`	明るい背景／白い背景。グラデーションのアイコンと、紫色の「CASPER」、濃色の「STUDIOS」。プライマリロゴとして、可能な限り使用してください。
バリエーション（フルカラー）	`assets/logo-on-white-variant.svg`	紫色と濃いグレーの代わりに、すべて黒のテキストを使用したい場合の明るい背景／白い背景。同じグラデーションのアイコンです。
モノクロ・ブラック	`assets/logo-mono-black.svg`	色を使用できない明るい背景（例：印刷、グレースケールの場面）。グレースケールのアイコンと、ほぼ黒のテキストです。
モノクロ・ホワイト	`assets/logo-mono-white.svg`	暗い背景専用です。グレーのアイコンと白いテキストです。ロゴを暗い面（暗いナビゲーションバー、暗いヒーローセクション、オーバーレイ、ダークモード）に配置する場合は、必ずこちらを使用してください。

ルール

ライトモード（デフォルト）：logo-on-white-default.svg または logo-on-white-variant.svg を使用します
ダークモードまたは暗い背景：logo-mono-white.svg を使用します。デフォルトのロゴや黒いロゴを暗い背景に配置しないでください
ロゴは、定義済みのパターンに従ったサイズで、（ウェブでは）サイドバーのヘッダー、または（モバイルでは）トップバーに表示します
ロゴを不自然に拡大・縮小しないでください。元のアスペクト比を維持します
ロゴを情報量の多い背景やコントラストの低い背景に配置しないでください。コントラストが不十分な場合は、最も視認性の高いモノクロ版を使用します
ロゴの周囲には、すべての辺に最低 8px の余白を確保します

shadcn/ui コンポーネントのテーマ設定

ベースレイヤーとして shadcn/ui コンポーネントを使用します。references/theme.css の CSS 変数を使ってテーマを設定します。各コンポーネントの設定方法は次のとおりです。

ボタン

プライマリ：背景は brand-500、文字色は text-white（トークンではなく、文字どおりの白）、角丸は rounded-md。ホバー時：brand-600。
セカンダリ：背景は白、境界線は neutral-200、文字色は neutral-900、角丸は rounded-md。ホバー時：背景は neutral-50。
ゴースト：背景なし、境界線なし。文字色は neutral-600、角丸は rounded-md。ホバー時：背景は neutral-100。
破壊的操作：背景は error-500、文字色は text-white、角丸は rounded-md。
すべてのボタン：rounded-md（8px）、フォントサイズは 14px。
デフォルトの高さ：48px（h-12）。単独ページ、フォーム、モーダル、およびトップレベルのコンテンツ領域で使用します。
コンパクトな高さ：36px（h-9）。カード、パネル、テーブル行、サイドバーのナビゲーション、フィルターバー、インラインアクションなど、小さなコンテナ内でボタンを使用する場合に適用します。コンテキストがコンパクトな場合は、コントロールもコンパクトにします。

バッジ

rounded-full（ピル形）。高さは 22px。キャプション太字のテキスト（12px、ウェイト 500）。
セマンティックバッジ：淡い背景色と濃い文字色を使用します。例：成功バッジは、背景が success-50、文字色が success-700。
ニュートラルバッジ：背景は neutral-100、文字色は neutral-700。
ブランドバッジ：背景は brand-50、文字色は brand-700。
ステータスを示す場合は、必ずラベルの前に小さなドットまたはアイコンを付けます。

カード

背景は白（bg-neutral-0）。境界線は 1px の neutral-200。角丸は rounded-lg（10px）。shadow-sm。
内側のパディング：最低 16px、ゆとりのあるカードでは 24px。
カードヘッダー：Heading 3（16px/500）。右揃えの「すべて表示」リンクは任意です。
ヘッダーとコンテンツの間は、1px の neutral-200 の区切り線で分けます。

テーブル

shadcn の <Table> を使用します。テーブル自体には外枠を付けず、親のカードでコンテナを提供します。
列ヘッダー：キャプション太字（12px/500）、色は neutral-500、大文字表記。
行の高さ：48-56px。行は 1px の neutral-200 の下部境界線で区切ります。
行のホバー時：背景は neutral-50。
行の背景色を交互に変えないでください。

Input / Textarea

角丸は rounded-md（8px）。境界線は 1px の neutral-200。背景は neutral-50 または白。
フォーカス時：2px の brand-500 のリングを使用します（Tailwind の ring-2 ring-brand-500 を使用）。
ラベルは必ず表示し、入力欄の外側に配置してください。すべての入力欄の上に <label> 要素を表示し、入力欄の中には配置しません。ラベルは 14px/400、色は neutral-900。ラベルと入力欄の間隔は 6px（space-y-1.5）。
プレースホルダーテキストは目立たないようにしてください。色は neutral-400、ウェイトは標準（400）、短いヒントテキストを使用します（例：「例：[email protected]」）。プレースホルダーは補足的なヒントであり、ラベルではありません。
セレクト入力も同じパターンに従います。入力欄の上にラベルを表示し、入力欄内のプレースホルダーは目立たないようにします。
フィールド間の間隔：16px（space-y-4 または gap-4）。
デフォルトの高さ：48px（h-12）。単独ページ、フォーム、モーダル、およびトップレベルのコンテンツ領域で使用する入力欄に適用します。
コンパクトな高さ：36px（h-9）。カード、パネル、テーブル行、フィルターバー、インライン検索フィールドなど、小さなコンテナ内で入力欄を使用する場合に適用します。コンパクトなボタンと同じ考え方です。

サイドバー（アプリシェル）

サイドバーのコードパターン全体については、references/web-layouts.mdを参照してください。主な仕様：

幅：240px。背景は白。右側の境界線：1pxのneutral-200。
ナビゲーション項目：高さ36px（コンパクト — サイドバーパネル内）、rounded-sm（6px）、左パディング12px。
- デフォルト：テキストはneutral-600。アクティブ：背景はbrand-50、テキストはbrand-500、font-weight: 500。ホバー：背景はneutral-100。
グループラベル：キャプション（12px/400）、neutral-400、グループ間の上マージンは24px。
モバイルでは、サイドバーをSheet（左からスライドイン）に折りたたみます。

タブ

shadcnの<Tabs>を使用します。下線バリアントです。
アクティブなタブ：下辺の境界線はbrand-500（2px）、テキストはneutral-900。
非アクティブなタブ：境界線なし、テキストはneutral-500。ホバー時：テキストはneutral-900。

ダイアログ／シート

オーバーレイ：不透明度black/50。
コンテナー：背景は白、rounded-xl（14px）、shadow-overlay。
右上に必ず閉じるボタン（Xアイコン）を配置します。

複合パターン

ルールとコード例については、該当するリファレンスファイルを参照してください。

references/web-layouts.md — レスポンシブルール、アプリシェル、サイドバーナビゲーション、ダッシュボードグリッド、データテーブルページ、ページヘッダー
references/components.md — 統計カード、リスト項目行、フィルターバー、カンバンボード、プロフィール／ディスカバリーカード、商品カード、アクティビティフィード項目、トースト通知、フォームの検証状態
references/mobile.md — モバイルルール、デバイスフレームシェル、モバイルトップバー、下部タブナビゲーション、モバイルフォームレイアウト、下部固定ボタン、モバイルリストビュー、モバイルカードスタック、全画面構成、コンテキストアクション

Webとモバイルのコンテキスト

すべてのプロジェクトはWebアプリケーションまたはモバイルアプリケーションのいずれかであり、レイアウトのアプローチは根本的に異なります。この箇所に進む前に、（このドキュメントの冒頭で指示されているとおり）適切なプラットフォームのリファレンスファイルを必ず読んでください。まだ読んでいない場合は、ここで止めて読んでください。

Webアプリケーション → references/web-layouts.md（レスポンシブブレークポイント、サイドバーの動作、レイアウトパターン）
モバイルアプリケーション（ネイティブアプリ、iOS、Android、スマートフォン向けのエクスペリエンス） → references/mobile.md（デバイスフレーム、タッチターゲット、固定ボタン、ナビゲーション、モバイル固有のルール）

モバイルアプリをレスポンシブなWebページとして扱わないでください。モバイルアプリはデバイスフレーム内に表示され、まったく異なるナビゲーション、間隔、操作パターンに従います。

画像プレースホルダー

実際の画像を利用できない場合は、柔らかなグラデーションメッシュ背景を使用してください。グレーのボックスは使用しないでください。読み込み中の表示ではなく、抽象アートのような雰囲気にしてください。

グラデーションのレシピ（CSSのlinear-gradientまたはradial-gradientの組み合わせ）：

ミント／ティール：linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #a8edea 100%)
ピーチ／コーラル：linear-gradient(135deg, #f6d5c5 0%, #e8b4b8 50%, #d4a0a0 100%)
パープル／ピンク：linear-gradient(135deg, #c3b1e1 0%, #f0c4d0 50%, #e0aed0 100%)
ティール／エメラルド：linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)

画像コンテナーにrounded-lgを適用します。これらはプレースホルダーですが、意図的に美しく見えるようにしてください。

トランジションとアニメーション

状態の変化はすべて、唐突に切り替わるのではなく、滑らかで意図的に感じられるようにしてください。これは Web とモバイルの両方に当てはまります。

インタラクティブな要素（ボタン、入力欄、カード）：Tailwind のデフォルトの長さ（約 150ms）で transition-colors または transition-all を使用してください。ホバー、フォーカス、アクティブなどの状態変化が瞬時に起きたように感じられてはいけません。
ページ遷移：ビュー間の移動時には、控えめなスライドまたはフェードを適用してください。150–300ms のイーズアウトトランジションにすると、もたつきを感じさせず、応答性を保てます。
モーダル、ダイアログ、シート：必ず表示時と非表示時にアニメーションを付けてください。シートは端（左、右、下）からスライドさせ、ダイアログやモーダルは約 95% から 100% へ少し拡大しながらフェードインさせます。オーバーレイの背景も瞬時に表示するのではなく、フェードインさせてください（opacity 0→50%）。
リストとコンテンツの読み込み：新しい項目が表示されるとき（例：フェッチ後）は、唐突にポップインさせるより、控えめなフェードインまたは順次表示が望ましいです。

画面上の要素が唐突に「表示」されたり「消え」たりしてはいけません。視覚的な変化にはすべて、短く滑らかなトランジションを付けてください。

空・エラー・読み込み状態

どの画面にも、データ表示中、空、エラーの少なくとも 3 つの状態があります。AI が生成するインターフェースでは、実際のデータがある正常な状態だけが表示されることがほとんどです。洗練されたインターフェースでは、残り 2 つの状態にも配慮します。

空の状態

リスト、テーブル、コンテンツ領域にまだデータがない場合（初回利用、検索結果が 0 件、フィルターを解除したとき）：

Lucide アイコン（48px、neutral-300）、短い見出し（Heading 3）、1 行の本文テキスト（neutral-500）を、コンテンツ領域の中央に縦方向に配置してください
必要に応じて、テキストの下に主要なアクションボタンを配置してください（例：「最初のプロジェクトを作成」）
ヘッダーだけがあり、行のない空のテーブルを表示してはいけません。機能ではなく、バグのように見えます
イラストや複雑なグラフィックは使わないでください。テキストとアイコンだけにして、シンプルに保ちます

エラー状態

問題が発生したとき（ネットワーク障害、権限拒否、サーバーエラー）：

空の状態と同じ中央配置にしますが、アイコンの色には error-500 を使用してください
アイコン：状況に応じたものにします。ネットワークエラーには WifiOff、権限エラーには ShieldX、汎用的な代替には AlertTriangle を使用してください
見出し：簡潔で分かりやすい内容にします（「問題が発生しました」、「プロジェクトを読み込めませんでした」）
本文：何をすればよいかを 1 文で説明します（「接続を確認して、もう一度お試しください」）
再試行できる操作には、「再試行」ボタン（secondary バリアント）を含めてください

読み込み状態

コンテンツをフェッチしているとき：

ページの初回読み込みの場合：中央にスピナーを 1 つ表示します（Loader2 アイコンに animate-spin、24px、neutral-400）。明示的に要求されない限り、スケルトン画面は使わないでください。設計を明確にしないまま複雑さが増すためです
インライン更新の場合（例：フォーム送信、項目の追加読み込み）：トリガーとなるボタンのラベルをスピナーと「読み込み中…」に置き換え、ボタンを無効にします
プル・トゥ・リフレッシュや遅延読み込みの場合：リストの上部または下部に小さなスピナーを表示し、色には neutral-400 を使用してください

「静的なモックアップでは、アニメーション付きのスケルトンやシマー効果を使わない」というアンチパターンのルールは引き続き有効です。ただし、インタラクティブなインターフェースでは、ローダーアイコンへのシンプルな animate-spin の適用は問題ありません。

フォームのバリデーションとエラーフィードバック

入力欄では、問題があるときに明確に伝える必要があります。これは Web とモバイルの両方に当てはまります。コード例については、references/components.md の「フォームのバリデーション状態」セクションを参照してください。

動作ルール

すべてのキーストロークごとではなく、入力欄からフォーカスが外れたときにバリデーションを行ってください。キーストロークごとのバリデーションは厳しすぎる印象になります
エラーは該当する入力欄のすぐ下にインラインで表示してください。フォーム上部にまとめて表示してはいけません。ユーザーがエラーを探し回ることになります
ユーザーが入力を修正して入力欄が有効になったら、エラー状態をすぐに解除してください（フォーカスが外れたときではなく、入力変更時）
エラーがある状態でフォームが送信された場合は、最初の無効な入力欄までスクロールし、フォーカスを当ててください

成功の確認（送信後）

フォームの送信が成功したら、明確なフィードバックを表示します。何も伝えずに画面遷移するだけにしてはいけません。

オプション A：操作を確認するトースト通知を表示し、次の論理的な画面へ遷移します
オプション B：フォームの内容を置き換えて、インラインの成功メッセージを表示します（「パスワードのリセット」のような単一目的の画面に便利です）

トースト通知

操作の確認、エラーの通知、情報の提供に使う、一時的なフィードバックメッセージです。shadcn の Sonner トーストコンポーネントを使用します。コード例とすべてのバリアントをまとめた表については、references/components.md のトースト通知のセクションを参照してください。

配置と動作

Web：右下隅、端から 16px
モバイル：ステータスバー／トップバー領域の下、上部中央
表示時間：デフォルトは 4000ms、アクションリンクを含むメッセージは 6000ms。エラートーストは閉じられるまで表示し続けます
スタック：同時に表示するトーストは最大 3 件。新しいトーストが表示されると、古いトーストは上（Web）または下（モバイル）に移動します
アニメーション：端からスライドインしながらフェードインします。閉じるときはスライドアウトしながらフェードアウトします。トランジションとアニメーションのセクションのように、滑らかに動かし、瞬時に切り替わるようにしてはいけません

データ可視化のカラーパレット

グラフ（Recharts、Chart.js など）を描画する場合は、データ可視化をブランドに馴染ませるため、以下の順序の色を使用します。パレットはブランドの紫から始まり、見分けやすい色相へと広がります。

順序	名前	Hex	用途
1	ブランド	`#5900FF`	プライマリデータ系列、単一指標のグラフ
2	ティール	`#14B8A6`	セカンダリ系列
3	アンバー	`#F59E0B`	ターシャリ系列
4	ローズ	`#F43F5E`	第 4 系列、または比較における「マイナス」
5	スカイ	`#0EA5E9`	第 5 系列
6	ライム	`#84CC16`	第 6 系列

ルール

単一指標のグラフ（棒、折れ線、ドーナツがそれぞれ 1 つ）の場合は、必ず Brand（#5900FF）を使用します
2 系列の比較では、Brand と Teal を使用します
色は順番どおりに適用し、飛ばしたり並べ替えたりしないでください。グラフ間で一貫性を保つことで、ダッシュボードに統一感が生まれます
面グラフの塗りつぶしには 10% の不透明度を使用します（例：ブランドの塗りつぶしには #5900FF1A）
グリッド線：neutral-200。軸ラベル：neutral-500、キャプションサイズ（12px）。軸線：neutral-300
ツールチップ：白背景、shadow-md、rounded-md、neutral-200 の枠線。ポップオーバーと同じスタイルにします
「マイナス」または「下降」を示す値にブランドの紫を使用してはいけません。その場合はローズを使用します。紫は常に中立からプラスを表します

ダークモード

ダークモードはデフォルトでオフです。ユーザーまたはクライアントから明示的に要求された場合にのみ実装します。ダークモードを求められた場合は、以下のルールに従い、反転したパレットを独自に考案してはいけません。

仕組み

テーマファイル（references/theme.css）には、CSS カスタムプロパティを上書きする .dark クラスブロックが含まれています。<html> またはラッパー要素に class="dark" を追加すると、コンポーネントのコードを変更せずにカラーシステム全体が切り替わります。ニュートラルスケールが反転するため、既存のユーティリティ（text-neutral-900、bg-neutral-50、border-neutral-200）には、ダークモードに適した値が自動的に適用されます。

ダークモードでのトークンの動作

コード内でトークン名を変更する必要はありません。.dark のオーバーライドによって、トークンの背後にある値が変わります。各トークンが解決される値は次のとおりです。

Token (コード内では変更しない)	Light Mode の値	Dark Mode の値	備考
`bg-neutral-50`	`#FAFAFA`（ライトグレー）	`#171717`（ほぼ黒）	ページの背景
`bg-neutral-0`	`#FFFFFF`（白）	`#0A0A0A`（ほぼ黒）	カードの表面
`border-neutral-200`	`#E5E5E5`（ライトグレー）	`#404040`（ダークグレー）	枠線／区切り線
`text-neutral-950`	`#0A0A0A`（ほぼ黒）	`#FFFFFF`（白）	ページのタイトル
`text-neutral-900`	`#171717`（ほぼ黒）	`#FAFAFA`（ほぼ白）	本文
`text-neutral-500`	`#737373`（ミドルグレー）	`#737373`（ミドルグレー）	変化なし — 中間の明るさ
`text-neutral-400`	`#A3A3A3`（ライトグレー）	`#A3A3A3`（変化なし）	補助テキスト — ダークモードでも読みやすい
`bg-brand-500`	`#5900FF`	`#7A33FF`（より明るい）	ダーク背景でコントラストを高める
`bg-brand-50`	`#EEE5FF`（ライトパープル）	`#120033`（非常に暗いパープル）	色付き背景を反転

`bg-white` と `bg-neutral-0` の違い — 重要

Tailwind に組み込まれている white と black は、ダークモードではオーバーライドされません。常に文字どおり #FFFFFF と #000000 に解決されます。

実際の白色を指定する場合は text-white を使います。たとえば、brand-500 の背景に置くボタンのテキストです。どちらのモードでも白のままです。✅
ダークモードで反転させる表面には、bg-white ではなく bg-neutral-0 を使います。たとえば、カード、サイドバー、トップバーの背景です。bg-neutral-0 はライトモードでは #FFFFFF、ダークモードでは #0A0A0A に対応します。✅
ページの背景には bg-neutral-50 を使います。ライトモードでは #FAFAFA、ダークモードでは #171717 に対応します。✅

カードに bg-white を使うと、ダークモードでも明るい白のままになり、まぶしくなります。代わりに bg-neutral-0 を使ってください。

ダークモードでのシャドウ

ダークな表面ではシャドウはほとんど見えません。.dark ブロックではシャドウの不透明度を高め、奥行きを感じられるようにしています。ただし、カードの輪郭には主に neutral-200 の枠線を使ってください。ダークモードでは、控えめなダークグレーの区切り線に対応します。

ロゴ

ダークな表面での使用が承認されている唯一のバリエーション、assets/logo-mono-white.svg を使ってください。

ダークモードで避けること

コンポーネントのコード内でダークカラーを手動設定しないでください。.dark クラスのオーバーライドを利用してください
表面に bg-white を使わないでください。適切に反転するよう bg-neutral-0 を使ってください
大きな色付きの表面に brand-500 を使わないでください。代わりに brand-50 を使ってください（ダークモードでは暗いパープルに対応します）
余白、角丸、タイポグラフィを変更しないでください。空間のシステムはモードに依存しません

アンチパターン（禁止事項）

ボタンにグラデーションを使わないでください。 フラットな単色のみ使用します。
ページの背景に色を付けないでください。 背景は常に neutral-50 または neutral-0 にします。
太いボーダーを使わないでください。 構造上のボーダーは最大 1px です。2px 以上は使用しないでください。
カードに rounded-full を使わないでください。 カードは rounded-lg（10px）にし、円形にはしません。
カスタムフォントを使わないでください。 DM Sans / sans-serif のみ使用します。コードには等幅フォントを使用します。
デスクトップでは、アイコンとラベルを組み合わせたナビゲーションを優先してください。 ホバー時またはフォーカス時にラベル付きツールチップが表示される場合は、アイコンのみのサイドバーも使用できます。
明示的に求められない限り、ダークモードを使わないでください。 デフォルトは常にライトモードです。
静的なモックアップでは、アニメーションするスケルトンやシマー効果を使わないでください。
テキストにドロップシャドウを付けないでください。 例外はありません。
異なる階層で同じボーダー半径を使わないでください。 たとえば、rounded-lg のカードには rounded-lg の子要素ではなく、rounded-sm の子要素を含めます。内側の半径は必ず外側より小さくしてください。
フローティングラベルやラベル代わりのプレースホルダーを使わないでください。 ラベルは必ず入力欄の上に表示します。プレースホルダーはヒントであり、ラベルではありません。フォーカス時に消えると、ユーザーは入力内容を把握できなくなります。
UI に絵文字を使わないでください。 アイコンのみ使用します。唯一の例外はユーザー生成コンテンツです。ユーザーが絵文字を入力した場合は表示します。ただし、ラベル、見出し、ボタン、ナビゲーション項目、プレースホルダー、システムが生成するテキストには絵文字を追加しないでください。

出力前チェックリスト

UI コードを提出する前に、以下を確認してください。

Web アプリケーション向けの追加チェック：

サイドバーが 240px／グループ化されたナビゲーション／アクティブ状態のパターンに従っている
レスポンシブ対応：1280px、768px、375px で動作する

モバイルアプリケーション向けの追加チェック：

iPhone 16 のデバイスフレーム内に表示されている（393×852、外側の半径 40px、ベゼル 8px）
プライマリアクションボタンがセーフエリアの余白を確保したうえで画面下部に固定されている
ナビゲーションにサイドバーではなく、下部タブバーを使用している
ボタンと入力欄の高さが 48px（全体のデフォルトと同じ。モバイル向けの上書きは不要）
ほとんどのタップ対象が 44×44px 以上（密度の高い UI ではより小さくても構いませんが、デフォルトにはしない）
1 列のレイアウトのみを使用している（複数列のグリッドは使わない）
モバイル用の文字サイズを使用している（H1：24px、H2：18px）

Markdown 対応

ログインしてコメント

基本情報

作者: casper-studios
リポジトリ: casper-studios/casper-marketplace
カテゴリ: デザイン・UI
インストール数: 265
GitHub スター: 15

問題を報告