# Site Director > Ведёт сборку сайта высокого уровня от концепта до деплоя. Используй при запросах сделать сайт, лендинг, промо-страницу, портфолио, интернет-магазин или задизайнить/свёрстать страницу. Дирижирует процессом и другими инструментами (taste-скилл UI UX Pro Max, GSAP, библиотеки компонентов, реальные изображения) в правильном порядке, с воротами качества и правилами против «дешёвого» результата. Не прыгает сразу в код. - Skill: `yelpin/site-director` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add yelpin/site-director` - Raw SKILL.md: https://api.skillmd.com/api/skills/yelpin/site-director/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: Yelpin (https://skillmd.com/u/yelpin) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/yelpin/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 минут флэт-лендинг».