page-create

name: page-create description: "Создание HTML страниц из шаблонов для клиентов Artvision. Выбор шаблона, парсинг контента, заполнение, config.yaml клиента. Триггеры: 'создай страницу', 'сделай HTML', 'новая страница', 'шаблон страницы', 'page from template'."

Page Create — Генератор страниц из шаблонов

Назначение

Создание HTML-страниц для клиентов Artvision на основе готовых шаблонов с автоматическим применением фирменного стиля клиента.

Доступные шаблоны

Mockdown — кастомные макеты через ASCII wireframes

Когда использовать: пользователь хочет нестандартный лейаут, которого нет в шаблонах.

Процесс:

1. Пользователь рисует макет на https://mockdown.design (бесплатный ASCII wireframe editor)
2. Экспортирует в Markdown (кнопка "Copy Markdown")
3. Вставляет ASCII-макет в чат или в файл
4. Claude конвертирует wireframe в полноценный HTML с применением config.yaml клиента

Пример использования:

Пользователь: Вот макет с mockdown.design:
┌──────────────────────────────┐
│         HERO SECTION         │
│   [Заголовок]  [CTA кнопка] │
├──────────┬───────────────────┤
│ Sidebar  │   Main Content    │
│ • Nav    │   Cards (3 cols)  │
│ • Filter │   ┌───┐┌───┐┌───┐│
│          │   │   ││   ││   ││
├──────────┴───────────────────┤
│         FAQ Accordion        │
└──────────────────────────────┘

Claude: Загружаю config клиента → генерирую HTML по макету → code-review → сохраняю.

Правила конвертации wireframe → HTML:

• Каждый прямоугольник ┌───┐ = секция или блок
• Текст внутри [...] = интерактивный элемент (кнопка, ссылка, input)
• Колонки определяются по │ разделителям
• Строки списка • = <li> элементы
• Названия секций (HERO, FAQ, etc.) → соответствующие HTML5 <section>

Процесс создания страницы

ШАГ 1: ОПРЕДЕЛИТЬ ПАРАМЕТРЫ
─────────────────────────────
- [ ] Клиент: кто? (алиасы в artvision-data/CLAUDE.md)
- [ ] Тип страницы: статья / услуга / кейс / FAQ / лендинг / каталог
- [ ] Источник контента: URL / текст / файл

ШАГ 2: ЗАГРУЗИТЬ CONFIG КЛИЕНТА
─────────────────────────────────
- [ ] Прочитать clients/[name]/config.yaml
- [ ] Прочитать clients/[name]/patches/*.md (ошибки и особенности клиента)
- [ ] Извлечь: цвета, шрифты, контакты, логотип
- [ ] Если нет config — спросить пользователя или взять дефолты

ШАГ 3: ПОЛУЧИТЬ КОНТЕНТ
───────────────────────────
Если источник = URL:
  - [ ] WebFetch для контента (НЕ для мета-тегов!)
  - [ ] curl -sL URL | grep -E '<title|<meta' для SEO-данных
  - [ ] ПОДСЧИТАТЬ блоки: H2=?, FAQ=?, карточки=?
  - [ ] Записать числа — сверим после генерации

Если источник = текст/файл:
  - [ ] Прочитать полностью
  - [ ] НЕ сокращать и НЕ перефразировать

ШАГ 4: ВЫБРАТЬ ШАБЛОН
─────────────────────────
- [ ] Загрузить соответствующий шаблон из templates/
- [ ] Проанализировать data-field атрибуты
- [ ] Сопоставить контент с полями шаблона

ШАГ 5: ГЕНЕРАЦИЯ
────────────────────
- [ ] Task(subagent_type="frontend-developer")
  - Передать: шаблон + 100% контента + config клиента
  - Указать: "СТРОГО X H2, Y FAQ — ровно столько, сколько в источнике"
  - Применить цвета/шрифты из config.yaml

ШАГ 6: КОД-РЕВЬЮ (ОБЯЗАТЕЛЬНО!)
─────────────────────────────────────
- [ ] Task(subagent_type="code-reviewer")
  Проверить:
  - Количество H2 совпадает с источником?
  - Количество FAQ совпадает?
  - Нет overflow: hidden на html/body?
  - Нет добавленных "от себя" блоков?
  - Нет внешних зависимостей (CDN, fonts)?
  - JS: нет багов, null checks, memory leaks?
  - Адаптивность (breakpoints 1024, 768, 480)?
  - iOS Safari совместимость?

⚠️ Если FAIL — исправить и перезапустить шаг 5.

ШАГ 7: ВИЗУАЛЬНАЯ ВАЛИДАЦИЯ (ОБЯЗАТЕЛЬНО!)
────────────────────────────────────────────────
- [ ] Task(subagent_type="ui-visual-validator")
  Проверить:
  - Цвета = бренд клиента (из config.yaml/design-system.md)?
  - WCAG контраст ≥ 4.5:1?
  - :focus-visible стили для доступности?
  - Визуальная иерархия корректна?
  - Нет "чужих" цветов от другого проекта?
  - Анимации работают корректно?

⚠️ Если цвета не от клиента — ПЕРЕДЕЛАТЬ с шага 5.

ШАГ 8: ОПТИМИЗАЦИЯ КАРТИНОК
─────────────────────────────────
Если есть изображения:
  - [ ] sips -Z 800 для ресайза
  - [ ] base64 для встраивания
  - [ ] Каждая <100KB

ШАГ 9: ДЕПЛОЙ (опционально)
──────────────────────────────────
Если нужен публичный URL:
  - [ ] scp файл на artvision.pro/KP/[name]/ или в output_v6/
  - [ ] Проверить curl -sI URL → HTTP 200

ШАГ 10: ФИНАЛЬНАЯ ПРОВЕРКА
───────────────────────────────
- [ ] code-reviewer: ALL PASS ✅
- [ ] ui-visual-validator: ALL PASS ✅
- [ ] grep -oE 'https?://[^"'\''> ]+' file.html — нет внешних URL?
- [ ] Размер файла <500KB
- [ ] Открыть в браузере, визуальная проверка
- [ ] Сохранить в clients/[name]/output_v6/

Config клиента (config.yaml)

Формат

# clients/[name]/config.yaml
name: "Название клиента"
site: "https://example.com"

brand:
  primary_color: "#1e3a5f"    # Основной цвет (заголовки)
  accent_color: "#c9a227"     # Акцентный (кнопки, ссылки)
  bg_color: "#f8f9fa"         # Фон блоков
  text_color: "#333"          # Текст

fonts:
  heading: "Inter, system-ui, sans-serif"
  body: "Inter, system-ui, sans-serif"

contacts:
  phone: "+7 (999) 123-45-67"
  email: "info@example.com"
  address: "Москва, ул. Примерная, 1"
  telegram: "@example"

cta:
  primary_text: "Заказать консультацию"
  primary_url: "/contact/"
  secondary_text: "Подписаться на Telegram"
  secondary_url: "https://t.me/example"

logo:
  path: "logo.png"  # относительно папки клиента
  alt: "Логотип компании"

Дефолты (если нет config)

brand:
  primary_color: "#1e3a5f"
  accent_color: "#c9a227"
  bg_color: "#f8f9fa"
  text_color: "#333"
fonts:
  heading: "Inter, system-ui, sans-serif"
  body: "Inter, system-ui, sans-serif"

Маркеры полей в шаблонах

Шаблоны используют data-field атрибуты для идентификации заполняемых полей:

<h1 data-field="title">[Заголовок страницы]</h1>
<p data-field="description">[Описание услуги]</p>
<div data-field="benefits">[Преимущества]</div>
<section data-field="faq">[FAQ блок]</section>

При генерации заменить содержимое элементов с data-field на реальный контент.

Чек-лист качества страницы

Структура

• H1 содержит ключевые слова
• Логичная иерархия H2 → H3
• Есть CTA блоки (верх и низ)
• Есть контакты

SEO

• Title ≤ 60 символов
• Ключевое слово в title и H1
• Alt-теги у изображений (если есть)

Техническое

• Файл <500KB
• Нет внешних зависимостей (CDN, fonts, images)
• Адаптивность (проверить на 375px)
• Нет overflow: hidden на html/body

Контент

• 100% контента из источника (не сокращён)
• Количество блоков совпадает с исходником
• Нет "отсебятины"

Примеры использования

Создать страницу услуги

Пользователь: Создай страницу услуги "SEO продвижение" для ANT Partners
Claude:
1. Загружает clients/ant-partners/config.yaml
2. Выбирает service-page-template.html
3. Парсит контент (если есть URL) или запрашивает текст
4. Генерирует через frontend-developer
5. Ревьюит через code-reviewer
6. Сохраняет в clients/ant-partners/output_v6/seo-prodvizhenie.html

Перенести страницу с сайта

Пользователь: Перенеси https://old-site.ru/services/audit/ для Geely A2Auto
Claude:
1. WebFetch контента + curl для мета-тегов
2. Подсчёт блоков: H2=4, FAQ=0, списки=3
3. Загружает clients/geely-a2auto/config.yaml
4. Выбирает service-page-template.html
5. Генерирует, ревьюит, сохраняет
6. Сверяет: H2=4 ✓, FAQ=0 ✓, списки=3 ✓

Триггеры

• "создай страницу"
• "сделай HTML"
• "новая страница"
• "шаблон страницы"
• "page from template"
• "перенеси страницу"
• "сгенерируй из шаблона"

Связанные скиллы

• page-publish — публикация на CMS после создания
• frontend-developer — генерация HTML
• code-reviewer — проверка качества
• image-optimizer — оптимизация изображений