デザインのスキル

アプリ全体のアニメーションを調べ、操作感や性能、アクセシビリティの課題を優先順位付きで整理します。別のエージェントに渡せる具体的な改善計画を作ります。

• アプリ全体の動きを点検したいとき
• 改善箇所に優先順位を付けたいとき
• 別のエージェントへ修正を引き継ぐとき

画面やコードからアニメーションを加えると役立つ箇所を探し、頻度・目的・速度・機能で候補を絞ります。実装はせず、具体的な数値と見送り理由を提案します。

• 既存画面に動きを加える箇所の検討
• ダイアログや通知の動きの具体化
• 動きを付けない操作の判断

指定したUI部品を、レイアウトや操作方法の異なる複数案として試作します。実際に動かせる画面で案を切り替えて比較し、選んだ案を既存コードへ組み込みます。

• 料金カードのレイアウト比較
• 通知の操作方法の試作
• 長押し削除ボタンの動きの検討

QMのWeb画面に操作できるダッシュボードやフォーム、図を重ねて表示し、会話への入力や表示の更新、固定・終了まで扱えるスキル。

• 会話にダッシュボードを重ねたいとき
• フォームやボタンで入力したいとき
• 情報を操作できる図で見たいとき

StripeやNotionなど54の実在サイトを参考に、配色・文字・余白・部品の仕様を使い、指定ブランドの雰囲気に沿ったHTML/CSSページを作るスキルです。

• Stripe風のLPを作りたいとき
• Notion風の記事サイト制作
• Linear風の暗いダッシュボード制作

LPやダッシュボード、試作品、スライドなどを、既存のブランドやデザイン規則に沿って制作し、ブラウザーで表示と操作を確認する手順を整えるスキル。

• ブランドに沿ったLPを作りたいとき
• ダッシュボードや管理画面のデザイン
• ブラウザーで見る試作品やスライドの制作

既存のUIと周辺レイアウトを確認し、見た目や操作上の課題を3点に整理。既存のデザイン規約に沿って、余白や配色、構造の具体的な改善案と変更例を示します。

• 既存コンポーネントを整えたいとき
• 余白や情報の強弱を見直したいとき
• ReactとTailwindの画面改善

デスクトップに設定された画像生成サービスで、イラスト、商品ビジュアル、図解などを作成するスキル。渡した画像の編集・合成や、同じ指示からの複数案作成も扱います。

• イラストや商品ビジュアルの作成
• ラベルや接続関係を含む図解の作成
• 渡した画像の編集・合成

BlenderとUnrealでCARLA用の車両を制作・移行・改善します。実車資料に基づく形状や素材の調整から、車輪・ライト・物理設定、実行時の検証まで扱うスキル。

• 実車資料を基に車両を制作したいとき
• タイヤや素材、車体形状の部分修正
• 車両の移行やUnreal連携の不具合調査

タイトルや構図、画風を指定したプロンプトからカバー画像を生成し、使用した文章も保存します。画像サービスの設定確認や、生成ファイルの検証まで扱います。

• タイトルや画風を指定したカバー作成
• 画像サイズを指定したカバー生成
• 生成画像と使用プロンプトの保存

中国語の記事の要点や流れを、黒いキャラクター「小黑」が動く白地の手描き挿絵にまとめ、挿入位置の提案から画像生成、修正、保存まで扱うスキル。

• 中国語記事の挿絵配置を考えたいとき
• 考え方や流れを比喩で図解したいとき
• 手描き風の本文挿絵を生成したいとき

システム構成や業務の流れをSVGの技術図にし、PNGやオフラインHTMLへ書き出すスキルです。文字や接続関係を検査し、対応する図はGIF動画にもできます。

• システムやクラウドの構成図を作りたいとき
• エージェント連携や業務フローの図解
• PNGやオフラインHTMLで図を共有

SNS画像やブログのメイン画像、サムネイルの要望を具体的な画像生成プロンプトに整え、用途やブランドに合う画像、または生成用の指示文を仕上げるスキル。

• ブランドに合うSNS画像の作成
• ブログ画像やサムネイルの準備
• 構図・配色・画風を比較したいとき

ダッシュボードや管理画面を、利用者の目的と扱う情報に合わせて設計します。画面構成から配色、文字、操作時の状態まで、一貫したルールで整えるスキルです。

• ダッシュボードの情報配置を設計したいとき
• 管理画面の配色や文字を統一したいとき
• 設定画面の操作状態を整えたいとき

Webページやアプリの画面を、目的に合ったデザイン方針から動くコードまで形にします。書体・配色・余白・動きを整え、画面サイズに応じた使いやすさにも配慮します。

• 個性のあるWebページを作りたいとき
• 画面部品のデザインと実装
• アプリ画面のモバイル対応

文章の指示からロゴやイラスト、商品画像などを生成し、既存画像の編集・合成も行います。Hive 経由での生成から、保存画像の受け渡しまでを扱うスキルです。

• ロゴやイラストを作りたいとき
• 商品写真の背景を変えたいとき
• ロゴをモックアップに配置したいとき

フロントエンド開発の各フェーズに向けて、UIの調査と仕様の検証を進め、画面設計の取り決めをまとめた設計仕様書UI-SPEC.mdを作成するスキル。

• 開発フェーズのUI仕様をまとめたいとき
• UIを調査して設計を文書化したいとき
• 作成したUI仕様を検証したいとき

画面やデザインの案を、実装前に使い捨てのHTMLモックアップで試します。毎回2〜3案を比較でき、既存の試作を踏まえた次の検討テーマの提案にも対応します。

• 実装前に画面の方向性を比較したいとき
• 方針が決まった画面を素早く試作
• 既存の試作から次の検討案を探す

実装済みのフロントエンドを見た目の観点から6つの柱で点検し、各項目を4段階で評価したレビュー文書にまとめるスキル。対象フェーズも指定できます。

• 実装済み画面の見た目を点検したいとき
• 特定フェーズのUIレビューを残したいとき
• UIの段階評価を文書化したいとき

画面部品の命名や色・余白のばらつきを点検し、状態や操作方法を文書化します。既存のデザインルールに沿った新しい部品や画面パターンの設計にも使えます。

• 部品の命名や見た目の統一性点検
• 部品の種類や状態を文書化したいとき
• キーボード操作や読み上げ動作の整理

完成したデザインを開発者に渡すための仕様書にまとめます。寸法や色・余白の共通設定、操作時の状態、画面幅ごとの挙動、例外処理まで整理するスキルです。

• デザインを開発者へ引き継ぎたいとき
• 画面幅ごとの表示仕様の文書化
• 読み込み・空・エラー状態の整理

Figmaの画面やスクリーンショットを、使いやすさ、視線の流れ、統一感などの観点でレビューするスキル。良い点と課題を整理し、理由付きの改善案を優先順に示します。

• 画面の初期案をレビューしたいとき
• ナビゲーションや導入手順を点検したいとき
• 色・余白・文字の不統一を探したいとき

ボタン名やエラー表示、初回案内など、画面内の短い文言を作成・レビューします。利用者の状況や文字数に合わせ、推奨案と代替案、選定理由を整理します。

• 分かりやすいボタン名を決めたいとき
• 対処方法が伝わるエラー文の作成
• データがない画面の案内作成

文章やコード、インフラ設定から編集可能な.drawio形式の構成図や業務フローを作るスキル。既存図の更新、構造の検証、画像や文書への書き出しも扱います。

• 説明文から編集可能な図を作りたいとき
• コードやインフラ設定からの構成図作成
• 手動配置を保った既存図の更新