DeepSeek код для дизайнера: карточка портфолио за вечер
Deepseek код ищут дизайнеры, которым нужна вёрстка без разработчика. Как я получил HTML и CSS карточки портфолио с наведением в LibraChat и что подкрутил сам.
Е
Евгений
Дизайнер-партнёр LibraChat
7 мин чтения
Двенадцать карточек работ, у каждой мягкий подъём при наведении курсора, и ни одного вопроса к знакомому разработчику. Это моё портфолио после одного вечера. Код карточки написала нейросеть по описанию, которое я составил как дизайнерский бриф. Запрос «deepseek код» я видел у коллег-дизайнеров не раз: нужна вёрстка, а программиста рядом нет. DeepSeek — нейросеть одноимённой китайской компании, но пример ниже я сделал в LibraChat, где я дизайнер-партнёр. Покажу запрос, ответ и три числа в коде, которые я подкрутил сам.
Зачем дизайнеру запрос «deepseek код»
Я рисую интерфейсы много лет, но вёрстку всегда отдавал. Это удобно, пока проект большой. А для своего портфолио звать разработчика неловко: работы на час, а объяснять, что я хочу, полдня.
Классическая проблема у меня одна. Я точно вижу, как карточка должна вести себя при наведении: чуть подняться, отбросить тень, без резкого рывка. Но не знаю, какими словами это пишется в CSS. Разработчику я показывал руками, буквально двигая ладонь над столом. Сам грешил тем, что в макете рисовал «состояние наведения» и молча надеялся, что верстальщик догадается про плавность.
Портфолио у меня состоит из 12 работ. Каждая работа оформлена карточкой: картинка, название, описание в одну строку, три тега. Мне нужен был один аккуратный компонент, который я потом повторю двенадцать раз.
Бриф для кода: как я описал карточку
Писать код я не умею. Зато умею описывать то, что нарисовал. Запрос я составил так же, как бриф верстальщику, только короче:
Напиши HTML и CSS для карточки работы в портфолио дизайнера: картинка сверху, название, короткое описание и три тега. При наведении карточка чуть приподнимается и появляется мягкая тень. Аккуратно, без лишних эффектов, шрифт системный. В конце в двух строках объясни, какие свойства отвечают за эффект наведения.
Здесь три слоя. Структура: что из чего состоит карточка. Поведение: что происходит при наведении. Вкус: «аккуратно», «без лишних эффектов», «шрифт системный». Последний слой обычно никто не пишет, а зря. Я сам годами ставил задачи верстальщикам без него и потом удивлялся, откуда в проекте взялись анимации, которых я не рисовал. Без него нейросеть может добавить и вращение, и свечение, и градиент.
Отдельно последняя строка. «Объясни, какие свойства отвечают за эффект» я добавил, чтобы потом подкручивать карточку самому, а не возвращаться с каждым пикселем.
Что пришло в ответ
Два блока кода: разметка карточки и стили. Разметка короткая, с понятными названиями классов: `card`, `card__image`, `card__title`, `card__tags`. Пример заполнен правдоподобно: «Ребрендинг кофейни», «Фирменный стиль, упаковка и сайт для локальной сети», теги «Брендинг», «Упаковка», «Веб».
Главное для меня было в стилях карточки, в двух правилах:
И объяснение в конце, ровно в две строки, как я просил:
За подъём отвечает `transform: translateY(-6px)`, за мягкую тень — `box-shadow`. Плавность обоих изменений задаёт `transition` на карточке.
Для меня это была небольшая радость. Мой жест ладонью над столом, оказывается, называется `translateY`. А «без рывка» — это `transition` с четвертью секунды.
До и после: карточка без эффекта и с ним
Я собрал страницу из двенадцати карточек и посмотрел на неё глазами посетителя. Вот как изменилось ощущение:
Что · Было: статичная сетка · Стало: карточка с наведением
Что видно при наведении — ничего, только курсор меняется — карточка поднимается на 6 пикселей
Тень — одна и та же, едва заметная — в покое лёгкая, при наведении глубже
Плавность — нет — 0,25 секунды на подъём и на тень
Понятно ли, что карточка кликабельна — не очень — да, она реагирует
Шрифт — любой, какой подставит браузер — системный, как в интерфейсе телефона
Разница выглядит мелкой в таблице. На экране она огромная. Статичная сетка похожа на распечатку. Сетка, которая отвечает на курсор, похожа на сайт.
Первым портфолио посмотрел мой давний клиент, владелец небольшой типографии. Он ничего не сказал про эффект наведения. Он сказал: «Приятно листать». Для меня это лучшая оценка. Хорошее движение в интерфейсе не замечают, его чувствуют. Если бы клиент заметил подъём карточки, значит, я перестарался бы с цифрами.
Словарь, который я вынес из одного ответа
Самое ценное в этом вечере оказалось не в готовой карточке. Я наконец понял, как мои дизайнерские слова звучат в CSS. Теперь у меня есть маленький словарь, и я им пользуюсь в разговорах с верстальщиками.
«Карточка приподнимается»: это сдвиг по вертикали, `translateY`. Минус значит вверх. Чем больше число, тем выше прыжок.
«Мягкая тень»: это `box-shadow` с большим размытием и низкой непрозрачностью. В ответе тень в покое почти незаметная, а при наведении глубже и шире. Карточка как будто отрывается от стола.
«Без рывка»: это `transition`, время перехода между состояниями. Четверть секунды глаз воспринимает как плавное движение, а не как скачок.
«Картинки одного размера»: это `object-fit: cover` у изображения. Если работы сняты в разных пропорциях, картинка всё равно заполнит отведённые 200 пикселей по высоте, а лишнее аккуратно обрежется. Об этом я в запросе не просил, но именно это спасло мою сетку: у меня половина обложек горизонтальные, половина квадратные.
Три числа, которые я подкрутил сам
Благодаря двум строкам объяснения я знал, где крутить. На это ушло минут 20, и это была самая приятная часть вечера:
Подъём: −6 пикселей показались мне резковатыми для крупных карточек. Поставил −4.
Тень при наведении: уменьшил прозрачность с 0.12 до 0.10, чтобы карточка не «парила» над страницей.
Плавность: оставил 0.25 секунды. Пробовал 0.4, получилось вязко.
Каждое изменение сводится к одной цифре. Раньше ради такой мелочи я писал разработчику, ждал до вечера и получал не то, потому что «чуть мягче» каждый понимает по-своему. Теперь я подбираю сам, глазами, как подбираю оттенок в макете. Сохраняешь файл, обновляешь страницу в браузере, смотришь. Я прошёл так круга четыре, пока движение не стало таким, каким я его рисовал.
Ширину карточки в ответе задали фиксированную, 320 пикселей. Для моей сетки на компьютере это подошло. Для телефона я дописал ограничение сам, одной строкой `max-width: 100%`. Нашёл, куда её поставить, по тем же названиям классов: они говорящие.
Где deepseek код из чата заканчивается и начинается вёрстка
Начну с того, чего в ответе быть не могло. Нейросеть дала мне аккуратный компонент. Но портфолио — это ещё сетка, шапка, контакты, адаптация под разные экраны, загрузка картинок и размещение в интернете. Сетку из двенадцати карточек я собрал сам, повторив компонент. А размещение сайта — отдельная история, и её я всё-таки отдал знакомому.
И ещё. Код из чата не знает твоего бренда. Цвета, скругления и шрифт в ответе нейтральные: белый фон, серые теги, радиус 12 пикселей. Под свой фирменный стиль их придётся поменять, и это снова твоя работа дизайнера.
И последнее. Код нужно проверять глазами. Не строку за строкой, а результат в браузере: на компьютере, на телефоне, с длинным названием работы и с коротким. Перед тем как выложить портфолио, я проверил карточку в пяти ситуациях:
длинное название работы, которое переносится на две строки;
описание короче одной строки и длиннее двух;
обложка в вертикальной пропорции;
экран телефона в обычном положении;
медленный интернет, когда картинка грузится последней.
Сломалась только последняя ситуация, и то чуть-чуть. Пока картинка грузилась, карточка была ниже соседних, а потом прыгала. Высота у картинки задана, поэтому прыжок оказался в пару пикселей, и я решил его не трогать.
Если хочешь посмотреть, как нейросеть помогает тем, кто пишет код каждый день, загляни в статью нейросеть для программиста. Там другой уровень задач, но принцип брифа тот же.
Посмотри на свою сетку
Возьми одну карточку из своего портфолио или макета. Опиши её в три слоя: структура, поведение, вкус. Добавь просьбу объяснить, какие свойства за что отвечают. Отправь в чат LibraChat, собери страницу и наведи курсор. Попробуй подкрутить одну цифру и посмотри, как меняется движение.
Мне на эту карточку хватило бесплатного тарифа. Когда задач с кодом станет больше, сравни возможности на странице тарифов LibraChat.
