00:00:00Привет! Сегодняшнее видео о Paper. Paper — это, по сути, Figma, но для Claude Code или
00:00:05Cursor. Здесь вы видите пример. У нас запущен десктопный Paper, и при этом вы можете
00:00:10управлять всем через Claude Code — это как раз то, что вы сейчас видите на экране. И
00:00:14это очень удобно, потому что можно легко конвертировать компоненты
00:00:19в код и обратно. Вы видите, что такие компании, как Vercel, Z, Dub, уже используют его. То есть
00:00:24многие крутые продукты на нем работают. Вот так выглядит приложение при запуске.
00:00:28Это демо-проект, который вы получите в первый раз. Вы сможете
00:00:31скачать приложение по адресу paper.design/downloads, а следующим шагом
00:00:35вам нужно будет установить MCP-сервер. Если вы хотите установить его в
00:00:40Cursor, просто нажмите эту кнопку — я это уже сделал, но сейчас мы
00:00:43попробуем его в Claude Code. Скопируем это. Это
00:00:47добавит MCP-сервер Paper в пользовательскую область (scope user), то есть
00:00:53любой проект на компьютере получит к нему доступ. Обычно при добавлении
00:00:57MCP-сервера доступ ограничен проектом, а здесь транспорт локальный. Это
00:01:01позволит подключиться к десктопному приложению Paper. Итак, я установлю
00:01:06его здесь, и теперь, когда всё готово, откроем Claude. Я открыл
00:01:11четыре окна здесь, в Cmux. По сути, это Ghosty, работающий в стиле
00:01:17Tmux, где у нас четыре разных окна, так что мы проведем
00:01:19несколько разных демо. Я подумал, почему бы не использовать несколько окон сразу. Далее
00:01:22мы скопируем этот промпт в терминал. Мы собираемся
00:01:28создать приложение для учета расходов в Paper. Посмотрим, как это выглядит. Вы видите,
00:01:33что получится нечто подобное, но скоро мы увидим реальный результат. Тем временем
00:01:36я запущу еще несколько задач. «Создай для меня демо-лендинг в
00:01:40Paper и сделай так, чтобы он меня поразил». Посмотрим, справится ли он. «Создай для меня
00:01:44дашборд для финансового приложения». Сделаем это. И «создай
00:01:48дизайн-систему для соцсети вроде Twitter». Я запущу
00:01:53всё это параллельно. На самом деле я не знаю, каков будет результат,
00:01:56так что посмотрим. Здесь вы видите предыдущий запуск,
00:02:00который всё еще идет. У нас есть бриф дизайна, палитра. Это Claude Code обдумывает
00:02:04детали, добавляя их в приветственное приложение Paper, но давайте перейдем
00:02:08в самый низ. Окей, готово. Посмотрим, как это выглядит. Уменьшим масштаб
00:02:13и поищем результат. О, мы видим, что наши другие приложения
00:02:17уже в процессе сборки, а вот и наше приложение для ввода расходов — очень
00:02:22круто. Дизайн выглядит весьма солидно, и, кстати, когда я запускал это раньше,
00:02:25приложение получилось немного другим. Здесь видно, что остальные процессы
00:02:30тоже идут параллельно. Самое классное в Paper —
00:02:34это то, что это практически Figma. Всё, к чему вы привыкли в Figma,
00:02:39выглядит здесь очень похоже. Здесь я могу менять детали и
00:02:43даже вернуться назад, чтобы внести правки. Уберем секцию загрузки и поставим туда что-то другое.
00:02:53Посмотрим, что получится, пока все остальные процессы всё еще
00:02:56идут в фоновом режиме. Если мы вернемся сюда, надеюсь, секция загрузки
00:03:00будет удалена. Наш лендинг выглядит вполне достойно. «Проектируйте
00:03:04с намерением, создавайте без границ». Кстати, здесь мы видим, как
00:03:09собираются другие компоненты. Дизайн-система выглядит очень круто и профессионально.
00:03:12Кажется, дизайнеру пришлось бы заплатить тысячи долларов за такой же
00:03:16результат. Очень здорово, и, конечно, всё можно полностью редактировать,
00:03:20как в Figma. Вот так в итоге выглядит лендинг, и
00:03:24через секунду мы перенесем это в React с использованием Tailwind. А вот
00:03:28дашборд, и другая задача тоже завершена. Здесь видна разделенная ширина —
00:03:33она была скорректирована. В итоге у вас есть профессионально выглядящие
00:03:36дизайны, которые мы просто создали с помощью промптов. Для всего этого мы можем
00:03:42использовать экосистему навыков, которую Claude Code или Cursor уже
00:03:46предоставляют нам. Например, мы могли бы использовать навык фронтенд-дизайна,
00:03:50чтобы спроектировать всё это. Теперь я попрошу создать HTML-страницу с этим дизайном
00:03:54в браузере — посмотрим, как это сработает. Возвращаясь к Paper, покажу
00:03:58еще кое-что. Вот у меня есть компонент, и что я могу сделать, так это
00:04:03выбрать «копировать как Tailwind» или «копировать как React CSS». Обычно я просто копирую
00:04:08и вставляю, но, думаю, через секунду мы увидим, что
00:04:13Claude Code сам может загрузить это для нас, и мы сможем открыть это в браузере. И
00:04:17вау, посмотрите, он это сделал! Это действительно потрясающе.
00:04:20Вот кнопка... это просто здорово, честно. Если мы пойдем и
00:04:24проверим код страницы, посмотрим, что получилось. Как видите, здесь
00:04:29используются просто HTML и CSS, но мы могли бы заставить его сделать это на
00:04:35React и Tailwind. Вы можете собирать вещи так же, как в Figma, это
00:04:40абсолютно то же самое. Здесь на боковой панели можно менять параметры,
00:04:44менять цвет — это, по сути, та же Figma. Но я также
00:04:48собрал этот компонент, потому что хотел посмотреть, как он будет выглядеть,
00:04:51если просто вставить его в обычное приложение. И вот — он сделал
00:04:55ровно то, что я просил. А вот что именно
00:05:00было скопировано и вставлено — это фоновый компонент. Я покажу
00:05:05еще раз: выбираю «копировать как Tailwind», иду
00:05:10в Cursor и просто вставляю. Вот что получилось. Теперь я
00:05:14отменю часть изменений. Это компонент, который я
00:05:20вставлял ранее для приложения учета расходов: верхняя панель, сумма и
00:05:26так далее. По сути, это React и Tailwind для того же самого,
00:05:29что мы только что делали. А вот реальный React-код в нашем приложении — это
00:05:34другой вариант. Это я делал по промпту 20 минут назад. Так что это
00:05:40первая версия, а это другая — на чистом HTML и CSS. И
00:05:44обе получились отлично. Мне интересно посмотреть, как выйдут другие приложения,
00:05:49если прогнать их через Claude Code. Я запрашиваю HTML-версию всех экранов,
00:05:53которые мы только что спроектировали. Также я нажал
00:05:58правой кнопкой «копировать как React CSS», перешел в Cursor, вставил — и это реальное приложение.
00:06:04Оно запущено на localhost:3001, это часть Inbox Zero — просто демо-страница,
00:06:09которую я добавил. Работает идеально, что очень
00:06:13приятно. С первого раза оно не совсем адаптивное, но в остальном
00:06:18выглядит солидно. Да, над адаптивностью надо поработать, но сама концепция
00:06:22очень крутая. А вот HTML-версия, которая только что
00:06:26загрузилась по нашему промпту. Она чуть более адаптивная, хотя здесь
00:06:33начинаются проблемы, но это всё же лучше, чем в другой версии.
00:06:36В общем, круто. Теперь я хочу показать, что здесь также можно
00:06:41генерировать изображения. Если нажать Command+I, попробуем,
00:06:46мы попросим его создать изображение для нас. Я написал промпт:
00:06:50«Создай красивую рекламу для Inbox Zero, ИИ-помощника для почты, который помогает
00:06:54быстро очистить входящие». Как видите, здесь есть разные модели, можно выбрать
00:06:59Nano Banana Pro. Для начала сделаем «набор ассорти», если получится,
00:07:05и да, он начал создавать четыре изображения. Я хочу
00:07:10попробовать еще раз, интересно, что выдаст Nano Banana Pro.
00:07:14Нажимаем «создать изображение». Создается еще одно, и надеюсь,
00:07:19скоро они появятся. О, вот пошла реклама... и да, выглядит
00:07:25неплохо. Очевидно, нужно доработать, но для первой попытки
00:07:29это довольно круто. Посмотрите на это: «Inbox Zero»... знаете, есть дизайнеры,
00:07:35которые делают хуже. Из этих четырех мне больше всего нравится вот это.
00:07:39Но, опять же, это с первой попытки — над этим можно еще долго
00:07:43итерировать. Посмотрим, что выдаст Nano Banana Pro — это может
00:07:47быть самым впечатляющим. «Ваш быстрый путь к спокойствию, ИИ-помощник». По-моему,
00:07:51это очень солидно для одного промпта. Неплохая графика. Также
00:07:55интересно, знает ли он логотип? ИИ подхватил реальный
00:08:00логотип Inbox Zero или это просто совпадение, что текст похож на наш лого?
00:08:04Прежде чем закончить, покажу еще две вещи. Если я нажму на
00:08:09это изображение и нажму «S», можно применить разные эффекты. Вот,
00:08:13эффект воды на изображении. Нажму «S» еще раз — эффект «жидкий металл». Я
00:08:18не совсем уверен, как это работает и связано ли это вообще с нашим изображением,
00:08:21но можно создавать такие крутые эффекты и
00:08:24использовать их на лендинге. Вот еще одна версия того же изображения.
00:08:27И еще один важный момент: цвета здесь должны быть
00:08:33последовательными и точными. В Paper первый в мире унифицированный выбор цвета,
00:08:37который упрощает работу. Если кто не знает: бывает так, что один цвет
00:08:41в Figma выглядит иначе на сайте — они не совпадают на 100%. Это
00:08:45очень раздражает. У нас так было с синим цветом на сайте: Figma
00:08:48показывала одно, сайт — другое, хотя hex-коды были
00:08:52идентичными. Так что если вы
00:08:56сталкивались с такой же проблемой, эта фича будет очень полезна.
00:08:59И самое последнее: «Создай дизайн-систему в
00:09:04Paper на основе нашей текущей кодовой базы». Видите, он начал
00:09:08анализировать код — это обычный Claude Code. Он подтянул наши
00:09:12шрифты. Но тут возникла заминка: похоже, мы достигли недельного лимита
00:09:17инструмента MCP для Paper Pro в этом видео, так что мы не увидим
00:09:20конечный результат. Но вкратце: мы могли бы загрузить
00:09:23существующий код, увидеть его в Paper, отредактировать там
00:09:28и вернуть обновленный код в проект. Это очень крутая
00:09:32функция. Она бы нам очень пригодилась, когда мы
00:09:35делаем демо-компоненты. Например, когда нужно сделать скриншот для лендинга,
00:09:39обычно проще просто снять экран. Но часто хочется
00:09:43немного подправить текст на странице или скрыть реальные email-адреса.
00:09:47В Figma или Paper это делать гораздо проще: можно просто печатать и
00:09:50редактировать что угодно. И это будет не просто скриншот — его можно
00:09:55экспортировать как реальное изображение: PNG, JPEG или любое другое. Вот то
00:09:58Twitter-приложение, которое мы собирали — тоже очень классный дизайн.
00:10:03В общем, надеюсь, вам понравилось видео. Извините за
00:10:07сумбурность — мы запускали много процессов параллельно. Именно так
00:10:10я сейчас кодирую большую часть времени, и, возможно, это
00:10:14немного отразилось на видео. Надеюсь, было полезно. Дайте знать,
00:10:17что вы решите собрать в Paper. Думаю, это очень полезный инструмент. Возможно,
00:10:20скоро я и сам перейду на Pro-версию. И не забудьте
00:10:24подписаться на канал!