実際に使ったのに近い形。物理アルゴリズムは指定せず「リアルに」だけ。あとはAIにまかせる。
パステルカラーのキラキラした水面を、1ファイルのHTMLで作って。 マウスでなぞると波紋が広がって、クリックすると大きな円形の波紋が出る。 水面に花が浮いていて、波紋に合わせてゆらゆら揺れる。 波紋は本物の水みたいにリアルに広がって、だんだん消えていくように。 背景は用意した写真を使って、水面がその写真を歪ませて見せて。 CanvasかWebGLで、スマホでもなめらかに動くように。UIは最小限で上品に。
見た目／操作／技術／UIを構造化。最初のプロンプトを汎用化したもの。これが一番おすすめ。
1ファイル完結のHTMLで、インタラクティブな「パステルの水面」を作ってください。 ビルドツール不要、最初の画面がそのまま体験になるようにします。 【見た目】 - 淡いクリーム／ピンク／ミント／水色／白の、やわらかく上品な配色。ネオン・暗い背景は禁止。 - 透明感のあるツヤツヤの水面。きらめき、ゆるやかな波紋、小さな白いスパークル。 - 用意した写真（背景）を水面が屈折させて見せる。 【インタラクション】 - マウス／指でなぞると、やわらかい波紋が生まれる。 - クリック／タップで、大きな円形の波紋＋スパークルが弾ける。 - 浮いている花や花びらが、波紋に押されて自然に漂う。 - ゆっくり動く陽の光のゆらぎを重ねる。 【技術】 - 波紋は「水っぽく感じる」程度に物理的に説得力を持たせる（実装方法はおまかせ）。 - CanvasまたはWebGL。レイヤー分け（背景／水面／波紋／花／スパークル／UI）。 - スマホ・PC両対応、なめらかに動くよう最適化。 【UI】 - sparkle / ripple / petals / light のスライダー、reset、画像保存。 - 絵文字は使わない。アイコンが要るならMaterial Symbols。テキストは最小限。 手順：①描画方式を決める ②実装する ③バグを確認 ④シニアのクリエイティブ技術者として自己批評 ⑤美しさ・操作感・性能を1回改善 ⑥完成HTMLだけ返す。
できた実装を名指しで指定する版。波動方程式・減衰・勾配屈折を書けば、誰のAIでもほぼ同じ挙動に収束する。
インタラクティブな水面を1ファイルHTMLで作って。波紋は次の方式で実装してください。 - 水面を 160×160 程度のグリッドの高さ場（height field）として持つ。 - 2D波動方程式で毎フレーム更新： next = (上+下+左+右 の平均) × 2 − prev、その結果に減衰係数（0.97〜0.98）を掛ける。 バッファを2枚（current / previous）スワップして使う。 - なぞった位置に小さな盛り上がり、クリック位置に大きな盛り上がりを「drop」として加える （中心が高く外周がコサインで減衰する円）。 - 各セルの高さの勾配（左右差・上下差）を法線とみなし、 背景画像のUVをその勾配でずらして屈折を表現（WebGLフラグメントシェーダー推奨）。 - 波の頂点（勾配が大きい所）にスペキュラのきらめきを乗せる。 - 浮遊物は、その位置の勾配で押し流す。 配色はパステル、UIは最小限、スマホ最適化。CanvasかWebGLで。