← Рецепты дняРабота✓ Проверено 28 авг. 2026 г.

Создайте рабочее веб-приложение по одному промпту с Claude Code и Fable

Опишите идею одним предложением - получите готовый код и интерактивный гайд по шагам разработки за 10 минут.

  1. 1.Установите Node.js (LTS-версию) с официального сайта, если он ещё не установлен. Проверьте установку командой node -v в терминале - должна появиться версия.

    Если сервис недоступен в вашем регионе напрямую, используйте VPN на этапе скачивания.

    Node.js ↗
  2. 2.Установите Claude Code глобально через npm. Откройте терминал и выполните команду установки, затем пройдите авторизацию по инструкции в консоли.

    Claude Code бесплатен для подписчиков Claude Pro и Max. Без подписки понадобится тарифный план - см. пункт о стоимости.

    Claude Code ↗Об инструменте
    Промпт
    npm install -g @anthropic-ai/claude-code
    Что делает этот промптКоманда устанавливает CLI-инструмент Claude Code глобально. Ничего заменять не нужно - выполните как есть в терминале.
  3. 3.Создайте пустую папку для проекта, перейдите в неё в терминале и запустите Claude Code командой claude. При первом запуске следуйте инструкциям на экране для привязки аккаунта Anthropic.

    Если сервис недоступен в вашем регионе, понадобится VPN для авторизации.

    Claude Code ↗Об инструменте
    Промпт
    mkdir my-app && cd my-app && claude
    Что делает этот промптСоздаёт папку my-app, заходит в неё и запускает интерактивную сессию Claude Code. Имя папки можно заменить на любое.
  4. 4.Вставьте в сессию Claude Code следующий промпт. Он создаст структуру проекта, логику и файлы за один шаг.

    Claude Code сам создаст файлы в текущей папке. Не нужно вручную копировать код.

    Claude Code ↗Об инструменте
    Промпт
    Build a single-page web app called "[APP_NAME]" that does the following: [DESCRIBE_WHAT_IT_DOES]. Use vanilla HTML, CSS and JavaScript in one index.html file. Make the UI clean and responsive. Include a heading "[APP_NAME]", an input form, and a results area. Add basic input validation.
    Что делает этот промптПромпт на английском просит Claude Code создать одностраничное веб-приложение. Замените [APP_NAME] на название вашего приложения (например, Task Tracker), а [DESCRIBE_WHAT_IT_DOES] - описание того, что приложение делает (например, lets a user add tasks, mark them done and delete them). Остальной текст оставьте как есть - Claude создаст файл index.html в текущей папке.
  5. 5.Откройте сайт Fable, нажмите Get Started и авторизуйтесь через Google или email. Бесплатный тариф позволяет создавать публичные гайды.

    Не вводите персональные или платёжные данные в сторонние сервисы без необходимости. Fable используется для записи экрана.

    Fable ↗
  6. 6.Запустите запись экрана в Fable, откройте файл index.html в браузере (двойным кликом), продемонстрируйте работу приложения - введите данные, покажите результат. Остановите запись и опубликуйте гайд, скопировав ссылку.

    Перед записью закройте вкладки с личной информацией - они могут попасть в кадр.

    Fable ↗
💰 Сколько это стоитцены на 2026-08
  • бесплатноNode.jsПолностью бесплатен для скачивания и использования.
  • подпискаClaude CodeТребует подписку Claude Pro ($20/мес) или Max ($100/мес); без подписки можно использовать по API с оплатой за токены. Бесплатного тарифа нет.
  • бесплатноFableБесплатный тариф позволяет создавать публичные интерактивные гайды; есть платные тарифы для команд.
Попробуй и отметься первым

Почему сегодня

2
роликов у блогеров за 48 ч
2
каналов-источников
6,2 тыс.
суммарных просмотров
Nate Herk | AI AutomationyoutubeКанал в каталоге
Борис опятьtelegramКанал в каталоге
Anthropic Docsweb
Fableweb
Anthropic Pricingweb

ИИ-сервисы быстро меняются - интерфейсы и бесплатные лимиты могут отличаться от описанных.