スキルを探す

文章や参考画像からCodex向けの動くペットを作り、姿の一貫性や背景の透過を確認しながら、アニメーション用画像と設定ファイルをまとめて出力するスキル。

• 文章からCodexペットを作りたいとき
• キャラクター画像をペット化したいとき
• 動きごとの姿の違いを修正したいとき

Google Geminiの画像生成APIを使い、UIの完成イメージやアイコン、イラストなど、画面や制作物に使うビジュアル素材を作るスキル。

• UIの完成イメージを作りたいとき
• デザイン用のアイコン生成
• 制作物に使うイラスト生成

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

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

Webサイトのデザイン画像を先に生成し、文字・余白・配色・配置を分析して画面に実装します。セクションごとの見本を使い、小型ノートPCでも読みやすい構成を目指します。

• 画像を見本にしたLP制作
• 小型画面でも読みやすいヒーロー制作
• 統一感のあるポートフォリオ制作

質問と回答を折りたたみ表示し、検索やカテゴリで絞り込めるFAQページを作成。サービスに合う質問内容から問い合わせ先への案内まで、単一のHTMLにまとめます。

• SaaSのヘルプページを作りたいとき
• 料金やアカウントの質問整理
• ネットショップのFAQ検索ページ作成

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

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

GSAPのアニメーションで使う数値変換や範囲制限、ランダム化を実装・レビューします。スクロール量に応じた変化や、一定間隔への吸着、複数要素の扱いを支援します。

• スクロール量を移動や回転に変換
• アニメーションの値を範囲内に制限
• 位置や色にランダムな変化を追加

VueやSvelteなどでGSAPのアニメーションを実装・レビューするスキルです。画面要素の表示後に動きを作り、対象範囲の限定から削除時の後始末まで扱います。

• VueやSvelteに動きを追加したいとき
• 部品削除時の後始末を確認したいとき
• アニメーションの対象範囲を限定したいとき

画像や動画の解像度を上げたいときに、fal.ai上のAI超解像モデルを利用するためのスキル。実行には、元の配布一式を別途導入して使います。

• 画像の解像度を上げたいとき
• 動画を高解像度化したいとき
• AI超解像処理を依頼したいとき

心理学と行動科学の考え方を文章やデザインに取り入れ、関心を引く導入、情報の伝え方、価格の見せ方を見直すスキルです。販促表現を検討する際に使えます。

• 関心を引く導入文を整えたいとき
• 情報の伝え方を見直したいとき
• 価格の見せ方を改善したいとき

コードベースをもとにFigmaのデザインシステムライブラリを作成・更新します。実装済みの部品と、デザイン側で参照するライブラリを揃える作業に使えます。

• コードからFigmaライブラリを作りたいとき
• 実装に合わせたデザインライブラリの更新
• デザインの参照資料と実装を揃えたいとき

要素を抑えた画面構成で、見た目の整ったランディングページやWebサイト、アプリのUIを作成します。OpenAIのフロントエンド制作指針を利用するスキルです。

• 控えめな構成のLPを作りたいとき
• 見た目の整ったWebサイト制作
• アプリのUIを作りたいとき

コードや文章の説明をもとに、Figmaの画面を作成・更新するスキル。デザインシステムの部品と、色や余白などの共通設定を使ってアプリ画面を再現します。

• アプリのコードをFigmaに移したいとき
• 文章の説明から画面を作りたいとき
• 共通部品を使った画面の更新

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

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

Figmaのデザイン部品とコードの部品をCode Connectで関連付け、共通のデザインルールや部品の更新をコード側へ自動反映するためのスキル。

• Figmaとコードの部品を関連付けたいとき
• デザインシステムの更新を反映したいとき
• Code Connectを導入したいとき

GSAPで複数のアニメーションの順序や重なりを組み立て、開始位置の指定、まとまりごとの入れ子化、再生・停止・逆再生まで扱うための実装支援スキル。

• 複数の動きを決めた順番で再生したいとき
• 開始時刻を調整して動きを重ねたいとき
• 動きをまとめて再生制御したいとき

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

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

Figma DesignやFigJamに空の新規ファイルを作成します。デザインシステムの整備やワークショップを、エージェントで進める際の最初の準備に使えます。

• 空のFigma Designを作りたいとき
• ワークショップ用のFigJam準備
• デザインシステム作業の初期準備

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

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

幾何学パーツが組み上がるロゴに光の演出を加え、ブランド名や短いメッセージ、行動を促す案内を順に表示します。動画の片尾向け演出を単一のHTMLで作るスキルです。

• ブランドを伝える動画の片尾制作
• 締めにロゴとメッセージを表示したいとき
• 片尾にサイトやSNSの案内を載せたいとき

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

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

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

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

流体のように揺れる背景に大きな見出しや短いメッセージを重ね、動画の冒頭、ランディングページのメインビジュアル、ポスターに使える単一HTMLを作ります。

• 短いメッセージ付きの動画冒頭を作りたいとき
• ランディングページのメインビジュアル制作
• 流体背景のポスターを作りたいとき

ReactやNext.jsでGSAPのアニメーションを実装し、対象要素の指定から更新時・コンポーネント削除時の後片付けまで整えるスキル。

• Reactの画面に動きを加えたいとき
• コンポーネント削除時の後片付け
• アニメーションの対象範囲の見直し