claude-designlisted
Install: claude install-skill yusei531642/vibe-editor
# Claude 公式風デザインガイド (Vibe-Editor 用)
Claude.ai 本体の CSS 変数実測 + Claude Code CLI の視覚言語観察をベースに、Vibe-Editor (Tauri + React) へ「翻訳」したガイド。
**いつ使うか**: UI コンポーネント新規作成 / 既存スタイル刷新 / 新テーマ追加 / エージェント発話装飾 / トースト・モーダル等の見た目判断全般。
**使い方**: このファイルを読んだ上で、下記トークン・パターンを `src/renderer/src/styles/tokens.css` と機能別 CSS (`styles/components/*.css`) に反映。値は「実測 or 近似」を明記してある箇所を信頼していい。
---
## 0. 哲学 (判断に迷ったら戻る)
1. **Warm, not neutral** — グレーは色相 45–60° 寄りの warm。純中立グレー/青みグレーは禁止
2. **Hairline borders, no shadows** — 1px + アルファ 12–15% のボーダー中心。shadow は modal/dropdown 限定
3. **Typographic hierarchy** — アイコンや色より、フォントファミリー差 (sans / serif) とウェイトで情報階層を作る
4. **Single accent** — terra cotta `#d97757` を「少面積で」。大面積塗りは NG
5. **Form over color for states** — 成功/失敗は色だけでなく記号形状 (✓/✗, ⏺ の位置) でも識別可能に
6. **Breathing space** — 罫線で囲まず空白でグルーピング。`gap` を太らせる
---
## 1. カラートークン
Claude.ai の実 CSS 変数から抽出 (HSL→hex)。`tokens.css` に以下を追加してプロジェクト全体で参照する想定。
```css
:root {
/* Brand */
--claude-brand: #d97757; /* terra cotta / Claude Orange */
--claude-brand-strong: #c6613f; /* hover / pressed */
--claude-brand-glow: rgba(217, 119, 87, 0.12); /* focus ring / subtle bg */
/* Accents (用途限定) */
--claude-accent-blue: #3886e5; /* info */
--claude-accent-violet: #7261e0; /* Pro / premium バッジのみ */
/* Semantic */
--claude-success: #578a00; /* オリーブ寄りの green */
--claude-warning: #a86b00; /* 飽和低めマスタード */
--claude-danger: #cf3a3a;
/* Light surfaces (warm off-white 階段) */
--claude-bg-0: #ffffff;
--claud