スキルを探す

OD Libraryに保存済みの画像やロゴ、スクリーンショットを検索し、選んだ素材を現在のプロジェクトへコピーして、制作中のページに組み込むスキル。

• 以前保存した画面画像の再利用
• 保存済みロゴをページに入れたいとき
• 手持ちのメイン画像を探したいとき

Figmaのデザインを、元の見た目に忠実な本番向けコードへ変換するスキル。フレームをフロントエンド担当のAIエージェントへ渡し、画面の実装に使えます。

• Figmaの画面を実装したいとき
• デザインをAIエージェントへ引き継ぐ
• デザインの見た目をコードで再現

アニメーションを使ったHTMLプレゼンテーションを作るスキル。見た目のプレビューを確認しながら、オンライン講演や埋め込み用の発表資料を制作できます。

• オンライン講演のスライド作成
• Webページへの発表資料の埋め込み
• 操作できる説明資料を作りたいとき

Webサイトや業務画面を、用途に合う見た目と動くコードまで仕上げるスキル。文字組み、配色、レイアウトに加え、スマートフォン表示や操作時の状態も整えます。

• 方向性のあるランディングページ制作
• 日常業務向けダッシュボードの設計
• 既存UIの見た目と操作を整えたいとき

CSVやJSONのデータを、新聞記事風の見出しと段階的なアニメーション付きの図表にします。折れ線・棒・範囲帯で、動画やSNS向けに結論を伝えます。

• 動画でデータの推移を伝えたいとき
• SNS用の図表カードを作りたいとき
• CSVやJSONを図表にしたいとき

写真をもとに、Funko PopやPop Mart風の動くGIFステッカーを作るスキル。MiniMax APIを使い、チャット用スタンプやアバター集の制作に使えます。

• 写真から自分用のチャットスタンプ制作
• 玩具風の動くステッカーを作りたいとき
• 写真をもとにしたアバター集の制作

告知やメッセージを、アプリアイコンと見出しを備えたmacOS風の通知バナーに整えます。動画への重ね表示や製品予告、SNS画像に使えるHTMLを作成します。

• 動画に通知バナーを重ねたいとき
• 製品公開の予告を作りたいとき
• SNS用の告知画像作成

Figma Plugin APIのスクリプトを実行し、キャンバスへの書き込みや内容の確認、変数の操作、デザインシステムに関わる作業を進めるスキル。

• スクリプトでキャンバスに書き込みたいとき
• Figmaのキャンバス内容を確認したいとき
• 変数やデザインシステムを扱いたいとき

Flutterアプリにアニメーション効果や画面遷移、動きを実装し、iOS・Android向けアプリでモーションデザインを取り入れる作業を支援します。

• Flutterにアニメーションを加えたいとき
• 画面遷移の動きを実装したいとき
• iOS・Android画面の動きの実装

温かみのあるモノトーンと文字の強弱、広い余白を使い、カードのグリッドや淡い差し色で、雑誌のように情報を整理したミニマルなWeb画面を設計するスキル。

• ミニマルなプロダクト画面を試作したいとき
• 機能紹介カードの非対称グリッド配置
• 書体・余白・配色を統一したいとき

Webページの要素やSVGに、移動・回転・フェードなどの動きを実装します。GSAPの基本APIを使い、速度変化や時間差、画面幅と動きを減らす設定への対応も扱います。

• Webページに移動やフェードを付けたいとき
• 複数要素を時間差で動かしたいとき
• 画面幅に応じて動きを変えたいとき

プレゼンや文書に使う画像・スクリーンショットの解像度、シャープさ、明瞭さを改善するスキルです。実行には配布元の関連ファイル一式を導入します。

• プレゼン用画像を整えたいとき
• 文書用スクリーンショットの明瞭化
• 画像の解像度を上げたいとき

fal.aiを使ったリアルタイム・ストリーミング画像生成で、ムードボードの方向性探しや下書きの別案づくりを支援し、制作初期の案を繰り返し試すスキルです。

• ムードボードの方向性を探したいとき
• 下書き画像の別案を作りたいとき
• 制作初期の案を繰り返し試したいとき

ポスターやイラストなどの静止画作品を、デザインの考え方や美的な原則に沿って制作するスキル。成果物をPNG画像やPDF文書として作成できます。

• ポスターを制作したいとき
• イラストを作りたいとき
• 静止画作品をPNGやPDFにしたいとき

p5.jsで、計算ルールと乱数を使ったアートを制作します。乱数の初期値を固定して同じ描画を再現でき、ポスターや動きを感じる静止画、画面構成の試作に使えます。

• ルールからポスターを作りたいとき
• 動きを感じる静止画の制作
• アートの画面構成の試作

公開サイトの配色・フォント・ロゴ・画像・文体を実測して整理し、ブランドガイドやプレビュー付きの再利用可能なデザインシステムにまとめるスキル。

• サイトの配色・フォント・ロゴの整理
• 参考サイトからブランドガイドを作りたいとき
• ブランドを表す画像の収集

fal.aiのAIモデルを使って画像や動画を生成するためのスキル。Flux、SDXL、ideogramなどを対象に、エージェントから生成を依頼する入口になります。

• fal.aiで画像を生成したいとき
• fal.aiで動画を生成したいとき
• 画像生成モデルを指定したいとき

製品紹介や分析結果を、16列のグリッドと単一のアクセントカラーで整えるHTMLスライド作成スキル。22種類の固定レイアウトで、実データや比較を伝えます。

• 製品ロードマップを発表したいとき
• KPIやランキングを報告したいとき
• 改善前後の違いを説明したいとき

金融や戦略の数値を伝える3枚のスライドを、黒・温かみのある紙色・ライム色で作成します。大きな数値カードと規則的な配置を保ち、操作できる単一HTMLにまとめます。

• 金融指標を3枚のスライドで伝える
• 数値が目立つ戦略資料を作りたいとき
• 統一した配置で文章と数値を更新する

文章や知識を、小红书風の複数枚のカードにまとめるスキル。表紙から要点、まとめまでを大きな文字と柔らかな配色で構成し、投稿用にスクリーンショットを撮れます。

• ノウハウを知識カードに整理
• 小红书向けのカルーセル投稿作成
• WeChatの朋友圈向け画像作成

暗い背景とセリフ体を使い、ファッション誌のような３ページの映像的な演出を作ります。文字の段階表示や章の切り替えを備えた単一のHTMLにまとめます。

• ファッション誌風の動く紹介を作りたいとき
• 短い物語を３ページで見せたいとき
• 既存のブランド表現を暗い誌面に反映

広告ライブラリから競合の広告を抽出・分析し、訴求メッセージやクリエイティブの方向性を調べるスキル。自社の広告表現を検討するための材料を整理します。

• 競合広告の訴求を調べたいとき
• 競合の広告表現を分析したいとき
• 自社広告の企画材料を集めたいとき

ブラウザー上のページを調べ、クリックや入力、スクリーンショット撮影、情報抽出を行います。OpenDesignのローカルプレビューを中心に、Webアプリの動作や品質を確認します。

• OpenDesignのプレビュー確認
• Webアプリのクリックや入力のテスト
• ページや要素の画面撮影

CSV・Excel・JSONの実データを読み取り、重要指標のカード、複数のグラフ、表、文章による気づきを備えた、見やすいレポートページを作るスキル。

• 成長データを週報にまとめたいとき
• 重要指標と前年同期比の共有
• グラフと元データ・方法の共有