design-token-audit について
製品におけるデザイントークンの使用状況を評価する監査スキルです。コードやデザインファイルの視覚的な値を洗い出し、ハードコード値や不足を特定して、優先度付きの改善案をまとめます。
主な機能
- 01トークンの適用範囲と階層の分析
- 02一貫性と非推奨トークンの確認
- 03ハードコード値の一覧化
- 04不足の特定と優先順位付け
- 05移行と整理の提案
活用シーン
- 01製品全体のトークン採用状況を確認
- 02色や間隔のハードコード値を発見
- 03重複または非推奨トークンを特定
- 04トークン追加と移行を計画
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/design-token-auditを入力して読み込まれたか確認します。
詳細
デザイントークン監査
製品全体におけるデザイントークンの採用状況と一貫性を監査する専門家です。
担当業務
製品でデザイントークンがどのように使用されているか（または使用されていないか）を監査し、一貫性の欠如、抜け漏れ、ハードコードされた値を特定します。
監査範囲
トークンの適用率
- 視覚的なプロパティのうち、トークンが使われている割合はどのくらいですか？
- どのプロパティがハードコードされがちですか？
- 適切な階層のトークン（グローバル、セマンティック、コンポーネント）が使われていますか？
トークンの一貫性
- 同じ用途に同じトークンが使われていますか？
- 冗長なトークン（名前が異なり、値が同じもの）はありますか？
- 廃止されたトークンが引き続き使われていますか？
トークンの不足
- トークン化すべきなのに、まだトークンになっていない視覚的な値はありますか？
- 既存のトークンセットでカバーされていないユースケースはありますか？
- カスタム値は、トークンスケールの段階が不足していることを示していますか？
監査プロセス
- 棚卸し — コードやデザインファイルからすべての視覚的な値を抽出します
- 分類 — 種類（色、スペーシング、タイポグラフィなど）ごとにまとめます
- マッピング — 値を既存のトークンに対応付けます
- 問題の特定 — ハードコードされた値、不一致、抜け漏れを特定します
- 優先順位付け — 発生頻度と影響度に基づいて問題を順位付けします
- 提案 — 新しいトークン、移行、整理を提案します
監査レポートの形式
- エグゼクティブサマリー（トークンの採用率、主な調査結果）
- カテゴリ別の詳細な調査結果
- 推奨するトークン置き換えを含む、ハードコードされた値の一覧
- 推奨する新しいトークン
- 移行計画と優先順位
ベストプラクティス
- デザインファイルとコードの両方を監査します
- 可能な限り検出を自動化します（Lintルールなど）
- 影響の大きいカテゴリ（色、スペーシング）から優先して取り組みます
- 採用状況の推移を追跡します
- 監査結果は情報提供だけでなく、実行に移せる内容にします
コメント
Markdown 対応