КАК СДЕЛАТЬ ХОРОШИЙ ВАЙБКОД ДИЗАЙН

В этом лонгриде будет мой опыт: как я создаю дизайн для своих проектов, какие есть сервисы, как это можно делать лучше и уникально. Это не полноценный ГАЙД, но он поможет сделать тебе хороший дизайн для проектов.

Скорее всего ты уже успел столкнуться с уродским дизайном в своих проектах — и это действительно проблема. Хороший дизайн производит лучшее впечатление.

Это важно, если участвуешь в различных конкурсах, создаёшь стартапы или даже если делаешь под себя (приятнее смотреть на хороший дизайн)

РАБОТАЙ С РЕФЕРЕНСАМИ

Ты можешь брать чужие референсы и смешивать их (либо пиздить полностью). Это самый простой способ для создания быстрого и качественного дизайна.

Собрал немного источников, где можно брать хорошие референсы:

— variant.com (спасибо за инфу)

Огромное количество референсов, которые ты так же сможешь изменять при помощи ИИ встроенного в сам сервис. Ты можешь поменять цветовую палитру, поменять что-либо местами, изменить шрифты, иконки и так далее.

Как использовать? Просто грузишь скриншот своему ИИ агенту и пишешь:

Сделай дизайн систему нашего проекта. Она должна быть похожа на референс (либо референсы), который я загрузил скриншотами. Сохрани: *перечисли особенности этого дизайна*. После создания дизайн системы адаптируй наш проект под эту дизайн систему.

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

— https://www.awwwards.com/

Отличный сайт для поиска референсов для твоих проектов. Тут есть полноценные сайты, которые можно потыкать, а не просто посмотреть превью. ИИ легче понимать, особенно если ты работаешь с Antigravity, ибо у него есть функция браузера (агент открывает браузер и сам сканирует его)

Загружай ссылку на сайт в ИИ и он скопирует дизайн систему качественнее, чем через картинки.

ПРОМПТЫ ДЛЯ СОЗДАНИЯ ДИЗАЙНА

Конечно, я не могу оставить тебя без альфы. Оставлю в комментариях промпты для дизайна. Что они делают (вкратце):

— clone_design_system

Позволяет наиболее точно и качественно скопировать дизайн систему с какого-либо сайта. В конце результата ты увидишь, что именно ИИ смог скопировать, а что придумал самостоятельно.

Также есть важная особенность — brandSignature. Это показатель того, что делает дизайн узнаваемым. Это позволит твоему ИИ понять не только компоненты, но и ощущение (что лучше повлияет на будущий дизайн)

— reference-uniqualizer

Этот промпт поможет уникализировать твой дизайн. Он ориентируется на твою дизайн систему (когда будешь использовать, обязательно отметь, что у тебя есть дизайн система, которую надо уникализировать)

При использовании этого промпта ты получаешь уникальную вариацию дизайна. ИИ будет брать какой-либо стиль и смешивать разные слои (типографику, цвета, компоненты и т.д) для получения нового уникального дизайна.

Этот промпт работает в связке с первым. Если вдруг нет ещё идеи того, как будет выглядеть твой интерфейс — можешь просто попросить создать уникальную дизайн систему и он реализует это.

— design-reviewer

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

— dark-light-adaptation

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


ЛУЧШИЙ ОБМЕННИК | SHITPOST