LP用シェーダー集のURLを渡し、「一覧とスクショを出して」とエージェントに頼む

どんな問題を解決するか / いつ使うか

ランディングページに背景やヒーローの動きを足したいが、候補が多すぎて選べないとき。コードを書く前に「使える演出のカタログ」をエージェントに作らせたいとき。

やり方

1. シェーダー集のリポジトリを用意する（投稿で紹介されていた例: shader-effects-inc/shaders — React / Vue / Svelte / Solid / JS / Framer 向けのWebGPUコンポーネント集）。
2. Codex または Claude に、次のような短い指示を出す（投稿の骨子を自分の言葉で再構成）:

このリポジトリを読んで:
https://github.com/shader-effects-inc/shaders

使えるシェーダーの一覧と、それぞれの見た目が分かるスクリーンショット（またはプレビュー説明）を出して。
自分のサイトのヒーロー／背景に使えそうなものを選ぶ材料にする。

3. 出力された一覧から2〜3個に絞り、DESIGN.md や実装プロンプトに「使う演出名」だけを書いて実装させる。

注意点・対応状況

• WebGPU対応ブラウザが前提。ターゲットユーザーの環境によってはフォールバック（静止画・CSSのみ）を用意する。
• 演出過多は「AIっぽいLP」に見えやすい。Webの「AIっぽさ」は、コードを書く前にデフォルト見た目を捨てさせるプロンプトで潰す とセットで「1画面に1演出まで」など上限を決める。
• ライセンスとバンドルサイズも実装前に確認する。

出典

• 投稿者: @MengTo
• 投稿: @MengTo · 2026-10-10
• 収集日: 2026-10-11（JST）