24 часа вайбкодинга: промпт, скиллы и ссылки из видео

Скиллы
ui-ux-pro-max: паттерны интерфейса и UX - https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
shadcn и Astryx: готовые компоненты и mcp - https://ui.shadcn.com/ \ https://astryx.atmeta.com/

Сервисы из видео

Парсер 2ГИС: https://github.com/Eroloft/parser-2gis-new

API для AI-чата, Clodex: https://clodex.xyz/sign-up?aff=eaUf

Виртуальная карта для оплаты Claude, Zarub: https://t.me/zarub_robot?start=ref_9EU8CH

Claude: https://claude.com/

Supabase: https://supabase.com/

Figma: https://www.figma.com/


примеры аутричей

Вариант 1. Отец не смог записаться (лучший конверт)

"Здравствуйте! Отец на днях хотел записаться к вам на [полировку], но не нашёл, где это сделать онлайн, а звонить не стал. Вместе с ним выбирали в (город). В итоге записались в другое место.

Я как раз делаю такие штуки, поэтому собрал вам онлайн-запись с вашим названием, прайсом и фотками работ: [ссылка]
Домен пока временный, поэтому сайт так странно называется) Если понравится, перенесу на нормальный.

Открывается как приложение: заходите по ссылке с телефона, в меню браузера жмёте «Добавить на главный экран», и рядом с остальными приложениями появляется ваша иконка. Запускается на весь экран без строки браузера, при этом ни вам, ни клиентам ничего скачивать не надо.

Клиент сам выбирает услугу и время, запись сразу падает вам в кабинет, а слот на это время закрывается. Цены и фото меняете сами.

Гляньте, как будет минутка, и скажите, как вам.

Вариант 2. С записью все плохо

Здравствуйте! Зашёл к вам в группу / канал и в 2ГИС / ян карты, а записаться можно только по телефону [или: кнопка записи в группе никуда не ведёт]. Пока мастер занят, трубку брать некому, и человек звонит следующему сервису

Давайте это поправим. Я уже собрал вам онлайн-запись под ваш сервис, с вашим прайсом и фото: [ссылка]
Адрес сайта пока временный, если зайдёт, перенесу на ваш.

Работает как приложение. Добавляете ссылку на главный экран телефона, и она открывается на весь экран, как обычное приложение, только скачивать ничего не нужно. Клиент выбирает услугу и свободное окно, а если лень тыкать, пишет в чат «хочу мойку завтра после шести», и ассистент сам подберёт время. Все записи падают вам в личный кабинет.

Закрепите ссылку в описании группы, и люди будут записываться сами, даже пока заняты. Глянете?

Вариант 3.
Здравствуйте! Без долгих вступлений: я сделал для [название] онлайн-запись, уже с вашим прайсом, фото и контактами. Посмотрите: [ссылка]
Домен пока временный, это тестовая версия.

По сути это приложение. Добавляете ссылку на главный экран, появляется иконка, и запись открывается на весь экран без браузера. Клиент выбирает услугу и время, запись сразу падает вам в кабинет. Цены, фото и выходные дни меняете сами, без меня.

Стоит 3 500 ₽, и платите, только если понравится. Неделю после оплаты бесплатно правлю всё, что скажете)

Потыкайте и напишите, что думаете. Если не зайдёт, тоже скажите почему, мне это полезно. Цвета, услуги, тексты, всё настраивается под вас. Промпт:

Промпт работает в паре с планом реализации, который я собрал из карты в Фигме. План целиком: https://www.figma.com/board/5UEW0nLwlT8WBGLYBAadbK/MVP-%D0%90%D0%B2%D1%82%D0%BE%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81-%D0%BE%D1%82-SGX?t=rcr5sf3YFYYfh9PS-1

Скопировать промпт
Ты реализуешь PWA онлайн-записи для автосервисов и детейлинг-студий по приложенному IMPLEMENTATION-PLAN.md. Прочитай весь документ до начала работы. Цель — законченный работающий продукт, который можно переодеть под следующий бизнес через один business.json и изображения, сохранив работу всех ранее опубликованных студий.

Создай приложение, миграции Supabase, Edge Functions, скрипты конвейера и документацию. Не останавливайся на макете интерфейса. Не называй моковые ответы интеграцией. Не генерируй весь проект одним гигантским файлом.

Сначала проверь существующие файлы и AGENTS.md, сохрани текущие изменения. Реализуй этапы 1–8 из плана последовательно; после каждого этапа запускай соответствующую проверку. Не проси уточнять обычные технические решения, уже определённые в плане. Если нет внешних credentials, выполни всё доступное локально, подготовь .env.example и укажи конкретно, какие интеграционные проверки остаются невыполненными.

Стек: React 19, TypeScript strict, Vite, React Router, TanStack Query, Zod, shadcn/ui + Astryx, Supabase Postgres/Auth/Storage/Edge Functions, vite-plugin-pwa injectManifest. Frontend статический, готовый к Cloudflare Pages. Отдельный Node backend не нужен.

Подключи Astryx командами из плана. Прочитай инструкции, добавленные init, и документацию реально установленной версии. Запускай component <Name> перед использованием неизвестных props. Используй поставляемый Astryx CSS и документированный Theme provider. Проверь единые токены и CSS layers с shadcn. Используй одну выбранную ветку shadcn Drawer; не смешивай Base UI и старые Vaul props. Зафиксируй зависимости lockfile.

Дизайн: тёмное мобильное приложение, спокойные плотные экраны, один акцент из конфигурации, выразительные фото, короткий путь записи, нижняя навигация, последовательная bottom sheet. Учти safe area, клавиатуру, Back, focus management, reduced motion. Кабинет должен быть удобен на телефоне. У каждой кнопки реальное действие, у каждого сетевого экрана состояния loading/error/empty/success.

Архитектурные инварианты:

1. Один общий JS/CSS-билд, один Supabase-проект, tenant_id во всех зависимых данных; /s/{slug}/ и /s/{slug}/owner/. Новая студия не заменяет предыдущую. 2. business.json и изображения — вход конвейера; БД — runtime-источник. Скрипты tenant:new, tenant:validate, tenant:publish, tenant:verify должны реально работать и быть описаны в package.json. 3. Услуга занимает конкретный подходящий ресурс на непрерывный диапазон, включая несколько дней и буфер. Рабочие часы задают моменты приёма. Проверяй исключения, timezone и границы дат. 4. Бронирование и блокировка поста используют одну resource_occupancies с PostgreSQL EXCLUDE. Создание/перенос/отмена — атомарные SQL-транзакции. Клиент не задаёт цену, tenant и длительность. Повторные запросы идемпотентны; неудачный перенос не теряет исходную бронь. 5. Клиент записывается без регистрации. Доступ к одной записи по криптографическому токену, в БД только hash; предусмотрена повторная выдача того же доступа при retry. Владелец входит через Supabase Auth, его tenant подтверждается членством на сервере. Не делать публичный owner signup. 6. RLS, составные tenant FK и строгие GRANT; anon не видит персональные данные, платежи и токены. Service-role и LLM API key остаются серверными. Приватный кэш очищается при logout и не попадает в service worker. 7. AI через настраиваемые LLM_BASE_URL/LLM_API_KEY/LLM_MODEL. До ответа про записи выполнить разрешённый серверный инструмент и передать результат модели. SQL и tenant_id модель не выбирает. Клиентские и owner tools разделены проверкой полномочий. Реализуй ограниченный tool loop и JSON-intent fallback, тестируй выбранный роутер отдельно. 8. Статистику считает SQL. Разделяй заезды, выполненные заказы и полученные платежи; не называй будущую стоимость выручкой. Период и timezone одинаковы в UI и AI. 9. У каждого tenant свои HTML-метаданные, manifest id/start_url/scope, icon, maskable icon, apple-touch-icon, startup assets. Общие исходники, отдельные worker scopes и имена кэшей. Глубокие ссылки отдают оболочку правильной студии. Проверить standalone на реальных устройствах при их доступности. 10. Web Push через VAPID, Supabase Cron и outbox notification_jobs с lease, дедупликацией и обработкой переноса/отмены. ICS — дополнительный канал с честным состоянием в интерфейсе. Не обещай push обычной вкладке iPhone без установки. 11. Preview содержит только помеченные demo-данные и не шлёт реальные уведомления. Live активируется после проверки бизнес-настроек. Переиздание конфига сохраняет записи и фотографии, загруженные владельцем. 12. Ограничь публичные запросы и бюджет LLM общими атомарными счётчиками в БД. При недоступном AI обычная запись работает.

Первый демо-бизнес GRAPHITE Detailing возьми из плана. Создай второй явно отличающийся demo-tenant для проверки изоляции и переодевания. Демо-данные в seed, бизнес-названия не должны появляться в src.

Напиши необходимые SQL/integration-тесты: конкурентная запись, два ресурса, многодневная занятость, блокировка, перенос, идемпотентность, RLS/tenant isolation, историческая цена, платежи, AI scopes, outbox. Добавь один Playwright flow от выбора услуги до подтверждения и появления записи у владельца. Не ограничивай проверки скриншотом или успешным build.

Финальные результаты: рабочее приложение; SQL migrations и seed; Edge Functions; конвейер; .env.example без секретов; SETUP.md с локальным запуском, Supabase secrets/cron и публикацией; CLONE-IN-6-MINUTES.md; ACCEPTANCE.md с фактически выполненными проверками и оставшимися внешними зависимостями.

Если обнаружишь несовместимость актуальных версий, исправь реализацию по официальной документации, сохрани смысл требований и кратко запиши принятое решение. Не выдумывай успешную доставку push, вызов LLM или deployment без соответствующей проверки. Скиллы
ui-ux-pro-max: паттерны интерфейса и UX - https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
shadcn и Astryx: готовые компоненты и mcp - https://ui.shadcn.com/ \ https://astryx.atmeta.com/

Сервисы из видео

Парсер 2ГИС: https://github.com/Eroloft/parser-2gis-new

API для AI-чата, Clodex: https://clodex.xyz/sign-up?aff=eaUf

Виртуальная карта для оплаты Claude, Zarub: https://t.me/zarub_robot?start=ref_9EU8CH

Claude: https://claude.com/

Supabase: https://supabase.com/

Figma: https://www.figma.com/