CSS color-mix()カラーパレット作例｜AIプロンプトで作るインタラクティブUI
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
CSS color-mix() 関数をデモするインタラクティブなカラーパレットを作成。2色を可変比率で混色するスライダー、ライブプレビュー、生成CSSコードを表示。
CSS color-mix() 関数をインタラクティブに体験。2色を選び、スライダーで混合比率を調整すると、ブレンド結果がリアルタイムで表示されます。生成されたCSSコードは自動更新され、そのままコピー可能。
プロンプトの解説
このプロンプトは、CSS の比較的新しい関数である color-mix() の動作を視覚的に体験できるインタラクティブなデモUIを生成させるための作例です。スライダーで混色比率をリアルタイムに操作し、結果をプレビューしながら対応するCSSコードも確認できる構成を、一度の指示でまとめて出力させる点が特徴です。
フロントエンドの学習教材やデザインシステムの検討資料として活用しやすく、HTMLとJavaScriptを組み合わせた単一ファイルの出力を得意とするモデル(GPT-4oやClaude 3.5 Sonnetなど)との相性が良いです。混色モード(in sRGBやin oklch)の切り替え機能を加えるなど、応用の幅も広がります。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選