system-deconstruction について
system-deconstructionは、デザインシステムを層ごとに分析するスキルです。トークン、コンポーネント、パターン、レイアウトを確認し、定義と実際の製品との隔たりも調べます。
主な機能
- 01トークン・コンポーネント・パターン・レイアウトの評価
- 02層内および層間の一貫性確認
- 03間隔・書体・色の品質指標の確認
- 04独自コンポーネントや挙動の不一致の検出
活用シーン
- 01製品とデザインシステムの適合性監査
- 02間隔や意味色の不一致の発見
- 03コンポーネントの状態と構成の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/system-deconstructionを入力して読み込まれたか確認します。
詳細
システムの分解
デザインシステムを分解し、あらゆる判断の背景を理解します。
使い方
/system-deconstruction会話にシステム分析の制約を適用します。
制約
システムのレイヤー
- 各レイヤーを個別に特定し、評価する必要があります。
- トークンレイヤー：色、間隔、角丸、シャドウ、文字サイズの段階
- コンポーネントレイヤー：ボタン、入力欄、カード、モーダル、ナビゲーション
- パターンレイヤー：フォーム、テーブル、ダッシュボード、設定、オンボーディング
- レイアウトレイヤー：グリッド、ブレークポイント、密度モード
- 各レイヤー内およびレイヤー間の一貫性を確認する必要があります。
品質の指標
- すべてのコンポーネントで間隔の尺度が一貫している
- 数学的な比率に従った文字サイズの段階
- 明確に区別され、役割が重複しないカラーパレット
- コンポーネントを予測どおりに組み合わせられる
- 状態が場当たり的でなく、体系的に網羅されている
品質に関する警告
- システムに適合しない独自のコンポーネントが3つを超える
- 互いに近いものの一致しない間隔の値（15pxと16pxが並んでいるなど）
- コンテキストによって異なる意味的な役割を持つ色
- 見た目は似ているのに動作が異なるコンポーネント
アンチパターン
- 実際の使用状況ではなく、ドキュメントに基づいてデザインシステムを評価する
- システムが定義するものと、製品で実際に提供されるものとの隔たりを無視する
- システムを神聖視する（システムは製品に奉仕すべきであり、その逆ではありません）
コメント
Markdown 対応