Как бесплатно сделать сайт с помощью DeepSeek: пошаговая инструкция

Небольшой сайт для специалиста, частного мастера или локальной компании можно создать самостоятельно, даже если вы никогда не занимались разработкой. Для этого не обязательно покупать конструктор, заказывать дизайн или изучать HTML и CSS.

В этой инструкции основную работу выполнит DeepSeek:

• соберёт информацию о вашей деятельности;
• подготовит тексты;
• предложит структуру сайта;
• составит список изображений;
• напишет HTML, CSS и JavaScript;
• поможет исправить обнаруженные ошибки.

Доступ к веб-чату DeepSeek предоставляется бесплатно.

В результате вы получите небольшой адаптивный сайт-визитку, который можно открыть на компьютере, телефоне и разместить на собственном домене.

Сразу необходимо обозначить ограничение: это не будет индивидуальная дизайнерская работа, созданная после исследования аудитории, разработки прототипов и нескольких раундов визуальных концепций. Нейросеть не знает, какой сайт существует в вашем воображении. Она создаст аккуратный и работающий вариант по вашему текстовому описанию.

Такого сайта достаточно, чтобы:

• представить специалиста или небольшую компанию;
• рассказать об услугах;
• показать выполненные проекты;
• разместить отзывы;
• указать цены или порядок расчёта;
• дать клиенту телефон, электронную почту и ссылки на мессенджеры;
• получить собственную визитку в интернете.

Создание текстов, кода и изображений может быть бесплатным. Для публикации сайта потребуются домен и обычный виртуальный хостинг.

Для каких сайтов подходит этот способ

По этой инструкции можно сделать:

• сайт частного мастера;
• сайт репетитора;
• сайт фотографа;
• портфолио;
• сайт консультанта;
• сайт небольшой ремонтной бригады;
• сайт салона или кабинета;
• сайт локальной компании;
• лендинг отдельной услуги;
• сайт мероприятия;
• персональную страницу специалиста.

Способ не подходит для проектов, которым необходимы:

• интернет-магазин;
• личные кабинеты;
• онлайн-оплата;
• бронирование со сложным календарём;
• большая база данных;
• каталог из сотен товаров;
• регулярная публикация статей;
• несколько редакторов;
• сложные интеграции с CRM;
• самостоятельное редактирование страниц через административную панель.

В таких случаях лучше использовать CMS, например WordPress, или заказывать отдельную разработку.

Что получится в результате

Сайт будет состоять из следующих файлов:

index.html
style.css
script.js
img/

В папке img будут находиться логотип и изображения:

img/logo.svg
img/hero-image.webp
img/project-01.webp
img/project-02.webp
img/project-03.webp

Файл index.html отвечает за структуру и содержание страницы.

Файл style.css содержит оформление.

Файл script.js отвечает за работу интерактивных элементов и слайдеров.

Папка img содержит логотип, фотографии и иллюстрации.

Для сайта не потребуется база данных, PHP, WordPress или административная панель. После загрузки файлов на хостинг он начнёт работать.

Что понадобится

Подготовьте:

1. Учётную запись в DeepSeek.
2. Папку на компьютере для файлов сайта.
3. Сведения о своей деятельности.
4. Фотографии выполненных работ или возможность создать изображения.
5. Домен и виртуальный хостинг для публикации.
6. Обычный текстовый редактор.

Можно использовать стандартный Блокнот Windows. Удобнее работать в бесплатном редакторе Visual Studio Code или Notepad++, но устанавливать их необязательно.

Шаг 1. Получите текстовый контент для сайта

Не начинайте с запроса «сделай мне сайт». Нейросеть не знает, чем именно вы занимаетесь, кому продаёте услуги, какие работы выполняете и почему клиент должен обратиться к вам.

Сначала DeepSeek должен провести интервью.

Откройте новый диалог и отправьте следующий промпт.

Промпт для создания контента сайта

Я хочу, чтобы ты подготовил текстовый контент для моего персонального сайта, который будет представлять меня как специалиста и помогать получать обращения от клиентов.

Сначала собери обо мне всю информацию, необходимую для написания сайта. Пока не пиши тексты страниц и не создавай программный код.

Проведи подробное интервью.

Правила интервью:

1. Задавай вопросы последовательно, строго по одному.
2. После каждого моего ответа задавай следующий вопрос.
3. Учитывай все мои предыдущие ответы в рамках этого диалога.
4. Не задавай повторно вопросы, на которые я уже ответил.
5. Если мой ответ слишком общий, непонятный или противоречит предыдущим ответам, сначала задай уточняющий вопрос.
6. Формулируй вопросы простыми словами. Если вопрос может быть непонятен, приведи короткий пример.
7. Не придумывай за меня факты, опыт, образование, цены, гарантии, отзывы, преимущества, клиентов, награды и результаты работы.
8. Не подсказывай мне «красивые» ответы, которые могут оказаться неправдой.
9. Отделяй подтверждённые факты от моих пожеланий и предположений.
10. Не переходи к следующему этапу, пока не соберёшь достаточно информации.

Тебе необходимо выяснить:

- кто я и как меня представить на сайте;
- какие услуги я оказываю;
- какие работы не выполняю;
- в каком городе или регионе работаю;
- кто мои основные клиенты;
- с какими задачами они ко мне обращаются;
- какие услуги для меня наиболее важны и выгодны;
- какой у меня опыт;
- чем я действительно отличаюсь от других специалистов;
- какие преимущества можно подтвердить фактами;
- как проходит работа с клиентом;
- как рассчитывается стоимость;
- можно ли публиковать ориентировочные цены;
- какие гарантии я предоставляю;
- какие возражения и опасения обычно возникают у клиентов;
- какие примеры выполненных работ можно показать;
- есть ли реальные отзывы и разрешение на их публикацию;
- какие фотографии и документы имеются;
- какие способы связи нужно разместить;
- какое действие посетитель должен совершить на сайте;
- каким должен быть стиль общения: строгим, простым, дружелюбным или другим.

Когда интервью будет завершено:

1. Составь структурированное резюме всех полученных сведений.
2. Отдельно перечисли информацию, которой по-прежнему не хватает.
3. Отметь возможные противоречия и сомнительные формулировки.
4. Предложи предварительную структуру сайта, но пока не пиши готовые тексты.
5. Попроси меня проверить и утвердить собранную информацию.

Начни с первого вопроса.

DeepSeek начнёт задавать вопросы по одному. Отвечайте подробно, но не пытайтесь превратить каждый ответ в рекламный слоган.

Плохо:

Я предоставляю высококачественные услуги с индивидуальным подходом.

Хорошо:

Перед началом ремонта я приезжаю на объект, составляю перечень работ и отдельно указываю стоимость работы и материалов. Дополнительные расходы согласовываю до их выполнения.

Нейросети нужны конкретные факты. Из них можно собрать убедительный текст без пустых обещаний.

Не сообщайте DeepSeek:

• пароли;
• данные банковских карт;
• доступы к хостингу;
• закрытые документы клиентов;
• клиентские базы;
• паспортные данные;
• сведения, которые нельзя публиковать.

Шаг 2. Проверьте собранную информацию

После интервью DeepSeek подготовит резюме.

Внимательно проверьте:

• правильно ли указаны услуги;
• нет ли работ, которые вы не выполняете;
• верно ли записан стаж;
• правильно ли указана география;
• не появились ли придуманные гарантии;
• соответствуют ли действительности цены;
• можно ли публиковать указанные отзывы;
• правильно ли записаны телефон и почта;
• не добавила ли нейросеть несуществующие преимущества.

Исправьте неточности прямо в том же диалоге.

Например:

Исправь собранную информацию.

Я не выполняю полный ремонт под ключ. Я занимаюсь только отделочными работами.

Гарантия предоставляется на 12 месяцев, а не на два года.

Я работаю в Воронеже и в радиусе 30 километров от города.

После исправления снова покажи полное резюме. Пока не пиши текст сайта.

Переходите к следующему этапу только после того, как итоговое резюме будет соответствовать действительности.

Шаг 3. Закажите готовые тексты

После утверждения информации отправьте следующий запрос:

На основании утверждённой информации подготовь полный текстовый контент для одностраничного сайта.

Сайт должен последовательно отвечать на вопросы посетителя:

1. Кто оказывает услуги.
2. Какие задачи решает.
3. В каком городе или регионе работает.
4. Какие услуги можно заказать.
5. Почему специалисту можно доверять.
6. Как проходит работа.
7. Как рассчитывается стоимость.
8. Какие проекты уже выполнены.
9. Что говорят реальные клиенты.
10. Как связаться со специалистом.

Подготовь:

- текст для первого экрана;
- основной заголовок H1;
- короткий подзаголовок;
- тексты кнопок;
- раздел об услугах;
- раздел о специалисте;
- подтверждённые преимущества;
- этапы работы;
- раздел с ценами или правилами расчёта;
- описания выполненных проектов;
- реальные отзывы, если они были предоставлены;
- ответы на частые вопросы;
- контактный блок;
- текст для подвала;
- title страницы;
- meta description.

Правила:

1. Используй только сведения, которые я подтвердил.
2. Не придумывай факты, отзывы, проекты, цены, гарантии и результаты.
3. Не используй выражения «лучший», «номер один», «гарантированный результат» и другие недоказуемые заявления.
4. Избегай пустых формулировок «индивидуальный подход», «высокое качество» и «команда профессионалов», если они не объясняются конкретными действиями.
5. Пиши понятно для обычного клиента.
6. Не используй чрезмерно рекламный стиль.
7. Не создавай HTML и программный код.
8. После подготовки текста предложи структуру одностраничного сайта.

Выведи полный текст по разделам.

Прочитайте результат ещё раз. На этом этапе легче исправить содержание, чем после создания кода.

Шаг 4. Выберите палитру и направление дизайна

DeepSeek не видит сайт, который существует только в вашем воображении. Поэтому запрос «сделай красиво» почти бесполезен.

Нужно заранее определить:

• основные цвета;
• стиль;
• характер шрифтов;
• форму карточек;
• количество декоративных элементов;
• желаемое впечатление.

Можно попросить DeepSeek подобрать несколько вариантов.

На основании сферы деятельности, целевой аудитории и утверждённого контента предложи три варианта визуального оформления сайта.

Для каждого варианта укажи:

- краткое описание стилистики;
- основное впечатление;
- основной цвет в HEX;
- вторичный цвет в HEX;
- акцентный цвет в HEX;
- цвет основного фона в HEX;
- цвет дополнительного фона в HEX;
- цвет основного текста в HEX;
- цвет второстепенного текста в HEX;
- цвет границ в HEX;
- светлый цвет в HEX;
- тёмный цвет в HEX;
- рекомендуемую форму кнопок и карточек;
- рекомендуемое количество декоративных элементов.

Палитра должна иметь достаточную контрастность. Не используй слишком много цветов.

Пока не создавай код.

Выберите один вариант и сохраните HEX-коды. Они понадобятся в основном промпте.

Описание дизайна должно быть конкретным.

Например:

Светлый современный сайт с крупными заголовками, большим количеством свободного пространства и аккуратными карточками. Основная информация должна восприниматься спокойно и профессионально. Использовать тонкие границы, умеренное скругление и минимальные тени. Не использовать неон, стеклянные панели, яркие градиенты и сложную анимацию.

Шаг 5. Подготовьте логотип

Если логотип уже есть, сохраните его в формате SVG под именем:

logo.svg

Позже файл нужно будет положить в папку img.

Если логотипа нет, можно попросить DeepSeek создать простой текстовый SVG-логотип. Не стоит ожидать полноценной разработки фирменного стиля, но для первого сайта подойдёт аккуратный знак с названием или инициалами.

Создай простой логотип в формате SVG для моего сайта.

Данные:

Название: [НАЗВАНИЕ]
Краткое обозначение или инициалы: [ИНИЦИАЛЫ]
Сфера деятельности: [СФЕРА]
Основной цвет: [HEX]
Дополнительный цвет: [HEX]
Стиль: [КРАТКОЕ ОПИСАНИЕ]

Требования:

1. Логотип должен хорошо выглядеть в шапке сайта.
2. Используй простую геометрическую форму и текст.
3. Не используй растровые изображения.
4. Не подключай внешние шрифты и библиотеки.
5. Не добавляй мелкие детали.
6. Фон должен быть прозрачным.
7. SVG должен сохранять пропорции при изменении размера.
8. Добавь viewBox.
9. Не используй JavaScript.
10. Выведи только полный SVG-код.

Файл будет сохранён под именем logo.svg.

Скопируйте полученный код в Блокнот и сохраните файл как logo.svg.

Для более серьёзного проекта логотип лучше заказать у дизайнера. Генерация простого SVG здесь нужна только для того, чтобы не оставлять шапку сайта пустой.

Шаг 6. Закажите структуру и код сайта

Продолжайте работать в том же диалоге DeepSeek, где создавался контент. Тогда модель сможет использовать ранее утверждённые тексты.

Перед отправкой следующего промпта вставьте:

• выбранные HEX-коды;
• описание дизайна.

Промпт для создания файлов сайта

На основании созданного и утверждённого текстового контента разработай адаптивный одностраничный сайт.

Ты выступаешь как опытный frontend-разработчик. Сайт должен быть современным, аккуратным, технически корректным и готовым к размещению на обычном хостинге.

Используй утверждённый ранее контент из этого диалога. Не придумывай новые факты, услуги, цены, гарантии, отзывы, преимущества, результаты, цифры и контактные данные.

## Структура файлов

Все основные файлы находятся в корне сайта:

index.html
style.css
script.js

Все изображения и логотип находятся в папке:

img/

Логотип будет сохранён в формате SVG под именем:

img/logo.svg

Остальные изображения будут сохранены в формате WebP под именами, которые ты укажешь при создании структуры сайта.

Используй в HTML только относительные пути:

img/logo.svg
img/имя-изображения.webp

Не используй абсолютные локальные пути, изображения с внешних сайтов, случайные фотостоки, base64 и временные заглушки.

## Порядок работы

Работай строго последовательно.

### Этап 1. Структура сайта

Сначала предложи структуру одностраничного сайта на основании утверждённого контента.

Для каждого блока укажи:

- название;
- назначение;
- основное содержание;
- расположенные в нём кнопки;
- необходимые изображения;
- необходимость использования слайдера.

Обязательно предусмотрены:

- шапка с логотипом и навигацией;
- первый экран;
- основные смысловые разделы, необходимые для данного проекта;
- галерея выполненных проектов;
- отзывы;
- контактный блок;
- подвал.

Не добавляй разделы, для которых нет реального содержания.

### Этап 2. Перечень изображений

После структуры составь полный список необходимых изображений.

Для каждого изображения укажи:

- точное имя файла латиницей;
- рекомендуемое соотношение сторон;
- рекомендуемый размер;
- раздел сайта;
- что должно быть изображено;
- расположение основного объекта в кадре;
- краткий промпт для генерации изображения.

Имена файлов должны:

- состоять из строчных латинских букв, цифр и дефисов;
- быть короткими и понятными;
- быть уникальными;
- заканчиваться расширением .webp.

Примеры:

hero-image.webp
project-01.webp
project-02.webp
about-image.webp

Логотип в этот список не включай. Он уже будет находиться по адресу:

img/logo.svg

На этапах 1 и 2 не пиши HTML, CSS и JavaScript.

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

### Этап 3. Файл index.html

После моего подтверждения выведи полный код файла index.html.

После кода остановись и дождись команды:

Далее

### Этап 4. Файл style.css

После команды «Далее» выведи полный код файла style.css.

После кода остановись и снова дождись команды:

Далее

### Этап 5. Файл script.js

После следующей команды «Далее» выведи полный код файла script.js.

Не выдавай несколько файлов в одном ответе.

Не сокращай код. Не используй формулировки:

- «остальной код без изменений»;
- «продолжите самостоятельно»;
- «добавьте остальные элементы аналогично»;
- «здесь будет другой контент».

Перед созданием каждого следующего файла сверяйся с уже созданными файлами. Названия классов, идентификаторов, изображений, секций и элементов управления должны полностью совпадать.

## Подключаемые библиотеки

Используй:

- Bootstrap 5;
- Swiper;
- Google Fonts;
- шрифт Onest для основного текста;
- шрифт Prata для заголовков.

Подключи Bootstrap и Swiper через CDN.

Используй стабильные версии библиотек, совместимые друг с другом. Не подключай beta-, alpha- и экспериментальные версии.

В index.html подключи стили в следующем порядке:

1. Google Fonts.
2. Bootstrap.
3. Swiper.
4. style.css.

Файл style.css должен подключаться последним.

Перед закрывающим тегом body подключи скрипты в следующем порядке:

1. Bootstrap Bundle.
2. Swiper Bundle.
3. script.js.

Не подключай:

- jQuery;
- Font Awesome;
- Bootstrap Icons;
- Tailwind;
- дополнительные CSS-фреймворки;
- дополнительные библиотеки слайдеров;
- библиотеки анимации.

Для простых декоративных и функциональных иконок используй встроенные SVG непосредственно в HTML.

## Использование Bootstrap

Используй компоненты и вспомогательные классы Bootstrap для:

- контейнеров;
- адаптивной сетки;
- строк и колонок;
- отступов;
- кнопок;
- карточек;
- мобильной навигации;
- адаптивного расположения элементов;
- вспомогательных классов отображения и выравнивания.

Не копируй CSS Bootstrap в style.css.

Не создавай собственные классы, если требуемое оформление полностью решается стандартными классами Bootstrap.

При этом сайт не должен выглядеть как стандартный шаблон Bootstrap. Индивидуальное оформление создавай в style.css.

## Цветовая палитра

Используй следующую палитру:

Основной цвет: [ВСТАВЬТЕ HEX]
Вторичный цвет: [ВСТАВЬТЕ HEX]
Акцентный цвет: [ВСТАВЬТЕ HEX]
Основной фон: [ВСТАВЬТЕ HEX]
Дополнительный фон: [ВСТАВЬТЕ HEX]
Основной текст: [ВСТАВЬТЕ HEX]
Второстепенный текст: [ВСТАВЬТЕ HEX]
Цвет границ: [ВСТАВЬТЕ HEX]
Светлый цвет: [ВСТАВЬТЕ HEX]
Тёмный цвет: [ВСТАВЬТЕ HEX]

В начале style.css переопредели непосредственно CSS-переменные Bootstrap в селекторе :root.

Используй, где это необходимо:

--bs-primary
--bs-primary-rgb
--bs-secondary
--bs-secondary-rgb
--bs-success
--bs-success-rgb
--bs-danger
--bs-warning
--bs-info
--bs-light
--bs-light-rgb
--bs-dark
--bs-dark-rgb
--bs-body-color
--bs-body-color-rgb
--bs-body-bg
--bs-body-bg-rgb
--bs-secondary-color
--bs-secondary-bg
--bs-border-color
--bs-link-color
--bs-link-hover-color
--bs-heading-color
--bs-emphasis-color
--bs-font-sans-serif
--bs-border-radius
--bs-border-radius-sm
--bs-border-radius-lg

Не создавай параллельные пользовательские переменные для тех же цветов.

Если для переменной Bootstrap требуется значение RGB, преобразуй HEX-цвет в формат:

R, G, B

Не записывай HEX внутри переменных с окончанием -rgb.

Следи, чтобы переопределённые переменные действительно применялись к компонентам Bootstrap.

Для состояний hover, focus, active, disabled и прозрачных фонов используй оттенки и RGB-варианты указанной палитры. Не вводи дополнительные случайные цвета.

## Визуальный стиль сайта

Используй следующее описание дизайна:

[ВСТАВЬТЕ ОПИСАНИЕ ЖЕЛАЕМОГО ДИЗАЙНА]

При создании дизайна учитывай сферу деятельности, аудиторию, содержание сайта и желаемое впечатление.

Не копируй оформление какого-либо конкретного сайта.

Не добавляй визуальные решения, противоречащие указанному описанию дизайна.

## Логотип

Используй логотип:

img/logo.svg

Размести его:

- в шапке сайта;
- при необходимости в подвале.

Для логотипа используй тег img.

Добавь понятный alt, соответствующий названию специалиста, компании или проекта.

Не изменяй SVG-код логотипа и не вставляй содержимое файла непосредственно в HTML.

Не создавай текстовую имитацию логотипа, если файл img/logo.svg уже предусмотрен.

Логотип должен:

- сохранять пропорции;
- не растягиваться;
- корректно выглядеть на мобильных устройствах;
- иметь разумное ограничение ширины и высоты.

## Требования к index.html

В файле index.html:

1. Используй <!DOCTYPE html>.
2. Укажи lang="ru".
3. Добавь meta charset="UTF-8".
4. Добавь meta viewport.
5. Создай содержательные title и meta description.
6. Используй семантические элементы header, nav, main, section и footer.
7. Используй только один заголовок h1.
8. Соблюдай правильную последовательность заголовков h1, h2 и h3.
9. Добавь логотип img/logo.svg.
10. Все пункты меню должны вести к существующим секциям страницы.
11. У каждого смыслового раздела должен быть уникальный id латиницей.
12. Используй утверждённый ранее контент.
13. Не добавляй Lorem ipsum.
14. Не придумывай отсутствующие сведения.
15. Все изображения должны иметь содержательный alt.
16. Для изображений ниже первого экрана используй loading="lazy".
17. По возможности указывай width и height.
18. Для телефонных номеров используй ссылки tel:.
19. Для электронной почты используй mailto:.
20. Для мессенджеров используй предоставленные ссылки.
21. Не создавай неработающую форму обратной связи.
22. Не используй атрибут style без крайней необходимости.
23. Не размещай важный текст внутри изображений.
24. Не добавляй элементы, для которых нет реального контента.
25. Все интерактивные элементы должны быть доступны с клавиатуры.

## Галерея проектов

Создай галерею проектов на основе Swiper.

Каждый слайд проекта должен содержать:

- изображение;
- название проекта;
- краткое описание;
- при наличии подтверждённых данных тип выполненных работ или особенности проекта.

Не придумывай проекты, результаты и характеристики работ. Используй только утверждённый контент.

Для галереи проектов предусмотрены:

- отдельный экземпляр Swiper;
- кнопки перехода назад и вперёд;
- пагинация;
- управление пальцем;
- управление с клавиатуры;
- адаптивное количество слайдов;
- корректные aria-label;
- отключённый autoplay.

На мобильном устройстве показывай один слайд.

На планшете показывай два слайда, если ширина карточек это позволяет.

На широком экране показывай три слайда, если количество проектов это позволяет.

Изображения проектов должны иметь одинаковую визуальную высоту без искажения пропорций. Используй object-fit: cover.

## Слайдер отзывов

Создай отдельный слайдер отзывов на основе Swiper.

Не объединяй галерею проектов и отзывы в один экземпляр Swiper.

Каждый отзыв должен содержать только подтверждённые сведения:

- текст отзыва;
- имя или допустимое обозначение автора;
- при наличии тип выполненной работы;
- при наличии город или район.

Не придумывай отзывы.

Если реальных отзывов недостаточно, создай только имеющееся количество слайдов. Не заполняй блок вымышленными примерами.

Для слайдера отзывов предусмотрены:

- собственный контейнер;
- отдельный экземпляр Swiper;
- собственные кнопки навигации;
- собственная пагинация;
- управление пальцем;
- управление с клавиатуры;
- адаптивное отображение;
- отключённый autoplay.

Элементы управления галереей проектов и слайдером отзывов должны иметь разные классы, чтобы они не влияли друг на друга.

## Требования к адаптивности

Проверь дизайн для ширины:

- 360 пикселей;
- 576 пикселей;
- 768 пикселей;
- 1024 пикселя;
- 1440 пикселей.

На мобильных устройствах:

- не должно быть горизонтальной прокрутки;
- текст не должен выходить за границы;
- кнопки не должны обрезаться;
- меню должно корректно открываться и закрываться;
- изображения не должны искажаться;
- карточки должны переходить в одну колонку там, где это необходимо;
- интерактивные элементы должны быть удобны для нажатия пальцем;
- логотип не должен занимать чрезмерную часть экрана;
- слайдеры не должны выходить за пределы контейнера.

Не используй фиксированную ширину там, где она может вызвать выход элемента за границы экрана.

## Требования к style.css

В style.css:

1. Сначала переопредели CSS-переменные Bootstrap в :root.
2. Не создавай дублирующие пользовательские переменные цветов.
3. Раздели стили комментариями по разделам сайта.
4. Не используй !important без крайней необходимости.
5. Используй единообразные скругления и отступы.
6. Ограничь максимальную ширину длинных текстовых строк.
7. Добавь состояния :hover, :focus-visible и :active.
8. Учитывай prefers-reduced-motion.
9. Не дублируй стандартные классы Bootstrap.
10. Используй object-fit для изображений проектов.
11. Обеспечь достаточную контрастность текста и фона.
12. Не добавляй глобальные правила, способные случайно изменить все компоненты Bootstrap.
13. Добавь необходимые стили для двух независимых слайдеров.
14. Не используй универсальные классы слайдеров там, где нужны отдельные стили проектов и отзывов.

## Требования к script.js

В script.js размести только необходимый код:

- инициализацию слайдера проектов;
- инициализацию слайдера отзывов;
- закрытие мобильного меню Bootstrap после перехода к разделу;
- другие функции, которые действительно используются в HTML.

Не дублируй функциональность Bootstrap.

Для галереи проектов и отзывов создай два независимых экземпляра Swiper.

У каждого экземпляра должны быть:

- собственный селектор контейнера;
- собственные кнопки навигации;
- собственная пагинация;
- собственные настройки breakpoints.

Не используй один общий селектор для кнопок двух слайдеров.

Перед обращением к элементу проверяй, существует ли он на странице.

Не добавляй JavaScript для элементов, которых нет в index.html.

Не включай autoplay.

## Работа с контентом

Используй утверждённый ранее текстовый контент из этого диалога.

Разрешается:

- разделять длинные тексты на абзацы;
- преобразовывать перечисления в списки;
- сокращать очевидные повторы;
- создавать короткие подписи для кнопок и пунктов меню;
- распределять утверждённый контент по подходящим блокам.

Не разрешается:

- менять фактический смысл;
- придумывать новые услуги;
- придумывать цены;
- придумывать гарантии;
- придумывать стаж;
- придумывать отзывы;
- придумывать проекты;
- добавлять недоказуемые утверждения;
- использовать формулировки «лучший», «номер один», «гарантированный результат» и подобные.

Начни с этапов 1 и 2: предложи структуру страницы и полный перечень изображений.

Код пока не пиши.

Шаг 7. Утвердите структуру и список изображений

Сначала DeepSeek должен выдать:

• последовательность блоков;
• назначение каждого раздела;
• список изображений;
• размеры изображений;
• точные имена файлов;
• промпты для генерации.

Проверьте структуру.

Уберите лишние разделы и добавьте недостающие. Убедитесь, что модель не придумала проекты или отзывы, которых не существует.

Особенно важно сохранить список имён файлов. В дальнейшем изображения должны называться точно так же, как они указаны в HTML.

Например:

hero-image.webp
project-bathroom-01.webp
project-room-01.webp
project-kitchen-01.webp
about-image.webp

После утверждения напишите:

Структура и список изображений утверждены. Переходи к созданию полного файла index.html.

Шаг 8. Сохраните index.html

DeepSeek выдаст код, начинающийся строкой:

<!DOCTYPE html>

и заканчивающийся:

</html>

Скопируйте весь код.

Создайте на компьютере папку, например:

my-site

Откройте Блокнот и вставьте код.

Выберите:

Файл → Сохранить как

Укажите имя:

index.html

В поле «Тип файла» выберите:

Все файлы

Кодировка:

UTF-8

Убедитесь, что файл не сохранился под именем:

index.html.txt

В Windows можно включить отображение расширений через меню Проводника:

Вид → Показать → Расширения имён файлов

Шаг 9. Получите style.css и script.js

После сохранения index.html напишите DeepSeek:

Далее

Модель выдаст полный style.css.

Сохраните его в той же папке под именем:

style.css

Снова напишите:

Далее

Сохраните полученный JavaScript под именем:

script.js

В папке должны находиться:

my-site/
    index.html
    style.css
    script.js

Теперь создайте внутри неё папку:

img

Получится:

my-site/
    index.html
    style.css
    script.js
    img/

Шаг 10. Создайте или подготовьте изображения

Для сайта можно использовать:

• собственные фотографии;
• изображения, созданные нейросетью;
• сочетание реальных и сгенерированных изображений.

Для портфолио лучше использовать реальные работы. Не стоит выдавать сгенерированный интерьер, ремонт или изделие за собственный выполненный проект.

Сгенерированные изображения подходят для:

• первого экрана;
• декоративных блоков;
• нейтральных иллюстраций;
• изображения рабочего процесса;
• фоновых композиций.

Генерация изображений в Kandinsky

Откройте официальный сервис Kandinsky.

Kandinsky создаёт изображения по текстовому описанию и позволяет управлять сюжетом, композицией и настроением.

DeepSeek уже подготовил промпты для каждого изображения. Вставляйте их в Kandinsky по одному.

Скачайте подходящие варианты и переименуйте в соответствии со списком.

Например, если DeepSeek указал:

hero-image.webp

нельзя сохранить файл как:

красивая-картинка-1.jpg

Имя и расширение должны совпадать с путём в index.html.

Использование собственных фотографий

Выберите чёткие фотографии без сильного размытия и случайных предметов по краям.

Для галереи проектов желательно использовать изображения одинаковых пропорций. Например:

1200 × 900 пикселей

или:

1600 × 1200 пикселей

Не загружайте на сайт фотографии напрямую с современного телефона. Один такой файл может весить несколько мегабайт и заметно замедлить страницу.

Шаг 11. Переведите изображения в WebP

Если изображения сохранены в JPG, откройте бесплатный конвертер Picflow.

Порядок действий:

1. Перетащите JPG-файлы в окно.
2. Запустите конвертацию.
3. Скачайте изображения в формате WebP.
4. Проверьте имена файлов.

Picflow поддерживает пакетную конвертацию, не требует регистрации и обрабатывает изображения непосредственно в браузере.

PNG с прозрачным фоном, например обычный растровый логотип, тоже можно перевести в WebP. Но файл logo.svg конвертировать не нужно.

Шаг 12. Сожмите изображения

После конвертации откройте ImageCompressor.

Сервис поддерживает JPEG, PNG, WebP, GIF и SVG. Обработка выполняется в браузере, после чего можно сохранить оптимизированные файлы или вручную настроить качество.

Порядок действий:

1. Перетащите файлы WebP.
2. Нажмите «Сжать».
3. Сравните исходное и обработанное изображение.
4. Скачайте результат.
5. Замените исходные файлы сжатыми.

Для обычной фотографии на сайте желательно получить файл размером примерно 100–300 КБ. Для крупного изображения первого экрана допустим больший размер, если после сжатия сохраняется хорошее качество.

Не нужно добиваться минимального веса любой ценой. Если изображение покрылось квадратами, полосами и размытыми пятнами, немного увеличьте качество.

Разместите готовые файлы в папке img:

my-site/
    index.html
    style.css
    script.js
    img/
        logo.svg
        hero-image.webp
        project-01.webp
        project-02.webp
        project-03.webp

Шаг 13. Проверьте сайт на компьютере

Откройте index.html двойным щелчком.

Для загрузки Bootstrap, Swiper и Google Fonts потребуется подключение к интернету, поскольку эти библиотеки подключены через CDN.

Проверьте:

• появился ли логотип;
• загрузились ли изображения;
• работает ли меню;
• открывается ли мобильное меню;
• работают ли слайдеры проектов и отзывов;
• ведут ли кнопки к нужным разделам;
• правильно ли указан телефон;
• открываются ли мессенджеры;
• нет ли выдуманных фактов;
• читаются ли тексты;
• не выходят ли элементы за границы окна.

Уменьшите ширину браузера и посмотрите мобильную версию.

Как описывать DeepSeek необходимые исправления

Не пишите:

Сделай красивее.

Такой запрос не содержит технической задачи.

Пишите:

В первом экране слишком большой вертикальный отступ. На экране ноутбука заголовок, описание и основная кнопка должны быть видны без прокрутки.

Не пишите:

На телефоне всё сломалось.

Пишите:

При ширине окна 360 пикселей карточки услуг выходят за правую границу и появляется горизонтальная прокрутка. Расположи карточки в одну колонку и проверь внутренние отступы контейнера.

Не пишите:

Мне не нравятся карточки.

Пишите:

Убери тяжёлые тени у карточек, добавь границу цветом из переменной Bootstrap —bs-border-color и уменьши скругление.

Промпт для исправления файлов

DeepSeek не получает папку сайта автоматически. Для исправления нужно вставить содержимое соответствующих файлов в сообщение.

Нужно исправить готовый сайт.

Проблемы:

1. [ОПИШИТЕ ПЕРВУЮ ПРОБЛЕМУ]
2. [ОПИШИТЕ ВТОРУЮ ПРОБЛЕМУ]
3. [ОПИШИТЕ ТРЕТЬЮ ПРОБЛЕМУ]

Требования:

1. Не изменяй тексты, контакты, структуру и блоки, которые не относятся к указанным проблемам.
2. Не переименовывай существующие классы и идентификаторы без необходимости.
3. Сохрани совместимость index.html, style.css и script.js.
4. Проверь ширину 360, 576, 768, 1024 и 1440 пикселей.
5. Не допускай горизонтальную прокрутку.
6. Верни полный исправленный файл, а не отдельный фрагмент.
7. Не используй формулировки «остальное без изменений».

Сначала определи, какой файл необходимо изменить.

Ниже находится текущий код:

[ВСТАВЬТЕ СОДЕРЖИМОЕ НУЖНОГО ФАЙЛА]

После получения исправленного файла полностью замените им старый.

Перед заменой сделайте копию рабочей версии:

style-backup.css

или скопируйте всю папку:

my-site-backup

Шаг 14. Проведите техническую проверку

Перед публикацией можно попросить DeepSeek проверить файлы.

Проведи технический аудит готового одностраничного сайта.

Проверь:

- корректность HTML;
- семантическую структуру;
- наличие одного H1;
- последовательность H2 и H3;
- title и meta description;
- относительные пути к файлам;
- подключение style.css и script.js;
- подключение Bootstrap и Swiper;
- соответствие классов HTML, CSS и JavaScript;
- работу двух независимых слайдеров;
- доступность кнопок и ссылок;
- alt у изображений;
- lazy loading;
- мобильную адаптацию;
- вероятность горизонтальной прокрутки;
- состояния focus-visible;
- prefers-reduced-motion;
- ошибки JavaScript;
- неработающие ссылки;
- вымышленные или оставшиеся тестовые данные.

Сначала выведи список обнаруженных проблем с указанием файла и места.

Пока не переписывай код.

Файл index.html:

[ВСТАВЬТЕ КОД]

Файл style.css:

[ВСТАВЬТЕ КОД]

Файл script.js:

[ВСТАВЬТЕ КОД]

После аудита попросите исправлять файлы по одному.

Шаг 15. Выберите домен и хостинг

Чтобы сайт открывался по адресу вида:

example.ru

потребуются:

• доменное имя;
• виртуальный хостинг.

Для небольшого статического сайта достаточно самого простого тарифа. VPS или выделенный сервер не нужны.

Можно использовать:

• Beget;
• AdminVPS.

У Beget есть собственная панель управления и файловый менеджер с загрузкой файлов через браузер.

AdminVPS предоставляет виртуальный хостинг с ISPmanager и бесплатными SSL-сертификатами Let’s Encrypt.

Покупать специальный тариф для WordPress, интернет-магазина или CMS не требуется. На сайте нет базы данных и серверных скриптов.

Шаг 16. Разместите сайт на Beget

После заказа хостинга и регистрации или подключения домена:

1. Войдите в панель управления Beget.
2. Откройте раздел «Сайты».
3. Создайте новый сайт.
4. Привяжите к нему домен.
5. Откройте файловый менеджер.
6. Перейдите в папку созданного сайта.
7. Откройте каталог public_html.
8. Удалите стандартный файл-заглушку, если он там находится.
9. Загрузите:
   • index.html;
   • style.css;
   • script.js;
   • папку img.
10. Откройте домен в браузере.

При создании сайта Beget формирует отдельную директорию, внутри которой находится каталог для публичных файлов.

Итоговая структура на хостинге должна выглядеть так:

public_html/
    index.html
    style.css
    script.js
    img/
        logo.svg
        hero-image.webp
        project-01.webp
        project-02.webp

Не загружайте саму папку my-site внутрь public_html, иначе сайт может оказаться по адресу:

example.ru/my-site/

В корне public_html должен лежать непосредственно файл index.html.

Как включить HTTPS на Beget

1. Откройте раздел «Домены и поддомены».
2. Найдите нужный домен.
3. Откройте управление SSL-сертификатами.
4. Закажите бесплатный сертификат Let’s Encrypt.
5. После установки откройте сайт через https://.

В Beget сертификаты Let’s Encrypt автоматически перевыпускаются, поэтому вручную продлевать их не требуется.

Шаг 17. Разместите сайт на AdminVPS

Для этого проекта выбирайте виртуальный хостинг, а не VPS.

После активации услуги:

1. Войдите в панель ISPmanager.
2. Добавьте домен или создайте сайт для уже подключённого домена.
3. Откройте файловый менеджер.
4. Перейдите в корневую папку нужного сайта.
5. Удалите стандартный файл-заглушку, если он существует.
6. Загрузите:
   • index.html;
   • style.css;
   • script.js;
   • папку img.
7. Проверьте, что index.html находится непосредственно в корневой папке сайта.
8. Откройте домен.

Путь к корневой папке может отличаться в зависимости от конфигурации панели. Не загружайте файлы в первую попавшуюся директорию. Открывайте папку, привязанную именно к вашему домену.

Если в используемой версии панели загрузка через файловый менеджер отличается, файлы можно передать по FTP. AdminVPS предоставляет FTP-доступ на тарифах виртуального хостинга.

Как включить HTTPS на AdminVPS

1. Убедитесь, что домен уже направлен на хостинг и сайт открывается.
2. В ISPmanager найдите раздел SSL-сертификатов.
3. Создайте сертификат Let’s Encrypt.
4. Выберите нужный домен.
5. Подключите сертификат к сайту.
6. Включите перенаправление на HTTPS, если соответствующий параметр доступен.
7. Проверьте сайт по адресу https://.

Для выпуска Let’s Encrypt домен должен уже вести на сервер и открывать сайт, иначе проверка владения доменом не пройдёт.

Шаг 18. Проверьте опубликованный сайт

После размещения откройте сайт на:

• компьютере;
• телефоне;
• другом браузере;
• мобильном интернете.

Проверьте:

• открывается ли HTTPS;
• нет ли предупреждения о сертификате;
• загрузился ли логотип;
• появились ли все изображения;
• работает ли мобильное меню;
• работают ли оба слайдера;
• правильно ли набирается телефон;
• открываются ли ссылки на мессенджеры;
• правильно ли указан адрес электронной почты;
• нет ли горизонтальной прокрутки;
• не обрезаны ли кнопки;
• не слишком ли мелкий текст;
• не остались ли тестовые сведения;
• нет ли изображения, выданного за реальную работу;
• соответствует ли опубликованный текст действительности.

Что нельзя получить этим способом

DeepSeek может создать код, но не заменяет полноценную разработку во всех случаях.

У такого сайта не будет:

• административной панели;
• визуального редактора;
• базы данных;
• автоматического добавления проектов;
• защищённой обработки форм;
• системы заявок;
• встроенной аналитики;
• интернет-магазина;
• личных кабинетов.

Чтобы изменить цену, текст или изображение, придётся открыть соответствующий файл, попросить DeepSeek внести изменение и загрузить обновлённый файл на хостинг.

Почему на первом этапе лучше не добавлять форму

Обычная HTML-форма не умеет самостоятельно отправлять заявки.

Для её работы потребуется:

• серверный обработчик;
• настройка почты;
• защита от спама;
• проверка данных;
• сообщение об успешной отправке;
• политика обработки персональных данных;
• согласие пользователя.

Поэтому в первой версии лучше использовать:

• телефон;
• электронную почту;
• Telegram;
• WhatsApp;
• ссылку на сервис онлайн-записи.

Форму можно добавить позже отдельным этапом.

Можно ли использовать сайт для бизнеса

Да, если он содержит правдивую информацию и решает простую задачу: представляет специалиста и даёт возможность связаться с ним.

Для полноценного коммерческого использования дополнительно могут потребоваться:

• политика конфиденциальности;
• согласие на обработку персональных данных;
• реквизиты организации или исполнителя;
• сведения, предусмотренные законодательством вашей страны;
• уведомление об использовании cookie, если вы подключите аналитику и другие отслеживающие сервисы.

Требования зависят от страны, способа работы и состава собираемых данных.

Итог

С помощью DeepSeek действительно можно бесплатно создать работающий небольшой сайт.

Последовательность выглядит так:

1. DeepSeek проводит интервью.
2. Вы проверяете собранные сведения.
3. Нейросеть готовит текстовый контент.
4. Вы выбираете палитру и направление дизайна.
5. Создаёте или подготавливаете логотип.
6. DeepSeek формирует структуру и список изображений.
7. Нейросеть последовательно создаёт index.html, style.css и script.js.
8. Изображения генерируются в Kandinsky или берутся из собственных материалов.
9. Фотографии переводятся в WebP и сжимаются.
10. Сайт проверяется на компьютере и телефоне.
11. Файлы загружаются на Beget или AdminVPS.
12. К домену подключается бесплатный SSL-сертификат.

Это не способ получить сложный авторский проект без дизайнера и разработчика. Но это реальная возможность создать аккуратную визитку в интернете, если сайта пока нет, а бюджета на профессиональную разработку тоже нет.