让 Devin 学习并掌握你的设计系统
扫描器的效果取决于它所检查的规则质量。与其自己编写 Knowledge 条目，不如将 Advanced Devin 指向你的设计系统源代码文件，让它自动生成 Knowledge。打开 Advanced Devin，并粘贴如下提示：Devin 会读取这些源代码文件，提取规则，并创建类似下面这样的 Knowledge 条目：
- Color tokens — “所有颜色都必须使用
src/tokens/colors.ts中的 token。绝不能使用原始的十六进制值，例如#3B82F6。请改用colors.primary.500。” - Spacing grid — “所有间距都必须遵循我们的 4px 栅格系统。使用
src/tokens/spacing.ts中的间距 token（例如，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” 的标签——你将在最后一步使用它来触发自动修复
设置每日扫描计划
Navigate to Settings > Schedules，然后点击 Create schedule。按如下方式进行配置：
- Name: Design system scanner
- Schedule type: Recurring
- Frequency: Daily at 9:00 AM（你团队所在的时区）
- Agent: Devin
- Email notifications: Always（这样你每天早上都能看到结果）
| Ticket | File | Violation | Suggested fix |
|---|---|---|---|
| DD-101 | src/pages/Settings.tsx:42 | 硬编码 #3B82F6 | 将其替换为 colors.primary.500 |
| DD-102 | src/components/UserCard.tsx:18 | 自定义头像组件 | 使用 src/components/ui/ 中的 <Avatar> 组件 |
| DD-103 | src/pages/Dashboard.tsx:95 | margin: 10px | 使用 spacing.3（12px，最接近的 4px 网格值） |
| DD-104 | src/views/Profile.tsx:33 | 缺少移动端断点 | 为网格布局添加 md: 断点 |