Как я сделал дизайн личного сайта в Claude Design и собрал его на Hugo

Что получилось

Так выглядит главная на десктопе. Тёмная тема включается по настройке системы, переключателя нет. Если она включена у вас, картинка ниже тоже тёмная.

А так главная выглядит на телефоне в обеих темах. Каждый экран сначала делается на ширину 390 пикселей и только потом на десктоп.

Образ собран из градиента и цифр 0 и 1

В основе образа две детали: градиент от синего через фиолетовый к розовому, как у пиксельного баннера в терминале, и анимация цифр 0 и 1. Сначала они жили только в мелочах, а в одно целое их связал космос, и сложился он на третий день. Знак сайта — слово torbek и квадрат-курсор справа.

Космос сделан из тех же деталей. Курсор стал солнцем, цифры 0 и 1 звёздами, а звезда мерцает, когда переворачивается её бит. Космос собран из того, что на сайте уже есть, и новых картинок не нужно. Фотографий, иконок и логотипа на сайте нет, стрелки набраны шрифтом.

Дизайн-система появилась раньше страниц

Первой в Claude Design появилась дизайн-система «Торбек» с токенами цвета, шрифтов и отступов, компонентами и принципами. Рядом лежит холст с макетами: главная в двух темах, список заметок, заметка, разделы, десктоп.

CSS сайта начинается с тех же токенов, а классы называются как компоненты в дизайн-системе:

/* Токены дизайн-системы «Торбек» (tokens.json, версия 4) */
:root {
  --paper: #f7f7f9;
  --ink: #14141a;
  --grad-blue: #2563eb;
  --grad-violet: #6d4ae0;
  --grad-pink: #c8287a;
  --sec-notes: #9a39ad;
}

Страница не придумывает свои цвета и отступы, и вёрстку можно положить рядом с превью компонента и сравнить.

Каждый цвет градиента проверен на контраст: текстом он читается на фоне обеих тем не хуже 4.8:1. В принципах записано и то, чего на сайте нет: карточек, теней и меню-гамбургера. Теперь это полноценная дизайн-система, и по ней соберутся новые страницы, когда появятся.

Разделы стали точками градиента

Разделов пять: обо мне, работа, проекты, заметки, факты. Каждый занимает свою точку градиента, от синего «обо мне» до розовых «фактов». Цвет раздела получают квадрат в строке навигации, курсор знака на странице раздела, метка над заголовком и стрелка под курсором.

Порядок разделов задан одной строкой в конфиге Hugo:

sections = ["about", "work", "projects", "notes", "facts"]

Порядок и есть точки градиента, поэтому он живёт в конфиге: правка одного файла с текстом не должна его сдвигать. Раздел появляется на сайте, когда опубликована его страница, а заметки вместе с первой заметкой. Поэтому сейчас открыты проекты, заметки и факты. «Обо мне» и «работа» ждут текстов.

Двигаются только цифры

Главное правило дизайна такое: двигается только то, что сделано из 0 и 1, а страницы для чтения стоят спокойно. При «уменьшить движение» в настройках системы всё стоит, и петли в этой заметке тоже.

Ссылка в одну строку под курсором на 420 миллисекунд рассыпается в случайные цифры и проявляется слева направо. Цифры лежат отдельным слоем поверх настоящего слова, поэтому вёрстка не сдвигается ни на пиксель. Скринридер читает само слово.

На телефоне наведения нет, а нажатие не должно ждать анимацию. Поэтому там метки разделов проявляются один раз, когда доезжают до экрана, а имя при первом заходе.

Планета из цифр крутится на главной рядом с именем: материки из единиц, море из нулей, оборот за минуту. Под курсором она рассыпается, как ссылки, и собирается за 650 миллисекунд. Кольцо набрано словом torbek в двоичном коде.

Почему canvas: в планете на десктопе около 400 цифр, и кадр меняется раз в 85 миллисекунд, как в терминале. Отдельный элемент страницы на каждую цифру дал бы тысячи изменений стилей в секунду, а WebGL потянул бы библиотеку ради двумерных цифр. Анимация стоит, когда планета ушла с экрана или вкладка скрыта.

Раз за визит по небу главной пролетает комета: хвост из семи цифр, яркий в голове и гаснущий к концу.

Звёзды не встают под текст. Перед раскладкой скрипт измеряет имя, абзац и навигацию и убирает звёзды из этих прямоугольников. Заданные заранее зоны ломались бы на промежуточной ширине окна и на английской версии, где имя другой длины.

На странице 404 кольцо набрано числом 110010100, это 404 в двоичной системе. Планета будто сошла с орбиты, а сама система осталась маленькой и далёкой в углу неба.

Созвездие заметок собирает Hugo

Заметки становятся звёздами. Слева направо идёт время, старые звёзды синие, новые розовые, а по размеру видно, сколько заметку читать. Под курсором звезда показывает заметку и линиями связывает её с заметками тех же тем. В конце заметки над похожими виден маленький кусок созвездия, где она отмечена курсором.

Так раздел будет выглядеть, когда заметок станет много. На записи после этой заметки идут заглушки, как в макете, на сайте их нет.

На десктопе темы собраны колонкой справа, и под курсором тема заранее показывает своё созвездие.

Почему Hugo: созвездие видно и без JavaScript, а скрипт добавляет только подсказку и мерцание пыли. Звёзды сделаны элементами страницы с координатами в процентах, линии нарисованы растянутым SVG толщиной в пиксель.

Один SVG на всё не подошёл: растянутый превращает квадраты звёзд в прямоугольники, а с сохранением пропорций сжимает подписи на телефоне до 6 пикселей. Линии темы складываются в кратчайшее дерево. Считает его сам шаблон при сборке.

Полосу планет на «проектах» Hugo собирает так же. Солнечная система появилась через два дня после космоса. Там знак станет солнцем, проекты планетами, и ближе к солнцу будет то, что сейчас в работе. Проектов на сайте пока нет, поэтому нет и полосы.

Hugo, скрипт меньше 5 КБ и проверка перед публикацией

Скрипт один и без библиотек: эффект 0/1, кнопка «скопировать ссылку», небо, планета, орбиты главной, подсказки созвездия и планет на «проектах». Второй файл только для главной сэкономил бы на страницах для чтения меньше килобайта. Предел 5 КБ в сжатом виде проверяет тест, и сейчас из 5120 байт свободно 45.

Hugo я выбрал после сравнения с Astro, Eleventy, Zola и чистым HTML. У него один исполняемый файл без дерева npm-пакетов, и в нём уже есть два языка, RSS и sitemap. Astro для сайта без интерактива избыточен, а на чистом HTML русскую и английскую версии пришлось бы вести руками. Версия Hugo закреплена, и проверка падает, если установлена другая.

Шрифты Golos Text и JetBrains Mono лежат на сайте файлами. Страница не ходит ни на Google Fonts, ни на другие чужие домены и не зависит от того, открывается ли сторонний сервис у читателя.

Сайт читают и машины. На «фактах» короткая справка с датой проверки для людей, поисковиков и языковых моделей, у каждой заметки есть версия в Markdown, у сайта есть llms.txt. Markdown открывается отдельным адресом рядом со страницей: так он работает на любом хостинге и виден человеку.

Перед каждой публикацией Playwright проверяет собранный сайт на телефоне и десктопе в обеих темах: от 320 до 1280 пикселей нет горизонтальной прокрутки, контраст не ниже 4.5:1, кольцо фокуса видно на каждой ссылке главной. Запускается всё одной командой:

npm run check

Если проверка падает, сайт не обновляется.

Каждое изменение идёт через OpenSpec

Порядок всегда один. Если меняется вид сайта, сначала идут макеты в Claude Design. Потом изменение в OpenSpec: предложение, дизайн с решениями, спеки и задачи. Код появляется только после них.

openspec/changes/site-system/
  proposal.md   что меняем и зачем
  design.md     решения и почему они такие
  specs/        что сайт должен делать
  tasks.md      задачи

Изменение начинается с /opsx:propose, выполняется /opsx:apply и уходит в архив /opsx:archive. Решения и их причины остаются в репозитории рядом с кодом. Почти все «почему» выше взяты из таких файлов, остальные из дизайн-системы.