План: Сайт Дез Обработка (dez-obrabotka.pro)

Контекст: Новый Jekyll-проект в C:\Users\Admin\Projects\dez-obrabotka\. Главная страница + 7 страниц услуг + блог + FAQ + контакты. Стиль protective-reliable (тёмный navy, эко-зелёный акцент, янтарный CTA). Без гарантий, без выезда 24ч, без горячего тумана.

Шаг 1 из 7: Создать проект и design-dna.json

ВКЛЮЧИТЬ скилы: design-create

Подробно:

  1. Создать структуру каталогов: 
    C:\Users\Admin\Projects\dez-obrabotka\
├── _layouts/
├── _includes/
├── _data/
├── uslugi/
│   ├── tarakany/
│   ├── klopy/
│   ├── muravi/
│   ├── blohi/
│   ├── kleshchi/
│   ├── muhi/
│   └── gryzuny/
├── blog/
├── faq/
├── contacts/
└── assets/
    ├── css/
    └── img/
  2. Создать _config.yml: 
    title: Дез Обработка
description: Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.
baseurl: ""
url: "https://dez-obrabotka.pro"
  3. Создать design-dna.json с полной protective-reliable палитрой:
    • personality: protective-reliable
    • base: #0B1120, surface: #151E2D, accent: #10B981, accent_alt: #F59E0B
    • text: #F1F5F9, text_muted: #94A3B8, border: #1E293B
    • fonts: Space Grotesk / Inter / JetBrains Mono
    • component rules: .btn-primary (accent_alt), .card, .price_tag
    • layout patterns: hero с accent-линией 4px слева, cards grid, sticky table, тёмный footer

Критерии качества:

Нюансы: accent_alt (#F59E0B) — только для CTA-кнопок и цен. Accent (#10B981) — для заголовков, иконок, hover. Никаких box-shadow, градиентов, border-radius > 4px.

ВЫКЛЮЧИТЬ скилы: design-create

Шаг 2 из 7: Базовый шаблон и includes

ВКЛЮЧИТЬ скилы: design-create

Подробно:

  1. Создать _layouts/default.html — общий каркас всех страниц:
    • DOCTYPE, lang=”ru”
    • meta charset + viewport
    • title: План: Сайт Дез Обработка (dez-obrabotka.pro) — Дез Обработка
    • meta description: из page или site
    • Google Fonts preconnect: Space Grotesk, Inter, JetBrains Mono
    • `` — встроенный CSS страницы
    • body: `<header class="header" role="banner" id="site-header">
+7 (8412) 25-01-77

</header>

, <main><h1 id="dez-obrabotka">Dez-obrabotka</h1>

Tech Stack

Структура

Дизайн-система

Правила

Экономия токенов

</main>, <footer class="footer" role="contentinfo">

Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.

Препараты 4-го класса безопасности

Услуги

Тараканы Клопы Муравьи Блохи Клещи Мухи Грызуны

Информация

Блог FAQ Контакты Политика конфиденциальности Карта сайта

Контакты

+7 (8412) 25-01-77 info@dez-obrabotka.pro

Пенза и Пензенская область

Работаем ежедневно, 24/7

© 2026 Дез Обработка. Все права защищены.

</footer>

`

  1. Создать _includes/header.html:
    • <header class="site-header" role="banner"> — sticky, blur (backdrop-filter), тёмный фон с границей
    • .logo — «Дез Обработка», accent-цвет, Space Grotesk 700
    • <nav> с ul.nav-list:
      • Услуги (has-dropdown) → dropdown: 7 услуг (Тараканы, Клопы, Муравьи, Блохи, Клещи, Мухи, Грызуны)
      • Блог → /blog/
      • FAQ → /faq/
      • Контакты → /contacts/
    • Dropdown раскрывается по :hover + :focus-within (чистый CSS, без JS)
    • .header-phone — JetBrains Mono, accent_alt цвет, ссылка tel:+78412XXXXXXX
    • Кнопка .nav-toggle с гамбургером для мобильных (CSS-only)
  2. Создать _includes/footer.html:
    • <footer class="site-footer"> — тёмный фон (accent), светлый текст
    • 4 колонки в .footer-grid:
      • Колонка 1: «Дез Обработка» — описание компании
      • Колонка 2: «Услуги» — 7 ссылок на страницы услуг
      • Колонка 3: «Информация» — Блог, FAQ, Контакты, Политика конфиденциальности
      • Колонка 4: «Контакты» — телефон (крупно, JetBrains Mono), email, Пенза и область
    • .footer-bottom — копирайт с годом

Критерии качества:

Нюансы:

ВЫКЛЮЧИТЬ скилы: design-create

Шаг 3 из 7: Главная страница — полный HTML и CSS

ВКЛЮЧИТЬ скилы: design-create

Подробно:

Создать index.html с frontmatter: layout: default, title: "Уничтожение насекомых в Пензе холодным туманом", description: "...".

Весь CSS в <style> внутри frontmatter style (Liquid передаст в default.html).

CSS-переменные (:root)

--color-base: #0B1120;
--color-surface: #151E2D;
--color-accent: #10B981;
--color-accent_alt: #F59E0B;
--color-text: #F1F5F9;
--color-text_muted: #94A3B8;
--color-border: #1E293B;
--text-xs: clamp(0.75rem, 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.15vw, 1rem);
--text-base: clamp(1rem, 0.3vw, 1.125rem);
--text-lg: clamp(1.125rem, 0.6vw, 1.5rem);
--text-xl: clamp(1.5rem, 1.5vw, 2rem);
--text-2xl: clamp(2rem, 2.5vw, 3rem);
--text-3xl: clamp(2.5rem, 3vw, 4rem);
--space-1…--space-8: clamp-шкала от 0.25rem до 8rem

Секции HTML (9 блоков в <main>)

1. HERO (<section class="hero">)

2. УСЛУГИ (<section class="section" id="services">)

3. ТЕХНОЛОГИЯ (<section class="section section--alt" id="technology">)

4. БЕЗОПАСНОСТЬ (<section class="section" id="safety">)

5. ЦЕНЫ (<section class="section section--alt" id="prices">)

6. КАК РАБОТАЕМ (<section class="section" id="how-we-work">)

7. FAQ (<section class="section section--alt" id="faq">)

8. CTA (<section class="section" id="cta">)

9. FOOTER (через <footer class="footer" role="contentinfo">

Профессиональная дезинсекция в Пензе. Холодный туман, безопасные препараты 4-го класса.

Препараты 4-го класса безопасности

Услуги

Тараканы Клопы Муравьи Блохи Клещи Мухи Грызуны

Информация

Блог FAQ Контакты Политика конфиденциальности Карта сайта

Контакты

+7 (8412) 25-01-77 info@dez-obrabotka.pro

Пенза и Пензенская область

Работаем ежедневно, 24/7

© 2026 Дез Обработка. Все права защищены.

</footer>

)

Адаптивность

Доступность

Критерии качества:

Нюансы:

ВЫКЛЮЧИТЬ скилы: design-create

Шаг 4 из 7: Валидация и исправление ошибок

ВКЛЮЧИТЬ скилы: validator → design-review

Подробно:

  1. Запустить validator.js на все созданные HTML-файлы:
    • index.html
    • _layouts/default.html
    • _includes/header.html
    • _includes/footer.html
  2. Проверить:
    • HTML-валидность (закрытые теги, правильная вложенность)
    • CSS-валидность (нет ошибок синтаксиса, все переменные определены)
    • Наличие всех обязательных атрибутов (alt у img, aria-роли)
    • Отсутствие пустых ссылок и кнопок без текста
  3. design-review проверить:
    • Контраст текста на тёмном фоне (WCAG AA: минимум 4.5:1 для body, 3:1 для крупного)
    • Иерархия заголовков (h1 → h2 → h3, без пропусков)
    • Отступы и spacing: 25%+ прыжки между уровнями
    • Кнопки: min-height 48px для тач-целей, отличие primary/outline
    • Адаптивность: нет горизонтального скролла на 320px, всё читаемо
  4. Исправить все найденные ошибки в соответствующих файлах

Критерии качества:

Нюансы:

ВЫКЛЮЧИТЬ скилы: validator, design-review

Шаг 5 из 7: Страницы услуг, блог, FAQ, контакты

ВКЛЮЧИТЬ скилы: design-create

Подробно:

Создать 10 страниц с одинаковой структурой, разным контентом. Каждая страница использует layout: default и встроенный <style> для стилей страницы (минимальные — основные стили уже в главной).

7 страниц услуг (/uslugi/[slug]/index.html)

Общий шаблон для каждой:

Для каждой услуги уникальный контент:

Тараканы (/uslugi/tarakany/):

Клопы (/uslugi/klopy/):

Муравьи (/uslugi/muravi/):

Блохи (/uslugi/blohi/):

Клещи (/uslugi/kleshchi/):

Мухи (/uslugi/muhi/):

Грызуны (/uslugi/gryzuny/):

Блог (/blog/index.html)

FAQ (/faq/index.html)

Контакты (/contacts/index.html)

_data/prices.yml

Создать файл с данными цен для переиспользования в шаблонах:

- slug: tarakany, name: Уничтожение тараканов, 1k: 2200, 2k: 2900, 3k: 3700, house: 5000
- slug: klopy, name: Уничтожение клопов, 1k: 2700, 2k: 3500, 3k: 4400, house: 6000
... (все 7)

Критерии качества:

Нюансы:

ВЫКЛЮЧИТЬ скилы: design-create

Шаг 6 из 7: SEO-аудит

ВКЛЮЧИТЬ скилы: seo-expert

Подробно:

  1. Мета-теги на каждой странице:
    • Уникальный <title> с ключевыми словами: [услуга] в Пензе, дезинсекция Пенза
    • Уникальный <meta name="description"> 140-160 символов
    • Open Graph: og:title, og:description, og:type, og:url, og:image (если есть)
    • canonical URL (на случай дублей)
  2. Schema.org structured data в _layouts/default.html:
    • Organization или LocalBusiness: название, телефон, адрес (Пенза), зона обслуживания
    • На главной: WebPage + Organization
    • На страницах услуг: Service + offers (цена)
  3. Заголовки:
    • h1 один на страницу, содержит основное ключевое слово
    • h2 для секций, h3 для подсекций
    • Без пропусков в иерархии
  4. Семантика:
    • <main>, <nav>, <article> (карточки услуг), <footer>
    • Изображения (если есть): alt-текст
  5. Локальное SEO:
    • Ключевые фразы с гео: «Пенза», «Пензенская область»
    • title главной содержит «Пенза»
    • description содержит «Пенза»
    • Адрес и телефон в schema.org
  6. Техническое:
    • mobile-friendly (уже)
    • Скорость: минимум внешних запросов (только Google Fonts)
    • HTML валидный (уже)

Критерии качества:

Нюансы:

ВЫКЛЮЧИТЬ скилы: seo-expert

Шаг 7 из 7: Запуск, скриншот и финальная проверка

ВКЛЮЧИТЬ скилы: run → verification-before-completion

Подробно:

  1. Запустить Jekyll: 
    cd C:\Users\Admin\Projects\dez-obrabotka
bundle exec jekyll serve
  2. Сделать скриншоты:
    • Главная страница (вся, скроллом)
    • Мобильная версия (320-375px)
    • Одна страница услуги (например, клопы)
    • FAQ-аккордеон в открытом состоянии
    • Выпадающее меню на десктопе
  3. Проверить в браузере:
    • Все ссылки работают
    • Меню раскрывается
    • FAQ аккордеон открывается/закрывается
    • Таблица скроллится на мобильном
    • Нет горизонтального скролла
    • Текст читаем (контраст)
    • Форма (если добавлена) отправляет
  4. verification-before-completion:
    • Все файлы на месте: _config.yml, design-dna.json, _layouts/default.html, _includes/header.html, _includes/footer.html, _data/prices.yml, index.html, 7 услуг, блог, FAQ, контакты
    • Контент не содержит запрещённых слов
    • CSS не содержит запрещённых цветов
    • Все 9 секций на главной присутствуют

Критерии качества:

Нюансы:

ВЫКЛЮЧИТЬ скилы: run, verification-before-completion

ЗАВЕРШЕНИЕ

ПОСЛЕ ВЫПОЛНЕНИЯ ВСЕХ 7 ШАГОВ: ВСЕ СКИЛЫ ВЫКЛЮЧЕНЫ. ЗАДАЧА ЗАВЕРШЕНА.

Итоговые файлы проекта:

dez-obrabotka/
├── _config.yml
├── design-dna.json
├── index.html (главная, 9 секций)
├── _layouts/default.html
├── _includes/header.html
├── _includes/footer.html
├── _data/prices.yml
├── uslugi/ (7 страниц)
├── blog/index.html
├── faq/index.html
├── contacts/index.html
└── docs/superpowers/plans/2026-06-01-dez-obrabotka-landing.md