01 機能概要
高さ表現、コントラスト、メディアの扱い、テーマ選択の動作を含む、ダークパレットへの適応。
Dark Mode Designは既存のライトパレットから始めます。段階的に明るくなるダークサーフェスで高さを表現し、新しい背景に合わせて明るい色、テキスト、ボーダー、ステータス表現を調整します。
ソースには、画像、イラスト、ロゴ、システムのカラースキーム設定、手動切り替えも含まれます。数値の色の例は参考値であり、普遍的な値ではありません。実際のコンポーネントで、ユーザーが見る条件のもとで確認する必要があります。
想定される成果物
既存のセマンティックカラーとコンポーネントの階層を特定します。
単純な反転ではなく、意図した輝度の段階と調整したアクセントを使います。
コンポーネントのコントラスト、ロゴ、画像、自動設定、手動のテーマ選択を確認します。
02 利用場面
既存のライトモードのパレット、コンポーネント例、メディア素材から始めます。ダークモードのコントラスト、テーマ切り替え、画像の扱いは、レンダリングしたインターフェースで確認してください。
03 重要な判断
暗い影が効きにくい場面でも、サーフェスの輝度で階層を伝えられます。
明るすぎる画像や不適切なロゴは、まとまりのあるダークインターフェースを損なうことがあります。
04 依頼例
以下のサンプルブリーフは未テストです。使用前にスキルのセットアップを確認してください。
このタスクのSKILL.mdをdesigner-skillsリポジトリから、お使いのエージェントが対応するスキルの場所に読み込みます。エントリーファイルでは、共通のインストーラーコマンドは定められていません。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md既存のライトモードのパレット、コンポーネント例、メディア素材から始めます。ダークモードのコントラスト、テーマ切り替え、画像の扱いは、レンダリングしたインターフェースで確認してください。
スキルを実行する前に、このブリーフの範囲、素材、制約を調整してください。
dark-mode-designを使って、この既存のライトモードのダッシュボードを適応させてください。サーフェスとテキストをセマンティックに対応づけ、警告色とチャート画像を見直し、システム設定と手動選択を定義します。実際のコントラストの組み合わせを測定し、ダーク用のバリエーションが必要な素材を指摘してください。実際の出力を、次の観察可能な基準に照らして確認します。
OpenDesignは、コーディングエージェント向けのローカルなデザイン作業スペースを提供します。この掲載は、スキルが同梱されていることや、外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。
05 ソースとライセンス
このページは、下にリンクされた固定リビジョンのソースについて説明しています。アップストリームの動作や要件は変更される可能性があります。
9a6930cf84a8高さ表現、コントラスト、メディアの扱い、テーマ選択の動作を含む、ダークパレットへの適応。
リンク先のソースに基づく、OpenDesignによるオリジナルの要約です。リポジトリのスター数は日付時点の人気の目安であり、スキルの利用数や品質スコアではありません。
06 開始前の質問
OpenDesign
ブリーフ、ソース素材、デザイン作業をローカルの作業スペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md