Кейс проекта
PixelTool
Как папка с закладками выросла в каталог бесплатных инструментов
Технологии
- Typescript
- Next.js
- shadcn/ui
- Tailwind CSS
- Vitest
Генератор паролей, конвертер единиц, QR-код для ссылки. Такие мелочи нужны каждый день, и закладки на них быстро перестают помещаться на панели браузера. PixelTool начинался как одна страница, куда эти инструменты собирались по мере надобности. Со временем набор вырос в целый каталог.
Всё под рукой
Первые инструменты писались для внутренних нужд. Когда их набралось несколько десятков, сайт открыли для всех и ввели простое правило: каждый виджет решает одну задачу и запускается сразу, как только открыта страница.
Новые инструменты появляются по двум поводам: задача, в которую упёрлись в работе, или запрос, который всплыл в поисковой статистике.
Каталог и сами инструменты
Инструменты разложены по темам: разработка, текст, изображения и PDF, финансы, здоровье, стройка, авто и даже эзотерика. Нужный находится поиском или через категорию.
Каждый инструмент выдаёт результат сразу. QR-код перерисовывается, пока вводишь ссылку. Новый пароль появляется одной кнопкой, а рядом показана оценка, за какое время его можно подобрать перебором. Так сразу видно, чем длиннее пароль, тем он надёжнее.
Картинки сжимаются прямо в браузере, файл остаётся на компьютере пользователя. Ползунок качества и живое сравнение размера показывают, сколько килобайт удалось сэкономить.
Один реестр для всех инструментов
Стек проекта: Next.js, TypeScript, Tailwind CSS и shadcn/ui. Все инструменты описаны в едином реестре, и из него автоматически строятся каталог, категории, навигация, список страниц для поисковиков и блоки похожих инструментов. Новый виджет сам появляется во всех этих местах.
Новый инструмент собирается по готовому шаблону: скрипт создаёт заготовку страницы, и остаётся написать сам расчёт. Перед публикацией код проверяется на ошибки типов, уязвимости, доступность и скорость работы. В работе над кодом и текстами участвуют ИИ-ассистенты Claude и Codex.
Поиск
Почти весь трафик приходит из поиска, поэтому у каждого инструмента своя страница с понятным адресом и объяснением задачи. Запросы с небольшим и средним спросом собираются в группы, а показы и клики по страницам регулярно сверяются со спросом.
Блог отвечает на вопросы, которые возникают после расчёта. Например, как работает сложный процент или почему 0,1 в двоичной системе превращается в бесконечную дробь.
Итог
Из папки закладок PixelTool превратился в каталог, который пополняется без лишних усилий. Новый инструмент попадает в единый реестр, и сайт сам показывает его в каталоге, навигации и списке страниц для поисковиков. Шаблон и проверки перед публикацией позволяют выпускать страницы быстро и с одинаковым качеством.
За три месяца сайт собрал несколько тысяч посетителей, и почти все они пришли из поисковых систем. Люди находят инструмент под свою задачу по конкретному запросу, а блог отвечает на вопросы, которые появляются после расчёта.
В итоге получился сервис, где каждая страница решает одну задачу и сама находит своего читателя через поиск. Такая схема масштабируется просто: чем больше инструментов, тем шире охват запросов.
Есть похожая задача?
Расскажите о ней, и вместе найдём решение: от идеи и дизайна до запуска и поддержки.
Или сразу написать