OpenDesign

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

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

スマートフォン向けのログイン画面を、単体のHTML試作として作成します。SMS認証やパスワード、外部アカウントでのログインに合わせ、入力エラーや処理中の表示も整えます。

• 電話番号とSMS認証を試作したいとき
• パスワードログイン画面の設計
• 外部アカウントログインの検討

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

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

紙のような背景とパステルカラーのカードを使い、主要指標や分析結果、継続率のグラフを雑誌風の一枚のHTMLレポートに整えるスキル。

• 雑誌風の事業レポート作成
• 経営会議向けの一枚資料作成
• 主要指標と考察をまとめたいとき

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

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

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

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

文章で伝えた内容を手描き風のExcalidraw図にするスキル。アニメーション付きSVG、オンラインの編集リンク、PNG書き出しを用途に応じて利用できます。

• 文章から手描き風の図を作りたいとき
• 図をオンラインで編集したいとき
• 図をPNG画像で書き出したいとき

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

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

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

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

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

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

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

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

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

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

React、Tailwind CSS、shadcn/uiを使い、複数の部品を組み合わせたclaude.ai向けのHTMLアーティファクトを制作するスキル。

• claude.ai用のHTMLを作りたいとき
• 複数部品からなる画面の試作
• Reactとshadcn/uiでの制作

画像の画風変更、背景や不要な物体の除去、指定部分の描き直しに使うスキル。fal.aiで提供されるAIモデルを利用して画像を編集します。

• 画像の画風を変えたいとき
• 画像の背景を除去したいとき
• 不要な物体を消したいとき

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

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

Word文書の作成・編集・分析を支援し、変更履歴やコメント、書式を扱います。デザインの依頼書や原稿を、レビューに回せる文書に整えるスキルです。

• デザインの依頼書をWordで作りたいとき
• 原稿の修正履歴を残したいとき
• コメント付きの確認用文書を用意したいとき

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

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

fal.ai経由でKling O3を使った画像・動画生成につなぐスキル。OpenDesign上で制作計画時に見つけられ、実行には元のバンドルを別途導入します。

• Kling O3で画像を生成したいとき
• fal.ai経由で動画を生成したいとき
• OpenDesignの制作計画への組み込み

ロゴ、配色、書体、画面や印刷物への展開例を一枚の画像にまとめるスキル。ブランドの目的や対象者を踏まえ、統一感のあるデザイン案を視覚化します。

• 新製品のブランドイメージを共有
• 意味のあるロゴ案を検討したいとき
• 配色・書体・使用例をまとめて確認

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

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

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

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

新しいサービスや製品に合うドメイン名の案を出し、.com・.io・.dev・.aiなど複数の末尾で取得できるかを確認するスキル。

• 新サービスのドメイン名を考えたいとき
• 複数の末尾で空き状況を確認したいとき
• 製品名に合うドメインを比較したいとき

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

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

1920×1080の固定キャンバスで、内容に合わせて構成を自由に組むスライド制作スキル。配色や文字サイズを統一し、キーボードで切り替えるHTMLにまとめます。

• 個人の作品集を作りたいとき
• 美術やデザインの授業資料
• 問いや画像が主役の講演資料