Коротко
Четыре экрана, каждый собран дважды: так, как его делает агент сам, и после правки. Плюс инструменты и порядок работы, которыми мы пользуемся сами.
С AI интерфейс может сделать любой: лендинг или дашборд собираются за минуту. Поэтому теперь ценится то, насколько хорошо он сделан. Без подсказок агент каждый раз собирает одно и то же: фиолетовые градиенты, эмодзи на месте иконок, три кнопки на первом экране. Это называют AI-слопом.
Ниже четыре примера, каждый собран дважды. Потяните разделитель, нажмите кнопки, наведите на графики. Под каждым примером написано, что изменилось и как это называют дизайнеры. В конце инструменты, которыми мы пользуемся, и порядок работы.
Формат с двумя версиями одного экрана мы взяли у Kosta (kosta.fyi) и Дамира Соколовского (unslop). Их скиллы есть в списке инструментов.
Слева первый экран, который агент собирает из готовых компонентов. Справа он же после правки. Потяните разделитель.
Streamline your workflow, save time and get paid faster with our all-in-one invoicing platform.
Tally
For freelancers and small studios. Reminders go out on their own, and every payment lands in one list.
Дизайнеры называют это так: ценностное предложение, основное действие, социальное доказательство.
Главные цифры бизнеса за месяц. Наведите на столбцы с обеих сторон.
Welcome back, Alex 👋
Here's what's happening with your business today.
Overview 📈
October
$45,232
Дизайнеры называют это так: визуальная иерархия, data-ink ratio, табличные цифры.
Подтверждение удаления. Нажмите и подержите кнопки с обеих сторон.
⚠️ Are you absolutely sure?
This action cannot be undone. This will permanently delete your project and remove your data from our servers.
Delete “Spring launch”?
Its 12 files and 3 shared links will stop working. This can’t be undone.
Дизайнеры называют это так: тактильность, обратная связь, UX-тексты.
Остатки товаров на складе. Наведите на строки.
| Product | Price | Qty | Status | ||
|---|---|---|---|---|---|
| iPhone 17 Pro | $1,099 | 24 | ✅ In stock | ⋯ | |
| MacBook Pro 14-inch | $1599.00 | 3 | ⚠️ Low stock | ⋯ | |
| AirPods Pro | $249 | 0 | ❌ Out of stock | ⋯ | |
| iPad Air | $599.00 | 11 | ✅ In stock | ⋯ |
| Product | Price | Qty | Status |
|---|---|---|---|
| iPhone 17 Pro | $1,099.00 | 24 | In stock |
| MacBook Pro 14-inch | $1,599.00 | 3 | Low stock |
| AirPods Pro | $249.00 | 0 | Out of stock |
| iPad Air | $599.00 | 11 | In stock |
Дизайнеры называют это так: выравнивание, табличные цифры, визуальный шум.
Попробуйте отправить пустую форму с обеих сторон, затем введите пароль.
Дизайнеры называют это так: валидация, состояния поля, микротексты.
Все бесплатно. Скиллы мы проверили на своих продуктах.
Работают в Claude Code, Codex и Cursor. Команду можно запустить самому, а можно скопировать задание: агент установит скилл и сразу применит его.
Emil Kowalski
Ошибки, которые агенты делают в анимации и деталях интерфейса, и как их исправить. Эмиль работал дизайн-инженером в Vercel и Linear.
Установка
npx skills@latest add emilkowalski/skillsЗадание для агента
Установи скиллы Emil Kowalski командой npx skills@latest add emilkowalski/skills. Затем пройди анимации и мелкие детали интерфейса этого проекта по этим скиллам: кривые и длительности, нажатие и наведение, появление элементов, тени и границы. Составь список проблем по важности, исправь их по одной и для каждой правки покажи, что было и что стало. В конце проверь результат скриншотами на ширине 390 и 1440 px.Jakub Krehel
Скиллы по типографике, цвету, сетке, доступности и текстам интерфейса. Из журнала Interfaces о дизайн-инженерии.
Установка
npx skills add jakubkrehel/skillsЗадание для агента
Установи скиллы Interfaces командой npx skills add jakubkrehel/skills. Затем проверь этот экран по пяти темам: типографика, цвет, сетка, доступность и тексты интерфейса. Начни со списка проблем по важности, с файлом и строкой для каждой. Исправь их по одной, ничего не добавляя ради украшения, и в конце проверь результат скриншотами на 390 и 1440 px.Damir Sokolovsky
Находит признаки слопа на экране, предлагает направление и правит экран по шагам: отступы, цвет, иконки, текст, шрифты, движение. Умеет записать видео «до и после».
Установка
npx skills add heydamir/unslopЗадание для агента
Установи скилл Unslop командой npx skills add heydamir/unslop. Затем запусти /unslop на этом экране. Сначала покажи все признаки слопа с местом, где каждый находится, и предложи направление, взятое из самого продукта. После моего согласия правь экран по шагам: отступы, цвет, иконки, тексты, шрифты, расположение, движение. В конце покажи «до» и «после».Kosta
Правила для продуктовых интерфейсов с точными значениями: тени, кнопки, таблицы, меню, движение, мобильная версия.
Установка
npx skills add kosta4a/tactile-designЗадание для агента
Установи скилл Tactile командой npx skills add kosta4a/tactile-design. Затем пройди интерфейс по частям: кнопки, карточки, таблицы, графики, выпадающие меню, шторки на телефоне. Сделай каждую часть тактильной по этому скиллу, взяв мои шрифт и цвета за основу, и для каждой части покажи «до» и «после», чтобы я мог сравнить.Без примера агент рисует среднее по интернету. Возьмите 2–3 экрана отсюда и отдайте ему скриншотами.
Десятки тысяч экранов веб- и iOS-продуктов с поиском по элементам. Есть MCP, через который агент сам находит референсы.
Больше 2 000 дизайн-систем известных сайтов в формате DESIGN.md: цвета, шрифты, отступы. Файл можно отдать агенту целиком.
Отборные работы дизайнеров из X в одном месте: интерфейсы, анимации, компоненты.
Свежая галерея веб- и продуктового дизайна, графики, 3D и логотипов.
Экраны и сценарии реальных приложений: онбординг, оплата, настройки.
Хорошая основа, если поменять токены. Без этого получится левая сторона примеров выше. Одно семейство иконок и одно семейство шрифтов на продукт: на этом сайте у нас одна пара, в продуктовых дашбордах другая.
Компоненты, которые копируются в проект и правятся под себя. Левые версии примеров выше собраны из таких же значений по умолчанию.
Доступные компоненты без стилей: поведение и клавиатура готовы, внешний вид ваш.
Каталог компонентов сообщества. Берите структуру и перекрашивайте под свою систему.
Большой набор иконок в нескольких стилях. Ими сделаны иконки этого сайта, в одном стиле на весь сайт.
Линейные иконки с одной толщиной, стандартный набор shadcn/ui. Его мы ставим в продуктовые дашборды.
Шрифт с табличными цифрами и кириллицей. Им набран этот сайт, команды и промпты набраны Geist Mono.
Шрифт наших дашбордов, вариативная версия. Включите табличные цифры, и колонки с числами выровняются.
Начните с референса
Найдите 2–3 экрана на Refero, Inspora или Mobbin и дайте их агенту скриншотами. Без примера агент собирает то, что слева в примерах выше.
Зафиксируйте токены
До первой кнопки: 4–5 размеров шрифта, отступы шагом 4 px, нейтральная палитра и один акцент. Агент держится системы, если она записана.
Подключите скилл
Дайте агенту один из скиллов выше и попросите показать «до» и «после» для каждого компонента. Так видно, что именно он поменял.
Смотрите на экран
Скриншот на телефоне 390 px и на компьютере 1440 px, в светлой и темной теме. Зеленая сборка значит только то, что код собрался. Как выглядит экран, показывает скриншот.
Убирайте
Посчитайте на экране акценты, кнопки и размеры шрифта. Где каких-то больше двух-трех, убирайте лишнее, пока экран не начнет терять смысл.
Вся эта страница в одном задании. Скопируйте его агенту в своем проекте: он установит скиллы и пройдет интерфейс по шагам.
Установи скиллы: npx skills add heydamir/unslop, npx skills add kosta4a/tactile-design, npx skills@latest add emilkowalski/skills и npx skills add jakubkrehel/skills. Затем приведи этот интерфейс в порядок по шагам и после каждого показывай «до» и «после».
1. Первый экран: заголовок говорит, что делает продукт и для кого; одно основное действие и одна текстовая ссылка; вид продукта на месте пятен и свечения; без бейджей с блестками и «10 000+ клиентов» без источника; текст по левому краю.
2. Дашборд: название периода на месте приветствия; одна главная цифра с графиком и база сравнения («+20% к сентябрю»); нейтральные столбцы, выделен только текущий; один формат чисел и табличные цифры.
3. Диалоги и кнопки: заголовок называет объект, кнопка называет действие; кольцо 1 px и короткая тень на месте цветной тени; нажатие 97% за 160 мс; наведение на тон светлее только на устройствах с мышью; видимый фокус.
4. Таблицы: тонкие линии между колонками и строками; один формат чисел, табличные цифры, цены на тон тише названий; статус точкой и словом, без бейджей с эмодзи; без лишних чекбоксов и меню.
5. Формы: ошибка говорит, что исправить; требования видны сразу; фокус уходит в первое поле с ошибкой; текст в полях 16 px.
6. Везде: отступы шагом 4 px, 4–5 размеров шрифта, один акцент, нейтральная палитра, один набор иконок, без эмодзи и градиентов в интерфейсе.
Ничего не добавляй ради украшения. В конце проверь результат скриншотами на 390 и 1440 px, в светлой и темной теме, и перечисли, что изменилось.Восемь правил, по которым мы делаем свои продукты и этот сайт. Каждое появилось после конкретной ошибки.
Сначала измерить референс
Прежде чем рисовать, мы смотрим, как сделано у лучших, и измеряем: размеры, отступы, контраст. Решение принимается по цифрам.
Последовательность важнее разнообразия
Один шаблон с разным содержанием читается как продукт. Четыре разных шаблона читаются как четыре разных сайта.
Одна вещь на экране выделена
Монохромная основа и один акцент, один-два раза на экран. Если выделено все, не выделено ничего.
Глубина из света
Предмет на экране читается как предмет благодаря светлой грани сверху и тонкому кольцу. Черная тень на черном фоне не видна вообще.
Лишнее убираем
Без подписей капсом над заголовками, без точки-разделителя посередине строки, без иконок ради иконок и без декоративных градиентов.
Настоящий продукт на картинке
Мы показываем реальный интерфейс. Стоковые фото, 3D-сферы и светящиеся роботы ничего не говорят о том, что делает продукт.
Тексты точные
Глаголы, цифры и названия вещей. Слова-обещания и остроумные заголовки звучат дешево, простая фраза звучит уверенно.
Ноль визуальных дефектов
Перед показом каждый экран проверяется скриншотом в светлой и темной теме, на двух языках и на телефоне и компьютере. Зеленая сборка ничего не говорит о том, как выглядит экран.
Вставьте в инструкции проекта, например в CLAUDE.md или AGENTS.md, чтобы агент держался их в каждой задаче.
Следуй этим принципам дизайна во всех задачах по интерфейсу.
1. Перед работой найди 2–3 референса и измерь их: размеры шрифта, отступы, радиусы, контраст. Опирайся на цифры.
2. Повторяй один шаблон с разным содержанием. Новый тип блока вводи только с причиной.
3. Монохромная основа и один акцент, не больше двух раз на экран.
4. Глубину давай светлой гранью сверху и кольцом 1 px. Не полагайся на тень на темном фоне.
5. Убирай подписи капсом над заголовками, точки-разделители, иконки без смысла, эмодзи и декоративные градиенты.
6. Показывай настоящий интерфейс продукта. Без стоковых фото, сфер и роботов.
7. Пиши точно: глаголы, цифры, названия. Без слов-обещаний и игры слов.
8. Перед тем как сказать «готово», сделай скриншоты в светлой и темной теме, на 390 и 1440 px, исправь каждый дефект: обрезанный текст, неровные отступы, переполнение, пустоты. Зеленая сборка не доказывает, что экран выглядит правильно.