Перейти к основному содержанию
21st.dev — это сайт с готовыми компонентами. Компонент — это готовый блок. Например:
  • Кнопка
  • Форма
  • Секция с текстом
  • Блок с отзывами
  • Навигационное меню
Каждый компонент можно скопировать и вставить в ваш проект. Это быстрее, чем создавать с нуля.

​
Как использовать

1

Найдите нужный компонент

  1. Откройте 21st.dev
  2. Найдите компонент, который вам нравится 21st.dev в светлой теме
  3. Скопируйте промпт компонента 21st.dev в светлой теме
2

Дайте указания Юре

  1. Откройте свой сайт на Поехали!
  2. Вставьте скопированное описание в чат
  3. Попросите Юру добавить этот компонент 21st.dev в светлой теме 21st.dev в светлой теме
3

Настройте под свой сайт

Юра создаст компонент, а вы редактируйте:
  • Измени цвет на синий
  • Сделай текст крупнее
  • Добавь моё название компании

​
Зачем использовать готовые компоненты

  • Экономия времени. Не нужно придумывать дизайн с нуля. Берёте готовое решение.
  • Проверенные решения. Компоненты уже протестированы. Они работают хорошо.
  • Профессиональный вид. Сайт выглядит как сделанный дизайнером.

​
Простой пример

Допустим, вам нужна секция с отзывами:
1

Откройте 21st.dev

и найдите там «Reviews Section»21st.dev в светлой теме21st.dev в светлой теме
2

Скопируйте промпт

21st.dev в светлой теме21st.dev в светлой теме
3

Попросите Юру сделать такой же компонент

21st.dev в светлой темеЮра создаст секцию с отзывами за несколько секунд.21st.dev в светлой теме

​
Советы по использованию

  • Начинайте с простого — выберите 2-3 компонента для начала, не берите сразу много
  • Адаптируйте под себя — каждый компонент нужно настроить под ваш бизнес, замените текст и цвета
  • Проверяйте на телефоне — убедитесь, что компонент хорошо выглядит на мобильном
  • Сохраняйте единый стиль — все компоненты должны подходить друг другу по цветам и шрифтам

​
Что дальше

После добавления компонентов:
  1. Проверьте сайт на разных устройствах
  2. Попросите друзей посмотреть
  3. Опубликуйте