🎯 Design
Webflow Component Style Drift Audit (No Invented Contrast Ratios)
Build a Webflow component style drift audit from a pasted style-guide excerpt and drift notes. No invented contrast ratios, usage counts, or Lighthouse scores beyond Inputs.
0Reviews
Prompt
Act as a Webflow design-system auditor who only uses a pasted style-guide excerpt. You write a component style drift audit the excerpt already supports. You do not invent contrast ratios, usage counts, Lighthouse scores, or pixel deltas not in Inputs. This is not a Webflow Enterprise pitch; not an accessibility legal certification. You work only from Inputs. Do not invent stats, citations, quotes, URLs, names, IDs, or records that are not in Inputs. Inputs: - Style-guide excerpt I lock (component names, classes, tokens present): [StyleExcerpt] - Drift notes I lock (expected tokens or themes named only if present): [DriftNotes] - Webflow / site version notes I lock: [Version] - Site or brand label I may quote (or UNKNOWN): [SiteLabel] - Component labels already present (or UNKNOWN): [ComponentLabels] - Drift field names already present (or UNKNOWN): [DriftFields] - Flag rules already present (or UNKNOWN): [FlagRules] - Words I must not use: [Banned] - What I must never invent (contrast ratios, usage counts, Lighthouse scores, or pixel deltas): [Never] - Output format: [Format] - Language: [Lang] Generate: 1. Honesty ledger: StyleExcerpt nouns, DriftNotes, Version, SiteLabel, ComponentLabels, DriftFields, FlagRules, Lang. Forbidden: invented contrast ratios, usage counts, Lighthouse scores, pixel deltas. Banner: not a Webflow Enterprise pitch; not an accessibility legal certification. 2. Component style drift audit: one row per ComponentLabels item. Columns: component, StyleExcerpt classes/tokens, DriftNotes expected, DriftFields, FlagRules, drift flag. Missing FlagRules write NOT IN INPUTS. Use Webflow Designer, Components, Variables, Classes, and Style Panel language when StyleExcerpt supports it. Never print contrast-ratio or Lighthouse VALUES not in StyleExcerpt or DriftNotes. 3. Drift lock: quote DriftNotes only. Unnamed expected tokens stay NOT IN INPUTS. 4. Version lock: print Version. Refuse features newer than Version if Version is named. 5. Refuse list: inventing contrast ratios, inventing usage counts, inventing Lighthouse scores, inventing pixel deltas. 6. Compliance pass: quote Banned and Never hits. Cut them. Format as Format. Constraints: - Audit from StyleExcerpt and DriftNotes only. No invented contrast VALUES. Teach Webflow style drift audits, not a Framer or Webstudio swap. - Honor Version. No emojis.
Instructions
Replace every [bracket] with your details before running. Works on ChatGPT, Claude, and Gemini.
Generated Output
This image was generated using the prompt above.
Examples
Example Input
StyleExcerpt: Harbor Quay Button Primary as pasted class btn-primary as pasted variable --hq-blue as pasted. Contrast invent NONE. Usage invent NONE. DriftNotes: expected variable --hq-blue as pasted; dark theme UNKNOWN. Lighthouse invent NONE. Version: Webflow as pasted (do not invent unreleased AI style pack) SiteLabel: Harbor Quay Marketing site as pasted ComponentLabels: Button Primary as pasted; River Ops Card UNKNOWN. DriftFields: class vs variable mismatch as pasted. Pixel delta NOT IN INPUTS. FlagRules: missing variable flag as pasted. Banned: guaranteed WCAG pass, contrast invent, usage invent, lighthouse invent Never: invent contrast ratios, invent usage counts, invent Lighthouse scores, invent pixel deltas Format: ledger + drift audit + drift lock + version + refuse + compliance Lang: English
Example Output
1. Ledger. StyleExcerpt: Harbor Quay Button Primary class btn-primary variable --hq-blue. Contrast invent NONE. Usage invent NONE. DriftNotes expected variable --hq-blue; dark theme UNKNOWN. Lighthouse invent NONE. Version Webflow as pasted. SiteLabel Harbor Quay Marketing site. ComponentLabels Button Primary; River Ops Card UNKNOWN. DriftFields class vs variable mismatch. Pixel delta NOT IN INPUTS. FlagRules missing variable flag. Lang English. Banner: not a Webflow Enterprise pitch; not an accessibility legal certification. Forbidden: invented contrast ratios, usage counts, Lighthouse scores, pixel deltas. 2. Component style drift audit. 1. Button Primary | StyleExcerpt btn-primary + --hq-blue | DriftNotes expected --hq-blue | DriftFields class vs variable mismatch | FlagRules missing variable not triggered | contrast VALUES NONE | Webflow drift audit only. 2. River Ops Card | ComponentLabels UNKNOWN | write NOT IN INPUTS | do not invent a second component. dark theme UNKNOWN so write dark theme NOT IN INPUTS. Pixel delta NOT IN INPUTS so write pixel VALUES NOT IN INPUTS. 3. Drift lock. expected variable --hq-blue as pasted. dark theme UNKNOWN so NOT IN INPUTS. Lighthouse invent NONE. 4. Version lock. Webflow as pasted. Refuse unreleased AI style pack. 5. Refuse list. inventing contrast ratios; inventing usage counts; inventing Lighthouse scores; inventing pixel deltas. 6. Compliance. Quoted Banned: guaranteed WCAG pass, contrast invent, usage invent, lighthouse invent. Cut. Quoted Never: invent contrast ratios, invent usage counts, invent Lighthouse scores, invent pixel deltas. Cut. Format ledger + drift audit + drift lock + version + refuse + compliance. Missing-data policy: if a field was blank, write NOT IN INPUTS rather than guessing. Lock any tool version named in Inputs; if unnamed, write unknown. No invented testimonials, star ratings, or press logos. If legal, clinical, insurance, HR, education-plan, or veterinary content appears, add a one-line not-advice and de-identify banner. Quote banned-word hits and cut them. End with a gaps list of five bullets the user still owes you. Character and byte caps in the job are hard; print counts when relevant. Refuse to backfill DOIs, exam dumps, PHI, PII, or compensation promises not in Inputs.