OpenDesign

提供したHTMLやテキストをiPhoneとMacBookの画面内に配置し、ガラス風のハイライトや床面の反射を添えた立体的な製品紹介ページを作るスキル。

• 製品発表でアプリ画面を見せたいとき
• モバイルとデスクトップのデザイン展示
• テキストやデータをアプリ風に見せたいとき

文章をOpenAIのAPIと標準搭載の音声で読み上げ音声に変換します。解説のナレーションや講義の音声版、短い動画に添える声のトラック作成に使えます。

• 解説のナレーションを作りたいとき
• 講義の文章を音声化したいとき
• 動画に添える声を作りたいとき

Google Stitchで画面を生成する際のデザイン方針をDESIGN.mdにまとめます。配色、書体、配置、動き、避ける表現を具体化し、画面間の統一に使います。

• Google Stitchの画面に共通ルールを作る
• 配色や書体、部品の振る舞いを文書化
• モバイル表示と動きのルールを定義

UI/UXの設計パターンを探す際に、導入候補をエージェントへ知らせるカタログ項目です。検索データやテンプレートは含まず、実際の利用には配布元の一式が必要です。

• UI/UX設計の参考候補を探したいとき
• 必要なファイルの導入状況確認
• 配布元の導入方法を知りたいとき

入力した文章やデータを、いいね・リポスト・閲覧数付きのX風投稿カードに整え、動画への重ね表示や画像共有に使う単一HTMLを作るスキル。

• 動画に投稿カードを重ねたいとき
• 印象的な言葉を共有用カードにしたいとき
• 入力データを短い投稿文にまとめたいとき

PDFからのテキスト抽出、新しいPDFの作成、フォームの扱いを支援。プレスリリースやブランドに合わせた一枚資料、印刷用の制作物づくりに使えます。

• 既存PDFから文章を取り出したいとき
• プレスリリースをPDFにしたいとき
• ブランドに合わせた一枚資料の作成

スライドや文書、レポート、HTMLのランディングページに、フォントと配色のテーマを適用します。10種類のプリセットから見た目を整えるためのスキルです。

• スライドに既存テーマを適用したいとき
• 文書やレポートの見た目を統一
• HTMLのLPのフォントと配色を設定

リリースの追加機能、修正、互換性を損なう変更、既知の問題、更新手順を1ページのHTMLに整理します。未提供の情報も明示し、変更内容を共有する文書を作ります。

• バージョン更新の案内を作りたいとき
• 追加機能と修正を一覧で共有したいとき
• 互換性の変更と更新手順の説明

既存のWebサイトやアプリの画面を点検し、文字・配色・配置・操作時の表示を改善します。現在の技術構成と機能を保ちながら、段階的に整えるスキル。

• 既存サイトのデザインを点検したいとき
• 定型的な画面パターンを見直したいとき
• 読み込み中・空データ・エラー表示の改善

PowerPoint資料の読み取り、新規作成、既存スライドの調整を支援。経営層向け資料や研修、製品レビューに使うレイアウトやテンプレートも扱います。

• 経営層向けの説明資料作成
• 研修用スライドの準備
• 製品レビュー資料の作成

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

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

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

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

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

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

暖色の光漏れ、35mmフィルム風の粒子、大きなセリフ体を組み合わせ、映画風の冒頭画面や章タイトルを作るスキル。単一のHTMLにまとめます。

• ドキュメンタリーの冒頭画面制作
• 個人短編のタイトル画面作成
• 映画風の章タイトル制作

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

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

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

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

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

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

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

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

画像内の物体の検出や領域分け、文字の読み取り、内容説明をfal.aiの画像認識モデルで行うスキル。画像についての質問にも答え、写っている情報を確認できます。

• 画像内の文字を読み取りたいとき
• 物体を検出して領域を分けたいとき
• 画像の内容説明や質問をしたいとき

OpenAIのImage APIを使い、UIモックアップやアイコン、イラスト、SNSカードなどの画像を生成・編集するためのスキルを案内するカタログ項目です。

• UIモックアップ画像の制作
• アイコンやイラストの生成
• SNSカード画像の準備

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

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

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

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

既存の動画にAIで加工を施し、見た目の変更、高解像度化、背景の除去、音声の追加を行うスキルです。fal.ai上で提供される動画モデルを利用します。

• 既存動画のスタイルを変えたいとき
• 動画を高解像度化したいとき
• 動画の背景を除去したいとき

GSAPのプラグインを使い、文字やSVGの動き、ドラッグ操作、レイアウト切り替えを実装するスキルです。用途に合う機能の選択から登録、設定、後始末まで扱います。

• 見出しを一文字・一行ずつ動かしたいとき
• SVGの描画や図形変形を加えたいとき
• 慣性のあるドラッグ操作を作りたいとき