/awwwards: сайт уровня премии из одной фразы

Скил - это папка с инструкциями, по которым работает агент. В /awwwards агент становится арт-директором, дизайнером и разработчиком в одном лице. Анкету он не присылает: всё, чего не знает, записывает как допущение, а в конце перечисляет, что нужно заменить.

Ориентир - сайты, которые получают «сайт дня» на Awwwards, известной премии веб-дизайна. Подавать туда ничего не нужно, это просто планка качества.

Автор - разработчик Julio Barbosa. Репозиторий открыт 12.10.2026, к 15.10 у него 347 звёзд на GitHub.

Категории оценки взяты у премии: дизайн (вес 40%), удобство (30%), креатив (20%), контент (10%).

На чём строит: по умолчанию Next.js; Astro - для витрин, где главное анимация; внутри готового проекта - на его же стеке. Анимация - GSAP, плавная прокрутка - Lenis, WebGL - OGL.

Чего не делает по своим правилам: не выдумывает награды, логотипы клиентов и цифры, не ставит «рыбу» вместо текста, не лепит фиолетовые градиенты, стекло и три одинаковые карточки, если идея этого не требует. Для телефона собирает отдельную раскладку, а не сжатую версию компьютерной.

1. Агент: Claude Code, Codex, Cursor или другой, который читает скилы (установщик сам найдёт, какие стоят у тебя). Автор строил и проверял скил на Claude Code и Codex.
2. Node.js 22.20 или новее - для установщика. Вспомогательным скриптам скила хватает Node 20.
3. Модель, которая видит картинки - иначе она не сможет смотреть свои же скриншоты.
4. Playwright и axe-core ставить заранее не нужно: скил сам добавит их в проект, когда понадобятся.
5. Аккаунт Vercel, Netlify или Cloudflare - только если хочешь, чтобы он сам выложил сайт в интернет.

npx skills add juliobsz/skills -g

Команда работает через npx, заранее ничего ставить не нужно. Установщик найдёт твоих агентов и предложит выбрать.

npx skills add juliobsz/skills -g -a claude-code

1. Для другого агента замени claude-code на codex, cursor и так далее.
2. Только для текущего проекта - та же команда без -g.
3. Обновить: npx skills update -g. Удалить: npx skills remove awwwards -g.
4. Через плагины Claude Code - команда ниже, тогда скил обновляется сам. Ставь одним способом: если и плагином, и установщиком, скил появится дважды.

/plugin install awwwards --marketplace juliobsz/skills

После установки открой новую сессию агента: скилы читаются при запуске. Дальше набери /awwwards или просто попроси сайт. Если команда не находится, проверь, куда встал скил: npx skills list -g.

Необязательно: рядом можно поставить скил /anatomy (npx skills add wheresryan22/anatomy -g). Тогда раздел «как это работает» на сайте может стать интерактивной объёмной схемой.

Хватит и одной строки, но чем больше правды о тебе, тем меньше заглушек и тем точнее идея: имя, чем занимаешься, где, два-три настоящих проекта. Подставь своё вместо примеров.

Сделай мне портфолио. Меня зовут Юлия, я дизайнер интерфейсов из Казани, работаю с маленькими студиями. Три проекта: приложение для пекарни, сайт школы танцев, редизайн банка для малого бизнеса. Сайт на русском, шрифты с кириллицей.

Сайт для моей кофейни «Зерно» в Твери: 12 мест, свой обжарщик, завтраки до 14:00. Задача - чтобы люди приходили и бронировали стол. Нужны меню, адрес на карте и кнопка звонка. Тексты на русском, шрифты с кириллицей.

Страница конференции «Север» для дизайнеров: 14 ноября, Мурманск, 300 мест, 8 спикеров. Нужны программа по часам, спикеры с фото-заглушками и кнопка регистрации. Хочется, чтобы ощущалось как полярная ночь. Всё на русском.

Страница онлайн-курса по керамике для новичков: 6 недель, занятия дома, набор глины присылаем почтой. Нужны программа по неделям, кто ведёт, отзывы-заглушки и форма заявки. Цены не пиши, оставь место. Сайт на русском.

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

Переделай этот лендинг так, чтобы он мог взять «сайт дня» на Awwwards. Тексты и структуру разделов сохрани, меняй дизайн, шрифты и анимацию. Шрифты с кириллицей.

Последний запрос запускай внутри папки проекта с готовым лендингом - тогда скил работает на его стеке.

1. Прочитай финальное сообщение. Там список допущений и заглушек: придуманные проекты, фото, тексты. Пришли агенту настоящие - и попроси заменить.
2. Открой DESIGN.md. В нём идея, палитра, шрифты и правила анимации. Не нравится направление - поправь файл или скажи, что поменять, и попроси пересобрать по нему.
3. Проси точечно. «Сделай первый экран спокойнее», «поменяй акцентный цвет на тёмно-зелёный», «добавь раздел с отзывами». Агент снова прогонит проверку.
4. Проверь кириллицу. В подборке шрифтов скила кириллица отдельно не упоминается. Если буквы выглядят чужими, попроси шрифты с поддержкой кириллицы.
5. Выкладка - твоё решение. Без твоего «да» скил ничего не публикует.

Скрипты из скила работают и отдельно, на любом сайте: audit.mjs проверяет SEO, доступность, вес и тексты-заглушки, shoot.mjs снимает скриншоты всех типов страниц и меряет скорость на медленном телефоне.

1. Мы сами его не запускали. Всё выше - по README и инструкциям скила. Запросы из раздела 5 не проверены.
2. Долго и дорого по лимитам. Полный прогон - идея, дизайн, код и несколько кругов скриншотов и правок. Готовься к длинной сессии и большому расходу токенов.
3. Результат зависит от модели. И идея, и проверка по скриншотам хороши ровно настолько, насколько хороша модель.
4. Контент на тебе. Без настоящих проектов, фото и текстов сайт выйдет с помеченными заглушками.
5. 8 из 10 - его собственная оценка. Критик держит планку, но последнее слово за тобой.
6. Русский язык. Язык сайта скил берёт из запроса, но сам скил и примеры у автора на английском. Как он пишет русские тексты, мы не проверяли.

Первоисточник: репозиторий juliobsz/skills на GitHub, файлы README.md и awwwards/SKILL.md.