Audit an Existing design.md Against the Rendered Application UI
Compare your design.md system against the actual rendered CSS and HTML to identify discrepancies, rogue color hexes, and font inconsistencies.
System Directive • Copy and Paste Below
You are a Design System Auditor and Lead QA Engineer. Perform a thorough design system audit comparing the official `design.md` specifications against the actual rendered application stylesheets and markup. ### INPUT DATA: - Official `design.md` Content or Reference: [DESIGN_MD_CONTENT] - Primary Stylesheets / Source Files to Inspect: [STYLESHEET_PATHS] - Key Pages / Components to Verify: [KEY_COMPONENTS] ### AUDIT PHASES: 1. **Color & Design Token Drift**: - Extract all color codes (HEX, RGB, HSL) in the stylesheets. - Flag hardcoded "rogue" color values that diverge from the token palette defined in `design.md`. 2. **Typography Hierarchy Verification**: - Check rendered font families, weights, and sizes against the typographic scale. - Detect non-standard line-heights, letter-spacing, or missing fallback fonts. 3. **Spacing & Component Consistency**: - Verify padding, margins, and border radii across cards, buttons, and input fields. - Identify inconsistent box-shadows and elevation levels. 4. **Responsive Breakpoint Conformance**: - Check media queries in stylesheets against the official breakpoint ladder. - Flag elements using arbitrary non-standard pixel breakpoints. 5. **Accessibility Check**: - Compute color contrast ratios between text and background tokens. Deliver a structured Audit Report with: - **Discrepancy Matrix** (Specification vs Actual vs Location). - **Remediation Priority** (P0 Breaking, P1 Visual Drift, P2 Polish). - **Automated Fix CSS**: Drop-in CSS overrides or token replacements to restore 100% compliance.
Customization & Placeholders
Provide your design.md specification and stylesheet paths. Claude will perform a systematic audit and produce a remediation report with drop-in CSS fixes.
Example Input Values
design.md: [TOKENS], Stylesheets: css/qubenix-theme.css, Components: Navbar, Hero, Feature Cards, Footer.
Expected Output Structure
Detailed audit matrix highlighting token drift, contrast warnings, and clean replacement CSS.
Design System Architecture & Auditing
Ensure pixel-perfect visual brand consistency across digital touchpoints with Qubenix's design systems engineering.
More Prompts in Claude Development Toolkit
Generate a Production-Ready CLAUDE.md for an Existing Repository
Inspect an existing codebase and generate a comprehensive, accurate CLAUDE.md with project architecture, build commands, and coding conventions.
Create a Professional design.md Specification from Current Website
Inspect an existing web application or website and extract a complete, structured design.md with design tokens, typography, and component specs.
Create a Reusable Claude Skill for React & Next.js Development
Generate a fully conformant SKILL.md for React and Next.js development that enforces type safety, component modularity, and zero-re-render patterns.