Визуально проверьте и исправьте HTML и Markdown, которые сгенерировал AI
Откройте готовый код в бесплатном визуальном редакторе, увидите результат глазами пользователя и отредактируйте без программирования
- 1.Откройте ChatGPT или Claude и сгенерируйте HTML-код с помощью промпта. Скопируйте результат.
Если сервис недоступен в вашем регионе, используйте VPN или локальную модель через Ollama.
ChatGPT ↗Об инструментеПромптGenerate a responsive HTML email template for [occasion: e.g., welcome email, newsletter, sale announcement]. Include inline CSS, a header with logo placeholder, a body content section with [main message], and a footer with unsubscribe link. Make it mobile-friendly with max-width 600px.
Что делает этот промптПромпт на английском просит AI создать HTML-шаблон письма. Замените [occasion] на тип письма (например, welcome email), а [main message] на ваш текст. AI вернёт готовый HTML-код с встроенными стилями. - 2.Откройте CodePen - бесплатный онлайн-редактор HTML с живым предпросмотром. Нажмите кнопку 'Pen' в левом верхнем углу.
Регистрация не обязательна для просмотра, но нужна для сохранения. Бесплатный тариф позволяет создавать неограниченное количество пенов.
CodePen ↗ - 3.Вставьте сгенерированный HTML-код в панель HTML (левая колонка). Если код содержит CSS, перенесите его в панель CSS (средняя колонка). Превью появится автоматически в правой колонке.
Если в HTML уже есть inline-стили, весь код можно вставить в HTML-панель - CSS-панель не нужна.
CodePen ↗ - 4.Проверьте результат визуально: как выглядит шапка, текст, кнопки. Переключите режим просмотра на мобильный, нажав кнопку изменения размера в верхней панели превью.
Обращайте внимание на читаемость текста, отступы и выравнивание элементов.
CodePen ↗ - 5.Если нужно внести правки, отредактируйте код в левой панели. Изменения сразу отобразятся в превью. Для Markdown-документов используйте StackEdit (stackedit.io) - вставьте текст в левую панель и проверьте результат в правой.
StackEdit поддерживает предпросмотр в реальном времени и экспорт в HTML, PDF и другие форматы.
StackEdit ↗ - 6.Когда результат вас устраивает, скопируйте финальный код из редактора и используйте его в своём проекте. Для HTML нажмите кнопку 'Copy' в правом верхнем углу HTML-панели в CodePen.
Сохраните пен в CodePen, если хотите вернуться к нему позже - для этого нужна бесплатная регистрация.
CodePen ↗
- бесплатноChatGPT FreeБесплатный тариф даёт доступ к GPT-4o mini с ограничением на количество сообщений в час.
- бесплатноCodePen FreeБесплатный тариф позволяет создавать неограниченное количество проектов с живым предпросмотром, без необходимости регистрации для просмотра.
- бесплатноStackEditПолностью бесплатный онлайн-редактор Markdown с предпросмотром в реальном времени и экспортом в разные форматы.
ИИ-сервисы быстро меняются - интерфейсы и бесплатные лимиты могут отличаться от описанных.