КАК СДЕЛАТЬ ХОРОШИЙ ВАЙБКОД ДИЗАЙН
В этом лонгриде будет мой опыт: как я создаю дизайн для своих проектов, какие есть сервисы, как это можно делать лучше и уникально. Это не полноценный ГАЙД, но он поможет сделать тебе хороший дизайн для проектов.
Скорее всего ты уже успел столкнуться с уродским дизайном в своих проектах — и это действительно проблема. Хороший дизайн производит лучшее впечатление.
Это важно, если участвуешь в различных конкурсах, создаёшь стартапы или даже если делаешь под себя (приятнее смотреть на хороший дизайн)
РАБОТАЙ С РЕФЕРЕНСАМИ
Ты можешь брать чужие референсы и смешивать их (либо пиздить полностью). Это самый простой способ для создания быстрого и качественного дизайна.
Собрал немного источников, где можно брать хорошие референсы:
— variant.com (спасибо за инфу)
Огромное количество референсов, которые ты так же сможешь изменять при помощи ИИ встроенного в сам сервис. Ты можешь поменять цветовую палитру, поменять что-либо местами, изменить шрифты, иконки и так далее.
Как использовать? Просто грузишь скриншот своему ИИ агенту и пишешь:
Сделай дизайн систему нашего проекта. Она должна быть похожа на референс (либо референсы), который я загрузил скриншотами. Сохрани: *перечисли особенности этого дизайна*. После создания дизайн системы адаптируй наш проект под эту дизайн систему.
После этого уже ручками фиксишь баги и получаешь неплохой дизайн, которым можно обойтись.
— https://www.awwwards.com/
Отличный сайт для поиска референсов для твоих проектов. Тут есть полноценные сайты, которые можно потыкать, а не просто посмотреть превью. ИИ легче понимать, особенно если ты работаешь с Antigravity, ибо у него есть функция браузера (агент открывает браузер и сам сканирует его)
Загружай ссылку на сайт в ИИ и он скопирует дизайн систему качественнее, чем через картинки.
ПРОМПТЫ ДЛЯ СОЗДАНИЯ ДИЗАЙНА
Конечно, я не могу оставить тебя без альфы. Оставлю в комментариях промпты для дизайна. Что они делают (вкратце):
— clone_design_system
Позволяет наиболее точно и качественно скопировать дизайн систему с какого-либо сайта. В конце результата ты увидишь, что именно ИИ смог скопировать, а что придумал самостоятельно.
Также есть важная особенность — brandSignature. Это показатель того, что делает дизайн узнаваемым. Это позволит твоему ИИ понять не только компоненты, но и ощущение (что лучше повлияет на будущий дизайн)
— reference-uniqualizer
Этот промпт поможет уникализировать твой дизайн. Он ориентируется на твою дизайн систему (когда будешь использовать, обязательно отметь, что у тебя есть дизайн система, которую надо уникализировать)
При использовании этого промпта ты получаешь уникальную вариацию дизайна. ИИ будет брать какой-либо стиль и смешивать разные слои (типографику, цвета, компоненты и т.д) для получения нового уникального дизайна.
Этот промпт работает в связке с первым. Если вдруг нет ещё идеи того, как будет выглядеть твой интерфейс — можешь просто попросить создать уникальную дизайн систему и он реализует это.
— design-reviewer
Промпт, который поможет найти ошибки в твоих дизайнах. Можно добавить его, чтобы быстрее пофиксить баги, которые появились после уникализации / копирования дизайн системы. Попроси проанализировать с помощью этого промпта и после закинь результаты для фикса.
— dark-light-adaptation
Поможет тебе лучше адаптировать твой дизайн для темной и светлой темы. Это не просто инвертация — промпт строит тёмную палитру по законам восприятия, из-за этого тема выглядит более "правильно"
ЛУЧШИЙ ОБМЕННИК | SHITPOST
В этом лонгриде будет мой опыт: как я создаю дизайн для своих проектов, какие есть сервисы, как это можно делать лучше и уникально. Это не полноценный ГАЙД, но он поможет сделать тебе хороший дизайн для проектов.
Скорее всего ты уже успел столкнуться с уродским дизайном в своих проектах — и это действительно проблема. Хороший дизайн производит лучшее впечатление.
Это важно, если участвуешь в различных конкурсах, создаёшь стартапы или даже если делаешь под себя (приятнее смотреть на хороший дизайн)
РАБОТАЙ С РЕФЕРЕНСАМИ
Ты можешь брать чужие референсы и смешивать их (либо пиздить полностью). Это самый простой способ для создания быстрого и качественного дизайна.
Собрал немного источников, где можно брать хорошие референсы:
— variant.com (спасибо за инфу)
Огромное количество референсов, которые ты так же сможешь изменять при помощи ИИ встроенного в сам сервис. Ты можешь поменять цветовую палитру, поменять что-либо местами, изменить шрифты, иконки и так далее.
Как использовать? Просто грузишь скриншот своему ИИ агенту и пишешь:
Сделай дизайн систему нашего проекта. Она должна быть похожа на референс (либо референсы), который я загрузил скриншотами. Сохрани: *перечисли особенности этого дизайна*. После создания дизайн системы адаптируй наш проект под эту дизайн систему.
После этого уже ручками фиксишь баги и получаешь неплохой дизайн, которым можно обойтись.
— https://www.awwwards.com/
Отличный сайт для поиска референсов для твоих проектов. Тут есть полноценные сайты, которые можно потыкать, а не просто посмотреть превью. ИИ легче понимать, особенно если ты работаешь с Antigravity, ибо у него есть функция браузера (агент открывает браузер и сам сканирует его)
Загружай ссылку на сайт в ИИ и он скопирует дизайн систему качественнее, чем через картинки.
ПРОМПТЫ ДЛЯ СОЗДАНИЯ ДИЗАЙНА
Конечно, я не могу оставить тебя без альфы. Оставлю в комментариях промпты для дизайна. Что они делают (вкратце):
— clone_design_system
Позволяет наиболее точно и качественно скопировать дизайн систему с какого-либо сайта. В конце результата ты увидишь, что именно ИИ смог скопировать, а что придумал самостоятельно.
Также есть важная особенность — brandSignature. Это показатель того, что делает дизайн узнаваемым. Это позволит твоему ИИ понять не только компоненты, но и ощущение (что лучше повлияет на будущий дизайн)
— reference-uniqualizer
Этот промпт поможет уникализировать твой дизайн. Он ориентируется на твою дизайн систему (когда будешь использовать, обязательно отметь, что у тебя есть дизайн система, которую надо уникализировать)
При использовании этого промпта ты получаешь уникальную вариацию дизайна. ИИ будет брать какой-либо стиль и смешивать разные слои (типографику, цвета, компоненты и т.д) для получения нового уникального дизайна.
Этот промпт работает в связке с первым. Если вдруг нет ещё идеи того, как будет выглядеть твой интерфейс — можешь просто попросить создать уникальную дизайн систему и он реализует это.
— design-reviewer
Промпт, который поможет найти ошибки в твоих дизайнах. Можно добавить его, чтобы быстрее пофиксить баги, которые появились после уникализации / копирования дизайн системы. Попроси проанализировать с помощью этого промпта и после закинь результаты для фикса.
— dark-light-adaptation
Поможет тебе лучше адаптировать твой дизайн для темной и светлой темы. Это не просто инвертация — промпт строит тёмную палитру по законам восприятия, из-за этого тема выглядит более "правильно"
ЛУЧШИЙ ОБМЕННИК | SHITPOST