/impeccable colorize
Colorize
モノクロームインターフェースに戦略的なカラーを追加する。けばけばしくならずに。
いつ使うか
/impeccable colorize は「すべてがグレー」に対するカウンターウェイトです。ベージュの壁のように読めるダッシュボード、アクセントのないフォーム、どんなSaaSプロダクトにも見えるコンテンツページ。インターフェースは機能的だが感情的に平坦で、AIカラーパレット(紫からピンクへのグラデーション、シアンのネオン、ダークモードの輝き)に傾かずに温かみを加えたい時に使ってください。
仕組み
スキルはまずブランドカラーが存在すればそれを読み取り、次にカラーが居場所を正当化する場所を決定します。
- 主要アクションはブランド色の最も強い表現を取得します。
- セカンダリアクセントはミュートまたは着色されたバリアントを取得し、2つ目の完全な色ではありません。
- ニュートラルは低彩度(約0.005〜0.01)でブランド色相に向けて着色されます。これはピクセル単位ではほぼ見えませんが、無意識の統一感を生み出します。
- コンテンツカテゴリーは制限された意図的なアクセントシステムを取得し、レインボーではありません。
重要な点として、HSLではなくOKLCHを使用するため、等しい明度ステップが等しく見えます。明度が極端に向かうにつれて彩度は自動的に下がります。これが「計算された」ではなく「配慮された」と感じるカラーを得る方法です。
試してみる
/impeccable colorize the dashboard
期待される差分:
- ブランドカラーをハードコードされたhexから
--color-accent: oklch(62% 0.18 240)に移動 - ニュートラルを0.007の彩度でブランド色相に着色
- プライマリボタンにフルアクセント、セカンダリボタンにink/mist
- チャートシリーズは3つの異なる色相を使用し、すべて一致する明度で視覚的に支配するシリーズがないように
- 空の状態のイラストに柔らかいアクセントのウォッシュを適用
注意点
- ブランド色相なしで実行すること。 Colorizeには出発点が必要です。
PRODUCT.mdに指定がない場合、スキルは質問します。AIカラーパレットのデフォルトから選ばせないでください。 - AIカラーパレット問題を修正できると期待すること。 デザインにすでに紫のグラデーションとシアンネオンがある場合、まず
/impeccable quieterが必要で、その後にcolorizeで再構築できます。 - すでにカラフルなインターフェースに使うこと。 それは
/impeccable quieterの仕事です。Colorizeは追加し、削除しません。