메뉴
ArteOdyssey デザインシステムに従ったフロントエンドUI作成。 「柔らかな余白と静かな洗練」を原則とするミニマルなデザイン。 Use when: - ArteOdyssey を使った React コンポーネントやページを作成するとき - k8o の Web サイト用の UI を実装するとき - ミニマルで統一感のあるインターフェースが必要なとき 特徴: Teal/Cyan カラー（OKLCH）、控えめなアニメーション、ゆったりした余白、柔らかい角丸、日本語最適化
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | arte-odyssey-design |
| description | ArteOdyssey デザインシステムに従ったフロントエンドUI作成。 「柔らかな余白と静かな洗練」を原則とするミニマルなデザイン。 Use when: - ArteOdyssey を使った React コンポーネントやページを作成するとき - k8o の Web サイト用の UI を実装するとき - ミニマルで統一感のあるインターフェースが必要なとき 特徴: Teal/Cyan カラー（OKLCH）、控えめなアニメーション、ゆったりした余白、柔らかい角丸、日本語最適化 |
ArteOdyssey デザインシステムに沿った UI を作成するためのスキル。
まず、作ろうとしている UI の目的・トーン・制約を明確にする。
「触れるものは柔らかく、読むものは端正に」
色ではなく、余白のゆとりと形の柔らかさがこのデザインの個性。色は穏やかで目に優しいことが条件であり、主役ではない。
すべてを同じトーンにしない。触れる要素は柔らかく、情報を示す要素は端正に。
| 要素 | 方向性 |
|---|---|
| フォーム（input, textarea, button） | 柔らかい（大きな角丸、ピル型ボタン、ゆったりパディング） |
| カード・コンテナ | 柔らかい（rounded-xl〜2xl、ふんわり影） |
| Alert, Badge | 現行のまま（情報の明確さ優先） |
| Tabs, Breadcrumb | シャープ（構造を示す要素は端正に） |
npm install @k8o/arte-odyssey
import '@k8o/arte-odyssey/styles.css';
import { ArteOdysseyProvider, Button } from '@k8o/arte-odyssey';
DO:
bg-bg-subtle（薄いグレー）gap-6〜gap-10）DON'T:
DO:
font-medium が 450 であることを活かした繊細な強調DON'T:
DO:
bg-bg-subtle, text-fg-mute 等）DON'T:
bg-primary-bg — bg-bg-mute を使う/90)で状態表現 — 専用トークンを使う→ カラー詳細
DO:
p-8 を標準パディングとする（フォーム・カード内）mt-2 近い、mt-4 標準、mt-8 セクション間）DON'T:
gap-1 のような極端に狭いスペーシング→ スペーシング詳細
DO:
transition-colors を基本にするfocus-visible:ring-2 focus-visible:ring-border-info でフォーカス表現hover:bg-bg-mute で穏やかなホバーDON'T:
| アンチパターン | ArteOdyssey での代替 |
|---|---|
| パープルグラデーション | Teal/Cyan のフラットカラー |
| Card in Card（入れ子カード） | Separator + 余白で区切り |
| グレー背景にグレーテキスト | text-fg-base / text-fg-mute のコントラスト確保 |
| bounce / spring アニメーション | transition-colors duration-150 ease-out |
| Inter フォント | Noto Sans JP / M PLUS 2 |
| 過剰な glassmorphism | border + subtle な背景色 |
| 情報の詰め込み | 余白を活かした疎な配置 |
color と variant で統一されたスタイル。
// プライマリアクション
<Button color="primary" variant="contained">保存する</Button>
// セカンダリアクション
<Button color="gray" variant="outlined">キャンセル</Button>
// テキストのみ
<Button variant="skeleton">詳細を見る</Button>
シャドウで浮かせるのが基本。ページ背景 bg-subtle の上に白カード。
<Card appearance="shadow">
<div className="p-8">カードのコンテンツ</div>
</Card>
<FormControl
label="メールアドレス"
isRequired
renderInput={(props) => (
<TextField {...props} placeholder="example@mail.com" />
)}
/>
bg-teal-500）ではなくトークン（bg-primary-bg）