Skip to main content
手動でセットアップしたくないですか？このページへのリンクをDevinのセッションに貼り付け、すべての設定を行うよう依頼してください。
1

Devin に自社のデザインシステムを学習させる

スキャナがどれだけ有用かは、チェック対象となるルールの質にかかっています。自分で Knowledge エントリを書く代わりに、Devin にデザインシステムのソースファイルを指定して、Knowledge を自動生成させましょう。新しい 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> など) を必ず使用してください。その場限りの代替コンポーネントは作成しないでください。”
Settings → Resources → Knowledge で生成されたエントリを確認し、先に進む前に文言やトリガーを必要に応じて調整してください。
2

チケット作成用に Linear を連携する

日次スキャンでは検出した各違反ごとに Linear のチケットが作成されるため、自動化を設定する前に Linear を連携してください。
  1. Settings > Connections > Linear に移動し、Connect をクリックします
  2. Devin を承認し、アクセスさせるチームを選択します
  3. Linear で “Design Debt” というプロジェクトを作成します
  4. “design-fix” というラベルを作成します — 最後のステップで自動修正をトリガーするためにこれを使用します
詳しいセットアップ方法については、Linear integration を参照してください。
3

日次スキャンのスケジュール設定

サイドバーの Automations に移動し、Create automation をクリックします。次のように設定します:
  • Name: Design system scanner
  • Trigger: Schedule を展開し、Every day — 午前9:00 (チームのタイムゾーン) を選択します
  • Email notification: Notifications の下で、Always に設定した Email notification を追加します (毎朝結果が届くように)
次の内容をプロンプトとして貼り付けます:Automations ページのチャット入力欄で自動化の内容を自然な文章で説明すれば、Devin が設定を生成してくれます。詳しくは Schedule triggers を参照してください。毎朝スキャンが実行されたあと、Design Debt プロジェクトには次のようなチケットが作成されます:
4

自動修正 PR で対応を完結

スキャナーの出力を信頼できるようになったら、同じ実行内で違反の修正までDevinに行わせるようプロンプトを変更します — 別のトリガーは不要です。スキャン用プロンプトの末尾に修正ステップを追加します:これで全体のループが自動で回ります: scan → ticket + fix PR → review。毎朝、違反レポートと、それらを修正するPRの両方が揃った状態で確認できます。見つかったすべての違反の週次サマリーを生成するには、フォローアップとして次を実行します: