dsh-desktop-kit 0.0.0-stage → 2.0.0

package/skills/wow-design/assets/scripts/capture.mjs

@@ -0,0 +1,337 @@
+#!/usr/bin/env node
+/**
+ * capture.mjs — скриншоты страниц для визуального QA.
+ *
+ * Подключается к уже запущенному headless Chrome по CDP (по умолчанию
+ * http://127.0.0.1:9333, можно переопределить --cdp / CDP_URL). Если CDP
+ * недоступен — сам запускает chromium из ms-playwright и подключается к нему.
+ *
+ * Usage:
+ *   node capture.mjs <путь-к-html|url> --name <name> [--out <dir>]
+ *       [--viewports desktop,tablet,mobile] [--themes light,dark] [--full]
+ *       [--selector <css>] [--dpr 1] [--preset aurora] [--serve] [--json]
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseArgs, csv, safeFileName, UsageError, printHelpAndExit } from './lib/args.mjs';
+import {
+  connectChrome,
+  disposeChrome,
+  resolveTarget,
+  startStaticServer,
+  openPage,
+  closePage,
+  gotoPage,
+  wireDiagnostics,
+  addThemeInitScript,
+  preparePage,
+  waitForFonts,
+  parseViewportList,
+  parseThemeList,
+} from './lib/browser.mjs';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const WORKSPACE = path.resolve(HERE, '..', '..');
+const DEFAULT_OUT = path.join(WORKSPACE, 'tmp', 'qa-artifacts');
+
+const HELP = `
+capture.mjs — PNG-скриншоты страницы в разных viewport и темах через headless Chrome (CDP).
+
+Использование:
+  node tools/design-qa/capture.mjs <путь-к-html|url> --name <name> [опции]
+
+Опции:
+  --name <name>        Имя префикса файлов (по умолчанию — имя html-файла)
+  --out <dir>          Куда складывать PNG и shots.json (по умолчанию tmp/qa-artifacts)
+  --viewports <list>   desktop,tablet,mobile или <ширина>x<высота> (по умолчанию все три)
+  --themes <list>      light,dark (по умолчанию обе)
+  --full / --no-full   Полная страница (по умолчанию включено; --no-full — только видимая часть)
+  --selector <css>     Снимать только первый элемент, подходящий под CSS-селектор
+  --dpr <n>            devicePixelRatio, 1..4 (по умолчанию 1)
+  --preset <id>        Выставить data-preset на <html> (aurora|graphite|editorial|warm|swiss)
+  --serve              Отдавать страницу по http://127.0.0.1 (нужно для <script type="module">)
+  --cdp <url>          CDP-эндпоинт (по умолчанию env CDP_URL или http://127.0.0.1:9333)
+  --timeout <ms>       Таймаут загрузки страницы (по умолчанию 30000)
+  --json               Печатать манифест в stdout как JSON (логи — в stderr)
+  -h, --help           Эта справка
+
+Примеры:
+  node tools/design-qa/capture.mjs projects/design-kit/showcase.html --name showcase
+  node tools/design-qa/capture.mjs tools/design-qa/fixtures/test.html --viewports mobile --themes dark
+  node tools/design-qa/capture.mjs projects/design-kit/pages/dashboard.html --name dashboard --selector "main"
+
+Коды выхода: 0 — все скриншоты сняты, 1 — ошибка/частичный сбой (см. shots.json).
+`;
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2), {
+    booleans: ['help', 'json', 'full', 'serve', 'motion', 'quiet'],
+    values: ['name', 'out', 'viewports', 'themes', 'selector', 'dpr', 'preset', 'cdp', 'timeout'],
+    aliases: { h: 'help' },
+    defaults: {
+      help: false,
+      json: false,
+      full: true,
+      serve: false,
+      motion: false,
+      quiet: false,
+      name: undefined,
+      out: undefined,
+      viewports: 'desktop,tablet,mobile',
+      themes: 'light,dark',
+      selector: undefined,
+      dpr: '1',
+      preset: undefined,
+      cdp: undefined,
+      timeout: '30000',
+    },
+  });
+
+  if (args.help) printHelpAndExit(HELP);
+  const log = args.json ? (...a) => console.error(...a) : (...a) => console.log(...a);
+
+  const target = args._[0];
+  if (!target) throw new UsageError('Не указан путь к HTML-файлу или URL (см. --help)');
+
+  const viewports = parseViewportList(args.viewports);
+  const themes = parseThemeList(args.themes);
+  const dpr = parseNumber(args.dpr, '--dpr', 1, 4);
+  const timeout = parseNumber(args.timeout, '--timeout', 1000, 180_000);
+  const selector = args.selector ? String(args.selector) : null;
+  const preset = args.preset ? String(args.preset) : null;
+  const reducedMotion = args.motion ? 'no-preference' : 'reduce';
+
+  const resolved = resolveTarget(String(target), { serve: args.serve });
+  const name = safeFileName(args.name || defaultName(resolved), 'page');
+  const outDir = path.resolve(process.cwd(), args.out || DEFAULT_OUT);
+  fs.mkdirSync(outDir, { recursive: true });
+
+  const startedAt = new Date();
+  const t0 = Date.now();
+  log(`[capture] ${resolved.source}`);
+  log(`[capture] имя: ${name}; viewports: ${viewports.map((v) => `${v.id}(${v.width}x${v.height})`).join(', ')}; темы: ${themes.join(', ')}; dpr: ${dpr}`);
+  log(`[capture] каталог: ${outDir}`);
+
+  let conn = null;
+  let server = null;
+  const manifest = {
+    tool: 'design-qa/capture',
+    version: 1,
+    name,
+    source: resolved.source,
+    url: resolved.url,
+    targetKind: resolved.kind,
+    startedAt: startedAt.toISOString(),
+    finishedAt: null,
+    durationMs: null,
+    browser: null,
+    options: {
+      viewports: viewports.map((v) => ({ id: v.id, width: v.width, height: v.height })),
+      themes,
+      fullPage: selector ? false : Boolean(args.full),
+      selector,
+      dpr,
+      preset,
+      reducedMotion,
+      serve: Boolean(args.serve),
+    },
+    shots: [],
+    consoleErrors: [],
+    pageErrors: [],
+    failedRequests: [],
+    totals: null,
+    ok: false,
+  };
+
+  try {
+    conn = await connectChrome({ cdpUrl: args.cdp || undefined, log });
+    manifest.browser = {
+      endpoint: conn.endpoint,
+      launched: conn.launched,
+      browser: conn.version?.Browser || conn.version?.browser || null,
+    };
+    log(`[capture] браузер: ${manifest.browser.browser || '?'} (${conn.launched ? 'запущен fallback' : 'CDP ' + conn.endpoint})`);
+
+    if (args.serve) {
+      if (!resolved.abs) throw new UsageError('--serve поддерживается только для локальных html-файлов');
+      server = await startStaticServer(process.cwd());
+      const rel = path.relative(process.cwd(), resolved.abs).split(path.sep).join('/');
+      resolved.url = `${server.origin}/${rel}`;
+      manifest.url = resolved.url;
+      log(`[capture] локальный сервер: ${server.origin}`);
+    }
+
+    for (const vp of viewports) {
+      for (const theme of themes) {
+        const shot = {
+          id: `${vp.id}-${theme}`,
+          viewport: vp.id,
+          width: vp.width,
+          height: vp.height,
+          theme,
+          dpr,
+          fullPage: selector ? false : Boolean(args.full),
+          selector: selector || null,
+          file: `${name}-${vp.id}-${theme}.png`,
+          path: path.join(outDir, `${name}-${vp.id}-${theme}.png`),
+          bytes: 0,
+          widthPx: 0,
+          heightPx: 0,
+          page: null,
+          fonts: null,
+          consoleErrors: [],
+          pageErrors: [],
+          failedRequests: [],
+          error: null,
+          elapsedMs: 0,
+        };
+        const ts = Date.now();
+        try {
+          const handle = await openPage(conn.browser, { viewport: vp, dpr, theme, reducedMotion });
+          const page = handle.page;
+          const diag = wireDiagnostics(page);
+          try {
+            await addThemeInitScript(page, { theme, preset });
+            await gotoPage(page, resolved.url, { timeout });
+            const pageMetrics = await preparePage(page, { theme, preset, animations: true, scroll: true });
+            const fonts = await waitForFonts(page);
+            await takeScreenshot(page, shot, { selector, fullPage: shot.fullPage });
+            const stat = fs.statSync(shot.path);
+            shot.bytes = stat.size;
+            shot.page = pageMetrics;
+            shot.fonts = { status: fonts.status, size: fonts.size };
+          } finally {
+            shot.consoleErrors = diag.consoleErrors.slice();
+            shot.pageErrors = diag.pageErrors.slice();
+            shot.failedRequests = diag.failedRequests.slice();
+            await closePage(handle);
+          }
+        } catch (err) {
+          shot.error = err?.isUsageError ? err.message : `${err?.name || 'Error'}: ${err?.message || err}`;
+          log(`[capture] ✖ ${shot.id}: ${shot.error}`);
+        }
+        shot.elapsedMs = Date.now() - ts;
+        manifest.shots.push(shot);
+        manifest.consoleErrors.push(...shot.consoleErrors.map((e) => ({ shot: shot.id, ...e })));
+        manifest.pageErrors.push(...shot.pageErrors.map((e) => ({ shot: shot.id, ...e })));
+        manifest.failedRequests.push(...shot.failedRequests.map((e) => ({ shot: shot.id, ...e })));
+
+        if (!shot.error) {
+          const kb = (shot.bytes / 1024).toFixed(1);
+          const dims = shot.widthPx && shot.heightPx ? `${shot.widthPx}×${shot.heightPx}px` : '?';
+          log(`[capture] ✔ ${shot.id}: ${dims}, ${kb} КБ → ${path.relative(process.cwd(), shot.path)}`);
+        }
+      }
+    }
+  } catch (err) {
+    manifest.fatalError = err?.message || String(err);
+    log(`[capture] ОШИБКА: ${manifest.fatalError}`);
+  } finally {
+    if (server) await server.close().catch(() => {});
+    if (conn) await disposeChrome(conn);
+  }
+
+  manifest.finishedAt = new Date().toISOString();
+  manifest.durationMs = Date.now() - t0;
+  const okCount = manifest.shots.filter((s) => !s.error).length;
+  manifest.totals = {
+    shots: manifest.shots.length,
+    ok: okCount,
+    failed: manifest.shots.length - okCount,
+    consoleErrors: manifest.consoleErrors.length,
+    pageErrors: manifest.pageErrors.length,
+    failedRequests: manifest.failedRequests.length,
+  };
+  manifest.ok = !manifest.fatalError && manifest.shots.length > 0 && manifest.totals.failed === 0;
+
+  const manifestPath = path.join(outDir, 'shots.json');
+  fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8');
+  // Персональная копия на случай параллельных прогонов (shots.json перезаписывается каждым запуском).
+  const perRunPath = path.join(outDir, `${name}-shots.json`);
+  fs.writeFileSync(perRunPath, JSON.stringify(manifest, null, 2), 'utf8');
+  log(
+    `[capture] итог: ${okCount}/${manifest.shots.length} скриншотов, ошибок консоли ${manifest.totals.consoleErrors}, ` +
+      `pageerror ${manifest.totals.pageErrors}, сбоев сети ${manifest.totals.failedRequests}`,
+  );
+  log(`[capture] манифест: ${manifestPath} (копия: ${perRunPath})`);
+
+  if (args.json) process.stdout.write(JSON.stringify(manifest, null, 2) + '\n');
+  process.exitCode = manifest.ok ? 0 : 1;
+}
+
+function parseNumber(raw, option, min, max) {
+  const n = Number(raw);
+  if (!Number.isFinite(n) || n < min || n > max) {
+    throw new UsageError(`${option}: ожидается число ${min}..${max}, получено «${raw}»`);
+  }
+  return n;
+}
+
+function defaultName(resolved) {
+  if (resolved.abs) return path.basename(resolved.abs, path.extname(resolved.abs));
+  try {
+    const u = new URL(resolved.url);
+    const last = u.pathname.split('/').filter(Boolean).pop() || 'page';
+    return path.basename(last, path.extname(last));
+  } catch {
+    return 'page';
+  }
+}
+
+/**
+ * Скриншот с деградацией при слишком высокой странице:
+ * обычный fullPage -> fullPage со scale:'css' -> только viewport.
+ */
+async function takeScreenshot(page, shot, { selector, fullPage }) {
+  const base = { path: shot.path, animations: 'disabled', caret: 'hide', type: 'png' };
+  if (selector) {
+    const locator = page.locator(selector).first();
+    const count = await page.locator(selector).count();
+    if (!count) throw new UsageError(`Селектор не найден: ${selector}`);
+    await locator.scrollIntoViewIfNeeded().catch(() => {});
+    await page.waitForTimeout(120);
+    await locator.screenshot({ ...base, scale: 'device' });
+    await measurePng(shot);
+    return;
+  }
+  try {
+    await page.screenshot({ ...base, fullPage, scale: 'device' });
+  } catch (err) {
+    // Очень длинная страница при dpr>1 может не поместиться в лимит CDP.
+    try {
+      await page.screenshot({ ...base, fullPage, scale: 'css' });
+      shot.note = 'scale=css (страница слишком высокая для device-масштаба)';
+    } catch (err2) {
+      try {
+        await page.screenshot({ ...base, fullPage: false, scale: 'device' });
+        shot.note = `только видимая часть: ${err?.message || err2?.message || 'fullPage не удался'}`;
+      } catch {
+        throw err2;
+      }
+    }
+  }
+  await measurePng(shot);
+}
+
+/** Размер PNG из заголовка IHDR — без зависимостей. */
+async function measurePng(shot) {
+  const buf = fs.readFileSync(shot.path);
+  if (buf.length >= 24 && buf.toString('ascii', 12, 16) === 'IHDR') {
+    shot.widthPx = buf.readUInt32BE(16);
+    shot.heightPx = buf.readUInt32BE(20);
+  }
+  shot.bytes = buf.length;
+}
+
+main().catch((err) => {
+  if (err?.isUsageError) {
+    console.error(`[capture] ${err.message}`);
+    console.error('[capture] подсказка: запустите node tools/design-qa/capture.mjs --help');
+    process.exitCode = 1;
+    return;
+  }
+  console.error('[capture] НЕОЖИДАННАЯ ОШИБКА:', err);
+  process.exitCode = 1;
+});

package/skills/wow-design/assets/scripts/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "design-qa",
+  "version": "1.1.0",
+  "description": "Инструменты визуального QA для WOW-дизайна DSH: скриншоты через CDP, axe-аудит, валидатор портативного пакета",
+  "private": true,
+  "type": "commonjs",
+  "scripts": {
+    "capture": "node capture.mjs",
+    "audit": "node audit.mjs",
+    "validate": "node validate-package.mjs",
+    "fixtures": "node fixtures/make-fixtures.mjs",
+    "test:capture": "node capture.mjs fixtures/test.html --name fixture --out ../../tmp/qa-artifacts",
+    "test:audit": "node audit.mjs fixtures/test.html --name fixture-test --out ../../tmp/qa-artifacts",
+    "test:audit-broken": "node audit.mjs fixtures/broken.html --name fixture-broken --out ../../tmp/qa-artifacts",
+    "test:validate-ok": "node validate-package.mjs fixtures/package-ok",
+    "test:validate-bad": "node validate-package.mjs fixtures/package-bad"
+  },
+  "keywords": [
+    "dsh",
+    "design-qa",
+    "screenshots",
+    "playwright",
+    "axe-core",
+    "accessibility"
+  ],
+  "dependencies": {
+    "axe-core": "^4.14.0",
+    "playwright-core": "^1.64.1"
+  }
+}

package/skills/wow-design/references/anti-patterns.md

@@ -0,0 +1,252 @@
+# 03 · Антипаттерны «ИИ-дизайна» — 42 штуки
+
+> Часть навыка wow-design. ≈9k токенов. Читать, когда: проверяешь интерфейс на «AI-slop» или ищешь
+> замену запрещённому приёму.
+
+> Это не «невкусные приёмы», а маркеры, по которым интерфейс за 2 секунды опознаётся как
+> сгенерированный. Задача документа — не просто запретить, а **чем заменить** (с конкретными
+> значениями/токенами AURORA). Формат: как выглядит → почему плохо → чем заменить.
+>
+> Базовое правило: **любой приём допустим, если он осознан и дозирован.** Проблема не в градиенте
+> как таковом, а в градиенте «по умолчанию» на каждом блоке. И не уходи в обратную крайность —
+> стерильный минимализм без иерархии тоже выглядит дёшево (см. финальный раздел).
+
+## Цвет, поверхности, глубина
+
+### A01. Фиолетово-синие градиенты
+**Как выглядит:** hero и кнопки с переходом `#667eea → #764ba2`, «индиго-вайблет» везде: кнопки, бейджи, фоны карточек, иконки.
+**Почему плохо:** это палитра дефолтных AI-генераторов и шаблонов 2019–2022; она не связана ни с брендом, ни с задачей, и мгновенно читается как «сделал робот».
+**Чем заменить:** один акцент из пресета (`--accent` #0E6E5E для aurora, #C8442A для editorial) + нейтрали; градиент — только как едва заметный tonal-переход фона (≤4% разницы), не на интерактивных элементах.
+
+### A02. Радужные mesh-градиенты и «блобы»
+**Как выглядит:** размытые цветные пятна за hero, aurora-mesh из 4–6 оттенков, светящиеся круги.
+**Почему плохо:** отвлекают от контента, создают «шум» и пестрят; при этом не несут информации и плохо работают в тёмной теме.
+**Чем заменить:** бумажный фон с лёгким зерном (`--grain-opacity:.022`), тонкая сетка (`--grid-line`), SVG-диаграмма или монограмма как визуальный якорь.
+
+### A03. Glassmorphism на каждом блоке
+**Как выглядит:** полупрозрачные панели с `backdrop-filter: blur(20px)`, белые обводки 1px, «стекло» на карточках, навигации, модалках.
+**Почему плохо:** снижает контраст текста, жрёт производительность, выглядит как шаблон Apple-клона; стекло уместно 1 раз и только для overlay (sticky-хедер, модалка).
+**Чем заменить:** матовые `--surface`/`--surface-2` + hairline; для sticky-хедера допустим полупрозрачный фон `color-mix(in oklab, var(--bg) 88%, transparent)` без blur.
+
+### A04. Градиентный текст
+**Как выглядит:** заголовки с `background-clip:text` и фиолетово-розовым градиентом, «переливающиеся» цифры.
+**Почему плохо:** контраст зависит от позиции буквы на градиенте, часть текста проваливается ниже 4.5:1; выглядит как маркетинговый баннер, а не UI.
+**Чем заменить:** однотонный `--ink`; акцент — на одном слове/детали через `--accent-ink`, но не градиентом.
+
+### A05. Низкий контраст «ради эстетики»
+**Как выглядит:** серый текст `#999` на белом, подписи `#B0B0B0`, «воздушные» лейблы, текст на полупрозрачных панелях.
+**Почему плохо:** нарушает WCAG (нужно 4.5:1), нечитаемо на дешёвых экранах и при ярком свете; в AURORA `--faint` на `--bg` даёт 2.35:1.
+**Чем заменить:** body — `--ink`/`--ink-2` (9–16:1); второстепенное — `--muted` только на `--surface` (4.8:1) или крупным кеглем; `--faint` — только декор.
+
+### A06. Несогласованные отступы
+**Как выглядит:** 13/17/22/27/31px, «на глаз»; одинаковые отступы внутри и между группами; блоки «прилипли» к краям.
+**Почему плохо:** мозг считывает нерегулярность как неаккуратность; страница выглядит собранной на скорую руку.
+**Чем заменить:** только `--sp-*` (4/8/12/16/24/32/48/64/96/128); внутри группы 8–16, между группами 32–64; проверить все `margin/padding/gap` через поиск магических чисел.
+
+### A07. Тень на всём и одинаковые тени
+**Как выглядит:** у каждой карточки, кнопки, бейджа и секции одна и та же `box-shadow`; тени не означают уровень.
+**Почему плохо:** пропадает глубина: если всё приподнято, значит, ничего; поверхность выглядит «пластиковой».
+**Чем заменить:** статичные карточки — hairline-бордер без тени; тень — только dropdown/modal/sticky, по шкале `--shadow-sm/md/lg` (2 уровня максимум).
+
+### A08. Тени «как в 2010»
+**Как выглядит:** `box-shadow: 0 0 30px rgba(0,0,0,.5)`, чёрные размытые пятна, тень со всех сторон.
+**Почему плохо:** грязь под элементами, «дешёвый глянец»; в тёмной теме такие тени выглядят как сажа.
+**Чем заменить:** слоистые тени из токенов: малый offset + большой blur с низкой alpha (`--shadow-md`, light: rgb(20 24 26 / .28)); в dark — усилить alpha, не blur.
+
+### A09. Гигантские радиусы у всего
+**Как выглядит:** cards/inputs/buttons — 24–32px, «пузыри»; всё скруглено одинаково сильно.
+**Почему плохо:** выглядит как мобильное приложение для детей; теряются различия между контролом и контейнером; ужасно смотрится на плотных таблицах.
+**Чем заменить:** `--radius-control` 8–12, `--radius-card` 12–18, радиус по смыслу; editorial/swiss-пресеты — 2–8px.
+
+### A10. Pill-кнопки на всё
+**Как выглядит:** все кнопки, бейджи, теги, табы — «таблетки» с радиусом 999px.
+**Почему плохо:** pill — это семантика тега/чипа; когда всё pill, пропадает иерархия и появляется «маркетплейс-вид».
+**Чем заменить:** pill только для статусов/чипов/аватаров; кнопки — `--radius-control`; secondary — ghost/контур.
+
+### A11. Палитра из 6+ цветов, нет 60-30-10
+**Как выглядит:** синий, фиолетовый, оранжевый, зелёный, розовый, бирюзовый — каждый «для акцента»; фоны разных цветов.
+**Почему плохо:** глаз не понимает, что важно; бренд не запоминается; контрастные пары случайны и ломают AA.
+**Чем заменить:** 60% нейтраль, 30% поверхности/текст, 10% акцент; редкий тёплый второй тон (`--copper`) ≤2% площади.
+
+### A12. Акцент на всём
+**Как выглядит:** акцентные заголовки, фоны секций, иконки, все кнопки, ссылки, рамки.
+**Почему плохо:** акцент перестаёт быть акцентом; интерфейс выглядит «кричащим» и утомляет.
+**Чем заменить:** акцент — только primary-CTA, активное состояние, ключевая цифра; заголовки — `--ink`; акцентного ≤10% площади экрана.
+
+### A13. Тёмная тема как инверсия
+**Как выглядит:** `#000` фон, `#fff` текст, тот же кислотный акцент, белые SVG с прозрачными подложками, исчезнувшие тени.
+**Почему плохо:** максимальный контраст утомляет; тени и слои пропадают; изображения и логотипы «светятся» белыми прямоугольниками.
+**Чем заменить:** отдельная палитра (в AURORA уже есть): фон #0B–#14, поверхности светлее с уровнем, акцент светлее (L +0.15–0.2), тени глубже; SVG — `currentColor`, при необходимости `@media`-вариант.
+
+## Композиция и шаблонность
+
+### A14. Три одинаковые карточки с иконками
+**Как выглядит:** секция «Наши преимущества»: три равные карточки, три иконки в кружках, три заголовка в 3 слова, три абзаца по 2 строки.
+**Почему плохо:** это визитная карточка AI-шаблона; нет иерархии, нет причины, почему именно три; карточки не несут разной ценности.
+**Чем заменить:** редакционный нумерованный список (01/02/03) с hover-раскрытием; либо асимметричный сплит 7/5 с одной крупной мыслью и supporting-текстом; карточки — только для равнозначных данных (врачи, направления, новости).
+
+### A15. Центрированный hero с блобами
+**Как выглядит:** всё по центру: kicker, H1, подзаголовок, две кнопки, под ними — цветные пятна и парящая карточка.
+**Почему плохо:** нулевая композиционная мысль, «шаблон за 5 минут»; на мобиле превращается в столбик.
+**Чем заменить:** асимметричный hero 7/5 или 8/4: слева текст и CTA, справа — типографический якорь (крупные цифры, монограмма, SVG-композиция); либо редакционный «журнальный» первый экран с крупным H1 слева и метаданными справа.
+
+### A16. Дефолтный Bootstrap/Shadcn-вид
+**Как выглядит:** синие primary-кнопки 4px radius, стандартные инпуты с серой рамкой, та же тень у карточек, «карточка-заголовок-текст-кнопка».
+**Почему плохо:** нет ни одного решения, которое говорит о заказчике; интерфейс выглядит как учебный проект.
+**Чем заменить:** токены AURORA + одна signature-деталь; изменить хотя бы типографику (serif display), палитру (тёплая бумага/изумруд), форму контролов и редакционный ритм.
+
+### A17. Иконки в цветных кружках
+**Как выглядит:** каждая иконка в мягком кружке/скруглённом квадрате с пастельным фоном — в шапке, в карточках, в списке.
+**Почему плохо:** визуальный шум, «детский» вид; иконки становятся декором, а не навигацией.
+**Чем заменить:** голые stroke-иконки 20/24px в цвете `--muted`/`--ink-2`; цветной контейнер — только у статусов и точечно.
+
+### A18. Всё по центру
+**Как выглядит:** заголовки, лиды, карточки, секции — всё `text-align:center`, даже таблицы и списки.
+**Почему плохо:** центр допустим для коротких блоков (модалка, 404), но длинный текст по центру читается плохо и ломает сетку.
+**Чем заменить:** левое выравнивание для текста и сеток; центр — только для коротких пустых состояний/CTA-полос, осознанно.
+
+### A19. Feature-grid «3×3 с галочками»
+**Как выглядит:** стена из 6–9 одинаковых карточек с чекмарками и короткими пунктами «Быстро / Надёжно / Удобно».
+**Почему плохо:** количество не заменяет смысл; пользователь не читает 9 равнозначных пунктов.
+**Чем заменить:** 2–3 доказуемых факта с цифрами; остальное — в таблицу сравнения или в текст; галочки — только в тарифах/таблицах, где сравнение реально.
+
+### A20. Стоковые фото улыбающихся людей
+**Как выглядит:** hero с командой в офисе, рукопожатие, врач с планшетом, «счастливый клиент»; фотоаватарки-заглушки.
+**Почему плохо:** мгновенно читается как сток, снижает доверие; по брифу AURORA внешние фото запрещены.
+**Чем заменить:** типографика, SVG-диаграммы, монограммы, геометрические композиции, бумажная текстура; фото — только настоящие, если появятся.
+
+### A21. Corporate Memphis / «люди с длинными руками»
+**Как выглядит:** векторные человечки с гипертрофированными конечностями и пастельными пятнами.
+**Почему плохо:** родом из 2019–2021, ассоциируется с безликими корпорациями; не несёт смысла, стоит денег/времени.
+**Чем заменить:** простые геометрические SVG-схемы (путь пациента, SLA-график), моно-номера секций, монограммы.
+
+### A22. Фейковые доказательства
+**Как выглядит:** «10 000+ клиентов», «99.9% довольны», логотипы компаний, которых нет; отзывы без имён/дат.
+**Почему плохо:** разрушает доверие при первой проверке; для медицинского сайта особенно опасно.
+**Чем заменить:** реальные проверяемые цифры (число направлений, врачей, лет работы — с источником), реальные лицензии/оборудование; если данных нет — не выдумывать блок вообще.
+
+### A23. Автопрокручиваемая карусель
+**Как выглядит:** hero-слайдер, который сам листается каждые 5 секунд; точки-индикаторы; «пауза» отсутствует.
+**Почему плохо:** пользователь не успевает прочитать, управление раздражает, WCAG 2.2.2 требует остановки; на мобиле это просто плохо.
+**Чем заменить:** статичный hero с одной мыслью; если контента много — сетка/табы с ручным управлением; движения — только по действию.
+
+### A24. Анимации ради анимаций
+**Как выглядит:** счётчики, которые «набегают» при каждом появлении; бегущие градиентные подложки; пульсирующие кнопки; каждый элемент влетает с поворотом.
+**Почему плохо:** отвлекает, тормозит, утомляет; движение не сообщает ничего о состоянии.
+**Чем заменить:** движение только на действие/появление (120–260ms, `--ease`); reveal один раз на секцию (translateY 12–16px, opacity); в `prefers-reduced-motion` — отключено.
+
+### A25. Скролл-джек и параллакс-цирк
+**Как выглядит:** страница «пиннится», секции едут с разной скоростью, горизонтальный скролл, принудительные snap-точки.
+**Почему плохо:** ломает привычное поведение колеса/трекпада, вызывает укачивание, недоступно с клавиатуры.
+**Чем заменить:** обычный вертикальный скролл; ритм — отступами секций; если очень нужен эффект — один лёгкий parallax 5–10px и только на десктопе.
+
+### A26. Модалка на модалке
+**Как выглядит:** подтверждение открывается поверх модалки, тост поверх тоста, cookie-баннер поверх всего.
+**Почему плохо:** пользователь теряет контекст и не понимает, что закрывать; растёт риск ошибок.
+**Чем заменить:** одна модалка за раз; подтверждение — inline/в той же модалке; cookie-баннер — тонкая полоса снизу, не блокирующая контент.
+
+### A27. Cookie-баннер во весь экран
+**Как выглядит:** полноэкранный оверлей с «Принять всё / Настроить», который нельзя закрыть без согласия.
+**Почему плохо:** первое впечатление — «помойка баннеров»; перекрывает контент; часто нарушает UX-принципы.
+**Чем заменить:** полоса/карточка внизу с одним основным и одним второстепенным действием; контент читается сразу; кнопка закрытия видима.
+
+## Типографика и текст
+
+### A28. «16px везде»
+**Как выглядит:** заголовки 20–24px, body 16px, подписи 14–16px; всё серое, всё одинаковое.
+**Почему плохо:** нет иерархии — страница читается как документ; WOW не появляется без контраста масштабов.
+**Чем заменить:** display 56–96px (clamp), body 16–18, служебное 11–13; разница уровней ≥1.25×; 2–3 начертания.
+
+### A29. Длина строки 90–120 символов
+**Как выглядит:** текст растянут на весь контейнер 1200–1360px; на широком мониторе строки «бегут».
+**Почему плохо:** глаз теряет место при возврате на новую строку; чтение замедляется, страница выглядит небрежной.
+**Чем заменить:** `max-width:var(--measure)` (66ch), лиды ≤52ch, подписи ≤48ch; колонки 5–6 из 12, не 12.
+
+### A30. Body 14px и «мелкий шрифт в договоре»
+**Как выглядит:** 13–14px основной текст, 11px подписи, всё в плотных блоках.
+**Почему плохо:** нечитаемо на мобильном и при плохом зрении; выглядит как позорная копия банковского сайта.
+**Чем заменить:** body 16–18px; 14–15 — только таблицы/сайдбар; минимум 12px для служебного; на мобиле не уменьшать.
+
+### A31. Широкий трекинг в body и капс в длинных заголовках
+**Как выглядит:** `letter-spacing:.1em` у абзацев; длинные заголовки CAPS LOCK.
+**Почему плохо:** на кириллице широкий трекинг «рассыпает» слова; капс длинной фразы читается по буквам и выглядит крикливо.
+**Чем заменить:** body −0.006em; капс — только короткие лейблы (≤3 слов, 11–12px, +0.12–0.14em); заголовки — обычный регистр.
+
+### A32. Lorem ipsum и «рыба»
+**Как выглядит:** «Lorem ipsum dolor sit amet», «Заголовок раздела», повторы «Текст-заглушка».
+**Почему плохо:** нельзя оценить дизайн без реального контента; русская длина слов другая — макет «поедет» на настоящем тексте.
+**Чем заменить:** правдоподобный русский контент под домен (организация, Москва): конкретные услуги, имена, цифры, сроки.
+
+### A33. «Инновационные решения» и канцелярит
+**Как выглядит:** «Мы предлагаем комплексный подход», «команда профессионалов», «инновационные решения для вашего здоровья».
+**Почему плохо:** ноль информации, ноль доверия, невозможно отличить один сайт от тысячи таких же.
+**Чем заменить:** глагол + конкретика: «Запись к кардиологу за 2 минуты», «94% заявок закрыты в SLA», «11 направлений, 40 врачей»; заголовок = результат.
+
+### A34. Эмодзи вместо иконок
+**Как выглядит:** 🚀 в кнопке, ✅ в списке, 💎 в заголовке; эмодзи как bullets и иконки.
+**Почему плохо:** разный рендер на ОС, «несерьёзный» вид, нет единства stroke-толщин; на скриншотах в другом браузере — другая картинка.
+**Чем заменить:** inline SVG, stroke 1.5–1.6, 20/24px, единый набор; цвет — `currentColor`.
+
+### A35. Иконочный разнобой и «rocket»
+**Как выглядит:** облачка, ракеты, лампочки, шестерёнки; иконки разной толщины, из разных наборов, с заливкой и без; «ракета» у CTA.
+**Почему плохо:** rocket/cloud — клише стартап-лендингов; разнобой выдаёт сборку из готовых блоков.
+**Чем заменить:** один stroke-набор; иконка только там, где помогает смыслу (навигация, статусы), не у каждого заголовка; вместо rocket — конкретный глагол в кнопке.
+
+### A36. Бессмысленные бейджи и статусы
+**Как выглядит:** NEW/HOT/TOP/«Рекомендуем» на каждом втором элементе; бейджи без действия; статус только цветной точкой.
+**Почему плохо:** шум, конкуренция за внимание, цветовая слепота; статус должен читаться.
+**Чем заменить:** бейдж только для реально нового/важного, ≤2 на экран; статус = точка + текст (+ иконка при необходимости); цвета — из семантических токенов.
+
+## Компоненты и состояния
+
+### A37. Только default и hover
+**Как выглядит:** кнопка меняет фон при наведении — и всё; нет focus, active, disabled, loading, error.
+**Почему плохо:** клавиатура «слепая», после нажатия непонятно, сработало ли, формы не объясняют ошибок.
+**Чем заменить:** 7 состояний у интерактива; focus-visible через `--focus-ring`; loading — spinner/skeleton; error — под полем + `aria-invalid`.
+
+### A38. Disabled, похожий на активный
+**Как выглядит:** кнопка с обычной заливкой, но `disabled`; или прозрачность 0.9 и `cursor:default`.
+**Почему плохо:** пользователь жмёт и не понимает, почему ничего не происходит.
+**Чем заменить:** opacity 45–55%, `cursor:not-allowed`, без hover; рядом — объяснение «Сначала выберите врача».
+
+### A39. «Что-то пошло не так»
+**Как выглядит:** generic-ошибка в тосте без поля, кода и следующего шага; «Error 500»; «Некорректный ввод».
+**Почему плохо:** человек не знает, что чинить; для медицинских форм — потеря данных и доверия.
+**Чем заменить:** что случилось + что сделать + где: «Не удалось сохранить: нет соединения. Проверьте сеть и повторите»; ошибка у поля, данные сохранены.
+
+### A40. Placeholder вместо лейбла
+**Как выглядит:** поле без `<label>`, подпись только внутри как placeholder; при вводе подпись исчезает.
+**Почему плохо:** пользователь забывает, что вводит; скринридер не читает подпись; ошибки непонятны.
+**Чем заменить:** видимый `<label>` над полем; placeholder — только пример («+7 900 000-00-00»); `aria-describedby` на подсказки.
+
+### A41. Таблица, ломающая мобильный
+**Как выглядит:** широкая таблица растягивает `body`, на 390px появляется горизонтальный скролл всей страницы или обрезаются колонки.
+**Почему плохо:** невозможно пользоваться на телефоне; считается критичным дефектом.
+**Чем заменить:** `.table-wrap{overflow-x:auto}` + sticky первая колонка; key-колонки видимы, второстепенные — скрыть на мобиле; проверить `scrollWidth > innerWidth`.
+
+### A42. Нет focus-visible, div-кнопки, hover-only
+**Как выглядит:** `outline:none`, `<div onclick>`, действия только по наведению (иконки в строке таблицы).
+**Почему плохо:** интерфейс недоступен с клавиатуры и на тач-устройствах; axe даёт serious/critical.
+**Чем заменить:** `<button>`/`<a>`, `:focus-visible` кольцо, действия-иконки всегда видимы на мобиле и по фокусу на десктопе.
+
+---
+
+## Быстрая проверка «AI-slop» за 5 секунд
+
+1. Есть фиолетово-синий градиент / цветные блобы? → **сразу нет**.
+2. Три одинаковые карточки с иконками в первом экране? → **нет**.
+3. Заголовок 20–24px при body 16px? → **нет иерархии**.
+4. Серый текст ниже 4.5:1 / подписи `#999`? → **нечитаемо**.
+5. Отступы 13/17/22px? → **несогласованно**.
+6. Эмодзи/иконки-ракеты/стекло/радиусы 24px у всего? → **шаблон**.
+7. Lorem ipsum / «инновационные решения»? → **нет контента**.
+8. Нет focus-visible / только hover? → **недоступно**.
+
+Если хотя бы один пункт «да» — это P0-блокер, до рубрики 4.4 не допускается.
+
+## Не переусердствуй: анти-антипаттерны
+
+- **Стерильный минимализм:** белый экран, серый текст 16px, тонкие линии — «чисто», но нет иерархии и характера. Минимализм требует **сильной типографики и точного воздуха**, иначе это A28/A30.
+- **Погоня за «дорого»:** всё serif и бежевое — без контраста, акцента и цифр получается «йога-студия», а не клиника.
+- **Убрать всё:** карточки, иконки и цвет — не зло сами по себе. Зло — **дефолт без смысла**. Одна карточка с реальным содержанием лучше, чем ноль карточек.
+- **Красота в ущерб функции:** контраст, размер кегля, состояния и доступность не приносятся в жертву композиции. Сначала ясность, потом WOW.