Лендинги и веб-страницы — публикуемый single-file HTML

Ты собираешь одностраничные сайты и лендинги как один самодостаточный index.html, готовый к публикации через publish_app на <slug>.apps.samreshuuu.ru.

Разделение труда — это главное

• Ты (LLM) пишешь только КОНТЕНТ в виде JSON: заголовки, копирайт, бренд-цвет, пресет стиля, порядок секций, поля формы.
• Скрипт детерминированно собирает СТРУКТУРУ: HTML, экранирование, CSS, палитру с контрастом, SEO-мету, доступность.
• Никогда не пиши HTML руками. Креатив (текст, цвет, состав секций) — твой; точность (разметка, контраст, единый файл) — скрипта.

Когда использовать этот навык, а когда — нет

• ✅ Этот навык: публикуемый лендинг / промо-страница / мини-сайт одним HTML-файлом → потом publish_app.
• ❌ Слайды / презентация-дек → html_presentation_ru.
• ❌ Интерактивный React-UI / компоненты внутри приложения → frontend_design_ru / taste_skill_ru.
• ❌ График или диаграмма в пузыре → render_visual.
• ❌ SEO-страница сравнения с конкурентом (контент) → competitor_alternatives_ru (рендер можно отдать этому навыку).

Скрипты (в песочнице)

Лежат в /mnt/skills/landing_builder_ru/scripts/ (путь уже в sys.path):

• render.py — собирает index.html из JSON-конфига. Главный инструмент.
• palette.py — из одного бренд-HEX выводит WCAG-AA палитру (зови сам, если нужно проверить контраст; render.py делает это автоматически).
• markdown.py — markdown-подмножество → HTML (используется внутри секций content/faq).
• inject.py — идемпотентно добавляет scrollspy + активную навигацию (необязательный второй проход).

Рабочий процесс

1. read_skill('landing_builder_ru') (этот навык).
2. Напиши cfg.json с контентом (схема ниже).
3. Собери страницу:

   python /mnt/skills/landing_builder_ru/scripts/render.py --input cfg.json --out /home/user/output/index.html
   

4. (По желанию) добавь интерактив: python /mnt/skills/landing_builder_ru/scripts/inject.py /home/user/output/index.html
5. Файл в /home/user/output/index.html сам отрендерится как inline-артефакт — покажи пользователю.
6. Публикация — только по явной просьбе пользователя: вызови publish_app (outward-facing, почти необратимо).

Схема конфига (cfg.json)

{
  "meta": {"title": "...", "description": "... (для SEO/OG)", "lang": "ru"},
  "brand": {"color": "#2563EB", "font": "Inter (опционально)"},
  "preset": "editorial | technical | minimal | playful",
  "sections": [
    {"type": "hero", "id": "top", "headline": "...", "subhead": "...",
     "ctas": [{"label": "...", "href": "#lead", "variant": "primary|ghost"}]},
    {"type": "features", "title": "...",
     "items": [{"icon": "⚡", "title": "...", "body": "..."}]},
    {"type": "pricing", "title": "...",
     "items": [{"name": "...", "price": "1 490 ₽", "period": "за польз./мес",
                "featured": true, "features": ["...", "..."],
                "cta": {"label": "...", "href": "#lead", "variant": "primary"}}]},
    {"type": "content", "title": "...", "markdown": "...(markdown-подмножество)"},
    {"type": "faq", "title": "...", "items": [{"q": "...", "a": "...(markdown)"}]},
    {"type": "cta", "id": "lead", "title": "...", "body": "...", "form": true}
  ],
  "lead_form": {
    "submit_label": "Получить демо",
    "turnstile": true,
    "fields": [
      {"name": "name", "label": "Имя", "type": "text", "required": true},
      {"name": "phone", "label": "Телефон", "type": "tel", "required": true}
    ]
  }
}

Секцию с формой делай {"type":"cta","id":"lead","form":true}, а сами поля описывай в lead_form. На publish_app продублируй те же поля в form_schema.

Канон публикуемости (скрипт уже это соблюдает — не нарушай вручную)

• Ровно один самодостаточный HTML; CSS — инлайном в <style>; без отдельных css/js и относительных путей.
• Внешнее — только шрифты Google Fonts; картинки — абсолютные https: или data:.
• Форма лида = <form data-lead-form> (хост сам перепишет action).
• Капча = <div class="cf-turnstile" data-sitekey="{{turnstile_sitekey}}"> (хост подставит ключ).
• Бейдж «Сделано на Самрешу» НЕ добавляй — его впечатывает хост.
• Если страница реально куда-то стучится (fetch/API) — перечисли хосты в csp_allowlist при вызове publish_app.

Дизайн без «AI-slop»

• Реальная иерархия: один сильный акцент (бренд-цвет), не раскрашивай всё подряд.
• Осмысленная типографика и щедрые отступы; не центрируй абсолютно всё.
• Контраст не «на глаз» — его считает palette.py (WCAG AA). Не подменяй цвета вручную.
• Копирайт по фреймворкам: PAS (Problem-Agitate-Solve), AIDA или BAB (Before-After-Bridge) — особенно в hero и cta.
• Конкретика вместо общих слов: цифры, выгоды, факты — не «инновационное решение».

Pitfalls

• Не пиши HTML руками — только JSON-конфиг для render.py.
• Не публикуй без явной просьбы пользователя (publish_app outward-facing).
• Не вставляй бейдж/Turnstile-ключ сам — это бьёт по host-bake.
• Не используй внешние CSS/JS и относительные пути — страницу зарубит CSP/канон.