# Веб-дизайн / Веб-разработка

Подбор <mark style="color:yellow;">цветов</mark>, поиск референсов и создание анимаций могут отнимать много времени. В этой подборке — инструменты, которые помогут ускорить разработку и найти вдохновение.

## **Coolors.co** — генератор цветовых палитр

🔗 [Готовые палитры](https://coolors.co/palettes/popular) | [Создать градиент](https://coolors.co/gradient-maker)

<figure><img src="https://2866069703-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJsqE5UhDZkl39PNabEAu%2Fuploads%2FCNA1iYW9WLL5soEGyofi%2Fimage.png?alt=media&#x26;token=d47fa25a-1953-46f1-9cb0-6bbb085b5200" alt=""><figcaption></figcaption></figure>

{% embed url="<https://coolors.co/palettes/palettes>" %}

{% embed url="<https://coolors.co/gradient-maker>" %}
Создать палитру градиента
{% endembed %}

Сервис для работы с цветом, который позволяет:

* Выбирать из готовых гармоничных палитр.
* Создавать градиенты на основе двух и более цветов.
* Экспортировать схемы в CSS, SCSS или Figma.

Полезно, когда нужно быстро подобрать цвета для проекта.

## **Ready.ai** — ИИ-генератор сайтов

🔗 [Перейти на Ready.ai](https://readdy.ai/signin)

<figure><img src="https://2866069703-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJsqE5UhDZkl39PNabEAu%2Fuploads%2Fu9zldHiquKpJ7kUjsz3C%2Fimage.png?alt=media&#x26;token=9b408939-d3a4-43b1-ac01-3a7e90213b08" alt=""><figcaption></figcaption></figure>

{% embed url="<https://readdy.ai>" %}

ИИ-сервис для автоматизированной вёрстки:

* Генерирует лендинги по текстовому описанию.
* Создаёт фоны и иллюстрации.
* <mark style="color:red;">**Бесплатный тариф ограничен (100 токенов ≈ 10-15 запросов).**</mark>

Подойдёт для быстрого прототипирования.

## **React Bits** — библиотека анимаций для React

🔗 [Открыть коллекцию](https://www.reactbits.dev/)

<figure><img src="https://2866069703-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJsqE5UhDZkl39PNabEAu%2Fuploads%2FcRzD5dDd06Y1KbIbfVfD%2Fimage.png?alt=media&#x26;token=da3afc79-cc68-48a5-a010-d858d9485b30" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.reactbits.dev/text-animations/split-text>" %}

Готовые анимации, включая:

* Эффекты для текста и интерфейсов.
* Интерактивные компоненты (кнопки, карточки).
* Динамические фоны.

**Можно тестировать и настраивать параметры в реальном времени.**

## **Dribbble** — референсы для дизайна

🔗 [Популярные работы](https://dribbble.com/shots/popular/web-design)

<figure><img src="https://2866069703-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJsqE5UhDZkl39PNabEAu%2Fuploads%2Fdqm1gUNxoIEFfOefmWcQ%2Fimage.png?alt=media&#x26;token=03189d5e-6f96-40d1-8700-72b18b35eef0" alt=""><figcaption></figcaption></figure>

{% embed url="<https://dribbble.com/shots/popular/web-design>" %}

Платформа с примерами интерфейсов от профессиональных дизайнеров. Фильтры помогают находить работы по стилю (минимализм, неоморфизм и др.).

Исходные файлы недоступны, но сервис полезен для вдохновения.

## **Behance** — портфолио и тренды

🔗 [Открыть Behance](https://www.behance.net/)

<figure><img src="https://2866069703-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJsqE5UhDZkl39PNabEAu%2Fuploads%2F7jaCH0229BecRKxLhvad%2Fimage.png?alt=media&#x26;token=415f583b-b084-4219-8268-f30d9f0f1177" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.behance.net/>" %}

Крупнейшая платформа для демонстрации дизайн-проектов. Особенности:

* **Персонализированные рекомендации.**
* **Разнообразие стилей** — от корпоративных до экспериментальных.