00:00:00Paper, пожалуй, один из самых актуальных инструментов проектирования для AI-native дизайнеров,
00:00:05ориентированных на рабочие процессы с использованием ИИ-агентов.
00:00:06Он позволяет создавать дизайн на холсте и переносить его в код,
00:00:11а также выполнять обратное действие.
00:00:13Так что это полноценный двусторонний рабочий процесс.
00:00:15Я покажу вам, как им пользоваться и как его установить.
00:00:17Кроме того, это часть моей 30-дневной серии по AI-native дизайну,
00:00:22в рамках которой вам предлагается взять вот этот макет,
00:00:25над которым мы работали в прошлый раз,
00:00:27и с помощью Paper интегрировать и доработать этот раздел дизайна.
00:00:32Прежде чем мы перейдем к заданию и условиям участия,
00:00:36позвольте мне показать, как на самом деле установить Paper.
00:00:38Зайдите на сайт paper.design в раздел документации (Docs).
00:00:41Первым делом скачайте десктопное приложение Paper, хорошо?
00:00:46Это простое и быстрое приложение.
00:00:48Далее — чем вы пользуетесь? Cursor?
00:00:50Используете Claude Code?
00:00:51Или Codex, Copilot или что-то еще?
00:00:54Я лично использую Claude Code.
00:00:55Его очень легко установить.
00:00:57Просто возьмите эту строку после запуска Claude
00:01:00в вашем терминале,
00:01:03вставьте её, и установка начнется.
00:01:05Вы поймете, что все работает, если введете команду /mcp —
00:01:10и увидите там Paper.
00:01:13Там же виден Pencil, который мы разберем в ближайшем будущем.
00:01:17Итак, вот само приложение Paper.
00:01:19Оно должно быть открыто.
00:01:21Затем вы запускаете Cursor или Claude Code
00:01:24с подключенным MCP.
00:01:26Какой следующий шаг?
00:01:27Paper можно использовать несколькими способами.
00:01:31Можно начать проект прямо здесь, используя инструмент Frame (фрейм)
00:01:35и создавая свою структуру.
00:01:37Здесь интерфейс довольно привычный.
00:01:39Если вы знакомы с Auto Layout в Figma,
00:01:41то поймете, как строить макеты с нуля вручную, если захотите.
00:01:46Но мы пойдем другим путем.
00:01:48Мы попросим Claude или любой другой инструмент —
00:01:52неважно, используете ли вы Cursor или что-то еще —
00:01:53мы попросим его использовать MCP-сервер Paper,
00:01:58чтобы спроектировать макет за нас.
00:02:00Затем мы улучшим этот дизайн,
00:02:02внесем визуальные правки здесь, в Paper,
00:02:05и перенесем его обратно в код.
00:02:06Теперь нам нужно попросить его создать макет
00:02:09для какой-нибудь вымышленной компании.
00:02:10Но перед этим я хочу провести небольшой эксперимент на coolers.co.
00:02:14Этот сервис существует целую вечность.
00:02:16Если нажать «Start the Generator» (Запустить генератор)
00:02:18и нажимать пробел,
00:02:20можно подбирать разные темы,
00:02:22точнее, приложение само их предлагает.
00:02:24А затем вы можете сами настроить цвета, если захотите.
00:02:28Я просто пощелкаю еще немного...
00:02:31О, вот это выглядит интересно.
00:02:32Светлая цветовая схема.
00:02:33Довольно красочно и так далее.
00:02:36Я просто сделаю скриншот.
00:02:39Внизу указаны коды цветов,
00:02:41которые мы вставим в Claude Code в качестве контекста.
00:02:46И попросим его использовать именно эти цвета для макета,
00:02:51который он создаст для вымышленного бизнеса.
00:02:53В качестве промпта я воспользуюсь навыком «front-end design» в Claude Code.
00:02:59Обычно это дает лучшие результаты.
00:03:01Но если не давать конкретики,
00:03:04результат получится очень шаблонным.
00:03:08Посмотрим, что он создаст,
00:03:10а затем доработаем этот дизайн в Paper.
00:03:12Первым делом ввожу команду /front-end-design,
00:03:15как вы видите.
00:03:17Кажется, в Claude Code это встроено по умолчанию,
00:03:19но если нет, в описании будет ссылка на видео,
00:03:22где показано, как интегрировать этот навык.
00:03:25Итак, /front-end-design.
00:03:28Теперь я пропишу промпт.
00:03:29Вот короткий запрос:
00:03:32«Используй MCP-сервер Paper».
00:03:34Очень важно это указать.
00:03:36«Спроектируй современный SaaS-интерфейс для вымышленной компании,
00:03:39«которая использует ИИ для контроля качества в производстве товаров».
00:03:43Звучит скучновато.
00:03:43«Дизайн должен быть для десктопа, содержать навигационную панель и первый экран (hero section)».
00:03:47И всё.
00:03:47«Я хочу, чтобы ты использовал цветовую схему».
00:03:49«Hex-значения указаны внизу каждого цвета на приложенном скриншоте»,
00:03:53вот здесь.
00:03:54Не обязательно использовать все цвета.
00:03:56Просто обеспечь правильный контраст и приятный внешний вид.
00:03:59На этом всё.
00:04:00Нажимаю Enter,
00:04:02и мы увидим процесс обращения к MCP-серверу Paper,
00:04:07и сможем наблюдать за происходящим в Paper в реальном времени.
00:04:11К сожалению, на Windows 11 конкретно на моем компьютере есть проблема,
00:04:15из-за которой экран вот так мерцает.
00:04:16Я уже связался с основателем,
00:04:18сообщил ему об этом; скорее всего, вы с этим не столкнетесь.
00:04:21Окей, вот что он выдал.
00:04:23На мой взгляд, довольно посредственно,
00:04:25сразу видно,
00:04:27что это в основном сгенерировано ИИ.
00:04:30Поэтому мы воспользуемся Paper, чтобы визуально подправить дизайн,
00:04:34а затем перенесем изменения обратно.
00:04:36Что я сделаю в первую очередь?
00:04:37Немного увеличу это.
00:04:39Оставим здесь немного свободного пространства.
00:04:42Следующий шаг... так,
00:04:45вам нужно привыкнуть к работе со слоями вот здесь.
00:04:48В этой части видны слои,
00:04:51и мы видим hero-секцию с двумя колонками внутри: левой и правой.
00:04:56Мне это не нужно.
00:04:57Я хочу сделать область вот такого типа,
00:05:01которая представляет собой просто центральную колонку,
00:05:05и мы добавим под нее интересный фон.
00:05:08Но сначала — выделим это,
00:05:11выровняем весь текст по центру
00:05:15и увеличим ширину блока.
00:05:17Сверху видно, что ширина (width) установлена в значение auto.
00:05:20Мы можем задать фиксированную ширину,
00:05:23можем выбрать «fill container» (заполнить контейнер)
00:05:25или «fit content» (по размеру содержимого).
00:05:26Fit content — это то же самое.
00:05:28Выбираем Fill container.
00:05:29Так он заполнит все доступное пространство здесь,
00:05:33а затем я возьму вот это...
00:05:36и здесь,
00:05:38мы видим, что это уже настроено как flexbox-контейнер с отступом (gap) 32 между элементами.
00:05:44Если мы начнем это менять,
00:05:46вы увидите, как всё разлетается.
00:05:48Я хочу убедиться, что всё центрировано в этом пространстве.
00:05:53Пока что не всё работает идеально,
00:05:55потому что нужно внести другие коррективы.
00:05:57Если элементы ведут себя не так, как ожидалось, просто проверяйте дальше.
00:06:01Например, эта область.
00:06:04Давайте ее отцентрируем.
00:06:06Опять же, я просто нажимаю на кнопки выравнивания.
00:06:08Это текст, так что центрируем текст.
00:06:10Окей, движемся в правильном направлении.
00:06:12Тут тоже всё отцентрируем.
00:06:15И это тоже.
00:06:18Отлично. Я могу кликнуть правой кнопкой и выбрать «Frame Selection» (Обернуть во фрейм).
00:06:21О, сработало автоматически.
00:06:24Вам просто нужно экспериментировать со всеми возможностями макета.
00:06:30Точно так же, как в Figma.
00:06:31Нужно понимать, как работать со структурой,
00:06:35потому что этот холст пытается быть представлением реального браузера.
00:06:40Перемещать объекты бывает непросто,
00:06:43если не до конца понимаешь, как они взаимодействуют.
00:06:44Так что просто уделите этому время.
00:06:46Затем я сделаю скриншот этого,
00:06:49чтобы внедрить цвета так, как мне кажется правильным.
00:06:55Заметьте: ИИ взял некоторые цвета, но не все.
00:06:58Не то чтобы это было обязательно.
00:07:00Но я хочу показать сам процесс внесения дополнительных правок здесь.
00:07:05Допустим, мы хотим задать шапке определенный фоновый цвет.
00:07:10Я выберу заливку (fill) вот здесь,
00:07:13и использую самый верхний цвет.
00:07:15Это FC6471.
00:07:19Выглядит ужасно, потому что текст теперь не читается, верно?
00:07:23Зайду в настройки цветов выделения (selection colors).
00:07:27Сделаем этот цвет белым.
00:07:28И черный тоже заменим на белый.
00:07:31Может быть, выберем этот элемент через CTRL + клик левой кнопкой,
00:07:35и сделаем его жирным.
00:07:37Окей, «Spectral AI».
00:07:39Сделаю эту черную часть белой.
00:07:43А вот градиент мне совсем не нравится.
00:07:45Да, здесь, конечно, есть поддержка градиентов.
00:07:48Может, сделаю его светлым.
00:07:51Это какой-то типовой странный логотип, но ничего страшного.
00:07:56Меня он не особо беспокоит.
00:07:57Подвинем это.
00:08:00Так, и напоследок: контраст здесь просто ужасный.
00:08:04Давайте сделаем это белым.
00:08:11Этот элемент пусть будет черным, а текст тоже сделаем светлым.
00:08:20Как видите, вносить изменения очень быстро и просто.
00:08:23Теперь допустим, мы хотим добавить на фон что-то крутое,
00:08:29например, какой-нибудь эффект шейдера.
00:08:30Кликаем сюда, и видим раздел Shaders (шейдеры).
00:08:34Это одна из действительно крутых фишек этого инструмента —
00:08:38возможность создавать очень интересные, уникальные шейдеры.
00:08:42Например, вот этот — «Smoke Ring» (кольцо дыма).
00:08:45Давайте попробуем его.
00:08:46Я кликаю по нему.
00:08:47При этом он добавится как еще один элемент в DOM,
00:08:51то есть в объектную модель документа.
00:08:53Это уже термины из фронтенд-разработки,
00:08:57о которых вы могли не слышать раньше.
00:09:00Тут как раз помогает технический бэкграунд.
00:09:05Нам нужно установить позиционирование «absolute» (абсолютное).
00:09:09Это выводит элемент из стандартной блочной модели.
00:09:11Мы можем двигать его куда угодно, но будьте осторожны:
00:09:14если навести на определенные объекты, он может вложиться внутрь них.
00:09:20Мы же хотим разместить его так, чтобы он заполнял всю hero-секцию.
00:09:23Для этого здесь сверху выставим позицию X на ноль,
00:09:28и позицию Y тоже на ноль.
00:09:31Затем ширину (width) и высоту (height) ставим на 100%.
00:09:35Теперь он перекрыл всё остальное, верно?
00:09:39К сожалению, почему-то я не вижу здесь настройки Z-index.
00:09:42Z-index — это свойство CSS для абсолютно позиционированных элементов,
00:09:47где вы управляете стеком, последовательностью элементов.
00:09:50Не потоком, а именно порядком.
00:09:52Этот слой должен находиться под всем остальным.
00:09:54И, к сожалению, я не вижу здесь такой опции,
00:09:57но мы сможем это исправить позже, когда импортируем проект в Claude Code и вернемся к коду браузера, к HTML и CSS.
00:10:04Там мы внесем правку.
00:10:05Но пока что мы можем видеть содержимое, если подкрутим параметры прямо здесь.
00:10:10У всех шейдеров есть индивидуальные параметры, которые меняются вот в этой панели.
00:10:15Например, можно изменить скорость и прочие вещи.
00:10:18Как видите, сейчас у нас стоит заливка (fill) черным цветом.
00:10:21Если мы просто выставим её на 0%... ага, вот теперь мы видим то, что сзади.
00:10:26Правда, передний план почти не разглядеть.
00:10:28Что ж, для переднего плана (foreground) давайте возьмем этот цвет и выберем наше дымчатое кольцо.
00:10:36Мы заменим цвет заливки на этот...
00:10:39Ой, нет, точнее, цвет переднего плана на этот.
00:10:43Ох, ладно, это все равно выглядит нелепо, да?
00:10:46Давайте поменяем другие элементы.
00:10:50Тут у нас есть масштаб, есть толщина.
00:10:54О, это интересно.
00:10:56Есть радиус.
00:10:58Как видите, играть с этим невероятно весело.
00:11:03Так уже выглядит довольно круто.
00:11:04Я еще немного поэкспериментирую.
00:11:07Да, так мне нравится.
00:11:09Давайте, однако, попробуем другой шейдер.
00:11:11Здорово, что если выставить прозрачность любого из этих значений на 0%,
00:11:18мы начинаем видеть, что происходит за ними.
00:11:19Конечно, я не хочу, чтобы в браузере это осталось итоговым решением.
00:11:23Поэтому мы используем свойство z-index, когда сможем это поправить,
00:11:27потому что здесь я пока не нашел, где его настроить.
00:11:30Хорошо, я остановлюсь на этом варианте,
00:11:32и мы посмотрим на результат, когда решим проблему с z-index.
00:11:35Думаю, мы просто возьмем вот этот шейдер.
00:11:39Итак, мы выбираем его, чтобы перенести все это,
00:11:43ну, в Cursor или Claude Code, или куда угодно.
00:11:46И возвращаемся в терминал.
00:11:48Я скажу следующее: «Используй MCP-сервер Paper,
00:11:50чтобы перевести выбранный дизайн из Paper в рабочий ванильный HTML,
00:11:53CSS и JavaScript в файле index.html».
00:11:56Убедись, что все перенесено идеально.
00:11:58Я приложил скриншот настроек шейдера, чтобы всё получилось точно.
00:12:01Это важный момент, потому что я общался с основателем,
00:12:04и сейчас система передает не всю необходимую информацию,
00:12:08по крайней мере, в моих первых тестах с шейдерами.
00:12:11Теперь нажимаем Enter и смотрим, что получится.
00:12:14Готово.
00:12:15Вот оно.
00:12:16Смотрите.
00:12:17Это не стопроцентно точная копия, особенно в том,
00:12:22что касается шейдера на фоне.
00:12:24Мой вариант выглядит немного иначе.
00:12:28Такие более крупные, плавные линии.
00:12:31И в таком случае вам нужно просто сделать скриншот.
00:12:34Убедитесь, что вы заскринили настройки градиента,
00:12:36сетчатого градиента или того, что вы использовали,
00:12:38и попробуйте улучшить результат итерациями.
00:12:42Я верю, что скоро это исправят,
00:12:44когда они полноценно интегрируют шейдеры и то,
00:12:47как MCP обрабатывает перевод этой информации.
00:12:51А теперь я хочу, чтобы вы перешли на сайт designcourse.com.
00:12:56Ссылка внизу — там можно записаться на 30-дневный челлендж
00:13:01для дизайнеров, работающих с ИИ («AI-native designer»).
00:13:04И я хочу, чтобы вы использовали Paper.
00:13:06Там есть полностью бесплатный аккаунт, чтобы завершить вот этот дизайн.
00:13:11Это тот проект, над которым мы работали в прошлом испытании.
00:13:14И в этой темной секции, которую вы видите,
00:13:17где написано «Ваш дизайн здесь»,
00:13:18я хочу, чтобы вы поработали в Paper по той же схеме, что мы сейчас разобрали.
00:13:24Скачайте ассет, который находится на странице челленджа,
00:13:27в котором есть вот этот HTML-код,
00:13:30и доделайте дизайн внизу с помощью Paper.
00:13:33Это страница испытания здесь, в Figma.
00:13:35Можете опираться на неё, если хотите.
00:13:38Это не обязательно.
00:13:39Но вот инструкции.
00:13:40Просто создайте бесплатный аккаунт.
00:13:42Скачайте ассет index.html со страницы челленджа.
00:13:45Используйте Paper, чтобы закончить дизайн в пустом месте этой секции.
00:13:49Вот здесь, где должен быть ваш дизайн.
00:13:52Вы можете оформить его как угодно и написать что угодно.
00:13:54Главное, чтобы всё смотрелось бесшовно.
00:13:56Также вы вольны делать что хотите в следующей секции,
00:13:59можете добавить анимацию и интерактивность.
00:14:02Если добавите — загрузите видеозапись вашего экрана для проверки,
00:14:04наша система поддерживает загрузку видео.
00:14:07Мне очень интересно посмотреть, что у вас получится.
00:14:09Я сделаю видео-обзоры примерно на 8–10 работ, как и раньше,
00:14:13и мы просто увидим ваши идеи.
00:14:16Будущее дизайна выглядит очень круто.
00:14:18Мы видим, как появляется множество инструментов с агентными ИИ-процессами.
00:14:24Paper — один из них, Pencil — другой, и, думаю, их будет всё больше.
00:14:28Посмотрим, кто окажется на вершине.
00:14:30Может быть, Figma?
00:14:31Не знаю.
00:14:32Поживем — увидим.
00:14:33Скоро увидимся.
00:14:34Пока.