Предыстория

Увидел пост от @ales_kuznetsova о том, как она сделала для вечеринки друзей собственные Dobble карточки в Figma. Dobble — одна из моих любимых настолок, провёл за ней много вечеров с друзьями и семьёй.

Я посмотрел на этот подход с Figma... Ну, довольно кропотливая работа, скажем так.
Захотелось проверить, а какие есть еще варианты, если я хочу свой набор карт?

Что я нашёл из существующих решений

• Решение от дизайнера — Figma файл, что использовала Александра
  

  

• Решение от программиста — например, вот такой проект на GitHub
  

  

• Веб-инструменты — попробовал несколько из выдачи первых 2х страниц гугла, но они просто не работали 😐
  

  

• Доббль под ключ — готовые наборы типо тех, что можно найти на Etsy: бумажная версия ~80€, digital ~5-50€. У каких-то предложений "custom" имеется ввиду, что ты можешь выбрать набор, а где-то отправляешь фотки и тебе PDF в ответ пришлют. Такие подороже:
  

  

Мне показалось, что в наши дни сделать себе кастомную игру не должно быть так сложно и дорого. И я за несколько дней собрал Dobble Maker.

Это не первый навайбкоженный мною тул. Я периодически трогаю разработку (на работе только фронт, а в миру – все подряд) параллельно с продакт менеджментом, потому что так быстрее и жизнь обретает смысл и новые краски.

Так что я уже немного набил руку, и ± понимаю, как сделать то, что я хочу + чтобы это получалось более или менее надежно (спасибо фидбэку от коллег-профессионалов).

Также я помню, что мне был очень полезен пост @musapa о том, как они сделали за полдня приложение.

То, что там по шагам работа описана, было удобно. Я попробую сделать примерно такой же формат рассказа о моем проекте ниже.

Как делал

1. PRD (Product Requirements Document)

Сначала я накидал мысли в Obsidian файлик, чтобы версии идей сохранились если что. Я использую WhisperTyping для диктовки по кнопке. Не знаю, что там с безопасностью, смотрите сами. Для чувствительных вещей не использую.

В этом файле я обозначил идею и задаю цель — создать PRD для приложения, такой то стек и тп. Потом закинул в Opus 4.5. Попросил задать мне доп. вопросы. В Claude Code нравится UI ответов на такие вопросы.

Note: для серьезных задач (особенно проекты с нуля или большие фичи) мне нравится потом PRD засунуть в Spec Kit. Но тут, это оверкил был бы, думаю.

Обычно PRD включает в себя:

• UX flows — пользовательские пути
• UI screens — как будут выглядеть экраны
• Модель данных
• OpenAPI спецификацию (здесь тоже особо не пригодилось)

Всё это отсмотрел, подправил и на основании выбранного PRD попросил модель:

• расписать детальный план имплементации по фазам,
• указать для каждой фазы список ручных тестов, которые я должен провести и как оно должно работать,
• сделать отдельный файл с overview и чек-листом, который я потом буду просить модель обновлять каждый раз, чтобы не засовывалось лишнего в контекст,
• lint / build прошу указать последними шагами имплеметации фазы
• создать agents.md / claude.md под проект. Там также прошу мне задать вопросы, типо, "а это вам важно для этого проекта" / "а тут как хотите? (вот как это повлияет)".

2. Lovable → свой репозиторий

Взял PRD и по очереди файлы из разбивки по Phases и закинул в Lovable — там сделал версию с приятным дизайном, проверил, поправил.

Note: Lovable хорошо по моему опыту подходит для customer-facing проектов. Если делаю что-то внутреннее, то обычно иду сразу в Claude Code.

Потом экспортировал к себе в репозиторий и дальше работал в основном в Claude Code. Иногда что-то делаю в Cursor — там удобно, что можно закинуть скриншоты от туда, где логов нет.

Note: Иногда перехожу в Codex или через aistudio Gemini 3, когда ищу сложные баги (в этом проекте таких не было пока)

3. Технический стек

Ориентир был на скорость разработки и экономию на поддержании проекта.

• Frontend: Vite + React + TypeScript + Tailwind + shadcn/ui.
• Backend: Supabase (Postgres + Auth Email + Google + Storage + пара edge functions для платёжки).
• Платежи: Polar.sh. Пробую в первый раз, хз, как будет работать. Пишите, если захотите рефанд, протестим!
• Деплой: Vercel
• Email: письма шлю через Resend.com, потому что у Supabase ограничение всего 4 письма в день, я надеюсь, что все таки в такой лимит упрусь :). У Resend 3000 в месяц free tier.
• Background removal: U‑2‑Net в браузере через @huggingface/transformers (≈176 MB, скачивается при первом использовании и кешируется)

Для удаления фона на скорую руку выбрал U‑2‑Net: это старая, 2020 года, модель сегментации слоев. Она тяжёлая (176мб), инференс происходит локально в браузере пользователя, без отдельного бэкенд-сервера.

Ее можно использовать в коммерческих проектах, в отличии от, например, RMBG-1.4 или вот быстрой imgly, что вы встретите во многих бесплатных онлайн bg removal тулах вроде этого.

Может потом найду вариант лучше.

Результат

Собственно, DobbleMaker.com

Что есть сейчас:

1. Можно загрузить свои картинки и/или использовать готовые пресеты с иконками
2. Удаление фона на одном изображении или на всех сразу (но это долго :) )
3. Зум / вращение изображений, смена позиций на карточке вручную или auto-shuffle
4. Вписывание изображения в круг (в основном для случаев, когда фон удалять не хочется или не получается)
5. Добавление изображения на оборотную сторону карточки (рубашку) — свое, небольшой редактор или пресеты.
6. Просмотр получившегося набора карточек
7. Экспорт в PDF для печати дома или в SVG для профессиональной печати

Ценообразование

ну вы поняли глубокий маркетинговый ход))

Идеи на будущее

AI-генерация символов
Люди могут хотеть загружать не полный набор из 57 символов, а скажем 10 своих фотографий, а остальное заполнить чем-то. Сейчас это делается через пресеты с иконками. Но это фикс наборы, а я лично хотел бы кастомных символов нагенерить (какашек, например). В общем, думаю добавить генерацию — технически ± понятно, как это сделать.

Печать карточек
Пока не очень понятен спрос. Планирую сделать форму request — "хочу получить напечатанный набор". С первыми желающими буду связываться индивидуально.
Если вам хочется готовый физический набор — напишите мне, пожалуйста.

Вообщем, для DIY/ Craft поделок на Amazon есть разные круглые вырезалки — подороже за ~90$ и подешевле за ~10$.
Если найти принтер и ламинатор, всё реально сделать самостоятельно.

Так же есть вот такие коробочки разных размеров металлические.

Обратная связь

Буду рад, если кто-то попробует и поделится фидбеком. Наверняка найдёте какие-то проблемы.

Для vas3k клуба — промокод vas3k на скидку 25% на любой из платных наборов (31, 55 или 57 карт).