Browse commands

/impeccable colorize

Colorize

モノクロームインターフェースに戦略的なカラーを追加する。けばけばしくならずに。

いつ使うか

/impeccable colorize は「すべてがグレー」に対するカウンターウェイトです。ベージュの壁のように読めるダッシュボード、アクセントのないフォーム、どんなSaaSプロダクトにも見えるコンテンツページ。インターフェースは機能的だが感情的に平坦で、AIカラーパレット(紫からピンクへのグラデーション、シアンのネオン、ダークモードの輝き)に傾かずに温かみを加えたい時に使ってください。

仕組み

スキルはまずブランドカラーが存在すればそれを読み取り、次にカラーが居場所を正当化する場所を決定します。

  1. 主要アクションはブランド色の最も強い表現を取得します。
  2. セカンダリアクセントはミュートまたは着色されたバリアントを取得し、2つ目の完全な色ではありません。
  3. ニュートラルは低彩度(約0.005〜0.01)でブランド色相に向けて着色されます。これはピクセル単位ではほぼ見えませんが、無意識の統一感を生み出します。
  4. コンテンツカテゴリーは制限された意図的なアクセントシステムを取得し、レインボーではありません。

重要な点として、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は追加し、削除しません。