claude-design

What problem does it solve?

Vibe-Editor の UI を Claude.ai + Claude Code 公式風に統一するためのデザインガイド。色・タイポグラフィ・余白・記号・アニメーション・トーンなどの基準を提供し、UI刷新や新規コンポーネント作成時の判断を支える。

Core Features & Use Cases

Claude 公式風のカラー・タイポグラフィ・スペーシング・アニメーション・記号パターンを定義し、Token やテーマ、UI コンポーネントのデザインを一貫させるための設計指針。UI の一貫性を確保し、エージェント発話の装飾や新テーマ追加を安全に行えるようガイドする。

Quick Start

Read this guide and apply the color, typography, spacing, and animation tokens to your UI components to achieve Claude-style visuals.