---
name: design-guardrails
description: "Финальная верификация дизайн-артефакта: Design Read → Quality Gate → Visual Diff → Drift Rejection. Для «повтори сайт в коде», «редизайн без поломки» или как QA-гейт PASS/FAIL перед сдачей. Соседи: design-taste (ДО), design-orchestrator (генерация)."
when_to_use: |
  1) Пользователь дал скриншот/URL/дизайн-референс и просит воспроизвести в коде максимально точно.
  2) Пользователь дал существующий функциональный React/HTML/CSS-код (Bootstrap-дефолты, ад-хок Tailwind) и просит
     сделать красивее БЕЗ поломки состояния, эффектов, API-вызовов, обработчиков событий, роутинга.
  3) Финальная проверка любого сгенерированного design-orchestrator/frontend-design/design-taste артефакта перед сдачей —
     нужен механический PASS/FAIL чек-лист, а не субъективное "выглядит нормально".
---

# Design Guardrails — верификация вместо «на глаз похоже»

> Источник механики: **Yu-369/VibeCurb** (MIT, 298★, ресёрч канала @usefulrepa 2026-07-20). Полные вендор-копии двух исходных скиллов (`pixel-perfect-replication`, `visual-redesign`) — `references/pixel-perfect-full.md` и `references/visual-redesign-full.md`. Этот файл — обобщённая рабочая механика для нашей дизайн-семьи (не привязана к конкретному npm-CLI VibeCurb, только к паттерну).

## Зачем это НЕ дублирует наше

У нас уже есть `design-taste` (шкалы вкуса + список AI-tells) и `frontend-design`/`design-orchestrator` (генерация). Ни один из них не верифицирует **результат против эталона** механически. `design-taste` — про вкус ДО и ВО ВРЕМЯ генерации. `design-guardrails` — про доказательство ПОСЛЕ: реальный PASS/FAIL по категориям, а не самоотчёт «сделал красиво». Это ортогональная функция — из семьи VibeCurb берём именно её.

## Общий пайплайн (5 стадий, применяется к обоим сценариям ниже)

```
1. Design Read      — извлеки сигналы ДО кода: из референса (скриншот/URL) ИЛИ из аудита существующего кода
2. Quality Gate 1    — не начинай писать код/CSS, пока extraction/audit не заполнены конкретными значениями
3. Precise Build     — строй/правь с точным соответствием извлечённому, слой за слоем (не всё сразу)
4. Visual Diff       — сверь результат с эталоном по PASS/FAIL таблицам (см. ниже)
5. Drift Rejection   — если что-то не прошло: CSS keyword-easing (ease-in-out), AI-purple, div-фейк-скриншоты,
                       plain-text wordmarks вместо логотипов, placeholder-паттерны — отклони и переделай тот слой
```

Ни одна стадия не пропускается. Провал Quality Gate блокирует переход к следующей стадии.

## Сценарий A: скриншот/референс → точный код (Pixel-Perfect)

Реф = спецификация. Твоя роль — переводчик, не дизайнер. Полная методика (7 слоёв извлечения) — `references/pixel-perfect-full.md`.

### Extraction Sheet (7 слоёв, заполняй КОНКРЕТНЫМИ значениями, не «примерно»)

| Слой | Что измеряешь |
|---|---|
| 1. Layout Grid | max-width контейнера, колонки, отступы, высоты секций, выравнивание |
| 2. Typography | шрифт (по форме букв: `a` однокорпусная/двухкорпусная, `g` открытый/закрытый хвост, `R`/`Q`), вес, размер, line-height, tracking — на КАЖДЫЙ текстовый элемент отдельно |
| 3. Color | точный hex на каждую роль (bg/text/accent/border/shadow), не «синеватый» |
| 4. Spacing | базовая единица, паддинги кнопок/карточек, grid-gap, секционные отступы (верх и низ ОТДЕЛЬНО — часто не равны) |
| 5. Components | радиус углов (единый язык: sharp/subtle/rounded/pill/mixed-с-правилом), border, shadow, состояния |
| 6. Atmosphere | шум/grain, radial glow, frosted glass, градиенты, тонированные тени — добавляй, ТОЛЬКО если референс их показывает |
| 7. Responsive/Interaction | сигналы поведения из статики: sticky-nav, carousel-точки, что схлопнется на мобильном |

**Артистичные ассеты (фото/иллюстрации/текстуры) — CSS их не воспроизводит.** Классифицируй каждый визуальный элемент: solid-цвет/градиент/геометрия → CSS ок; фото/hand-drawn/органичные текстуры → генерируй изображение (`generate_image`/nano-banana) или `picsum.photos/seed/{keyword}/{w}/{h}`, НИКОГДА не аппроксимируй CSS-градиентом — глаз мгновенно ловит разницу.

### Visual Diff — PASS/FAIL (прогони после сборки)

Категории: **Layout** (порядок и число секций, max-width, grid-ratio, вертикальные отступы, выравнивание) · **Typography** (шрифт, вес, line-height, tracking по каждому уровню) · **Color** (bg/text/accent/border — точные hex, не «похоже») · **Component** (радиус, паддинг, тень, стиль навигации) · **Spacing** (все гэпы из слоя 4) · **Atmosphere** (только то, что видно на референсе — не добавляй лишнего) · **Technical** (0 console-ошибок, шрифты загружены, нет horizontal overflow, `min-h-[100dvh]` не `h-screen`, `prefers-reduced-motion`).

Каждая строка — PASS или FAIL. Любой FAIL блокирует сдачу.

## Сценарий B: редизайн существующего РАБОЧЕГО кода (Sacred vs Slop)

Полная методика (5 фаз + Post-Op) — `references/visual-redesign-full.md`. Правило №1: **JS-логика неприкосновенна.**

### Sacred vs Slop — классификация ПЕРЕД любой правкой

```
SACRED (никогда не трогать):
  useState/useReducer, useEffect/useCallback/useMemo, API-вызовы, ЛОГИКА обработчиков (не то, как выглядит кнопка,
  а что происходит по onClick), условный рендеринг, роутинг, валидация форм, контексты, кастомные хуки,
  трансформации данных (map/filter/reduce), error handling, prop-интерфейсы, ref-присвоения, aria-*/data-*/id
  (если используются в JS/тестах)

SLOP (апгрейдь агрессивно):
  className-строки, инлайн-стили НЕ завязанные на state, CSS/SCSS файлы, Tailwind/Bootstrap-классы,
  цвета/шрифты/spacing/radius/тени/transition/z-index значения, layout-структура (flex/grid конфиг),
  обёрточные div'ы ДЛЯ ВЁРСТКИ (не для условной логики)
```

**Серая зона:** `className={isActive ? 'active' : ''}` — тернарник неприкосновенен, но САМИ имена классов — slop (`'nav-link--active' : 'nav-link'`). `style={{display: isOpen ? 'block' : 'none'}}` — это state-логика, не трогать. Золотое правило серой зоны: если не уверен — не трогай, добавь стили РЯДОМ, а не вместо.

### Пайплайн: Audit → Extraction → Prescription → Surgery → Post-Op

1. **Audit** — прочитай каждый файл, заполни таблицу Sacred/Slop/Risk (Low/Medium/High) на файл, каталогизируй конкретные «эстетические преступления» (не «выглядит плохо», а «`box-shadow: 0 2px 4px rgba(0,0,0,0.1)` — дефолтная Bootstrap-тень»).
2. **Extraction** — зафиксируй ТЕКУЩИЕ значения (7 слоёв как в сценарии A) — это снимок «до».
3. **Prescription** — для каждого slop-пункта распиши целевую замену с обоснованием («почему»). Один accent-цвет на весь проект, не рандомный.
4. **Surgery** — правь ОДИН слой за раз (tokens → typography → color → spacing → components → atmosphere → motion), тестируй после каждого слоя. Предпочитай НОВЫЙ CSS-файл, подключённый последним в каскаде (`gold.css`), а не правку существующих стилей — это делает откат тривиальным. НИКОГДА не переписывай JSX-структуру ради эстетики — только `className`/`style`/`data-*` добавления.
5. **Post-Op** — прогони чек-листы ниже. Любой FAIL в Functionality блокирует всё остальное — сначала откати слой и разберись.

### Post-Op чек-листы — PASS/FAIL

**Functionality (Sacred Integrity)** — все роуты грузятся · формы отправляются · API-вызовы возвращают и рендерят данные · все state-тогглы работают · все обработчики стреляют · 0 console-ошибок · 0 TS-ошибок · нет undefined property errors.

⚠ Если хоть один Functionality-чек FAIL — откат последнего слоя, разбор причины ДО перехода к визуальным чекам.

**Visual/Atmosphere/Motion/Responsive** — см. полные таблицы в `references/visual-redesign-full.md` (Phase 5). Ключевое: `gold.css` можно удалить одной строкой и откатить ВСЁ визуальное; ни один существующий CSS-файл не удалён (safety net); ни одной структурной правки JSX.

## Drift Rejection — быстрый словарь дефолтов, которые ловим и отклоняем

CSS keyword-easing (`ease-in-out` без cubic-bezier) · AI-purple/неоновые градиенты · div-based fake screenshots · plain-text wordmarks вместо реальных SVG-логотипов в logo wall · placeholder-паттерны (`// TODO`, `lorem ipsum` в финальной сдаче) · Bootstrap-синий `#0d6efd` как «акцент» · zebra-striped таблицы без причины.

Полный список AI-tells (60+, em-dash, eyebrow-инфляция, Jane Doe и т.д.) уже покрыт в `design-taste` — не дублируется здесь, при обнаружении нарушения сверяйся с тем скиллом.

## Когда НЕ этот скилл

Нет референса и нет существующего кода — это генерация с нуля, иди в `frontend-design`/`design-orchestrator` + `design-taste`. Этот скилл включается, когда есть ЭТАЛОН для сверки (изображение или живой код), а не когда рисуешь с чистого листа.