Align UI to Design System
Core outcome
Evaluate whether one selected UI surface belongs to the design system that actually exists in its repository without flattening justified product character. Return a bounded, evidence-backed review before changing code unless the user already authorized fixes.
Set the boundary and mode
- Read the nearest repository instructions and inspect uncommitted work.
- Name the component or surface under review, its direct dependencies, and its user-facing job. Do not silently expand to the whole repository.
- Select the mode from the request:
- Review: Inspect and recommend only. This is the default for review, audit, or “what is off?” requests.
- Fix: Apply findings the user explicitly authorized. A request to align, normalize, or fix the bounded surface authorizes relevant edits, but not a broader system refactor.
- Preserve the selected product direction. If the user still wants alternatives, use
code-native-ui-ideation instead.
Establish repository authority
Use this evidence order and note conflicts rather than inventing certainty:
- Explicit repository instructions, design documentation, tokens, theme definitions, and shared primitives.
- Repeated peer components with the same semantic role, including their rendered states when practical.
- Platform conventions and accessibility behavior.
- Comments, history, and the component's selected product intent.
Frequency is evidence, not proof. A common pattern can be legacy drift; a rare choice can be intentional. Inspect only enough peers to establish a rule or expose uncertainty.
Record the surface contract before judging it: content, hierarchy, interaction, states, responsive or dynamic-type behavior, accessibility meaning, and any documented intentional departures. Render the component in its existing preview, Storybook, simulator, or browser surface when practical. If rendering is disproportionate or blocked, say which conclusions remain source-only.
Review the surface
Check only applicable dimensions:
- semantic tokens, typography, color, spacing, shape, elevation, and motion;
- shared primitives, composition patterns, naming, and API shape;
- loading, empty, error, disabled, selected, pressed, focus, and overflow states;
- interaction semantics, target size, keyboard or platform input, and navigation behavior;
- contrast, accessible names, reading order, Dynamic Type or text scaling, reduced motion, and screen-reader behavior;
- responsive layouts, localization, long content, and relevant platform differences.
Do not treat visual sameness as conformance. Compare the component's role and behavior, not only literal values.
Classify before recommending
Assign every material finding one class:
- Accidental deviation: Strong repository evidence establishes a rule, the component breaks it without a role-based reason, and a correction improves coherence or usability.
- Intentional exception: The difference supports the component's selected role or product intent while preserving system foundations. Keep it unless the user chooses otherwise.
- System gap: A legitimate recurring need cannot be expressed cleanly with current tokens or primitives. Propose the smallest reusable addition separately; do not hide the gap with another one-off or generalize from one occurrence.
- Uncertain: Evidence conflicts, rendering is missing, or product intent is unresolved. State the discriminating check or decision needed.
For each material finding report:
- class and confidence;
- exact file, line, render, or behavior evidence;
- the repository rule or component intent it relates to;
- user or maintenance impact;
- the smallest justified correction or reason to preserve it.
End a review with an approved-sized recommendation set, not a generic checklist. Separate component fixes from optional system work.
Apply approved corrections
When edits are authorized:
- Fix accepted accidental deviations with existing tokens and primitives when they truly fit.
- Preserve documented intentional exceptions.
- Add or change a shared token or primitive only when repeated evidence and the user's scope justify system work; otherwise record the gap.
- Render the changed surface and exercise the affected states and interactions.
- Run focused repository checks proportional to regression risk.
- Report applied fixes, preserved exceptions, deferred system gaps, evidence, and any remaining uncertainty.
Do not redesign the surface, audit unrelated components, perform production hardening, or rewrite a repository into a formal design system unless separately requested.
1---2name: align-ui-to-design-system3description: Review one completed UI component or bounded surface against the design system evidenced in its repository, classify accidental deviations, intentional exceptions, system gaps, and uncertainty, then apply only approved corrections. Use for post-build UI conformance or normalization. Do not use for UI ideation, repository-wide audits, exact design translation, or general production hardening.4license: MIT5---67# Align UI to Design System89## Core outcome1011Evaluate whether one selected UI surface belongs to the design system that actually exists in its repository without flattening justified product character. Return a bounded, evidence-backed review before changing code unless the user already authorized fixes.1213## Set the boundary and mode14151. Read the nearest repository instructions and inspect uncommitted work.162. Name the component or surface under review, its direct dependencies, and its user-facing job. Do not silently expand to the whole repository.173. Select the mode from the request:18 - **Review:** Inspect and recommend only. This is the default for review, audit, or “what is off?” requests.19 - **Fix:** Apply findings the user explicitly authorized. A request to align, normalize, or fix the bounded surface authorizes relevant edits, but not a broader system refactor.204. Preserve the selected product direction. If the user still wants alternatives, use `code-native-ui-ideation` instead.2122## Establish repository authority2324Use this evidence order and note conflicts rather than inventing certainty:25261. Explicit repository instructions, design documentation, tokens, theme definitions, and shared primitives.272. Repeated peer components with the same semantic role, including their rendered states when practical.283. Platform conventions and accessibility behavior.294. Comments, history, and the component's selected product intent.3031Frequency is evidence, not proof. A common pattern can be legacy drift; a rare choice can be intentional. Inspect only enough peers to establish a rule or expose uncertainty.3233Record the surface contract before judging it: content, hierarchy, interaction, states, responsive or dynamic-type behavior, accessibility meaning, and any documented intentional departures. Render the component in its existing preview, Storybook, simulator, or browser surface when practical. If rendering is disproportionate or blocked, say which conclusions remain source-only.3435## Review the surface3637Check only applicable dimensions:3839- semantic tokens, typography, color, spacing, shape, elevation, and motion;40- shared primitives, composition patterns, naming, and API shape;41- loading, empty, error, disabled, selected, pressed, focus, and overflow states;42- interaction semantics, target size, keyboard or platform input, and navigation behavior;43- contrast, accessible names, reading order, Dynamic Type or text scaling, reduced motion, and screen-reader behavior;44- responsive layouts, localization, long content, and relevant platform differences.4546Do not treat visual sameness as conformance. Compare the component's role and behavior, not only literal values.4748## Classify before recommending4950Assign every material finding one class:5152- **Accidental deviation:** Strong repository evidence establishes a rule, the component breaks it without a role-based reason, and a correction improves coherence or usability.53- **Intentional exception:** The difference supports the component's selected role or product intent while preserving system foundations. Keep it unless the user chooses otherwise.54- **System gap:** A legitimate recurring need cannot be expressed cleanly with current tokens or primitives. Propose the smallest reusable addition separately; do not hide the gap with another one-off or generalize from one occurrence.55- **Uncertain:** Evidence conflicts, rendering is missing, or product intent is unresolved. State the discriminating check or decision needed.5657For each material finding report:58591. class and confidence;602. exact file, line, render, or behavior evidence;613. the repository rule or component intent it relates to;624. user or maintenance impact;635. the smallest justified correction or reason to preserve it.6465End a review with an approved-sized recommendation set, not a generic checklist. Separate component fixes from optional system work.6667## Apply approved corrections6869When edits are authorized:70711. Fix accepted accidental deviations with existing tokens and primitives when they truly fit.722. Preserve documented intentional exceptions.733. Add or change a shared token or primitive only when repeated evidence and the user's scope justify system work; otherwise record the gap.744. Render the changed surface and exercise the affected states and interactions.755. Run focused repository checks proportional to regression risk.766. Report applied fixes, preserved exceptions, deferred system gaps, evidence, and any remaining uncertainty.7778Do not redesign the surface, audit unrelated components, perform production hardening, or rewrite a repository into a formal design system unless separately requested.
pdugan20