Картинки и публикация
Интерактивный гайд — выбери что хочешь сделать и получи пошаговую инструкцию
Что ты хочешь сделать?
Выбери — и получишь точную пошаговую инструкцию для своей задачи.
Как будешь передавать файл?
От этого зависит как лучше вставить картинки — встроить прямо в код или хранить на внешнем хостинге.
Способ А — base64
Картинка станет частью HTML-файла. Работает везде без интернета. Подходит для одной-двух иконок или логотипа.
Ограничение: Файл становится тяжёлым. Если планируешь позже публиковать на Tilda — она не примет код больше ~500 КБ. Для нескольких фото лучше использовать внешние ссылки.
Прикрепи картинку к сообщению в Claude
Нажми на скрепку (📎) в поле ввода → выбери файл с компьютера. Можно перетащить прямо в чат.
Напиши промпт Claude
После прикрепления картинки напиши в том же сообщении:
Проверь в предпросмотре
Нажми кнопку предпросмотра артефакта — картинка должна отображаться сразу, без загрузки из интернета.
Скачай и отправь файл
Нажми кнопку скачивания (⬇️) в правом верхнем углу артефакта → сохрани как название.html → отправь в Telegram или на почту.
Где хочешь опубликовать?
Сначала добавим картинки через внешние ссылки — файл останется лёгким. Потом опубликуем.
Порядок важен: Сначала загружаем картинки на хостинг и вставляем ссылки в артефакт. Только потом публикуем. Так файл не превысит лимиты платформ.
Картинки через Drive, публикация на Tilda
Полный маршрут: загружаем картинки на Google Drive → вставляем в артефакт → публикуем на Tilda.
Открой Google Drive
Перейди на drive.google.com и войди в аккаунт Google (тот же что для Gmail).
Создай новый репозиторий
Нажми «+» в правом верхнем углу → «New repository» → название латиницей без пробелов (например my-landing) → выбери Public → «Create repository».
Загрузи HTML-файл
На странице репозитория нажми «uploading an existing file» → перетащи файл → назови его index.html → «Commit changes» (дважды).
index.html — именно так!Включи GitHub Pages
Вкладка «Settings» → левое меню «Pages» → Source: «Deploy from a branch» → Branch: main, папка: / (root) → «Save».
Подожди 1–2 минуты и получи ссылку
Обнови страницу Settings → Pages. Появится зелёный блок со ссылкой: https://ваш-ник.github.io/my-landing.
Картинки через Drive, публикация на GitHub
Полный маршрут: загружаем картинки на Google Drive → вставляем в артефакт → публикуем на GitHub Pages бесплатно.
Открой Google Drive
Перейди на drive.google.com и войди в аккаунт Google.
Загрузи картинку и открой доступ
Нажми «+ Создать» → «Загрузить файл». После загрузки — правой кнопкой на файл → «Открыть доступ» → «Все у кого есть ссылка» → роль «Читатель» → «Готово».
Преобразуй ссылку
/d/ и /view. Вставь вместо XXXXXXXXXX.Попроси Claude вставить картинку
Бесплатно навсегда. Без подписок. Ссылка: ваш-ник.github.io/название. Первый раз ~10 минут, второй — 2 минуты.
Скачай артефакт из Claude
Нажми кнопку скачивания (⬇️) в правом верхнем углу артефакта.
Создай аккаунт на GitHub (если нет)
Открой github.com → «Sign up» → введи email, пароль, имя пользователя → подтверди email.
Создай новый репозиторий
Нажми «+» в правом верхнем углу → «New repository» → название латиницей без пробелов (например my-landing) → выбери Public → «Create repository».
Загрузи HTML-файл
На странице репозитория нажми «uploading an existing file» → перетащи файл → назови его index.html → «Commit changes» (дважды).
index.html — именно так!Включи GitHub Pages
Вкладка «Settings» → левое меню «Pages» → Source: «Deploy from a branch» → Branch: main, папка: / (root) → «Save».
Подожди 1–2 минуты и получи ссылку
Обнови страницу Settings → Pages. Появится зелёный блок со ссылкой: https://ваш-ник.github.io/my-landing.
Как хочешь поделиться?
Выбери — и получишь пошаговую инструкцию.
Скачать и отправить
Самый быстрый способ. Никакой регистрации. Идеально когда нужно показать одному человеку прямо сейчас.
Скачай артефакт из Claude
В окне артефакта нажми кнопку скачивания (⬇️) в правом верхнем углу панели.
Сохрани с понятным именем
Файл сохранится с расширением .html. Дай имя без пробелов, например landing-page.html.
Отправь получателю
Отправь файл в Telegram, на почту или через любой мессенджер. Получатель открывает его в браузере — всё работает.
Опубликовать на Tilda
Пошаговая инструкция. Лимит HTML-блока — ~500 КБ. Если артефакт с картинками base64 — сначала переведи их на внешние ссылки.
Картинки через base64? Если Claude встраивал картинки прямо в код, файл может превышать лимит. Вернись и переведи их на внешние ссылки →
Скачай артефакт из Claude
Нажми кнопку скачивания (⬇️) в правом верхнем углу артефакта. Сохранится как .html-файл.
Создай новую страницу в Tilda
Войди в tilda.cc → «Создать сайт» → дай название → «Создать страницу».
Создай новый репозиторий
Нажми «+» в правом верхнем углу → «New repository» → придумай название латиницей без пробелов (например my-landing) → выбери Public → «Create repository».
Загрузи HTML-файл
На странице репозитория нажми «uploading an existing file» → перетащи файл → назови его index.html → «Commit changes» (два раза).
index.html — именно так, без изменений!Включи GitHub Pages
Вкладка «Settings» → левое меню «Pages» → Source: «Deploy from a branch» → Branch: main, папка: / (root) → «Save».
Подожди 1–2 минуты и получи ссылку
Обнови страницу Settings → Pages. Появится зелёный блок со ссылкой: https://ваш-ник.github.io/my-landing.
- Файл называется именно
index.html, без скобок и других символов - Репозиторий создан как Public, а не Private
- В Pages выбрана ветка
main - Подождал ещё — иногда занимает до 5 минут
Опубликовать на GitHub Pages
Бесплатно навсегда. Без подписок. Ссылка: ваш-ник.github.io/название. Первый раз ~10 минут.
Бесплатно и навсегда. Единственное условие — репозиторий должен быть публичным (любой может увидеть код страницы).
Скачай артефакт из Claude
Нажми кнопку скачивания (⬇️) в правом верхнем углу панели артефакта.
Создай аккаунт на GitHub (если нет)
Открой github.com → «Sign up» → введи email, пароль, имя пользователя → подтверди email.
Создай новый репозиторий
Нажми «+» в правом верхнем углу → «New repository» → придумай название латиницей без пробелов (например my-landing) → выбери Public → «Create repository».
Загрузи HTML-файл
На странице репозитория нажми «uploading an existing file» → перетащи файл → назови его index.html → «Commit changes» (два раза).
index.html — именно так, без изменений!Включи GitHub Pages
Вкладка «Settings» → левое меню «Pages» → Source: «Deploy from a branch» → Branch: main, папка: / (root) → «Save».
Подожди 1–2 минуты и получи ссылку
Обнови страницу Settings → Pages. Появится зелёный блок со ссылкой: https://ваш-ник.github.io/my-landing.
- Файл называется именно
index.html, без скобок и других символов - Репозиторий создан как Public, а не Private
- В Pages выбрана ветка
main - Подождал ещё — иногда занимает до 5 минут
Промпты для подравнивания
Используй эти готовые промпты чтобы отрегулировать вид картинки в артефакте.
Сделать круглой
Выровнять по центру
Ограничить ширину
Фон для секции
Чеклист после публикации
Всегда проверяй с разных устройств — одна страница может вести себя по-разному на компьютере и телефоне.
- Страница открывается по ссылке без ошибок
- Все картинки загружаются
- Все кнопки кликабельны и ведут куда нужно
- Скролл плавный, ничего не залипает
- Текст нигде не обрезается и не наезжает на элементы
- Текст читаем без горизонтального скролла
- Кнопки достаточно большие чтобы нажать пальцем
- Блоки не обрезаются по краям экрана
- Картинки не выходят за экран
- Шрифт не меньше 14px — удобно читать
| Проблема | Промпт для Claude |
|---|---|
| Блок обрезается на телефоне | «На телефоне [блок] обрезается справа — исправь отступы и добавь overflow:hidden» |
| Кнопки слишком мелкие | «Увеличь все кнопки — мин. высота 44px, padding не меньше 12px» |
| Картинки выходят за экран | «Добавь всем картинкам max-width:100% и height:auto» |
| Текст слишком мелкий | «Увеличь базовый шрифт до 16px, заголовки пропорционально» |
| Скролл залипает | «Убери overflow:hidden с основного контейнера» |
| Форма не помещается | «Сделай форму адаптивной — на телефоне поля на всю ширину» |
Ты это сделал!
Картинки добавлены, страница опубликована — это реально работающий навык. Пользуйся в любых проектах, ты теперь умеешь!