--- name: page-review description: "Полный pipeline создания и проверки клиентских страниц командой из 7 агентов: дизайн-система → SEO-аудит → копирайтинг → фронтенд → оптимизация картинок → код-ревью → визуальная валидация. Для любых клиентских проектов. Вызов: /page-review [клиент] [url или описание задачи]" argument-hint: "[клиент] [url или задача]" disable-model-invocation: false --- # Page Review — Командный Pipeline Полный цикл создания/проверки клиентских HTML страниц командой из 7 специализированных агентов. ## Когда использовать - Создание НОВЫХ страниц для клиентов - Ревью СУЩЕСТВУЮЩИХ страниц - Редизайн/обновление страниц - Проверка качества перед отдачей клиенту - Любой клиентский проект (не только presale) ## Входные данные **Аргумент 1:** Алиас клиента (ant, geely, madwave, demosmed и т.д.) **Аргумент 2:** URL страницы или описание задачи Если аргументы не указаны — спросить у пользователя. --- ## КОМАНДА АГЕНТОВ (7 ролей) ``` ┌─────────────────────────────────────────────────────────────┐ │ ПОДГОТОВКА │ │ │ │ 1. ДИЗАЙНЕР → design-system-architect │ │ Извлекает цвета, шрифты, стиль с сайта клиента │ │ │ │ 2. SEO-АНАЛИТИК → seo-analyzer │ │ SEO-аудит: мета-теги, структура, ошибки │ │ (параллельно с шагом 1) │ │ │ │ СОЗДАНИЕ │ │ │ │ 3. КОПИРАЙТЕР → landing-page-agent │ │ Пишет тексты: заголовки, USP, CTA, описания │ │ │ │ 4. ФРОНТЕНДЕР → frontend-developer │ │ Собирает HTML: структура, CSS, JS, анимации │ │ │ │ ПРОВЕРКА │ │ │ │ 5. ОПТИМИЗАТОР → image-optimizer (скрипт) │ │ sips resize, base64, <100KB на картинку │ │ │ │ 6. КОД-РЕВЬЮЕР → code-reviewer │ │ Проверяет: баги, совместимость, автономность │ │ (параллельно с шагом 7) │ │ │ │ 7. UI-ВАЛИДАТОР → ui-visual-validator │ │ Проверяет: бренд, контраст, доступность, UX │ │ (параллельно с шагом 6) │ └─────────────────────────────────────────────────────────────┘ Визуально: [1.Дизайн] ──┐ ├──→ [3.Copy] → [4.Frontend] → [5.Images] ──┐ [2.SEO] ──┘ ├──→ ГОТОВО [6.Code-Rev] ─┤ [7.UI-Valid] ──┘ ``` --- ## PIPELINE ### РЕЖИМ 1: СОЗДАНИЕ НОВОЙ СТРАНИЦЫ Выполнять строго последовательно, каждый агент передаёт результат следующему. #### ШАГ 1: ДИЗАЙН-СИСТЕМА (design-system-architect) **Запустить:** `Task(subagent_type="design-system-architect")` Передать в промпт: - URL сайта клиента - Задача: извлечь полную дизайн-систему Агент должен вернуть: - Основные цвета (hex): primary, secondary, accent, bg, text - Градиенты - Шрифты (family, weight) - Стиль кнопок, карточек, секций - Особенности (волны, тени, скругления) **Результат:** Сохранить в `clients/[name]/design-system.md` или `presales/[name]/design-system.md` Если design-system.md или config.yaml уже существует — использовать его, не извлекать заново. #### ШАГ 2: SEO-АУДИТ (seo-analyzer) — параллельно с шагом 1 **Запустить:** `Task(subagent_type="seo-analyzer")` ПАРАЛЛЕЛЬНО с шагом 1 Предпочтительно через скрипт: ```bash python3 /Users/antonk/artvision-data/scripts/hybrid-seo-audit.py --url [URL] ``` Если скрипт недоступен — ручной аудит: - `curl -sL [URL] | grep -E '|<meta name="description"'` - WebFetch [URL]/robots.txt, /sitemap.xml - Проверить: мета-теги, structured data, аналитика, контент **Результат:** `clients/[name]/seo/audit_YYYY-MM-DD.md` **TF-IDF проверка контента страницы:** Если страница содержит SEO-контент (статья, услуга), проверить через: ```bash python3 ~/artvision-data/products/seo-pipeline/core/content_checker.py --text page.html --query "основной запрос" --top 15 -v ``` Метрики: тематичность ≥70%, уникальность ≥85%, релевантность SERP ≥30% Если SEO-аудит уже существует — ПРОПУСТИТЬ этот шаг. #### ШАГ 3: КОПИРАЙТИНГ (landing-page-agent) — если нужны новые тексты **Запустить:** `Task(subagent_type="landing-page-agent")` Передать в промпт: - Дизайн-систему (из шага 1) - Данные о клиенте/задаче - SEO-аудит (если есть) - Данные Artvision (из `internal/business/`) Агент должен вернуть: - Hero заголовок + подзаголовок - Тексты для всех секций - CTA тексты - USP (уникальные преимущества) **Результат:** Сохранить в `[path]/marketing-copy.md` Если тексты уже есть (пользователь дал контент) — ПРОПУСТИТЬ этот шаг. #### ШАГ 3: СБОРКА HTML (frontend-developer) **Запустить:** `Task(subagent_type="frontend-developer")` Передать в промпт **ВСЁ**: 1. **Дизайн-систему** (из шага 1) — ЯВНО hex коды, шрифты, стиль 2. **Тексты** (из шага 2) — 100% контента 3. **Технические требования:** - Автономный HTML (ZERO внешних зависимостей) - CSS/JS inline - Системные шрифты (НЕ Google Fonts CDN) - SVG иконки inline - iOS Safari совместимый (НЕ Tailwind JS runtime) - Responsive: 1200, 1024, 768, 480px breakpoints - Размер < 500KB 4. **Wow-эффекты** (если КП/лендинг): - Scroll-triggered fade-in (IntersectionObserver) - Counter animation - Card hover эффекты - Typewriter (опционально) - Smooth scroll **Результат:** HTML файл в `[path]/` #### ШАГ 5: ОПТИМИЗАЦИЯ КАРТИНОК (image-optimizer) Если HTML содержит изображения (base64 или файлы): ```bash # Ресайз до 800px sips -Z 800 image.png --out optimized.png # JPEG качество 70% sips -Z 800 -s formatOptions 70 image.jpg --out optimized.jpg # Конвертация в base64 base64 -i optimized.png | tr -d '\n' ``` Критерии: - Каждая картинка < 100KB после сжатия - Ширина <= 800px - JPEG: качество 70-80% - Итого HTML файл < 500KB Если картинок нет — ПРОПУСТИТЬ этот шаг. #### ШАГ 6: КОД-РЕВЬЮ (code-reviewer) — ОБЯЗАТЕЛЬНО! **Запустить:** `Task(subagent_type="code-reviewer")` Передать в промпт: - Путь к HTML файлу - Прочитать файл и проверить: | Критерий | Описание | Обязательно | |----------|----------|-------------| | JS баги | null checks, memory leaks, event listeners | ДА | | Адаптивность | breakpoints 1024, 768, 480 | ДА | | iOS Safari | нет Tailwind JS CDN, нет CDN вообще | ДА | | Автономность | нет внешних URL (кроме ссылок в контенте) | ДА | | Размер | < 500KB | ДА | | Секции | все запланированные секции на месте | ДА | | Контраст | текст читаем на фонах | ДА | | UX | навигация, CTA видны, формы работают | ДА | | Overflow | нет overflow: hidden на html/body | ДА | **Формат ответа:** ``` Критерий: PASS / FAIL (детали) ``` **Если есть FAIL → исправить → перезапустить шаг 3.** #### ШАГ 7: ВИЗУАЛЬНАЯ ВАЛИДАЦИЯ (ui-visual-validator) — ОБЯЗАТЕЛЬНО! **Запустить:** `Task(subagent_type="ui-visual-validator")` Передать в промпт: - Путь к HTML файлу - Дизайн-систему клиента (hex коды из шага 1) - Проверить: | Критерий | Описание | Обязательно | |----------|----------|-------------| | Бренд | Цвета = бренд клиента, НЕ generic, НЕ от другого проекта | ДА | | WCAG | Контраст >= 4.5:1 для текста | ДА | | Focus | :focus-visible стили для доступности | ДА | | Иерархия | Визуальная иерархия H1 > H2 > H3 | ДА | | Анимации | Wow-эффекты работают корректно | Если есть | | Консистентность | Одинаковые отступы, шрифты, стили | ДА | **Формат ответа:** ``` Критерий: PASS / FAIL (детали) ``` **Если цвета НЕ от клиента → ПЕРЕДЕЛАТЬ с шага 3.** --- ### РЕЖИМ 2: РЕВЬЮ СУЩЕСТВУЮЩИХ СТРАНИЦ Для проверки УЖЕ созданных страниц — запустить только шаги 4 и 5 (code-reviewer + ui-visual-validator). ``` 1. Загрузить design-system.md клиента (или извлечь с сайта) 2. Запустить code-reviewer на файл(ы) — параллельно 3. Запустить ui-visual-validator на файл(ы) — параллельно 4. Собрать отчёт: PASS / FAIL по каждому файлу 5. Если FAIL — исправить и перезапустить ``` Для массовой проверки (несколько файлов): ```bash # Найти все HTML файлы клиента ls clients/[name]/output_v6/*.html ``` Запустить параллельно code-reviewer + ui-visual-validator на каждый файл. --- ## ДЕПЛОЙ (опционально) После прохождения ВСЕХ проверок: ```bash # Загрузить на artvision.pro (VPS) ssh root@80.90.181.152 "mkdir -p /var/www/artvision/kp/[name] && chown www-data:www-data /var/www/artvision/kp/[name]" scp файл.html root@80.90.181.152:/var/www/artvision/kp/[name]/index.html ssh root@80.90.181.152 "chown www-data:www-data /var/www/artvision/kp/[name]/index.html" # Проверить curl -sI "https://artvision.pro/kp/[name]/" | head -5 ``` --- ## ФИНАЛЬНЫЙ ОТЧЁТ После завершения pipeline — показать сводку: ``` PIPELINE REPORT: [Клиент] — [Название] ═══════════════════════════════════════ Дизайн-система: ✅ Извлечена (primary: #XXXXXX) Копирайтинг: ✅ Готов (X секций) HTML: ✅ Собран (XXK, X строк) Код-ревью: ✅ ALL PASS (X/X критериев) Визуальная проверка: ✅ ALL PASS (X/X критериев) Деплой: ✅ https://artvision.pro/KP/[name]/ Файлы: - [path]/design-system.md - [path]/marketing-copy.md - [path]/файл.html ``` --- ## КРИТИЧЕСКИЕ ПРАВИЛА 1. **НИКОГДА** не пропускать шаги 4 и 5 (code-reviewer + ui-visual-validator) 2. **НИКОГДА** не использовать цвета от другого проекта 3. **ВСЕГДА** передавать hex-коды ЯВНО в промпт каждому агенту 4. **ВСЕГДА** шаги 4-5 запускать ПАРАЛЛЕЛЬНО (экономия времени) 5. **ЕСЛИ** FAIL на ревью → исправить → перезапустить → НЕ отдавать клиенту с FAIL 6. **ЕСЛИ** нет design-system.md → извлечь с сайта (шаг 1) ПЕРЕД любой работой --- ## ПРИМЕРЫ ВЫЗОВА ``` /page-review ant https://ant.partners/services/seo/ → Полный pipeline: дизайн + копи + HTML + ревью + валидация /page-review ant review → Только ревью существующих страниц в clients/ant-partners/output_v6/ /page-review demosmed → Полный pipeline для DemosMed (presales/demosmed/) /page-review geely новая страница "Geely Coolray обзор" → Создание новой страницы с полным pipeline ``` --- ## SEO-правила DrMax + Шакин (обновлено 2026-03-08) ### Коммерческие факторы (чеклист проверки) #### Информация о компании - Юридическое наименование (ООО/ИП/полное название) — на видном месте - Физический адрес офиса + embedded карта (Яндекс.Карты или Google Maps) - Телефон, email, мессенджеры (минимум 2 канала связи) - Фотографии команды, офиса, производства (реальные, не стоковые) - История компании с реальными датами и фактами - Страница "О компании": подробное описание деятельности, ценностей, миссии #### Контактная доступность - Несколько каналов: телефон, email, форма обратной связи, мессенджеры - Форма обратной связи: с согласием на обработку персональных данных (обязательно юридически) - Отдельная страница "Контакты" (не только в футере) #### Каталог товаров/услуг - Логичная структура категорий с подкатегориями - Поисковые фильтры и параметры сортировки - Уникальные страницы категорий (не дубли) - Глубокий каталог демонстрирует масштаб бизнеса #### Карточки товаров/услуг (8 обязательных элементов) - Подробное описание (не скопированное у поставщика) - Характеристики / параметры - Несколько фотографий (реальные, разные ракурсы) - Цена: актуальная, без скрытых условий - Наличие / сроки изготовления - Условия доставки прямо в карточке - Отзывы покупателей - CTA: чёткий призыв к действию #### Доставка и оплата - Отдельные страницы "Доставка" и "Оплата" - Способы оплаты: перечислены все, с иконками платёжных систем - Сроки и стоимость доставки: конкретные цифры, не "уточняйте у менеджера" - Условия возврата и обмена: чётко, без юридического языка - Гарантии: конкретные сроки и условия #### Цены и прозрачность - Цены: актуальные, финальные, без звёздочек - Если цена "от": указывать конкретный диапазон - Чем прозрачнее условия — тем выше доверие поисковика #### Отзывы и репутация - Отзывы на страницах товаров/услуг - Кейсы выполненных проектов с результатами - Ссылки на внешние площадки (Яндекс, Google, 2GIS, Zoon, Отзовик) - Реакция на негатив: профессиональный публичный ответ в течение 24–48 часов #### Юридические страницы - Политика конфиденциальности (обязательно при сборе данных) - Пользовательское соглашение / Публичная оферта - Возрастные ограничения и предупреждения (если YMYL) ### CTR и сниппеты #### Structured Data (Schema.org / JSON-LD) - JSON-LD предпочтителен (header или footer) - Данные в разметке ОБЯЗАТЕЛЬНО отображаются на странице визуально — иначе санкции - Для локального бизнеса: конкретный подтип (Dentist, Attorney), не общий LocalBusiness - Обязательные поля NAP: Name, Address, Phone - Рекомендованные: часы работы, lat/long, email, URL, логотип, соцсети - AggregateRating с реальными данными - Валидировать через Google Rich Results Test и Яндекс валидатор перед деплоем #### FAQ Schema - FAQ блок на странице + FAQPage schema в JSON-LD - Вопросы содержат ключевые фразы (но естественно) - Ответы — конкретные, 2–3 предложения #### Breadcrumbs - BreadcrumbList schema в JSON-LD - Визуально на странице (не только в разметке) - Отражает реальную иерархию сайта #### Title для CTR - Первые 52 символа: 4U (Useful, Urgent, Unique, Ultra-specific) - 53+ символы: ключи второго приоритета - В конце: бренд/домен через тире - Общая длина в коде: 200+ символов для ранжирования #### Meta Description для CTR - 120–133 символа для корректного отображения - USP + транзакционные маркеры ("бесплатно", "доставка", "гарантия", "цена") - Текст для человека, не набор ключей #### Пороги CTR - Отличный: 15%+ | Средний: 7–8% | Плохой: 1–2% - Каждый +3% CTR ≈ +1 позиция в выдаче - Аудит: малый сайт от 100 показов/мес, крупный от 1 000 показов/мес #### После обновления сниппета 1. Обновить дату модификации страницы 2. Отправить в GSC / Вебмастер на переиндексацию 3. Тестировать варианты title/description 4. Мониторинг CTR еженедельно в первый месяц