Что получится
Получится страница, на которую можно перетащить фото. Через секунду оно превращается в картинку из символов: тёмные места собираются из плотных знаков вроде #, светлые из точек. Ползунками меняешь размер символов и контраст, кнопкой сохраняешь результат в PNG.
Это хороший первый проект. Результат видно сразу, ошибки заметны глазами, а готовую страницу не стыдно показать друзьям. На этом сайте тем же приёмом сделаны страница 404 и знак в шапке главной: символы на них реагируют на курсор.
Что понадобится
- Claude Code. Как поставить, описано в гайде как установить Claude Code на Mac.
- Две-три картинки для проверки: портрет, пейзаж и что-нибудь контрастное, например логотип.
- Вечер времени. Сам запрос выполняется за несколько минут, остальное уходит на правки.
Шаг 1. Создай папку проекта
Создай пустую папку, например ascii, и открой её в Claude Code. Агент будет складывать файлы туда и ничего не тронет за её пределами.
Шаг 2. Отправь запрос
Скопируй запрос целиком. В нём описано, что должно получиться и как агенту понять, что работа закончена.
Сделай одностраничный ASCII-генератор, который работает в браузере без сервера и без внешних библиотек. Что умеет: 1. Принимает картинку: перетаскиванием, кнопкой выбора файла или вставкой из буфера. 2. Перерисовывает её символами по яркости: тёмное плотными знаками, светлое точками и пробелами. 3. Ползунки: ширина в символах (40–200), контраст, инверсия цветов. 4. Переключатель: чёрно-белый режим или цвета исходной картинки. 5. Кнопки «Скачать PNG» и «Скопировать как текст». 6. Кнопка «Камера»: живое видео с веб-камеры прямо в символах. Рисуй на canvas, чтобы картинка обновлялась без задержек. Учти, что символ выше, чем шире, иначе картинка вытянется по вертикали. Готово, когда: открываю index.html, перетаскиваю фото, и оно узнаётся в символах; ползунки меняют результат сразу; PNG скачивается; на экране телефона страница не разъезжается. Проверь это сам в браузере и покажи скриншот.
Шаг 3. Проверь результат
Не верь сообщению «всё готово». Открой страницу и пройди по списку:
- Перетащи портрет. Лицо должно узнаваться с расстояния вытянутой руки.
- Подвигай ползунок ширины. Картинка должна перерисовываться без зависаний.
- Включи цветной режим и скачай PNG. Открой файл и проверь, что он не пустой.
- Включи камеру. Браузер спросит разрешение, после этого ты увидишь себя из символов.
- Открой страницу на телефоне или сузь окно браузера.
Что-то не так? Опиши агенту, что видишь, одним предложением: «лицо вытянуто по вертикали» или «на телефоне ползунки уезжают вправо». Короткая правка работает лучше, чем новый запрос с нуля.
Шаг 4. Добавь стили
Когда основа работает, добавь разные виды текстуры. Это делается одним запросом:
Добавь переключатель стилей: 1. Классика: символы по яркости, как сейчас. 2. Брайль: точки шрифта Брайля, четыре на две точки в клетке, для мелких деталей. 3. Точки: круги разного размера, как в печати газеты. 4. Дизеринг: однобитный шум, только чёрное и белое, как на старом экране. 5. Монитор: зелёные символы на чёрном, полосы развёртки и лёгкое свечение. У каждого стиля должно быть превью на моей картинке, чтобы выбирать глазами. Проверь все пять стилей на портрете и покажи скриншоты.
Мой совет. Добавляй по одной функции за запрос и после каждой проверяй страницу. Если сломается, сразу понятно, что именно сломалось, и агенту проще откатить.
Шаг 5. Выложи в интернет
Генератор состоит из одного файла и работает без сервера, поэтому его можно бесплатно выложить на Vercel. Пошагово это описано в гайде как выложить сайт на Vercel из GitHub. Чтобы не потерять рабочую версию между правками, сохраняй проект в Git: как это сделать без знания команд.
Частые проблемы
| Что видишь | Что делать |
|---|---|
| Картинка вытянута по вертикали | Попроси учесть пропорции символа: ширина клетки примерно 0,6 от высоты |
| Всё серое, ничего не узнаётся | Попроси добавить контраст и растянуть яркость на весь диапазон перед переводом в символы |
| Страница тормозит на больших фото | Попроси уменьшать картинку до нужного числа символов до обработки |
| Камера не включается | Попроси агента запустить страницу через локальный сервер: часть браузеров не даёт камеру странице, открытой как файл |
| В PNG пустой кадр | Попроси дождаться отрисовки и только потом сохранять файл |
Частые вопросы
Нужно ли уметь программировать?
Нет. Достаточно описать, что должно получиться, и проверить результат. Код пишет агент.
Можно ли сделать то же в обычном чате Claude?
Да, в чате получится живое превью страницы. Но чтобы сохранить файлы, включить камеру и выложить проект, удобнее Claude Code: он работает с папкой на твоём компьютере.
Мои фото куда-то загружаются?
Нет, если в запросе сказано «без сервера». Вся обработка идёт в браузере, картинка не покидает компьютер.
Можно ли сделать из этого видео для соцсетей?
Да. Попроси агента записать результат с камеры или видеофайла в MP4. Как получать видеофайлы из кода, описано в гайде про моушн-ролики по готовому запросу.