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