読み込み中

デザインシステムのドリフトレビュー

本番公開済みの画面とPRについて、デザインシステムからのドリフトをフラグ付けします。

15 分デザインClaude Cowork
読み込み中

セットアップ

プラグインを試す

Designプラグインには、画面やPRをトークンファイルおよびコンポーネントインベントリと比較するようにすでに構成された/design-systemが付属しています。管理者がプラグインを管理していて、まだ利用できない場合は、この手順をスキップしてください。以下の内容はこれを必須としません。

DesignAccelerate design workflows — critique, design system management, UX writing, accessibility audits, research synthesis, and dev handoff. From exploration to pixel-perfect specs.
追加
/design-systemAudit, document, or extend your design system.
Cowork で開く
/ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.
Cowork で開く

ツールを接続する

Claude Coworkは、お使いのシステムと直接連携することでより強力になります。権限とアクセスはあなたが管理します。ツールアクセスについて学ぶ。

設定するには、Coworkでカスタマイズ → コネクタに移動してください。

GitHub
UIに関わるオープンなPRを読み取り、ドリフトレポートをレビューコメントとして投稿します。
接続
Figma
公開されているライブラリを、トークンとコンポーネントの信頼できる情報源として使用します。
接続
Slack任意
トリアージのため、デザインシステムチャンネルに毎日のドリフトサマリーを投稿します。
接続

作業フォルダを設定する

使用するファイル(本番スクリーンショット、レビュー対象のPR差分、トークンファイル、コンポーネントインベントリ)をマシン上の1つのフォルダにドラッグし、Coworkにそのフォルダを指定してください。Coworkはそこから読み取り、ドリフトレポートをそこに書き戻します。デザインQAを定期的に実行する場合は、そのフォルダからCoworkプロジェクトを作成して、システムソースを常に紐付けておいてください。

Design-QA / Sprint-42
prod-settings-screen.pngApr 27, 2026820 KB
pr-4821-billing-panel.diffApr 27, 202614 KB
tokens.jsonApr 20, 202618 KB
Cowork のチャットバーで:Design-QA / Sprint-42

プロンプト

これをClaude Coworkにコピーする

このフォルダ内の本番公開済みの画面とオープンなPRを当社のデザインシステムと照合してレビューしてください。それぞれについて、トークン、コンポーネント、スペーシング、またはインタラクションパターンからドリフトしている箇所をすべて列挙し、深刻度を評価し、システムに準拠した修正案を提案してください。すでに一致しているものはスキップしてください。

Design-QA / Sprint-42

これが効果的な理由

プロンプト

確認すべき内容を明確にする。 トークン、コンポーネント、スペーシング、インタラクション:チェックリストは明示的です。

プロンプト

各指摘事項に深刻度を求める。 トリアージは今スプリントで何を修正すべきか分かります。

プロンプト

除外すべきものを伝える。 レポートには作業内容のみが含まれ、ノイズは含まれません。

ソース

参照ファイルをフォルダに入れる。 トークンとインベントリは記憶されるのではなく、読み取られます。

より良いドラフトを得る

練習

参考にする例を追加する。 気に入っている例をフォルダに入れると、Coworkはその構成とトーンに合わせます。

練習

不確実な点をフラグするよう依頼する。 「確信が持てない箇所にフラグを付けて」と追加すると、ドラフトをレビューする際に最初に確認すべき箇所が分かります。

Coworkを自分用に活用する

プラグインの/design-systemは汎用的な出発点です。ステップ2で実際にPRに投稿できるようなドリフトレポートが生成されたら、Coworkにあなた独自のバージョンのスキルを作成するよう指示してください。深刻度のしきい値、許容される例外、コンポーネントとコードのマッピング、そしてエンジニアが反応するコメントのトーンを組み込みます。数分の対話で、以降はあなたの基準でスキルが実行されるようになります。

このタスクでこれまで行ったことをスキルにしてください。または、私のフィードバックを反映して/design-systemスキルを編集してください。

Design-QA

再現可能にする

アーティファクトとして共有する

ドリフトはスプリント間で静かに積み重なっていきます。Coworkにレポートをアーティファクトとして公開するよう依頼すれば、デザインシステムチームは1つのリンクを持つことになります。スキルを再実行するか、更新をスケジュールしてください。

そのドリフトレポートをデザインシステムチャンネル向けのアーティファクトとして公開してください。未解決の高深刻度項目の累計を維持してください。

Design-QA / Sprint-42

UIに関わるすべてのPRで実行する

ドリフトはマージ前に検出するのが最も低コストです。プロンプトに/scheduleと入力するか、Coworkサイドバーのスケジュール済みを開いて、カスタマイズしたスキルを1日2回実行するように設定し、オープンなPRと最新の本番スクリーンショットを確認してください。

/schedule 平日の午前10時と午後4時に、「ui」とラベル付けされたオープンなPRと、新しい画面がないかDesign-QA/Sprint-42を確認し、それぞれに/design-systemを実行して、ドリフトレポートをコメントまたは#design-systemに投稿してください。

Design-QA
スケジュールタスクアクティブ
1日2回のドリフトチェック

午前10時と午後4時に、オープンなUI PRとQAフォルダを確認し、/design-systemを実行して、ドリフトレポートをPRコメントまたは#design-systemに投稿します。

平日午前10時・午後4時 · オープンなUI PRとDesign-QA/Sprint-42を確認Cowork で開く

チームメイトと共有する

カスタマイズした/design-systemには、あなたのトークン、コンポーネントマップ、深刻度スケール、例外リストが組み込まれています。これを共有することで、すべてのスクワッドがすべてのPRで同じレビューを受けられるようになり、システムチームが「これはシステムに準拠しているか」のボトルネックになることがなくなります。

デザインQAで何が変わるか