impeccable · craft mode · v6 → v7
После трёх дизайн-критик и двух аудитов — прогон через impeccable-skill (Apache 2.0 форк frontend-design от Anthropic). 1 нарушение absolute ban + 5 production-polish правок, формирующих разницу между «хорошо собрано» и «незабываемо».
Impeccable — набор правил, отделяющих ремесленный фронтенд от типового AI-генератива. Сформулирован командой pbakaus/impeccable на базе материалов Anthropic. Внутри — жёсткие баны (что никогда не писать), процедуры (как выбирать шрифт), и тест на узнаваемость («поверят ли, что это сделал ИИ?»).
border-left > 1px в карточках/алертах и gradient-text. Каждый — самый узнаваемый «AI-отпечаток».Если показать интерфейс и сказать «это сделал ИИ» — и собеседник немедленно поверит — это и есть проблема.— impeccable skill, AI Slop Test
Skill рекомендует отказаться от Fraunces как «overused» в модельных дефолтах. Однако в этом проекте Fraunces — часть устоявшегося brand voice через 6 итераций; смена шрифта в v7 разрушила бы консистенцию между лендингом, audit-страницами, critique, knowhow, strategy. Решение — оставить Fraunces, но использовать его глубже через variable opsz и font-variation-settings (см. правку № 02).
Сначала — единственное жёсткое нарушение. Затем — production polish.
.hamlet-note — absolute banЧто нарушено. border-left: 3px solid var(--moss) — самый распространённый «AI design tell» в медицинских/админских интерфейсах. Skill требует переписать структуру элемента, а не просто заменить цвет или толщину.
.hamlet-note {border-left: 3px solid var(--moss);padding-left: 20px;}
.hamlet-note {border: 1px solid var(--line-strong);padding: 20px 24px;position: relative;}.hamlet-note::before {content: ""; width: 8px;background: var(--moss);border-radius: 50%;}
Что не работало. «12 700 000 ₽» в hero и «1,5 млн ₽/год» в FAQ — цифры пропорциональные (proportional figures), при анимации/наборе бегают по горизонтали. На hero-блоке с ценой это особенно заметно. Плюс крупные h1 рисовались тем же optical size, что и body 16 px — рисунок букв слишком «жирный».
/* v7 */
body { font-variant-numeric: tabular-nums; }
h1 { font-variation-settings: "opsz" 120; }
h2 { font-variation-settings: "opsz" 96; }
.hero-price { font-variation-settings: "opsz" 144; }Что не работало. Все сиблинги внутри блока ловили .is-revealed одновременно. На hamlet-сетке из 4 домов — синхронное появление как CSV-импорт, без ощущения «руки». Skill рекомендует staggered reveal с exponential easing.
/* v7 */
.reveal.is-revealed {
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1)
var(--stagger-delay, 0ms),
transform 1.1s cubic-bezier(0.16, 1, 0.3, 1)
var(--stagger-delay, 0ms);
}
/* JS: каждому сиблингу idx × 80ms, максимум 480ms */
el.style.setProperty('--stagger-delay', `${Math.min(idx*80,480)}ms`);Что не работало. Все 4 домика рисовались repeat(4, 1fr) — равные кубики, попадание в skill DON'T: «identical card grids (same-sized cards with icon+heading+text, repeated endlessly)». Наш дом № 001 — main proposal — визуально не выделялся среди трёх «под заказ».
.hamlet-cul {grid-template-columns:repeat(4, 1fr);}.hamlet-cul {grid-template-columns:2fr 1fr 1fr 1fr;}Что не работало. Hover на домиках — только смена цвета силуэта. Plan-toggle при клике — без press feedback. Skill: «make every interactive surface feel intentional and responsive». Все три добавлены с exponential easing (без bounce — дешёвый эффект).
/* hamlet-house */
.hamlet-house { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.hamlet-house:hover { transform: translateY(-3px); }
.hamlet-house:hover .silhouette { transform: scale(1.04); }
/* plan-toggle press */
.plan-toggle button:active { transform: scale(0.96); }
/* checkPop при появлении галочек */
@keyframes checkPop {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
.checkmark { animation: checkPop .5s cubic-bezier(.34,1.56,.64,1); }Что не работало. Через лендинг было 20+ <span class="italic"> — акцент потерял силу, появилось ощущение «вычурно». Параллельно: FAQ-ответы — равномерный плоский текст без точки входа, скользит глазом. Skill UX-writing: «every word earn its place».
Скриншот выглядит почти так же. Живой интерфейс — другой.
| Аспект | v6 | v7 | Δ |
|---|---|---|---|
| Absolute-ban соблюдение | 4.0 | 5.0 | +1.0 |
| Типографика (numerals + opsz) | 4.0 | 5.0 | +1.0 |
| Motion choreography | 4.0 | 5.0 | +1.0 |
| Hierarchy в hamlet | 3.5 | 5.0 | +1.5 |
| Interaction feedback | 3.5 | 4.5 | +1.0 |
| Italic discipline + FAQ scan | 3.5 | 5.0 | +1.5 |
| Среднее | 3.75 | 4.92 | +1.17 |
Главный вопрос skill: «поверят ли, что это сделал ИИ?». v6 проходил тест по большинству пунктов — нестандартная палитра (paper-cream вместо white), Fraunces вместо Inter, без glassmorphism, без gradient text. Но border-left на .hamlet-note и templated hamlet grid — два след-fingerprint'а оставались. В v7 они закрыты.
Все 6 правок применены. v6 не удалена — остаётся как контрольная для A/B-сравнения и Я.Метрика.
Border-stripe→dot, tabular nums + opsz, stagger reveal с exponential easing, asymmetric hamlet 2fr 1fr 1fr 1fr, hover micro-interactions, italic-discipline + bold-lead FAQ.
Открыть v7 →Финальная версия после трёх дизайн-критик. Закрыты 6 находок № 03 critique. Сохранена для A/B-сравнения с v7.
Открыть v6 →