Промпт для HTML/CSS/JS

Промпт

Напиши небольшой интерфейс без фреймворка.

Задача: [поведение]. Файлы: [один HTML или три файла].
Размеры экранов: [ширины]. Доступность: [клавиатура и подписи].

Дай весь код выбранных файлов. Используй семантические элементы, адаптивную ширину и безопасное обновление текста через textContent.

Как пользоваться

1. Подготовьте задача, файлы, размеры экранов, доступность.
2. Назовите минимальную ширину экрана HTML-интерфейса числом.
3. Откройте счётчик на 320 px, увеличьте шрифт и проверьте три нажатия кнопки.
4. Исправь счётчик HTML CSS JS только для узкого экрана и Enter; обновлять число через textContent, без фреймворков.

Для каких нейросетей

Справочные данные для HTML/CSS/JS: GPT, Claude, Gemini, Gemini, DeepSeek.

Пример результата

Готовый один файл index.html со счётчиком:

<!doctype html>
<html lang="ru">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Счётчик</title>
<style>
body { max-width: 40rem; margin: auto; padding: 1rem; }
button { font: inherit; padding: .6rem; }
</style>
<h1>Счётчик</h1>
<p aria-live="polite" id="count">0</p>
<button type="button" id="add">Добавить</button>
<script>
let value = 0;
document.querySelector("#add").addEventListener("click", () => {
  document.querySelector("#count").textContent = String(++value);
});
</script>
</html>

Проверка: три клика дают 3; Enter на кнопке увеличивает число; на ширине 320 px нет горизонтальной прокрутки.

Как улучшить результат

• Назовите минимальную ширину экрана HTML-интерфейса числом.
• Выберите один файл или отдельные HTML, CSS и JS заранее.
• Используйте кнопку для действия и текстовое обновление счётчика.
• Проверьте увеличение текста и управление Enter без мыши.

Варианты промпта

Узкая задача

Напиши тот же счётчик в трёх файлах: index.html, styles.css, app.js. Без сборщика и внешних зависимостей.

Корректировка: HTML/CSS/JS

Исправь счётчик HTML CSS JS только для узкого экрана и Enter; обновлять число через textContent, без фреймворков.

Частые ошибки

• Кликабельный div не работает для клавиатурного пользователя.
• Размер контейнера фиксирован и создаёт горизонтальный скролл.
• Пользовательский текст вставляют через innerHTML без необходимости.

Вопросы и ответы