Собери личный сайт в Cursor вместе с ИИ

Перейти к нужному моменту

1. 00:00Установка и настройка Cursor▶
2. 04:06Первый запрос и главный экран сайта▶
3. 15:03Замена шаблонных данных на свои▶
4. 22:00Карточки навыков и сохранение в браузере▶
5. 34:30Удаление навыка и отметка «изучено»▶
6. 40:45Как поменять стиль сайта▶
7. 47:09Индекс навыков с ползунками▶
8. 57:55Доработка индекса и добавление TypeScript▶
9. 1:00:08Финальная секция с Telegram▶

Выбери главу: видео выше начнётся с нужного момента.

Подготовься к практике

• Установи Cursor, войди в аккаунт и открой в нём новую папку проекта.
• Подготовь своё имя, описание в 1–2 предложениях и ссылку на свой Telegram.
• Создавай отдельный чат для нового этапа работы: первый экран, навыки, индекс, контакты.
• Проверяй каждый этап в браузере, прежде чем переходить к следующему. Результат ИИ может отличаться от показанного в ролике.

Пример запроса: первый экран

Создай одностраничный сайт «Мой путь в IT» на чистых HTML, CSS и JavaScript без фреймворков. Используй файлы index.html, style.css и script.js. На первом экране покажи моё имя, короткое описание и кнопку «Мои навыки», которая ведёт к будущей секции навыков. Сделай тёмную тему, аккуратную анимацию и адаптивную вёрстку. После изменений перечисли файлы, которые создал, и объясни, как проверить результат в браузере.

Пример запроса: мои навыки

Добавь на существующую страницу секцию «Мои навыки». В ней должны быть карточки с названием и коротким описанием, раскрытие карточки по нажатию и кнопка «Добавить навык». Дай возможность удалять навык после подтверждения и отмечать его как изученный. Сохраняй список и отметки в localStorage, чтобы они оставались после обновления страницы. Используй стиль текущего сайта и не меняй готовый первый экран. Опиши, какие сценарии мне проверить.

Пример запроса: индекс навыков

Добавь секцию «Мой индекс навыков» в стиле существующего сайта. Покажи ползунки от 0 до 100 для HTML, CSS, JavaScript, React/Vue и работы с ИИ. Рядом с каждым ползунком покажи значение в процентах, а ниже — общий показатель, который пересчитывается при изменении любого навыка. Сохраняй значения после обновления страницы. Размести элементы компактно. Не ломай секцию карточек навыков и проверь вычисление на нескольких наборах значений.

Пример запроса: контакт

Добавь в конце сайта секцию «Связаться со мной» с одной кнопкой «Написать в Telegram» и иконкой Telegram. Сохрани общий стиль страницы. В ссылке используй мой адрес https://t.me/МОЙ_ЮЗЕРНЕЙМ и явно покажи мне, где заменить его на настоящий.

Проверь готовый сайт

• В первом экране стоят твои имя и описание, а кнопка ведёт к навыкам.
• Новый навык появляется, раскрывается, удаляется после подтверждения и остаётся после перезагрузки.
• Отметка «изучено» и значения ползунков сохраняются; общий показатель меняется вместе с ними.
• Кнопка Telegram открывает твой адрес, а не пример из видео или шаблонный юзернейм.
• Просмотри изменения агента и проверь страницу на компьютере и телефоне.

Зачем разбирать код

В ролике автор показывает, как находить элементы через инструменты разработчика и смотреть данные в localStorage. Тебе не нужно писать каждую строку вручную, но важно понимать, какие части отвечают за структуру, внешний вид и поведение сайта. Это поможет заметить ошибку ИИ и точнее описать следующую правку.

Короткая запись результата

Сделал: 
Проверил в браузере: 
Что исправил после проверки: 
Что улучшу следующим шагом: