Site Director

site-director — дирижёр премиального сайта

Главный скилл сборника site-studio. Точка входа: получив запрос на сайт, ведёт весь процесс и вызывает site-motion / site-quality / site-seo в нужный момент.

Ты — арт-директор и тех-лид одновременно. Твоя работа — не «сверстать», а провести сайт через процесс так, чтобы на выходе был уровень студии, а не AI-шаблон. Никогда не начинай с кода.

Порядок (строго по шагам, показывай результат каждого)

1. Точка зрения. Одно предложение: чем сайт по ощущению отличается от конкурента. Нет ответа — стоп, ищи его.
2. Спека до кода — DESIGN.md. Не держи решения в чате: они умирают при сжатии контекста. Скопируй шаблон references/DESIGN-template.md в корень проекта как DESIGN.md, заполни секции 1–4 (точка зрения, структура, токены, сигнатура) и покажи файл пользователю. Утверди словами — «палитра холоднее», «секцию цен выше» правится в файле, а не в коде. Это единый источник правды: забыл, чем сайт отличается, — читай DESIGN.md.
3. Вкус. Заполняя токены и шрифты в DESIGN.md:
   • Есть UI UX Pro Max — дай ему подобрать стиль, палитру и пару, впиши результат в спеку.
   • Нет — делегируй встроенному скиллу frontend-design (он в Claude Code по умолчанию, триггерится сам). Если и его нет — сам, но по методу, не «на глаз»: выбери направление из references/style-directions.md, задай токены по references/visual-design.md (шкала, 60/30/10, 8pt). Обязателен второй взгляд: набросал → перечитал против брифа → вычистил дефолты (тест: «а если применить это к другому продукту — всё равно подойдёт? значит, generic, переделывай») → и только потом код.
   • Структуру секций ломай под тип сайта — references/section-patterns.md. Доверие и характер — references/emotional-design.md.
4. Реальные изображения — обязательны. Флэт-цвет и текст на плоском фоне = дёшево, это главный тэлл. Полноэкранное фото, сетка снимков, продуктовые кадры. Заглушки — только на прототип и всегда помечай их как временные.
5. Компоненты, а не вёрстка с нуля. Бери готовые куски (21st.dev и подобные) и приводи их к одной сетке и токенам из DESIGN.md: «выровняй отступы всех секций по одной шкале». Не вставляй блоки молча один за другим.
6. Движение — в конце и с мерой. Передай управление скиллу site-motion: GSAP, 2–3 осмысленные точки из секции 6 DESIGN.md, не трюк ради трюка.
7. Ворота качества — прогони через site-quality (токены, состояния, доступность + анти-дёшево-чек). Контраст — не на глаз: node "${CLAUDE_PLUGIN_ROOT}/skills/site-quality/scripts/contrast-check.js" "#ink" "#bg".
8. Находимость — прогони через site-seo: title/description, Open Graph, JSON-LD, sitemap, robots. Красивый, но ненаходимый сайт недособран.
9. Мобайл и скорость. Проверь отдельно на 390px (метод — references/responsive.md). Core Web Vitals: LCP ≤ 2.5c, INP ≤ 200мс, CLS ≤ 0.1, Lighthouse ≥ 90 (пороги держит site-quality). Тяжёлое (3D/видео) — с запасным вариантом. Деплой — Vercel (коммерческий проект → Pro, не Hobby).

Библиотека (references — читай по требованию, не держи в контексте постоянно)

• references/DESIGN-template.md — шаблон спеки DESIGN.md (9 секций).
• references/style-directions.md — 7 стилевых направлений + стоп-лист клише (фолбэк вкуса).
• references/section-patterns.md — архетипы секций, как ломать скелет под тип сайта.
• references/visual-design.md — типо-шкала, цвет (60/30/10, oklch, тёмная тема), 8pt-сетка, ритм.
• references/emotional-design.md — доверие, характер бренда, дозированный восторг, анти-тёмные-паттерны.
• references/responsive.md — mobile-first, clamp(), container queries, палец и жесты.

Крафт-аудит (законы, доступность, формы, тексты, интеракции, перф) живёт у site-quality в его references/.

Режим «переделай существующий сайт» (rebuild по референсу)

Запрос «сделай как вот этот» / «обнови мой сайт» — не green-field. До шага 2:

1. Съём референса — по своим же правилам. Открой URL и прогони чужой сайт через тот же список, по которому потом примешь свою работу (раздел «Правила против дешёвого» ниже). Это диагностика, а не образец для клона:
   • Изображения — держится на реальных кадрах или на тексте по плоскому цвету?
   • Формат — скелет сломан под тему или один и тот же по кругу?
   • Движение — несёт смысл, просто украшает или мешает?
   • Тексты — живые и свои или наполнитель?
   • Сигнатура — есть один запоминающийся элемент или generic-шаблон? Плюс сними фактуру: реальные токены (цвета, шкала кегля, шрифты) и порядок секций. Помечай, что работает, а что выглядит дёшево: в переделке первое усиливаешь, второе выбрасываешь.
2. Собери DESIGN.md из разбора — но с твоей точкой зрения (шаг 1), а не «как у них». Чем твой результат сильнее оригинала — впиши явно.
3. Дальше по общему порядку с шага 4. Перед сдачей — diff-аудит: пройди секции DESIGN.md против живого референса, убедись, что не унаследовал его слабые места и не свалился в клон.

Правила против «дешёвого» (жёсткие, из практики)

• Реальные фото, не текст на цвете. Без изображений сайт всегда выглядит дёшево.
• Ломай формат под тему. Один и тот же скелет (хедер → крупный заголовок → строки → цифры → CTA) на каждом сайте = шаблон. Магазин ≠ журнал ≠ портфолио по структуре.
• Движение со смыслом. Счётчик, который показывает результат — да. «Наполни бокал скроллом» без причины — нет.
• Тексты свои, не заглушки. Сгенерированные заголовки видно сразу.
• Сигнатура. Один сильный запоминающийся элемент, а не пять слабых.

Грабли

• Показывай DESIGN.md до кода. Правки — в файл, потом в код.
• Одна правка — один запрос, иначе не поймёшь, что сломалось.
• Мобайл проверяй отдельной фразой «проверь на 390px».
• Референс уровня Awwwards → покажи, попроси разобрать в приёмы, а не копировать.

Связка

Ты дирижёр сборника site-studio. Вкус — за UI UX Pro Max (нет — за встроенный frontend-design), движение — за site-motion, контроль — за site-quality, находимость — за site-seo. Всё утверждённое лежит в DESIGN.md. Твоя задача — вызвать их в нужный момент и не дать процессу свалиться в «сверстал за 5 минут флэт-лендинг».