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

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

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

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

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

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

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

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

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

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

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

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

   python $SKILLS_ROOT/landing_builder_ru/scripts/render.py --input cfg.json --out $OUTPUT_ROOT/index.html
   

4. (По желанию) добавь интерактив: python $SKILLS_ROOT/landing_builder_ru/scripts/inject.py $OUTPUT_ROOT/index.html
5. Файл в $OUTPUT_ROOT/index.html сам отрендерится как inline-артефакт — покажи пользователю.
6. Нужен живой URL до публикации (много страниц, проверка на телефоне, показ коллеге) — подними превью: app(action=preview, command="python3 -m http.server $PORT --bind 0.0.0.0 --directory $OUTPUT_ROOT", name="landing"). Отдай пользователю вернувшийся публичный URL и итерируй по фидбеку: правишь cfg.json → перезапускаешь render.py → тот же app(action=preview, …) возвращает тот же URL.
7. Публикация — только по явной просьбе пользователя: вызови app(action=publish, path="$OUTPUT_ROOT/index.html") (outward-facing, почти необратимо).

Инструмент app — все действия

• app(action=publish, path=…, form_schema=…, csp_allowlist=…, slug=…, change_description=…) — опубликовать HTML. Без slug — новый сайт; со slug — новая ревизия по тому же URL.
• app(action=list) — приложения организации. app(action=leads, slug=…) — заявки с формы.
• app(action=revisions, slug=…) — история ревизий; app(action=rollback, slug=…, revision=N) — вернуть ревизию.
• app(action=fork, slug=…) — копия под новым slug; app(action=unpublish, slug=…) — снять с публикации.
• app(action=preview, command=…, name=…, cwd=…) — dev-сервер в песочнице; app(action=preview_logs, name=…); app(action=preview_stop, name=…).
• Старых имён publish_app / manage_app больше нет — всё через app(action=…).

Превью в песочнице (action=preview)

• Песочница выдаёт команде $PORT, HOST=0.0.0.0, BROWSER=none. Сервер ОБЯЗАН слушать именно $PORT и 0.0.0.0 (не 127.0.0.1, не хардкод порта) — иначе форвардинг не найдёт порт и превью не станет ready.
• Команда должна быть foreground-процессом: без &, без nohup, без демонизации — иначе процесс считается упавшим сразу.
• Браузер не открывать (--open, xdg-open и подобное запрещены; BROWSER=none уже выставлен).
• Порт детерминирован по (сессия, name) — тот же name после перезапуска даёт тот же публичный URL. Повторный action=preview с тем же name сам гасит старый процесс.
• URL приходит только когда порт реально отвечает; отдавай пользователю именно его.
• Превью «ещё поднимается» или упало → app(action=preview_logs, name=…), чини причину по хвосту лога и перезапускай action=preview. Закончил — app(action=preview_stop, name=…).

Схема конфига (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. На app(action=publish) продублируй те же поля в form_schema.

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

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

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

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

Pitfalls

• Не пиши HTML руками — только JSON-конфиг для render.py.
• Не публикуй без явной просьбы пользователя (app(action=publish) outward-facing). Нужен показать результат — это app(action=preview), а не публикация.
• Не запускай preview-команду в фоне (&, nohup) и не хардкодь порт/127.0.0.1 — только $PORT и 0.0.0.0.
• Не вставляй бейдж/Turnstile-ключ сам — это бьёт по host-bake.
• Не используй внешние CSS/JS и относительные пути — страницу зарубит CSP/канон.