simbiot-harness/design-plans/simbiot-cilby-v2-audit.md

2.9 KiB
Raw Blame History

improve-ui аудит симбиот-лендинга — план фиксов (t-261002151425)

Аудитор: improve-ui (skills/ui/improve-ui) · поверхность: https://simbiot.cil.by (одностраничник, /var/www/simbiot/index.html) · evidence: скрины 1440×5200 desktop и 390×844/3600 mobile (headless chromium prod), dump-dom после JS, статический разбор CSS/HTML. Критерии: contract + runtime + correction.

Design language

  • Audited surface: одностраничный лендинг (nav, hero, team/agents, system, loop, math, included, pricing, CTA, footer).
  • Дизайн-источники: токены :root (paper/ink/line/acc-violet), Inter Tight + JetBrains Mono, uppercase mono-кнопки, секции с sec-idx нумерацией.
  • Documented decisions: один сигнальный цвет (--acc:#5b4be0), светлый фон, плоские карточки с 1px линиями.

Находки (в порядке приоритета)

P0 — контент ниже hero невидим без JS (runtime-ловушка)

line 177: .reveal{opacity:0;transform:translateY(18px)} — все секции после hero рендерятся с opacity:0 и видны только после JS (IntersectionObserver → .vis). Скрин/DOM: без скриптов страницы нет контента; SEO-краулеры и отказавший JS = пустая страница продаж. Правка контракта: <noscript>-стиль, разблокирующий .reveal; структуры и анимации не меняются.

P1 — keyboard-фокус не виден (a11y)

.btn/ссылки не имеют :focus-visible стилей (grep: 0 вхождений). Правка: один унифицированный фокус — outline:2px solid var(--acc); outline-offset:2px.

P1 — og/twitter мета отсутствует (social-шеринг продающего сайта)

grep og:/twitter: = 0. Прод-сайт без превью при шеринге. Правка: og:title/ description/url/image (1200×630 og.png из того же визуального языка: тёмный фон, фиолетовый акцент, "Hire nobody. Ship everything."), twitter:card summary_large_image.

P2 — prefers-reduced-motion не учтён

reveal-переходы и pulse-анимация продолжаются при настроенном reduced-motion. Правка: @media (prefers-reduced-motion: reduce) — отключить transition/animation.

Что намеренно НЕ трогаем

Hero-пропорции, шрифтовую пару, палитру, структуру секций, CTA-модали — идентичность продукта сохраняется полностью (no rebranding).