Наш новый лендос собрал Claude

Код, адаптив, интерактив, аналитика – все он. Но попроси мы просто «сделай красиво», вышел бы очередной сайт, в котором ИИ чувствуется с первого экрана. Поэтому сначала была система, а уже потом страница.

⚡️ Что делали руками
Выбрали эталон и направление. Задали свою палитру и шрифт. Из 124 находок разбора решили, что берем в первую очередь. Написали бриф по каждой секции и принимали каждый экран.

⚡️ Что делал агент
Разобрал эталон замерами: размеры шрифтов, отступы, сетку, поведение элементов при наведении, на экране компа и мобилки. Прошел 10 шаблонов страниц, 94 файла стилей и 51 скрипт.

Из этого собрал нашу ДС: 30+ компонентов на старте, потом еще 19, в Storybook 300+ состояний. Все уже в нашей палитре и нашем шрифте, а также то, чего в эталоне не было.

Страницу собирал только из компонентов системы. Ни одного цвета или размера мимо токенов, ни одного блока от себя. И сам себя проверял: сборка, автопроверки страницы, а после крупных переделок попиксельно сравнивал скриншоты до и после.

Конечно, идеально с 1 раза не вышло. На второй день фиксили то, что у части юзеров пропадали все картинки, а меню налезало на заголовок на невысоких экранах. Но это и отличает сайт, который сдаешь, от сайта, который показываешь

Если хотите повторить у себя, порядок такой:
1. Один эталон вместо мудборда на двадцать картинок
2. Разбор замерами, никаких «сделай похоже»
3. Своя система поверх разбора: приемы проверенные, а палитра, шрифт и контент ваши
4. Страница только из компонентов. Нужен новый блок – сначала в систему, потом на страницу
5. Каждый экран принимаете вы сами

➡️ На видео в посте его часть, а тут можно чекнуть лендинг целиком: pixelperfect.school/ai-native-website

Если бы не знали, догадались бы, что его собрал Клод?