Using Mneme HQ to Preserve Design System Decisions for AI Builders
Stop AI assistants from inventing colors, breaking component hierarchy, and ignoring accessibility rules every time they generate a UI.
AI-generated UI ignores your design system every session.
Your design system defines which colors are approved, which components must be used for which patterns, how spacing works, and what accessibility requirements apply. An AI assistant generating JSX has no awareness of any of it — it invents inline styles, reaches for arbitrary Tailwind classes, skips ARIA attributes, and creates one-off components instead of using existing ones.
Design system violations are expensive to catch in review and easy to miss entirely. They accumulate into inconsistent UIs that erode user trust and multiply future remediation work.
Rule: Use Modal from design-system/Modal, not custom implementations.
✗ FAIL decision/no-hardcoded-colors
Rule: Colors must reference design tokens. #ff0000 is not an approved token.
✗ FAIL decision/destructive-actions-require-aria
Rule: Destructive action modals require role="alertdialog" and aria-describedby.
→ Surfaced 3 violations before code generation.
Storybook and linters don't prevent violations at generation time.
| Approach | Limitation | With Mneme HQ |
|---|---|---|
| Storybook docs | Documents components; doesn't enforce which ones AI must use | Component usage rules encoded as enforceable decisions |
| ESLint / Stylelint | Catches known anti-patterns in written code; can't encode design rationale | Design intent and constraints captured with full context |
| Figma / design files | Not accessible to AI at code-generation time | Design token rules surfaced at prompt time |
| Design review | End-of-sprint; expensive; inconsistencies already embedded | Violations flagged before a component is written |
Design constraints enforced before the first JSX line.
Encode design system rules as decisions
Capture approved tokens, required components, spacing rules, and accessibility requirements as structured YAML decisions.
Check before generating UI code
Run mneme check against your UI prompt. Relevant design decisions are retrieved and any violations flagged immediately.
Inject design rules into assistant context
Generate a rules file for Cursor or Claude Code that includes your design system constraints — so every UI generation session is token-aware.
Gate frontend PRs on design compliance
Add mneme check --mode strict --tags design-system to CI. PRs introducing unapproved tokens or missing accessibility attributes fail automatically.
What design system decisions look like.
id: no-hardcoded-colors title: All colors must reference design tokens status: accepted rule: No hardcoded hex, rgb, or hsl values in component code. Use CSS variables from tokens.css or Tailwind config approved keys only. rationale: Hardcoded colors break dark mode, theming, and brand consistency. Introduced after brand refresh caused 200+ manual color fixes. enforcement: strict tags: [design-system, tokens, frontend]
id: destructive-actions-require-aria title: Destructive action modals require ARIA alertdialog role status: accepted rule: Any modal confirming a destructive action must have role="alertdialog", aria-labelledby, and aria-describedby set. rationale: WCAG 2.1 AA compliance requirement. Failed accessibility audit in Q1. enforcement: strict tags: [design-system, accessibility, wcag, frontend]
$ mneme check "add a delete account confirmation modal" --tags design-system Checking against 12 design-system decisions... ✗ FAIL decision/use-approved-components (Modal exists in design-system/) ✗ FAIL decision/no-hardcoded-colors ✗ FAIL decision/destructive-actions-require-aria ✓ PASS decision/spacing-must-use-scale ✓ PASS decision/typography-component-required Result: FAIL (3 violations, strict mode)
What design teams see after enforcement goes live.
Common questions.
Does this expand Mneme HQ beyond backend engineering?
Can designers manage decisions without engineering involvement?
How do we handle design system evolution — new components, deprecated ones?
status: deprecated to stop enforcing them. Add new decisions for new components. The version history in git serves as your audit trail of design system changes.