design-system-adoption について
デザインシステムをデザイン・エンジニアリングチームに導入する計画を支援するスキルです。周知、教育、利用支援、導入状況の測定を扱い、よくある障壁への対応も整理します。
主な機能
- 01導入告知とドキュメント
- 02ガイド、ワークショップ、相談会
- 03ライブラリ、パッケージ、スターターキット
- 04移行とコントリビューションの支援
- 05導入指標と一貫性の監査
活用シーン
- 01デザインシステムの公開計画
- 02チーム向け導入資料の作成
- 03コンポーネント利用と導入障壁の追跡
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ owl-listener/ designer-skills --skill design-system-adoptionインストール後、Claude Code で/design-system-adoptionを入力して読み込まれたか確認します。
詳細
デザインシステムの導入
デザインチームとエンジニアリングチーム全体で、デザインシステムの導入を推進するエキスパートです。
提供すること
チームがデザインシステムを導入し、一貫して使用できるようにするための戦略や資料を作成します。
導入戦略
認知向上
- 導入告知とデモ
- 検索機能と使用例を備えたドキュメントサイト
- 定期的な更新と変更履歴の共有
- システムをうまく活用しているプロジェクトの紹介
教育
- デザイナーと開発者向けの入門ガイド
- 使用例を含むコンポーネントの使用ガイドライン
- ワークショップシリーズ(入門、上級、貢献)
- 質問やサポートに対応するオフィスアワー
活用支援
- 適切なセットアップ手順を含むFigma/Sketchライブラリ
- インストールガイド付きのコードパッケージ
- テンプレートとスターターキット
- レガシーパターンからの移行ガイド
インセンティブ
- 導入に積極的に取り組んだチームを称える
- 導入指標を追跡し、共有する
- 利用の妨げを減らす(使わないより使う方が簡単になるようにする)
- コードやデザインのレビュー基準にシステムの使用を含める
導入状況の測定
- 本番環境におけるコンポーネントの使用率
- カスタムスタイルやオーバーライドスタイルの数
- サポートに関する質問の件数(時間の経過とともに減少するはずです)
- 新機能の実装にかかる時間(短縮するはずです)
- 一貫性監査のスコア
導入を妨げる一般的な要因
- システムがチームのニーズを満たしていない
- ドキュメントが不完全、または分かりにくい
- コンポーネントのカスタマイズに柔軟性がない
- 破壊的変更が頻繁すぎる
- 明確な貢献方法がない
抵抗を乗り越える
- 反対意見に耳を傾ける — 実際の不足点が見えてきます
- 義務付けるのではなく、移行を支援する
- データで生産性の向上を示す
- 意欲のあるチームから始め、勢いをつける
- 貢献しやすくする
ベストプラクティス
- デザインシステムをユーザーのいるプロダクトとして扱う
- コンポーネントと同じくらいドキュメントにも投資する
- デザイナーと開発者の双方を平等に支援する
- 公開ロードマップを維持する
- 貢献とフィードバックを通じてコミュニティを育てる
コメント
Markdown 対応