mcpField
A
adobe-xd

adobe-xd

github.com/full-stack-skillsデザイン・UI045 回インストール2 週間前に更新
リポジトリ

adobe-xd について

adobe-xdは、Adobe XDでのUI/UXデザイン、プロトタイプ作成、共同作業に使うスキルです。アートボードやコンポーネント、インタラクション、共有、開発者への引き継ぎを扱います。

主な機能

  1. 01アートボードとコンポーネントの作成
  2. 02リンク付き・アニメーション付きプロトタイプの制作
  3. 03デザインの共有とコメント収集
  4. 04開発者への引き継ぎ用アセットの書き出し

活用シーン

  1. 01Adobe XDでのUI/UXデザイン
  2. 02インタラクションや動きのプロトタイプ制作
  3. 03開発者向けデザイン素材の準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/full-stack-skills/design-skills --skill adobe-xd

インストール後、Claude Code で/adobe-xdを入力して読み込まれたか確認します。

同梱ファイルagents/openai.yamlLICENSE.txt

詳細

このスキルを使うタイミング

次のようなことをユーザーが希望する場合は、このスキルを使ってください。

  • Adobe XD で UI/UX デザイン、プロトタイプ作成、コラボレーションを行う
  • コンポーネント、リピートグリッド、音声、アニメーションのプロトタイプを作成する

このスキルの使い方

  1. 操作:アートボード、コンポーネント、ステートを操作します。プロトタイプのリンクやアニメーションを設定し、共有やコメントを行います。
  2. 連携:Adobe エコシステムやプラグインを利用します。エクスポートや開発者への引き継ぎを行います。
  3. 参考資料:Adobe XD の公式ドキュメントを参照します(注:Adobe は Figma などの代替製品への移行を進めているため、新しいプロジェクトでは評価を検討できます)。

ベストプラクティス

  • コンポーネントとデザインシステムの一貫性を保ち、プロトタイプをクリック可能にして、説明を十分に記載します。
  • 納品用の注釈や画像アセットを用意し、バージョンと権限を管理します。

キーワード

Adobe XD、UI デザイン、プロトタイプ、Adobe

コメント