AIエージェントにダサいテンプレートではなく、適切なデザインを伝える方法
Cursor、Claude Code、その他のコーディングアシスタントを使ってインターフェースを構築しようとしたことがある人なら、誰もが同じ壁にぶつかるはずです。「ネオングローとスムーズなアニメーションを備えた美しいランディングページを作成して」と指示しても、得られるのは典型的なBootstrap風のレイアウトと平淡なグラデーションです。モデルは boilerplate の記述には優れていますが、厳密な制約がないと、トレーニングデータから平均的なビジュアルを生成してしまいます。
デザイナー兼開発者のMeng Toは、Skillsというリポジトリを公開しました。このリポジトリには、AIエージェントと連携するための123の準備されたシナリオが含まれています。核となるアイデアはシンプルです。チャットでの長い抽象的な説明の代わりに、明確なデザインシステム、アニメーションのタイミング、技術的な制約を備えた構造化されたmarkdownファイルをエージェントに 提供します。
プロンプトをリポジトリファイルにする理由
通常、ニューラルネットワークへの指示はノートに保存したり、チャット履歴からコピーしたりします。Meng Toは、プロンプトをコードのように扱うことを提案しています。Gitでバージョンを管理し、フォルダに整理し、必要に応じて 含めます。
リポジトリ内の 各スキルは個別のディレクトリとしてフォーマットされています。その中には、詳細な指示を含むファイルがあります：いつ技術を適用するか、どのステップから始めるか、デフォルトのパラメータ値は何か、そしてエージェントが最もよく失敗する場所はどこか。必要に応じて、ドキュメントへのリンク、詳細な記事、HTML形式のデモが 含まれます。
このアプローチは2つの問題を同時に解決します。第一に、エージェントにスクロールの物理演算を繰り返し説明することに時間を浪費しません。第二に、モデルのコンテキストウィンドウは不必要なノイズで乱雑にならず、エージェントは特定のブロックに対して1つの狭いファイルのみをロードします。
カタログの中身
ライブラリは5つの領域に分かれています。その大部分は、Webデザインとブラウザでの3Dグラフィックに充てられています。
Webデザインとビジュアルエフェクト
このセクションには、複雑なレイアウトとアニメーションのための81の指示が 含まれています。例えば、シェーダーを使用したカーソル軌跡、プログレッシブブラーによる背景ぼかし、純粋なCSSでのマスク、GSAP、Matter.js、Three.js、Vanta.jsなどのライブラリの統合のためのテンプレートが 含まれています。
このようなファイルがあれば、エージェントは「アニメーションを作成して」というようなコマンドだけでなく、具体的なルールを取得できます：トランジションのduration、タイミング用のベジェ曲線、z-indexの設定、モバイルデバイスでのパフォーマンスチェックなど。
リファレンスを使ったワークフロー
レイアウトを手動で説明する代わりに、リポジトリはコンテキスト収集の自動化を提供します：
- 完成したアニメーションの画面録画をフレームに分解し、エージェントが1パスでレイアウトロジックを再現するために使用できる詳細なブリーフを 生成します。
- 既存のWebページを取得し、各ボタン、ホバーエフェクト、WebGLシーンごとに個別のプロンプトに 分解します。
- 複雑な動的ローディングを含む長いランディングページのシームレスなスクリーンショットを作成し、モデルがページ階層全体を一度に把握できるようにします。
- ブラウザスクリプトとプロンプト生成を1つのサイクルにリンクし、他のデザイナーの発見を分析します。
Webゲーム開発
20のスキルを含む別ブロックで、Three.jsとブラウザゲーム開発タスクを カバレッジします。等距離カメラ、エネミーの動作設定、インventory、 combatシステム、スマートフォンのレンダリング最適化のための指示が 含まれています。
メディアとジェネラルデザインの操作
コレクションのごく小さなセクションで、エージェントが適切なアスペクト比、クロップ、プロジェクトのカラーパレットとともにUnsplashやグラフィックサービスから高品質なアセットをフェッチするのを支援します。
コレクションを使用するには、リポジトリをローカルマシンにクローンする必要があります。ファイルはYAMLフロントマターを含むmarkdownとして整理されており、編集と拡張が容易です。各スキルは、コアロジックを壊すことなく、特定のプロジェクトの要件に合わせてカスタマイズできます。
エージェントにSkillsを接続する方法
ファイルは特定のproprietaryユーティリティに結び付けられていません。ローカルフォルダからコンテキストを読み取れる任意のツールで動作します。
Cursorでは、特定のファイルを参照したり、チャットウィンドウで必要なフォルダへのパスを 直接ペーストしたりできます。
Claude Codeでは、ファイルパスはで 指定されるか、指示はワークセッションのコンテキストとしてロードされます。
Codexで作業する場合、コード生成が始まる前にファイルがメモリにロードされるため、エージェントはチェックリストとバリデーションルールに従います。
プロンプト組み立ての主要原則
著者は、リポジトリ全体の構造が基づく4つのルールを 定式化しました：
- 明確な仕様は抽象的な願いより優れています。レイアウトの速度と安定性は、タスク説明の形容詞ではなく、マージン、グリッド、フォントの制約に依存します。
- スクリーンショットとリンクはテキストの段落より正確です。ビジュアルなリファレンスは、レイアウトのリズム、比率、アイコンスタイルを 即座に伝えます。
- プロンプトは価値のある資産です。成功した定式化はファイルに保存し、バージョン管理し、他のプロジェクトで 再利用する必要があります。
- エージェントのスキルはjob descriptionのように機能するべきです。良いファイルは、どの条件でそれを開くか、何を最初に行うか、どのような典型的な間違いを避けるべきかを 直接述べています。
誰がコレクションから恩恵を受けるか
すでにフロントエンドを手で書き、GSAPやThree.jsスタック全体を頭に入れているなら、他の人のルールは 余計に感じるかもしれません。しかし、ニューラルネットワークと組み合わせてプロトタイプ、ペットプロジェクト、クライアントのランディングページを構築しており、一般的なモデルのhallucinationと戦うのに疲れている人々にこのプロジェクトは役立つでしょう。
ゼロから独自の指示を発明する代わりに、Meng Toの準備されたテンプレートを採用し、適切なフォルダをリポジトリのルートにコピーし、プロジェクトのパラメータを調整できます。リポジトリリンク：
関連プロジェクト