name: devteam-design-drift
description: Detect design inconsistencies and drift from the design system. Launches the Design Drift Detector to analyze the codebase for deviations.
argument-hint: [--scope ] [--check <colors|typography|spacing|layout|all>] [--fix] [--threshold <strict|normal|relaxed>]
user-invocable: true
allowed-tools: Read, Edit, Write, Glob, Grep, Bash, Task
model: sonnet
Current session: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_current_session 2>/dev/null || echo "No active session"
Active sprint: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_kv_state "active_sprint" 2>/dev/null || echo "None"
Failure count: !source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh" && get_kv_state "consecutive_failures" 2>/dev/null || echo "0"
DevTeam Design Drift Command
Command: /devteam:design-drift [scope] [options]
Detect design inconsistencies and drift from the design system. Launches the Design Drift Detector to analyze the codebase for deviations.
Usage
/devteam:design-drift
/devteam:design-drift --scope "src/components/"
/devteam:design-drift --check colors
/devteam:design-drift --check typography
/devteam:design-drift --check spacing
/devteam:design-drift --fix
Options
| Option | Description |
|---|
--scope <path> | Limit scan to specific files/directories |
--check <aspect> | Focus on: colors, typography, spacing, layout, all |
--fix | Generate remediation tasks for detected drift |
--threshold <level> | Drift tolerance: strict, normal, relaxed |
Your Process
Phase 0: Initialize Session
source "${CLAUDE_PLUGIN_ROOT}/scripts/state.sh"
source "${CLAUDE_PLUGIN_ROOT}/scripts/events.sh"
SESSION_ID=$(start_session "/devteam:design-drift $*" "design-drift")
log_session_started "/devteam:design-drift $*" "design-drift"
Phase 1: Launch Design Drift Detector
Delegate to the ux:design-drift-detector agent, which will:
- Scan codebase for design token usage
- Compare implementations against design system specifications
- Identify hardcoded values that should use tokens
- Detect inconsistent patterns across components
- Generate a drift report with severity ratings
const result = await Task({
subagent_type: "ux:design-drift-detector",
prompt: `Design drift analysis:
Scope: ${scope || 'full codebase'}
Check: ${aspect || 'all'}
Threshold: ${threshold || 'normal'}
Analyze for:
1. Hardcoded colors/fonts/spacing that should use design tokens
2. Inconsistent component patterns
3. Deviations from established design system
4. Accessibility regressions
5. Cross-platform inconsistencies`
})
Phase 2: Report
Output a drift report showing:
- Number of drift instances found
- Severity breakdown (critical, warning, info)
- Affected files and locations
- Recommended fixes
Phase 3: Remediation (if --fix)
If --fix is specified, create remediation tasks for each drift instance.
See Also
/devteam:design - Coordinate design work
/devteam:implement - Implement design fixes
/devteam:status - Check progress