组件不再是唯一资产：生成式 AI 时代如何重构 UI 复用

:root {
  --color-action-bg: #2457d6;
  --color-action-bg-hover: #1946b3;
  --color-action-text: #ffffff;
  --color-focus-ring: #80a7ff;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --radius-md: 0.5rem;
}

import './Button.css';

export function Button({ children, loading = false, disabled = false, ...props }) {
  return (
    <button
      className='button'
      disabled={disabled || loading}
      aria-busy={loading}
      {...props}
    >
      {loading ? 'Saving…' : children}
    </button>
  );
}

.button {
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-action-text);
  background: var(--color-action-bg);
  cursor: pointer;
}

.button:hover:not(:disabled) {
  background: var(--color-action-bg-hover);
}

.button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

import { readFile } from 'node:fs/promises';

const tokenFile = 'design-system/tokens.css';
const componentFiles = ['src/Button.css'];

const tokens = await readFile(tokenFile, 'utf8');
const defined = new Set(
  [...tokens.matchAll(/(--[\w-]+)\s*:/g)].map((match) => match[1])
);

let failed = false;

for (const file of componentFiles) {
  const css = await readFile(file, 'utf8');
  const used = [...css.matchAll(/var\((--[\w-]+)/g)].map((match) => match[1]);
  const unknown = [...new Set(used.filter((name) => !defined.has(name)))];
  const rawColorMarkers = ['#', 'rgb(', 'rgba(', 'hsl(', 'hsla('];
  const containsRawColor = rawColorMarkers.some((marker) => css.includes(marker));

  if (unknown.length > 0) {
    console.error(`${file}: unknown tokens: ${unknown.join(', ')}`);
    failed = true;
  }

  if (containsRawColor) {
    console.error(`${file}: raw color found; use a design token instead`);
    failed = true;
  }
}

if (failed) {
  process.exitCode = 1;
} else {
  console.log('UI contract check passed');
}

node scripts/check-ui-contract.mjs

Generate a local React component under src/components.

Source of truth:
- Use only CSS variables defined in design-system/tokens.css.
- Do not add runtime dependencies.
- Prefer semantic HTML over ARIA replacements.
- Include default, hover, focus-visible, disabled, and loading states.
- Keep business-specific props out of generic UI components.
- Add interaction tests for keyboard and disabled behavior.

Return the component, stylesheet, and tests as separate files.