Премиум-сайт end-to-end: от archetype до запуска

Orchestrator: построй премиум-сайт за один сфокусированный проход. Не «применить премиум-шаблон», а собрать собственное премиум-ощущение из восьми решений, каждое из которых вытекает из предыдущего.

Проект: {{project_context}} Текущее состояние: {{current_state}} Гипотеза archetype: {{archetype_hint}}

Действуй как design director, который запускал 3+ премиум-сайтов в нишах от B2B SaaS до luxury e-commerce. Не торопись с визуальными решениями до Phase 1. Каждая фаза имеет вход, выход, критерий готовности — без него следующую не начинай.

Когда применять

Чёткое решение делать премиум:

• Аудитория готова платить премиум (или продукт сам по себе премиум: B2B-tool для топ-команд, luxury, editorial, dev-tool для senior'ов)
• Текущий вид размыт между «современно» и «дёшево» — нужна позиция
• Конкуренты выглядят одинаково — премиум-сигнал даст дифференциацию
• Есть минимум 5 рабочих дней на работу — спринтовать премиум-эстетику невозможно

Когда НЕ строить:

• MVP без validated audience — premium до product/market fit убивает фокус
• Цена / категория не оправдывает (mass-market B2C: премиум сигнал отпугнёт)
• Команда не готова поддерживать высокую планку (премиум разрушается через 6 месяцев деградации)

8 фаз

Phase 1: Archetype (день 1, утро)

Цель: выбрать один из пяти архетипов премиума и зафиксировать импликации. Без этого все следующие решения будут противоречивыми.

Действия:

• Прогон через 5 архетипов с примерами:
  • Tech-craft (Linear, Vercel, Stripe, Raycast) — продуманность, плотность, моноширный акцент
  • Editorial (Stripe Press, Aesop, NYT Mag) — серифы, drop caps, длинные параграфы
  • Minimal-consumer (Apple, MUJI, Teenage Engineering) — огромный воздух, продукт-герой
  • Heritage-luxury (Hermès, Loro Piana) — традиция, материал, тёплая палитра
  • Niche-cult (Are.na, Off-White, Acne) — вкусовой выверт, минимум hierarchy
• Аудит текущего состояния: «куда нас тянет сейчас?» (3 предложения)
• Выбор одного archetype + обоснование (3 предложения)
• Если выбор близок между двумя — это сигнал к большему сужению аудитории, не к гибриду

Output: ARCHETYPE.md с выбранным архетипом и пятью импликациями (type, colour, radii, motion, photography). Критерий готовности: команда соглашается на одну фразу «мы — [archetype]-премиум».

Использовать промт: premium-positioning-archetype.

Phase 2: Type stack (день 1, после обеда)

Цель: пара шрифтов под archetype. Без типографики премиум-сайт не существует — это 40% впечатления.

Действия:

• Display (sm/md/lg): один сериф (для Editorial / Heritage / Minimal-consumer) или один geometric sans (для Tech-craft / Niche-cult)
• Body: humanist sans или сериф, читаемый в длинных абзацах
• Mono: один моноширный для accent (eyebrow, code, captions)
• Конкретные имена с fallback stack
• Размерная шкала: 5-7 ступеней, привязанная к baseline grid
• Line-height: 1.5 для body, 1.05-1.15 для display
• Letter-spacing: уменьшается с ростом размера (-0.02em для display, normal для body)

Output: tokens-typography.css + table «когда что использовать». Критерий готовности: один абзац длинного текста и один display-заголовок выглядят как премиум-журнал.

Использовать промты: font-pairing-system, typography-rhythm.

Phase 3: Colour & surfaces (день 2)

Цель: цвет + калибровка поверхностей. Это даёт 50% премиум-ощущения и невозможно подделать.

Цвет:

• Один акцент (warm copper, sage, deep oxblood, monochrome blue — в зависимости от archetype)
• 3-4 нейтральных серых (bg / bg-elevated / bg-card / bg-subtle)
• Border × 2 (default + strong)
• FG × 3 (fg / fg-muted / fg-subtle)
• Light + dark theme через CSS variables, не через переключение классов

Поверхности (это где обычно проваливаются):

• Borders: 1px всегда, не 2px (2px = textbook 2010). В dark — opacity 0.08-0.12, не сплошной grey
• Shadows: blur < 8px для карточек, < 48px для модалок, opacity < 0.2. Никаких coloured shadows
• Radii: ≤ 4 значения (sm 6 / md 10 / lg 16 / full). Inputs и buttons — в одной шкале
• Градиенты: subtle, монохромные, в фоне; никаких neon multi-colour

Output: tokens.css + before/after одной карточки (показать что изменилось). Критерий готовности: можно поставить одну карточку рядом со Stripe и она не выглядит «дешевле».

Использовать промты: color-system-build, surface-details-polish, design-tokens-from-reference.

Phase 4: Editorial layout (день 3)

Цель: журнальная сетка как фундамент. Карточный grid-3 — это marketing, не premium.

Действия:

• 12-кол асимметричная сетка с gap 24-32px
• Основная читаемая колонка: 7 cols (65-75 символов в строке)
• Marginalia / drop quotes: отдельная узкая колонка справа
• Заголовки могут выходить на 9-10 cols; hero — 12 (full-bleed)
• Изображения: либо в основной колонке, либо полностью full-bleed (без gap)
• Editorial-блоки: drop cap, pull quote, sidenote, section rule с номером
• Whitespace: py-24 md:py-32 между секциями (не py-16); hero — 80-100vh
• Никаких декоративных SVG-фонов и грид-паттернов — пусть воздух работает

Output: wireframe + JSX/Tailwind скелет hero + body + pullquote + sidenote. Критерий готовности: один lonread-экран читается без усилий, типографика — герой.

Использовать промт: editorial-layout-system.

Phase 5: Hero (день 4)

Цель: первый экран — promise / proof / action. Без 3 CTA, без 5 social proof badges.

Структура:

• Promise — один серифный заголовок, clamp(3rem, 7vw, 5.5rem), один lede под ним
• Proof — одна линия (логотипы клиентов / число / quote / награда), не «всё сразу»
• Action — один CTA (primary), один secondary опционален
• Hero занимает 80-100vh, контент дышит сверху и снизу
• Без enter-анимации текста — LCP-критично
• Фоновое изображение / иллюстрация — full-bleed или вообще без неё

Output: JSX hero + responsive-проверка. Критерий готовности: за 5 секунд пользователь понимает «что это, кому, что делать». Без этого hero не работает.

Использовать промт: hero-section-critique.

Phase 6: Motion (день 5)

Цель: кинематографичный ритм, не «всё анимируется». Premium-motion невидим — он работает на доверие, не на «вау».

Tokens:

• 3 easing: ease-out (enter), ease-in (exit, реже), ease-spring (единичные акценты)
• 3 длительности: 150ms (hover), 250ms (section reveal), 400ms (hero / long-distance)
• prefers-reduced-motion override на 0.01ms — обязательно

Choreography:

• Hero: без enter-анимации текста; если очень хочется — opacity 0→1 на 200ms, без translate
• Sections: reveal opacity 0→1 + translateY 12px→0, ease-out, 250-400ms, триггер на 65% viewport
• Stagger только для card-grid: 50-80ms, ≤ 6 элементов
• Sticky: один на viewport в моменте; не комбинируй ToC + CTA bar + chat bubble
• Parallax: только background, ≤ 60px амплитуда, не на текст

Output: motion-tokens.css + JSX-снипеты для reveal / stagger grid / hero parallax. Критерий готовности: на reduce-motion сайт работает; на стандартной настройке ничего не дёргается.

Использовать промты: scroll-choreography, microinteractions-design.

Phase 7: Restraint audit (день 6)

Цель: убрать 30% до запуска. Премиум — это вычитание, не сложение.

Проход (top-down):

• Иконка перед каждым h2 → убрать
• Тень + бордер + background-tint на одной карточке → оставить максимум 2
• Бейджи «New / Hot / Featured» массово → оставить 1-2 точечных
• Градиент-обводки и glow → убрать
• 3 CTA в hero → 1
• Эмодзи в заголовках → 0
• Скриншот с marketing-arrows → продукт без подсказок
• «Узнать больше →» в каждой секции → один CTA в конце
• Карточки с тенями вокруг короткого текста → текст без карточки

НЕ трогать: aria-labels, alt-тексты, focus-ring, skip-link, footer-навигация. Subtraction убирает декорацию, не семантику.

Output: cut-list / merge-list / keep-list + before/after на 3 ключевых экранах. Критерий готовности: на странице ≈ -30% visual signals, смысл сохранён.

Использовать промт: restraint-audit-subtraction.

Phase 8: Governance (день 7)

Цель: премиум-сайт не разрушается через 6 месяцев. Это операционный документ.

Документы:

• DESIGN.md — archetype, type stack, palette, surface tokens, motion tokens, editorial principles
• DECISIONS.md — почему именно эти решения (для нового члена команды и для future-you через год)
• Anti-pattern checklist для PR review (нельзя добавлять иконки в h2, нельзя 3 CTA в hero, и т.д.)
• Освобождение от правил: 1-3 конкретных случая когда можно нарушать (для landing-кампаний, A/B-теста)
• Owner: кто разрешает добавлять новые компоненты / цвета / шрифты (один человек)

Без Phase 8 через 3-6 месяцев накопится drift: 4 типа кнопки, 7 теней, 12 hover-эффектов, и премиум исчезнет.

Output: DESIGN.md + DECISIONS.md + PR template с anti-pattern checklist. Критерий готовности: один новый член команды читает доки за 30 минут и понимает «как мы тут работаем».

Использовать промт: brand-guidelines-from-scratch.

Контракт между фазами

Каждая фаза → следующая checkpoint:

• 1 → 2: ARCHETYPE.md подписан, команда согласна на одну фразу
• 2 → 3: типографика читается без усилий; display и body выглядят парой
• 3 → 4: одна карточка не выглядит «дешевле» референса
• 4 → 5: longread-экран собран на сетке, типографика — герой
• 5 → 6: hero за 5 секунд транслирует promise/proof/action
• 6 → 7: motion не дёргается, prefers-reduced-motion работает
• 7 → 8: -30% visual signals, ничего важного не потеряно
• 8 → ship: governance подписан, owner назначен

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

Anti-patterns

• ❌ Сразу к Phase 4-5 (layout / hero) без Phase 1 (archetype) — визуальные решения противоречивы, hero не работает
• ❌ «У нас будет немного от каждого archetype» — это значит ни одного; hybrid читается как несфокусированный
• ❌ Display sans + body sans без контраста эпох — типографика пресная, выглядит как Material-template
• ❌ Card shadow + border + background-tint вместе — overkill, читается как «дёшево перестарались»
• ❌ Heavy multi-color gradient в hero — это 2018 startup-vibe, не премиум
• ❌ Enter-animation для hero (опять, опять, опять) — убивает LCP и доверие на первой секунде
• ❌ Snap-scroll без storytelling-причины — плохая UX, ассоциируется с туристическими сайтами
• ❌ 3 CTA в hero «чтобы поймать всех» — никого не поймал
• ❌ Иконки в h2 как декорация — отвлечение от типографики
• ❌ Без Phase 7 (restraint) — сайт «современный», но не «премиум»; разница в -30% элементов
• ❌ Без Phase 8 (governance) — через 6 месяцев накопится drift, премиум-эффект испарится
• ❌ Запуск без аудита на mobile — premium на десктопе и messy на телефоне = не премиум

Tech stack рекомендации

• Next.js 16 + React 19 + TypeScript strict — современная база, SSG для статики
• Tailwind 4 с CSS-variables-токенами в @theme (color/font/spacing/radius) и кастомными — на :root (motion-tokens не emit-ятся через @theme)
• Шрифты через next/font: Geist / Geist Mono + один display-serif (Instrument Serif / GT Sectra / Tiempos Headline)
• Motion: Framer Motion или CSS animations + transition-utilities; prefers-reduced-motion override обязательно
• Images: next/image с priority на LCP-изображении; lazy для остального; WebP/AVIF
• Theme: next-themes (для dark/light); токены через CSS variables
• A11y: axe DevTools в CI; Lighthouse 100/100/100 на seo/a11y/bp как минимум
• Perf budget: bundle < 350KB main chunk, LCP < 2s mobile, CLS < 0.05

Output

Финальный артефакт — единый PREMIUM_SITE_PLAN.md с разделами:

1. Archetype + 3-предложение обоснование
2. Type stack (display + body + mono) с конкретными именами
3. Token block (CSS variables: colour, surface, radius, shadow, motion)
4. Layout map (grid spec + editorial blocks)
5. Hero spec (promise / proof / action — JSX-скелет)
6. Motion choreography (тщательно: что и когда)
7. Restraint cut-list (что убираем перед запуском)
8. Governance doc (DESIGN.md + PR checklist)

Плюс: 3 референс-сайта того же archetype с указанием что именно мы у них берём (не «вдохновение», а конкретные решения).

Цель не сделать «как Stripe / Linear / Aesop», а понять почему они работают, и применить те же принципы в твоём контексте. Премиум — это дисциплина, не стиль.