Devin に自社のデザインシステムを学習させる
スキャナがどれだけ有用かは、チェック対象となるルールの質にかかっています。自分で Knowledge エントリを書く代わりに、Advanced Devin にデザインシステムのソースファイルを指定して、Knowledge を自動生成させましょう。Advanced Devin を開き、次のようなプロンプトを貼り付けます:Devin はソースファイルを読み込み、ルールを抽出し、次のような Knowledge エントリを作成します:
- Color tokens — “すべてのカラーは
src/tokens/colors.tsに定義されたトークンを使用しなければなりません。#3B82F6のような生の 16 進数値は絶対に使用しないでください。代わりにcolors.primary.500を使用してください。” - Spacing grid — “すべてのスペーシングは 4px グリッドに従わなければなりません。
src/tokens/spacing.tsに定義されたスペーシングトークン（例:spacing.2= 8px,spacing.4= 16px）を使用してください。margin: 10pxのようなピクセル値のハードコードは行わないでください。” - Component library — “
src/components/ui/にある共有コンポーネント（<Button>、<Avatar>、<Modal>、<Card>など）を必ず使用してください。その場限りの代替コンポーネントは作成しないでください。”
チケット作成用に Linear を連携する
日次スキャンでは検出した各違反ごとに Linear のチケットが作成されるため、スケジュールを設定する前に Linear を連携してください。
- Settings > Integrations > Linear に移動し、Connect をクリックします
- Devin を承認し、アクセスさせるチームを選択します
- Linear で “Design Debt” というプロジェクトを作成します
- “design-fix” というラベルを作成します — 最後のステップで自動修正をトリガーするためにこれを使用します
日次スキャンのスケジュール設定
Settings > Schedules に移動し、Create schedule をクリックします。次のように設定します:
- Name: Design system scanner
- Schedule type: Recurring
- Frequency: 毎日午前9:00（チームのタイムゾーン）
- Agent: Devin
- Email notifications: Always（毎朝結果が届くように）
| Ticket | File | Violation | Suggested fix |
|---|---|---|---|
| DD-101 | src/pages/Settings.tsx:42 | Hardcoded #3B82F6 | colors.primary.500 に置き換える |
| DD-102 | src/components/UserCard.tsx:18 | Custom avatar component | src/components/ui/ の <Avatar> を使用する |
| DD-103 | src/pages/Dashboard.tsx:95 | margin: 10px | spacing.3 を使用する（12px、最も近い 4px グリッド値） |
| DD-104 | src/views/Profile.tsx:33 | No mobile breakpoint | グリッドレイアウトに md: ブレークポイントを追加する |