메뉴
k8oが好むUIデザインの方針。UIコンポーネントの作成、画面デザイン、スタイリングの判断時に使用する。ArteOdysseyを使うプロジェクトではコンポーネントやトークンの具体的な使い方を、それ以外のプロジェクトではデザインの方向性を提供する。自由にデザインを作るとき、見た目の判断に迷ったとき、UIレビュー時にも使用する。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Preview generated Markdown (plans, design notes, reviews, research reports) in the user's browser. Use when sharing long, structured output — documents with headings, tables, code blocks, or Mermaid diagrams — that is hard to read in the terminal.
テストの記述ガイドライン。テストを書くとき、テスト設計を考えるとき、テスト戦略を議論するときに使用する。テストの目的、構成、書き方の原則に基づき、信頼性が高く保守しやすいテストを書く。
OpenAI Codex CLIを使ってコードや計画に対する外部視点のレビューを取得する。計画の妥当性確認、複雑な問題で行き詰まったとき、アーキテクチャ判断のセカンドオピニオン、難しいデバッグのときに使用する。「Codexに聞いて」「セカンドオピニオンが欲しい」などのリクエストにも対応する。
freshターミナルエディタでファイルを開く操作。ユーザーが「freshで開いて」「このファイルをエディタで見たい」「編集したい」と言ったとき、cmux経由でfreshを別ペインに起動してファイルを開く。
cmuxターミナル内での操作スキル。CMUX_*環境変数が存在する場合、cmuxのCLIコマンドを使う前に必ずこのスキルを読む。ペイン分割、コマンド送信、ブラウザ自動化、通知、サブエージェントの隔離実行など、cmux操作全般で使用する。「別ペインで開いて」「横に表示して」「ブラウザで確認して」などのときにも使用する。
Conventional Commitsに従ったアトミックなgitコミットを作成する。変更を論理単位に分割し、独立してrevert可能なコミットを生成する。コードの変更をコミットしたいとき、コミットメッセージを作りたいときに使用する。
| name | k8o-design |
| description | k8oが好むUIデザインの方針。UIコンポーネントの作成、画面デザイン、スタイリングの判断時に使用する。ArteOdysseyを使うプロジェクトではコンポーネントやトークンの具体的な使い方を、それ以外のプロジェクトではデザインの方向性を提供する。自由にデザインを作るとき、見た目の判断に迷ったとき、UIレビュー時にも使用する。 |
k8oが好むデザインの方針。
触れるものは柔らかく、読むものは端正に。
LinearやCal.comのような方向性。余白がしっかりあり、情報の構造が明確で、視線が自然に流れる。レイアウトとタイポグラフィで魅せ、装飾に頼らない。ただし「ただ情報を載せただけ」に見えるのはNG。意図とこだわりが感じられるデザインを目指す。
色ではなく、余白のゆとりと形の柔らかさがこのデザインの個性を作る。色は穏やかで目に優しいことが条件であり、色そのものが主役ではない。
すべてを同じトーンにしない。要素の役割に応じてシャープさと柔らかさを使い分ける。
| 要素の種類 | 方向性 | 理由 |
|---|---|---|
| フォーム（input, textarea, button） | 柔らかい（大きな角丸、ピル型ボタン） | ユーザーが触れる場所は親しみやすく |
| カード・コンテナ | 柔らかい（rounded-xl〜2xl、ふんわり影） | コンテンツの器は穏やかに |
| 情報表示（Alert, Badge） | 現行のまま（過度に丸めない） | 情報の明確さを優先 |
| ナビゲーション（Tabs, Breadcrumb） | シャープ（現行のまま） | 構造を示す要素は端正に |
| 軸 | 好み |
|---|---|
| ページ背景 | 薄いグレー（bg-subtle）。カードが白で浮く構造 |
| カード | 白背景、大きめ角丸、ふんわり影で奥行き |
| コントラスト | 穏やか。攻撃的でない、目が休まる |
| 余白 | たっぷり。p-8〜p-10、gap-8〜gap-16 |
「AIが生成したUI」に見えるパターンを徹底的に避ける:
/90, /80）シンプルなだけで工夫のないUIも避ける:
60-30-10の比率:
色は穏やかで控えめに。鮮やかなパレットは引き出しとして持つが、UIに出る色はセマンティックトークンで抑えたトーンにする。色で魅せるのではなく、空間と形で魅せる。
leading-relaxed（1.625）で日本語の可読性を確保uppercase や letter-spacing の拡大をしないgap-6 を標準間隔、gap-8 / gap-10 をセクション区切りにbg-subtle、カードが白で浮く構造を基本にするSeparator + 余白を使うease-out のみ。spring / bounce は使わないtransition-colors duration-150 ease-outprefers-reduced-motion を尊重する| 状態 | 表現 |
|---|---|
| ホバー | 控えめな背景色変化 |
| フォーカス | focus-visible:ring-2（マウスユーザーにはリング非表示） |
| アクティブ | やや濃い背景 |
| 無効 | opacity-50 cursor-not-allowed |
| エラー | ボーダーとテキストで伝える |
focus-visible を使い、focus は使わない。
ArteOdysseyが使えるプロジェクトでは、そのコンポーネントとセマンティックトークンに従う。具体的な使い方はArteOdyssey側のドキュメントを参照。
上記の方針を自由に適用する:
bg-teal-500）ではなく、意味のある名前をつける