CSS color-mix()ライブパレットをAIで作るプロンプト作例

このプロンプトは、CSSのcolor-mix()関数を視覚的に体験できるインタラクティブなパレットツールの生成を指示します。カラーピッカーを操作するだけでリアルタイムに混色結果が確認でき、生成されたCSSコードスニペットをそのまま自分のプロジェクトに流用できる点が実用的です。

フロントエンド開発の学習や、デザインシステムのカラートークン設計に役立てられます。ChatGPTやClaudeなどコード生成が得意なモデルで出力したHTMLファイルをブラウザで開くだけで動作します。混合比率スライダーの追加やoklabなど別の色空間への対応など、応用の幅も広がります。