Design on the Flankとは？
Design on the Flankは、Three.js、WebGL、GSAPを使ってFramer Code Componentsを構築するためのAIスキルです。Codex、Claude、Claude Code、またはChatGPTと組み合わせることで、文章による説明やビジュアルリファレンスから、3Dシーン、シェーダーエフェクト、スクロール連動アニメーション、カスタムインタラクションを作成できます。
生成された各コンポーネントは、Framerにコピーできる完全なTSXファイルとして提供されます。コンポーネントの設定はFramerのPropertiesパネルに公開されるため、コードを編集せずにコンテンツ、色、画像、モーションパラメータを変更できます。
主な機能
- 3Dグラフィックス：商品シーン、パーティクルシステム、マテリアル、ライティング、マウスやタッチによるインタラクションを作成できます。
- WebGLエフェクト：画像の歪み、リップル、トランジション、カスタムシェーダーエフェクトを構築できます。
- GSAPモーション：タイムライン、テキストエフェクト、トランジションシーケンス、スクロール位置に連動したアニメーションを使用できます。
- Framer連携：レスポンシブレイアウト、Property Controls、Framerで直接使用できるコンポーネントを生成できます。
- コンポーネント編集：既存のコンポーネントを拡張したり、依頼された範囲外の設定を維持したまま問題を修正したりできます。
AIプラットフォームを選択
このプロジェクトは複数のAIワークフローに対応しています。普段使用しているツールに合うものを選択してください。
- Codex：AIにスキルのインストールを依頼します。Codexインストールガイドを参照してください。
- Claude：スキルパッケージをダウンロードし、ClaudeのSkillsセクションに追加します。Claudeインストールガイドも参照してください。
- Claude Code：作業環境にスキルをインストールするようAIに依頼します。Claude Codeガイドに従ってください。
- ChatGPT：スターター知識ファイルをダウンロードして会話に添付します。ChatGPTガイドを参照してください。
Codexでスキルをインストール
最も簡単なセットアップは、リポジトリから直接スキルをインストールするようCodexに依頼することです。
Cài skill Design on the Flank từ https://github.com/Chien1618/design-on-the-flank/tree/main/skills/design-on-the-flankインストール後、新しい会話を開始し、作成したいFramerコンポーネントを説明します。上記の依頼はプロジェクトのREADMEに合わせてベトナム語で書かれていますが、同じワークフローを好みの言語に合わせて使用できます。
ChatGPTで知識ファイルを使用
ChatGPTでは、スターター知識ファイルを会話に添付してから、作成したいコンポーネントを説明します。Framerで公開したいビジュアルの動作、インタラクションモデル、設定を含めてください。
ChatGPTから追加のドキュメントを求められたり、リンク先のリソースを開けなかったりした場合は、要求されたファイルをダウンロードして同じ会話に添付してください。プロジェクトには詳細なChatGPTガイドがあります。
Framerコンポーネントをステップごとに作成
- 希望する結果を説明する。ビジュアルエフェクト、ユーザーインタラクション、Framerで調整可能にしたいパラメータを説明します。参考画像、動画、既存コードを提供することもできます。
- 完全なコードを依頼する。完全なTSXファイル、またはコンポーネントに追加リソースが必要な場合は完全なコードのひな形をAIに依頼します。
- コードをFramerに移す。Framer Code Componentを作成し、サンプルコンテンツを生成されたコードに置き換えて、コンポーネントをページに追加します。詳しい手順はFramer連携ガイドを参照してください。
- カスタマイズしてテストする。Propertiesパネルで公開された設定を調整し、Previewを開いてアニメーション、スクロール、マウス入力、タッチ入力、レスポンシブ動作をテストします。
効果的なプロンプトを書く
優れたプロンプトでは、必要な見た目とコントロールの両方を説明します。コンポーネントの役割、アニメーションの動作、インタラクションモデル、Propertiesから編集可能にする値を指定してください。
たとえば、次のように3Dヒーローセクションを依頼できます。
Dùng Design on the Flank tạo hero sản phẩm 3D cho Framer, chuyển góc nhìn theo cuộn và cho phép chỉnh model, ánh sáng, nội dung trong Properties.英語では、Framer向けの3D商品ヒーロー、スクロールに応じて変化するカメラアングル、Propertiesで編集可能なモデル、ライティング、コンテンツ設定を依頼する内容になります。追加の例は、プロジェクトのサンプルプロンプトガイドで確認できます。
外部アセットを使用
一部のコンポーネントには、3Dモデル、画像、その他の非公開データが必要です。その場合は関連するアセットをAIに提供し、生成されたコードに含まれるセットアップ手順に従ってください。必要なリソースを設定するまで、アセット依存のコンポーネントが動作すると判断しないでください。
コンポーネントをFramerに追加したら、生成されたコードで公開されている設定にPropertiesを使用します。コンポーネントによって、コンテンツ、色、画像、モーションパラメータなどを設定できます。
高度なヒント
インタラクションを正確に説明する
Three.jsやWebGLのコンポーネントでは、マウス、タッチ、スクロール位置、またはそれらの組み合わせのどれに反応させるかを明確にします。生成されるアニメーションが意図した動作と一致するよう、エフェクトがどのように開始し、変化し、終了するかを説明してください。
編集可能な設定と実装の詳細を分離する
FramerのPropertiesパネルで利用できるようにする値をAIに伝えます。これにより、TSXコンポーネント内の実装を変更せずに、コンテンツやビジュアルパラメータを調整できます。
編集時に既存の設定を保持する
既存のコンポーネントの変更をAIに依頼する際は、対象となる機能やバグを明確にし、関係のない設定は保持するように依頼します。Design on the Flankは、依頼した変更以外の設定を変えずに、コンポーネントの拡張や問題の修正を行えるよう設計されています。
Previewでテストする
Framer Previewを使って、レスポンシブレイアウト、スクロールトランジション、ポインター操作、タッチ操作、アセットの読み込みを確認します。変更が必要な場合は、確認した問題と望ましい結果を、続けて送るリクエストで説明してください。
トラブルシューティングとドキュメント
よくある問題については、プロジェクトのトラブルシューティングガイドとよくある質問を参照してください。ドキュメントには、生成したコードをFramerに移行するための手順も掲載されています。
Design on the Flankには、Framer LabsのFramerおよびThree.jsに関する知識と、公式のGreenSock GSAPスキルが組み込まれています。使用する前に、プロジェクトの利用規約と第三者帰属情報を確認してください。
まとめ
Design on the Flankは、Three.js、WebGL、GSAPを使ったFramer Code Componentsの作成に、実用的なAI支援ワークフローを提供します。スキルをインストールするか、そのナレッジファイルを添付し、実現したい体験を説明して、生成されたTSXをFramerにコピーします。その後、PropertiesパネルとPreviewを使って結果を調整できます。