スキルを探す

コードに合わせてFigmaのデザインシステムを作成・更新します。色や余白の共通設定、ライト・ダークモード、部品集と説明ページを、段階ごとに確認しながら整えるスキルです。

• コードから色や余白の共通変数を作る
• ライト・ダークテーマの設定
• 説明付きの再利用可能な部品集作り

コードや説明をもとに、既存のデザインシステムを再利用してFigmaの画面を作成・更新するスキル。共通部品や色・余白・文字スタイルを使い、セクションごとに組み立てます。

• アプリのページをFigmaに再現したいとき
• 共通部品でLPを作りたいとき
• 画面をコードに合わせて更新したいとき

デスクトップ全体、特定のウィンドウ、座標で指定した範囲を画像として保存します。OSに応じた撮影手順と保存先の指定に対応し、画面の確認や共有を支援します。

• デスクトップ全体を画像保存したいとき
• 特定のアプリやウィンドウの撮影
• 座標で指定した範囲だけ保存したいとき

Figmaの指定した画面や部品から、デザイン情報と画像素材を取得してコードに反映します。既存の部品や配色ルールを活用し、元の見た目や振る舞いと照合して仕上げるスキルです。

• Figmaのフレームから画面を実装
• デザイン内の画像やSVG素材の取得
• 既存の部品に合わせたデザイン実装

新機能を利用者の役割や行動ごとに分け、開発項目に整理します。目的の説明、デザインへのリンク、検証可能な受け入れ条件を備えたユーザーストーリーを作るスキルです。

• 新機能を開発項目に分けたいとき
• 検証可能な受け入れ条件の作成
• デザインと利用者の要望の共有

共有・共同作業・紹介など５種類の成長の循環を比較し、製品に合う利用者獲得の仕組みを設計します。実装計画や測定指標、成長予測まで整理するスキルです。

• 利用者獲得につながる製品機能の設計
• 広告依存を減らす成長施策の検討
• 共有・共同作業・紹介の仕組みの比較

新機能の案を、目的・実装内容・受け入れ条件が伝わる作業項目に分解します。事業上の狙いを明確にし、独立して開発・検証できる単位でバックログを整えます。

• 新機能を独立した作業に分解したいとき
• 開発作業の事業上の目的を伝えたいとき
• 検証できる受け入れ条件の作成

新機能を、利用者の状況・動機・望む結果に沿ったジョブストーリーへ分解します。各ストーリーに成果を確認する受け入れ条件と、デザインへのリンクをまとめます。

• 新機能をジョブストーリーに分けたいとき
• 利用状況に沿った開発項目の作成
• 望む成果の受け入れ条件を決めたいとき

Webサイトの移動やフォーム入力、クリック、画像保存、データ抽出をエージェントに任せるスキルです。画面操作の自動化やWebアプリの動作確認に使えます。

• フォーム入力やページ移動の自動化
• 画面保存とページ内データの抽出
• Webアプリの不具合を探したいとき

Webサイトの画面設計から既存アプリへの組み込みまで支援し、配色や部品の規則を生かしたUI改善、プロトタイプ作成、デザイン同期を進めるスキル。

• 既存アプリのLPを改善したいとき
• 既存の規則で管理画面を設計したいとき
• Claude Designと同期したいとき

Figmaの部品設計や自動レイアウト、色・余白の共通管理を支援し、画面幅やテーマに対応するデザインシステムと開発者への引き継ぎを整えるスキル。

• 再利用する部品とvariantsの整理
• 画面幅に応じたレイアウトを作りたいとき
• 色・余白・ライト／ダークの共通管理

実験結果のJSONやCSVから、論文用のグラフとLaTeX比較表を作成します。図ごとの生成スクリプトも保存し、印刷時の読みやすさやデータに沿った説明を確認します。

• 学習曲線を描きたいとき
• 手法比較や要素別の効果検証
• 複数データセットの結果を図に整理

実験データから論文向けのグラフや比較表を作り、書体や配色を統一します。再生成用のスクリプトとLaTeXへの挿入コードも保存し、図の見切れや比較条件を確認します。

• 実験結果から学習曲線を描きたいとき
• 手法比較や構成要素の検証表を作るとき
• 複数データセットの結果を図にまとめるとき

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

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

使うAIツールと目的に合わせ、曖昧な依頼を貼り付けて使えるプロンプトに整えるスキル。文章・画像生成や開発エージェント向けに、出力形式や作業範囲も明確にします。

• 曖昧なアイデアを指示文にしたいとき
• 特定AI向けのプロンプト改善
• 開発エージェントの作業範囲を指定

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

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

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

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

デザインやWebページのアクセシビリティをWCAG 2.1 AAを基準に点検し、配色・キーボード操作・読み上げなどの問題と修正優先度を整理するスキル。

• デザイン引き渡し前の点検
• 文字や操作部品の配色を確認したいとき
• キーボード操作とフォーカスの確認

Figmaやデザイン画像をもとに、既存の部品と色・余白などの共通設定を使ってUIを実装します。指定された画面幅で仕上がりを比較し、差異や未接続部分を報告します。

• Figmaのデザインを実装したいとき
• デザイン画像から画面を作りたいとき
• 既存の部品や共通設定の再利用

検証したい仮説、避けたいリスク、使える時間や予算から、小規模な検証の方法を選びます。技術確認や操作テストなど五つの選択肢を比べ、成功・失敗の基準まで整理します。

• リスクのある案の検証方法選び
• AI機能の実現性確認の計画
• 初期設定の操作テスト選び

Product Designで使う製品URL、Figma、参考画像、ブランド資料や好みを保存・更新します。次回のデザイン作業で参照する前提をそろえ、保存内容の確認にも使えます。

• Product Designの初期設定
• Figmaや製品URLを保存したいとき
• 参考画像やブランド資料の整理

製品のデザイン相談を内容に合う専門スキルへ振り分け、利用者調査や画面の評価、視覚案の検討、試作品の作成・共有へつなぐ案内役のスキル。

• デザイン相談の進め方を決めたいとき
• 製品の操作フローの評価
• 新しい試作品の画面案を検討したいとき

製品の目的や参考画面をもとに、情報の優先順位・レイアウト・操作の流れが異なるデザイン案を画像で作り、比較や修正を通じて実装の方向性を選ぶスキル。

• 既存画面のレイアウト案を比較したいとき
• 新製品の方向性を3案で探りたいとき
• 画面やFigmaを参考に案を修正したいとき

画像やスクリーンショットをもとに、見た目を忠実に再現した画面幅に対応するWeb画面を実装し、主要な操作とブラウザでの表示まで確認するスキル。

• モックアップから動く試作を作りたいとき
• スクリーンショットをWeb化したいとき
• 参考画像からモバイル画面を作りたいとき