demiurg92/design-continuity-guard

Design Continuity Guard is a skill for Codex, an AI coding tool, that helps the agent preserve the existing look and feel of a website when making UI changes. Without something like this, AI agents can quickly break design consistency by adding gradients, colors, or card styles that do not match what already exists on the page. This skill gives Codex a checklist to follow before touching any frontend code. The skill works by instructing Codex to read the project's design notes, CSS variables, and the sections surrounding the area it is about to change before writing any code. It then makes conservative choices: reusing existing spacing, color tokens, card styles, and button treatments rather than inventing new ones. It also checks whether a desktop and mobile preview is needed when the visual risk is high. Specifically, it targets problems that are common when AI edits frontend files: adding unrelated color palettes, using gradients that do not match the existing hero or card patterns, giving cards inconsistent border-radius or shadows, stacking heavy sections without visual rhythm, and repeating call-to-action styles until the page loses hierarchy. The repository includes the skill definition file, reference documentation with color audit guidelines, section rhythm rules, and decision rules for common conflicts. A Python helper script scans CSS files and HTML for color tokens, gradients, and repeated utility classes to give Codex concrete evidence about the existing visual language rather than asking it to guess. To use it, copy the skill folder into your Codex skills directory and then trigger it in a prompt by writing something like "Use $design-continuity-guard before adding this homepage section." Teams can also copy the example DESIGN.md file into their project and fill it in to document design rules the agent should always respect. The repository is licensed under MIT.