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 > Knowledge で生成されたエントリを確認し、先に進む前に文言やトリガーを必要に応じて調整してください。
2

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

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

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

Settings > Schedules に移動し、Create schedule をクリックします。次のように設定します:
  • Name: Design system scanner
  • Schedule type: Recurring
  • Frequency: 毎日午前9:00 (チームのタイムゾーン)
  • Agent: Devin
  • Email notifications: Always (毎朝結果が届くように)
次の内容をプロンプトとして貼り付けます:入力ボックスから直接このスケジュールを作成することもできます。プロンプトを入力し、three-dot menu (⋯) をクリックして、Schedule Devin を選択します。詳しくは Scheduled Sessions を参照してください。毎朝スキャンが実行されたあと、Design Debt プロジェクトには次のようなチケットが作成されます:
4

自動修正PRでループを完結

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