stepikin.com
Собственный сайт студии, пересобранный, чтобы продавать одно: ИИ-продукты — от дизайна до запуска.
Сверху — настоящая глубина и движение, внизу — обычный статичный HTML.
с Claude Code
- Что
- Собственный сайт студии: глубина и моушн поверх простого статического HTML, читаемого ИИ.
- Зачем
- Премиальному сайту нужны глубина и движение, а сайту, который должны находить, — простые быстрые страницы.
- Моя роль
- Арт-дирекшн, дизайн и разработка сразу в коде с Claude Code, без Figma.
- Результат
- 13 обложек кейсов · 2 темы · 5 вариантов первого экрана
Премиальный сайт студии в тёмной и светлой темах с настоящей глубиной и движением — который всё равно грузится как обычный HTML и чисто читается поисковиками и ИИ-ассистентами.
Читать историю целиком
Задача. Сайт должен продавать работу над ИИ-продуктами — MVP за 4 недели, полноценную разработку или ежемесячное партнёрство — и ощущаться таким же премиальным, как продукты, которые он обещает. Элегантный и в тёмной, и в светлой теме, с настоящей глубиной и движением, от соло-студии сеньор-уровня.
Подход. Спроектирован прямо в коде с Claude Code, без Figma. Каждое слово живёт в статичном HTML; WebGL, стекло и движение наложены сверху как прогрессивное улучшение, на телефонах — постеры. Один кит токенов и компонентов на все страницы.
Результат. Сайт студии, который показывает глубину, а не описывает её: стеклянный 3D-герой, спираль работ, единая система обложек, перерисованный знак и один шаблон кейса — а под всем этим простые читаемые страницы с llms.txt, ai.html, OpenAPI и JSON-LD.
Stepikin Studio — соло-студия сеньор-уровня: дизайн, разработка и ИИ-воркфлоу из одних рук. Сайт должен был стать первым доказательством этого предложения.
Противоречие было понятно с самого начала. Премиальный сайт студии хочет глубины и движения; сайт, который должны находить, хочет быть простым, быстрым и читаемым. Решение — развести одно с другим. Каждое слово — статичный HTML. Стекло, спираль, глобус и зерно наложены сверху как прогрессивное улучшение, и у каждого есть запасной вариант — постер, список, статичный кадр.
Под визуалом сайт говорит с машинами так же ясно, как с людьми: llms.txt, отдельная страница для ИИ-ассистентов, описание OpenAPI с манифестом ai-plugin и JSON-LD на каждой странице. Поисковики и ассистенты читают тот же текст, что и посетитель.
Файла в Figma не было. Я проектировал сайт прямо в коде с Claude Code — three.js для стекла, чистый WebGL2 для спирали, vanilla JavaScript для всего остального — и на каждом шаге проверял визуально скриншотами Playwright в обеих темах и на ширине телефона, прежде чем выкатить на Netlify.
Глубина сверху. Обычный HTML внизу.
Каждый эффект — прогрессивное улучшение с запасным вариантом: постер, список, статичный кадр.
OpenAPI · JSON-LD
Стеклянные объекты в реальном времени.
Натюрморт из продуктовых объектов, который three.js рендерит вживую: прозрачное стекло наклоняется за курсором и плывёт при прокрутке.
ТёмнаяГлубокое синее свечение под чёрным стеклом.
СветлаяОтдельный арт-дирекшн, а не инвертированная тёмная.
Что получают телефоны вместо живого WebGL.
Как сделано стекло
Первый экран — небольшой натюрморт из продуктовых объектов: телефон, ноутбук, облачко чата, ИИ-сфера, искра, переключатель, курсор, график, пилюля — рендерится вживую в three.js. Прозрачное стекло на transmission из MeshPhysicalMaterial, процедурная скруглённая геометрия, наклон вслед за курсором и медленный дрейф при прокрутке.
Четыре героя до стекла.
Каждое направление жило на странице достаточно долго, чтобы оценить его в движении, а не статичной картинкой.
Почему проиграл каждый
- Воксели — цифровые продукты, собранные из кубиков с фаской, перетекают из одного объекта в другой. Эффектно, но читалось как игра, а не студия.
- Рамка монитора — работы внутри одного экрана. Понятно, но плоско и слишком буквально.
- Смена продуктовых окон — реальные окна продуктов растворяются друг в друге. Честно, но конкурировало с галереей ниже.
- Веер обложек — обложки кейсов, разложенные как карты. Вместо этого стал зерном спирали работ.
- Стеклянные объекты — остались. Достаточно абстрактно, чтобы быть премиальным, и достаточно конкретно, чтобы говорить «ИИ-продукты».
Один цилиндр, тринадцать обложек.
WebGL-спираль: каждая обложка — сегмент одной спирали, которая расширяется раструбом, поэтому карточки меняют форму по мере подъёма.
НаведениеОдна карточка в цвете; остальные уходят в синий монохром.
СветлаяЛенты превращаются в бледно-голубой свет.
Как работает спираль
Галерея работ — это WebGL-спираль. Каждая обложка кейса — сегмент одного высокого цилиндра, намотанного по спирали, которая раструбом расширяется к верху и низу, так что карточки непрерывно меняют форму по мере подъёма. Скорость прокрутки добавляет инерционное трепетание. Холст прозрачный: под ним HTML-заголовок, за ним — дымчатые световые ленты с зерном.
Одна и та же спираль в четырёх точках прокрутки: раструб меняет форму каждой карточки на пути вверх, а заканчивается всё затемнением и крупной антиквой «View all». При наведении одна карточка остаётся цветной и чуть увеличивается; остальные уходят в синеватый монохром.
Каждый кейс — первый экран сайта.
Полоска навигации, один заголовок, один призыв к действию, настоящие экраны — разные продукты, одна грамматика.
Как менялась одна обложка
Читать историю целиком
Тринадцать обложек пересобраны как постеры в духе «первого экрана сайта»: полоска навигации, один крупный заголовок, один призыв к действию, настоящие экраны продукта и фон из фирменного цвета или фото. Разные продукты, одна грамматика — поэтому стопка выглядит одновременно яркой и цельной.
До системы постеров было три набора обложек; выше — обложка AI Dental, версия за версией.
Цвет в центре. Плитки, которые просыпаются.
Ряды обложек расцветают там, куда смотрит глаз; десять плиток услуг мерцают, светятся и выдавливаются в объём при наведении.
Читать историю целиком
Ряды обложек. Под первым экраном два ряда обложек плывут в противоположные стороны. Один слой с backdrop-filter делает их синеватым монохромом по краям экрана и даёт им расцвести полным цветом в центре — глаз идёт туда, где цвет.
Услуги. Десять плиток услуг спокойны, пока к ним не подойдёт курсор. При наведении начинает мерцать пиксельная сетка, по рамке бежит свет, а иконка выдавливается в 3D и поворачивается за курсором. Рядом — «один стек, один дизайн-язык»: карточка со звёздным полем и монохромные логотипы инструментов.
Глобус из точек.
Цитаты поверх медленно вращающегося глобуса; маска суши с шагом 1° заставляет точки повторять реальные береговые линии.
Три способа работать вместе.
MVP за 4 недели, полноценная разработка или ежемесячное партнёрство — по неделям, что входит и кому не подходит.
Один штрих, перерисованный точно.
«S», которая раскрывается в гору, — перестроена как точная геометрия, с новыми плитками иконки для тёмной и светлой темы.
Иконка · тёмная
Иконка · светлая
Читать историю целиком
Знак — один непрерывный штрих: «S», которая раскрывается в гору. Я перерисовал его как точную геометрию: углы в целых градусах, одна толщина штриха, равные радиусы скругления и оптическое центрирование внутри плитки. Затем появились новые плитки иконки для тёмной и светлой темы.
Гигантский знак в подвале: четырёхступенчатое прогрессивное SVG-размытие растворяет его в подвале; при прокрутке он проявляется и встаёт на место.
Один кит — все страницы.
Общие токены и компоненты k-*; навигацию и подвал вставляет небольшой Node-скрипт, так что изменение сразу попадает везде.
Все кейсы — один шаблон
Визуальный язык
Общие токены и компоненты — классы k-* — работают на главной, во всех кейсах, в блоге и гайдах. Навигация и блок «CTA + подвал» вставляются в каждую страницу небольшим Node-скриптом, поэтому изменение попадает везде сразу.
Визуальный язык: чёрный холст, Figtree с одним тонким акцентным словом курсивом Cormorant Garamond, белые кнопки-пилюли с прокруткой букв при наведении, стекло, синее свечение и плёночное зерно — и светлая тема как полноценная вторая подача.
Все кейсы переведены на один шаблон: крупный заголовок, обзор, строка меты, галерея, задача / подход / результат, текст с боковой колонкой и другие проекты.
Кейсы в вертикальном видео.
Шаблоны 1080×1920 с размеченными безопасными зонами под интерфейс каждой платформы.
Легче на телефоне.
Тяжёлый WebGL уступает место: стекло становится постером, спираль — индексируемым списком.
Первый экранПостер вместо WebGL.
Ряды обложек
Услуги
Тарифы
КейсРитм сохранён на 390 px.
Спасибо.
Нужен сайт, который показывает глубину и при этом читается как обычный текст? Спроектирую и соберу его от начала до конца.