Собираем production-ready сайты по готовому шаблону с Claude Code

Выложил на GitHub универсальный шаблон для создания одностраничных и корпоративных сайтов через мульти-агентный пайплайн в Claude Code. Заполняешь YAML — получаешь HTML с SEO, адаптивом, accessibility и кастомным дизайном. Без React, без бэкенда, без ручной вёрстки.

Вместо долгого цикла работы с дизайнером, верстальщиком, копирайтером и seo, простая цепочка действий - от сбора понравившихся референсов и описания того, что презентуется на сайте, до публикации.

Что внутри

Это не «красивый HTML-макет» для подстановки текста и картинок. Это архитектура процесса: 9 шагов, 6 специализированных агентов, библиотека из 12 типов блоков, и один YAML-файл, который описывает весь проект.

Пайплайн из 9 шагов:

1. Анализ референсов (опционально, через MCP или вручную)
2. Маркетинговое исследование
3. Создание DESIGN-BRIEF и TECH-SPEC
4. Параллельная генерация текстов и дизайна
5. Верификация соответствия брифу
6. Сборка фронтенда (HTML5 + Tailwind + vanilla JS)
7. QA: кросс-браузер, адаптив, performance, accessibility
8. SEO/GEO аудит: structured data, E-E-A-T, citability для AI Overviews
9. Финальный отчёт с метриками и гипотезами для A/B

Структура пайплайна

Reference Analysis (опционально) → Marketing Research → Brief Creation
                                    ↓
                    Parallel: Copywriting + Design
                                    ↓
                    Verification → Frontend Build → QA + SEO/GEO Audit

Каждый шаг — это артефакт, а каждый артефакт — контракт для следующего шага. Контекст не теряется, потому что он зафиксирован.

6 скиллов для Claude Code:

• core-orchestrator — координирует всех, проверяет контракты
• core-copywriter — пишет тексты по фреймворкам Problem-First / Outcome-First
• core-designer — описывает дизайн с заявленными ограничениями (guardrails: не Tailwind стандартная палитра, spring easing, и тд)
• core-tester — чеклист на 50+ пунктов, Lighthouse >90
• core-seo-geo — аудит SEO + Generative Engine Optimization
• reference-analyzer — парсит референсы (MCP → web → manual fallback)

Библиотека из 12 блоков: hero, text_center, text_two_column, steps_horizontal, steps_vertical, cards_grid, icon_grid, contacts_static, contacts_form [backlog], testimonials, pricing_table [backlog], footer, navigation.

Multi-page из коробки: не только одностраничник. Корпоративный сайт с /about/, /cases/, /contacts/ — каждая страница как директория с index.html, чистые URL.

Почему это система, а не генератор

Ключевое отличие: я не говорю Claude «сделай мне сайт», я говорю: «вот контракт (DESIGN-BRIEF.md), вот ограничения (guardrails), вот структура блоков. Делай по спеке».

Как использовать

# 1. Клонируйте репозиторий
git clone https://github.com/yurydemin/website-builder-template.git
cd website-builder-template

# 2. Заполните конфигурацию
# Откройте config/PROJECT_CONFIG.yaml и заполните все поля

# 3. Заполните брифы
# docs/brief/company-info.md
# docs/brief/brand-constraints.md
# docs/brief/product-descriptions.md

# 4. Установите скиллы в Claude Code
mkdir -p ~/.claude/skills
cp -r .claude/skills/* ~/.claude/skills/

# 5. Запустите пайплайн
# Следуйте инструкциям в .claude/commands/build-website.md

Конфиг — это YAML с подписями к каждому параметру. Не нужно лезть в код скиллов. Указываешь: тип сайта, блоки, CTA, аудиторию, geo-target (country / city / global), референсы. Агенты читают и работают.

Ограничения версии

• Только статика. HTML + Tailwind + vanilla JS. Нет Next.js, нет CMS, нет SSR. Для landing и corporate — достаточно. Для SaaS-дашбордов — нет.
• Только landing / corporate / product page. Не e-commerce, не блог, не wiki. Для них нужны другие пайплайны.
• Без форм (пока). Пока только статичные контакты (email, телефон, social). Backend для форм запланирован, но не реализован.
• Без i18n (пока). Один язык. Мультиязычность через subpath (/en/about/) — в планах.
• Требуется Claude Code. Без него шаблон — просто набор markdown-файлов. С ним — production pipeline.

Что дальше

• Практический пример создания сайта с использованием шаблона.
• Расширение доступных опций и шлифовка скиллов.

🌏 Репозиторий: github.com/yurydemin/website-builder-template