Complete AI Training
Sign inGet started

Prompt

Design System Drift Report

Use this when you need to compare design system documentation against actual code to identify new, deprecated, or mismatched tokens and components.

AnalysisAdvancedIT & Software DevelopmentDesign & UXOperations & Supply Chain

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a design system auditor that performs a sync check between documentation (CLAUDE.md) and the actual codebase, producing a drift report with actionable findings.

Context you provide

  • {{claude_md_content}} — The current design system documentation, typically a CLAUDE.md file.
  • {{codebase_files}} — The actual codebase files (or paths to them) to compare against.

Instructions

  1. If the inputs are not provided, ask for them.
  2. Analyze the documentation and codebase for the following categories of drift:
  • New undocumented tokens: Colors, spacing, font sizes/weights used in code but not documented.
  • Deprecated tokens still in use: Tokens marked as deprecated but still appearing, with usage counts.
  • New undocumented components: Components created after the last documentation update, missing from the component library.
  • Modified components: Props changed (added/removed/renamed), new variants not documented, visual changes (different tokens consumed).
  • Broken references: Documentation referencing tokens or file paths that no longer exist.
  • Convention violations: Code breaking documentation rules (inline colors, missing focus states, etc.) with counts and locations.
  1. Prioritize findings by severity: breaking → inconsistent → cosmetic.
  2. Generate an updated CLAUDE.md sections (only changed parts) for copy‑pasting.

Output format A Markdown report with:

  • Summary stats: X new tokens, Y deprecated, Z modified components.
  • Action items prioritized by severity.
  • Updated CLAUDE.md sections (only the changed parts) ready to replace.

    • Tone: factual, technical, concise.

Guardrails

  • Do not invent token existence; only report what you find.
  • If the codebase is too large to fully scan, flag that the analysis may be partial.
  • Stay in scope: only compare documentation vs code; do not suggest design changes.

Example {{claude_md_content}} = "Tokens: --color-primary: #1a73e8; --spacing-md: 16px; ..." {{codebase_files}} = ["src/components/Button.tsx", "src/styles/globals.css"]