デザインのスキル

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

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

モバイルアプリの画面案や操作の流れを画像で作成。iOS・Androidなどの特徴を踏まえ、文字の読みやすさや配色、複数画面の統一感を整えます。

• アプリ企画を複数画面で可視化したいとき
• 初回利用の案内画面を考えたいとき
• ログインと復旧画面を検討したいとき

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

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

ランディングページなどのWebデザイン案を、セクションごとに独立した横長画像で生成。配色をそろえながら構図や余白、ボタンの見せ方を変え、実装の参考に使えます。

• LPをセクション別に検討したいとき
• 冒頭の構図を検討したいとき
• 開発者に参考画像を共有したいとき

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

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

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

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

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

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

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

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

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

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

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

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

四半期の振り返りや今後の計画を、青・オレンジ・クリーム色のレトロなスライドにまとめ、表紙・重点項目・工程表の3枚を単一のHTMLで作るスキル。

• 四半期の振り返り資料制作
• チームの重点項目を共有したいとき
• ロードマップとKPIの提示

既存のWeb画面に、ボタンの反応や状態の切り替えを伝える控えめなアニメーションを加えます。文章やレイアウトを保ち、動きを減らす設定にも対応します。

• ボタンに操作の反応を加えたいとき
• 画面内の状態変化を伝えたいとき
• 主要な内容の登場演出を整えたいとき

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

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

Markdownやメモを、雑誌のように読みやすく整えた長文HTML記事に仕上げます。大きなタイトルと一列の本文に、引用やコードの専用スタイルを組み合わせます。

• Markdownを雑誌風の記事にしたいとき
• メモからエッセイを整えたいとき
• 長文ニュースレターのデザイン

文章や画像をもとに、fal.aiで3Dモデルを生成するためのスキル。ゲーム素材、ARでのプレビュー、商品の試作イメージ、立体のコンセプト作りに使えます。

• ゲーム向け3D素材を生成したいとき
• ARプレビュー用モデルの作成
• 商品の試作イメージ作り

雑誌の誌面と電子ペーパーを思わせる横長スライドを作ります。10種類のレイアウトと5種類の配色で、主張やデータを紙の印刷物のような見た目にまとめます。

• 主張を雑誌風の資料で伝えたいとき
• 研究結果や重要な数値の共有
• 章立てのある発表資料の作成

企業文化や行動指針を伝える3枚構成のHTMLスライドを作成します。バーガンディと淡いピンク、控えめな金色を使い、大きな文字とタグ、カードで要点を整理します。

• 企業文化を紹介したいとき
• 8つの行動指針を共有したいとき
• スタジオの特徴をタグで示したいとき

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

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

実装済みのUIを見た目の面から点検し、コード修正まで進めるスキル。変更を小さな単位でコミットし、修正前後のスクリーンショットで公開前の仕上がりを確認します。

• 公開前のUIを点検したいとき
• 見た目の点検結果に基づく修正
• UI修正前後のスクリーンショット比較

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

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

ボタンや通知などの細部を見直し、操作に合った動きと反応を設計するスキルです。アニメーションの要否からCSS実装、アクセシビリティまで検討します。

• アニメーションの要否を判断したいとき
• ボタンや通知の操作感を整えたいとき
• UIコードを変更前後で比較したいとき

曖昧なデザインの要望を、配色・書体・レイアウトなど８つの観点で具体化します。実装の基準となる仕様書とHTMLプレビューを作り、補った初期値も明示します。

• 曖昧なデザイン要望を具体化したいとき
• LPの配色・書体・余白の設計
• HTMLで見た目を確認したいとき

見た目の要望を伝えるプロンプトに、デザイン仕様やUI/UXの用語を補い、画面づくりやデザインからコードへの実装で使う依頼文を具体化するスキル。

• 見た目に関する依頼を具体化したいとき
• デザインから実装への依頼文の整理
• UI/UXの用語を依頼文に補いたいとき

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

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