«Сделай, как у Stripe». Пять слов, от которых у любого дизайнера внутри всё сжимается. Потому что дальше начинается: открываю референс, вожу пипеткой по каждому элементу, лезу в DevTools за шрифтами и отступами, копирую скругления, тени, градиенты… Час ручной работы — и всё равно где-то упустишь мелочь, из-за которой верстальщик потом напишет «а вы точно это имели в виду?».
На этой неделе я нашла способ, который убрал эту рутину почти полностью. Рассказываю, потому что результатом довольна как никогда.
Один клик вместо пипетки и DevTools
Познакомьтесь — UIDrop. Это бесплатное Chrome-расширение, которое считывает «дизайн-ДНК» любой страницы: цвета, шрифты, отступы, скругления, тени, градиенты и стили компонентов. Всё это оно оформляет в структурированный бриф со скриншотом и отправляет прямиком нейросети — Claude, ChatGPT, Gemini, Cursor, Lovable или Manus.
Сценарий, который у меня теперь отработан:
- Захожу на сайт-референс, нажимаю кнопку расширения — анализ идёт локально в браузере.
- UIDrop собирает стили в аккуратный бриф.
- Вставляю его в чат нейросети с задачей «собери лендинг в этом стиле».
Вот и всё. Нейросеть больше не гадает, что я имею в виду под «как у Stripe» — она получает точные значения вместо расплывчатой фразы. А я не трачу час на разбор чужого кода.
Что меня реально подкупило
Во-первых, никакой регистрации и отправки данных на серверы — всё считалось локально, в моём браузере. Для работы с чужими сайтами-референсами это важно: я не хочу сливать клиентские макеты куда попало.
Во-вторых, можно передавать нейросети как весь дизайн-система целиком, так и отдельный элемент — например, только карточку товара или только кнопки. Когда нужно «сделай в духе Linear, но формы — как на этом лендинге», это спасает.
И в-третьих, основные функции бесплатны. Для студии, где референсы меняются каждый проект, это решающий аргумент.
Честно про границы
Буду честной: расширение снимает визуальные параметры, но не передаёт нейросети общую композицию и «характер» сайта так, как их чувствует живой дизайнер. Стили — да, сетка и типографика — да. А вот что именно делает Linear «линейным» — это по-прежнему моя работа. Так что рутина ушла, а профессия осталась. И это, пожалуй, лучшая новость.
Теперь вместо часа на разбор стилей я трачу две минуты, а свободное время отдаю тому, ради чего вообще пошла в дизайн, — композиции и идее.
Инструмент — лишь кисть. Глаз, видящий суть, остаётся вашим. UIDrop научил нас читать чужой код быстрее — но не думать за нас. — Архон