Соберите ретро-лендинг в стиле 80-х с помощью ИИ за 7 минут
Готовая HTML/CSS-страница с неоновой палитрой, пиксельным шрифтом и CRT-эффектом - прямо в браузере, без установки программ
- 1.Откройте Claude.ai, войдите в аккаунт (бесплатная регистрация по email). Если сервис недоступен в вашем регионе, используйте любой альтернативный чат-бот с генерацией кода - подойдёт ChatGPT или Gemini.
Бесплатный тариф Claude даёт доступ к базовой модели; этого достаточно для генерации HTML/CSS.
Claude ↗Об инструменте - 2.Создайте новый чат и вставьте промпт ниже. Замените [TEMA] на тему вашей страницы (например, «портфолио фотографа», «лендинг для кофейни», «анонс подкаста»), а [ZAGOLOVOK] - на главный заголовок страницы.
Чем конкретнее описание темы и контента, тем меньше придётся править вручную.
Claude ↗Об инструментеПромптCreate a single-page retro website in 1980s arcade style. Theme: [TEMA]. Main headline: [ZAGOLOVOK]. Include: hero section with neon headline, about section, and a footer with contact info. Style requirements: background #0A0A0F, neon orange accent #FE9901, acid turquoise accent #00F0FF, warm white text. Use 'Press Start 2P' from Google Fonts for headlines, monospace for body text. Add CRT scanline effect using CSS, pixelated button styles with inset shadow, and ASCII-style borders around sections. Output as a single self-contained HTML file with inline CSS. Include the Google Fonts link. The page must be fully responsive.
Что делает этот промптПромпт на английском - так Claude точнее понимает стилевые требования. [TEMA] замените на тему страницы (например, «personal blog about retro games»), [ZAGOLOVOK] - на ваш главный заголовок. Остальные параметры (палитра, шрифты, эффекты) трогать не нужно. - 3.Дождитесь генерации кода (обычно 30 - 60 секунд). Скопируйте весь блок HTML - нажмите кнопку Copy в правом верхнем углу блока с кодом.
Если код разбит на несколько блоков, копируйте их по очереди в один файл.
Claude ↗Об инструменте - 4.Откройте любой текстовый редактор (Блокнот на Windows, TextEdit на Mac в режиме «Plain Text»). Вставьте код. Сохраните файл как retro.html - важно расширение .html, не .txt.
В Блокноте при сохранении выберите «Все файлы» в поле «Тип файла», иначе сохранится как .txt.
- 5.Дважды кликните на сохранённый файл retro.html - он откроется в браузере. Вы увидите ретро-страницу с неоновыми акцентами, CRT-эффектом и пиксельным шрифтом.
Файл работает офлайн, кроме шрифта Press Start 2P - он грузится с Google Fonts (нужен интернет при первом открытии).
- 6.Если нужно что-то поправить - вернитесь в чат с Claude и напишите: «Change the background to dark purple and add a pixel-art star animation in the hero section». Claude выдаст обновлённый код. Замените содержимое retro.html и сохраните заново.
Вносите правки по одной за раз - так результат предсказуемее.
Claude ↗Об инструменте
💰 Сколько это стоитцены на 2026-11
- бесплатноClaude FreeБесплатный тариф даёт ограниченное число сообщений в день - для генерации и 1 - 2 правок HTML/CSS этого достаточно.
Попробуй и отметься первым
Почему сегодня
1
роликов у блогеров за 48 ч
9,5 тыс.
суммарных просмотров
cossa.ruweb
Рецепт недели на почту
ИИ-сервисы быстро меняются - интерфейсы и бесплатные лимиты могут отличаться от описанных.