デザインのスキル

スクリーンショットやデザイン画像から配色・文字・余白のルールを読み取り、共通の設定値で管理するUIコードに再構成します。見た目の比較とアクセシビリティの検証も行います。

• スクリーンショットからUIを実装したいとき
• 画像から配色や文字・余白の規則を抽出
• 明暗テーマのコントラストを確認したいとき

企業やサービスのロゴ、AWS・Azure・GCPの構成図用アイコンをSVG形式で探し、背景に合う種類を選んで、埋め込み用URLやSVGコードとして取得します。

• READMEへのブランドロゴ追加
• 連携サービス紹介用のアイコン収集
• クラウド構成図のアイコン収集

Figmaの指定ノードからReactやHTMLのコードを複数設定で生成し、ローカルで見比べながらデザインと実装を反復調整するスキルです。

• Figmaからの生成コードを確認したいとき
• ReactとHTMLの出力を比較したいとき
• スタイル設定ごとの見た目を比べたいとき

Animaの利用状況を集計し、キャッシュや変更部分だけの再生成で重複作業を抑え、チーム規模に合うプラン選びを支援するスキルです。

• Animaの生成利用量を把握したいとき
• 変更箇所だけコード生成したいとき
• チーム規模に合うプランを検討するとき

FigmaのデザインからReactやHTMLのコードを生成するため、Anima SDKをサーバー側に導入し、AnimaとFigmaの認証情報を設定して接続を確認します。

• Figmaからコードを生成する環境の構築
• AnimaとFigmaの認証設定
• Figmaファイルへの接続確認

FigmaのデザインからReactやHTMLのコードを生成する工程を、入力確認から生成物の検証・レビューまで段階的に設計するスキルです。

• FigmaからReactへの構成を設計したいとき
• デザイン連携のチーム手順を整えたいとき
• 生成コードの検査工程を決めたいとき

クリエイティブ職向けに、オンライン応募で読み取られやすい履歴書と、作品や個性を伝えるデザイン版の使い分けを考えるスキルです。

• 応募形式に合う履歴書を選びたいとき
• 作品集と履歴書をつなげたいとき
• デザイン職向けの見せ方を考えたいとき

Nothingのデザインシステムに沿って、文字の階層や余白、モノクロの色使いを整えたUIを設計するスキルです。

• Nothing風のダッシュボードを設計したいとき
• 画面にNothingのデザインを適用したいとき
• モノクロUIの文字や余白を整えたいとき

操作や配置の変化など、スクリーンショットだけでは伝わりにくいUIの動きを、再利用できる部品を組み合わせたSVG図として作成するスキルです。

• ドラッグ操作を図で説明したいとき
• UIの変更前後を並べて示したいとき
• 配置や基準点のルールを可視化したいとき

Gridaのエディター上でSVGを作成・編集し、キャンバスへの反映を見ながら、構文エラーの修正や既存形式に沿った調整を進めるスキルです。

• Gridaで新しいSVGを作りたいとき
• 既存のSVGを編集したいとき
• SVGの構文エラーを直したいとき

画像やメモを無限キャンバス上に配置するGridaの`.canvas`ボードを、マニフェストと文書ファイルを編集して作成・整理するスキルです。

• 自由配置の作業ボードを作りたいとき
• 参考画像やメモを並べたいとき
• 生成画像を既存ボードに追加したいとき

Gridaのスライドモード用`.canvas`バンドルを、16:9のSVGを1枚ずつ並べて作成・編集する手順を案内します。

• Gridaでプレゼン資料を作りたいとき
• ピッチデッキや講演スライドを作るとき
• テンプレートを使って既存内容を置き換えるとき

前例のないUI操作や設計判断に直面したとき、複数の試作を並べて比較し、決定前に選択肢を検討する考え方を示します。

• 新しいUI操作を設計したいとき
• 複数のアーキテクチャ案を比べたいとき
• 使い心地を試作で確かめたいとき

機能やUIの優先順位を決めるとき、実装の手軽さより利用者の使いやすさを重視し、中心の操作を磨く判断を支援します。

• 機能の優先順位を決めたいとき
• UIの使いやすさを見直したいとき
• 中心となる操作の流れを磨きたいとき

`.drawio`形式の図をXMLで編集し、配置や矢印、ラベルを調整してPNGに変換します。AWSアイコンの検索や図の見直しにも対応します。

• 構成図の配置を整えたいとき
• 図をPNGに変換して確認したいとき
• AWSアイコンを使った図を作りたいとき

色や文字、余白などのデザイントークンと再利用できるUI部品を整理し、アクセシビリティ指針やドキュメントを含むデザインシステムを作成・改善します。

• アプリ共通のデザインシステムを作りたいとき
• 色や余白のトークンを整理したいとき
• 再利用するUI部品の構成を決めたいとき

Excalidrawの図を読み解く・作成する・変更する作業をサブエージェントに任せ、構成要素や関係を要約して扱うスキルです。

• 図の構成と接続関係を把握したいとき
• 既存の図に要素を追加したいとき
• 説明をもとに図を作成したいとき

Three.jsゲームのHUDやメニュー、設定画面などを、ゲームの状態や画面サイズに合わせて設計し、文字の収まりやタッチ操作も確認します。

• ゲームのHUDやメニューを設計したいとき
• モバイル向けの画面配置を整えたいとき
• 文字切れやUIの重なりを確認したいとき

Three.jsゲーム向けに、Gemini画像APIでコンセプト、テクスチャ、背景、UI素材などを生成・編集し、2D画像素材として保存するスキルです。

• 3D化に渡すキャラクター参照画像を作りたいとき
• ゲーム用テクスチャやデカールを用意したいとき
• 背景やメニュー画面の画像を作りたいとき

Excalidrawのキャンバスで図を作成・編集し、配置を整えて画像やファイルに書き出せます。Mermaidからの変換やスクリーンショットでの見た目確認にも対応します。

• システム構成図を作りたいとき
• 既存の図の配置や色を直したいとき
• Mermaid図をキャンバスに変換したいとき

手描きやイラストの画像生成に使うプロンプトを、指定した画風のテンプレートと手順に沿って組み立てます。画像そのものは生成しません。

• 指定した画風の画像プロンプトを作りたいとき
• 使える画風から候補を選びたいとき
• 画風に沿った呼び出し情報を整えたいとき

研究発表や学位審査の内容を整理し、構成や図の見せ方、発表時間を考慮したスライド作りを支援します。PowerPointやLaTeX Beamer向けの指針も含みます。

• 学会発表の構成を考えたいとき
• 論文の内容を発表用にまとめたいとき
• 学位審査のスライドを準備するとき

OpenRouter Image APIを通じて、写真やイラスト、ロゴなどの画像を生成・編集します。参照画像を使った合成にも対応し、用途に応じてモデルや画像の条件を指定できます。

• プレゼン用のイラストを作りたいとき
• ロゴやビジュアル素材を生成したいとき
• 参照画像を指示に沿って編集したいとき

統計や手順、比較、年表などの情報をインフォグラフィックにまとめ、用途に応じたデザインで生成し、品質レビューを経て改善します。

• 統計を図で伝えたいとき
• 年表や手順を視覚化したいとき
• 製品や選択肢を比較したいとき