00:00:00Это Pencil — инструмент для дизайна, который превращает промпты любого ИИ-ассистента
00:00:05в визуально привлекательный дизайн прямо на ваших глазах, который можно редактировать как в Figma.
00:00:10Он поддерживает компоненты, UI-киты, CSS-переменные, и он абсолютно бесплатен.
00:00:15Но учитывая Sketch и новый MCP-инструмент от Figma, который делает нечто похожее,
00:00:19станет ли Pencil тем инструментом, которым дизайнеры действительно будут пользоваться?
00:00:22Подписывайтесь, и давайте во всем разберемся.
00:00:24Ни для кого не секрет, что ИИ пока не слишком силен в дизайне.
00:00:28Я имею в виду, просто взгляните на это.
00:00:30И хотя использование современных моделей помогает расширить возможности,
00:00:33иногда хочется подправить дизайн или получить одобрение клиента перед написанием кода.
00:00:38И именно здесь на помощь приходит Pencil.
00:00:40Это инструмент дизайна на базе агентов, который работает локально в вашей IDE или как отдельное приложение.
00:00:46Это идеальный инструмент для тех, кто, как и я, любит использовать Claude Code.
00:00:51Давайте перейдем к быстрому демо.
00:00:52Вот Pencil во всей его красе.
00:00:54Если вы когда-либо работали в Figma, он покажется вам очень знакомым: опции слева
00:00:59и более специфические настройки холста или фрейма здесь, справа.
00:01:03Это первый файл, который вы увидите после завершения настройки Pencil.
00:01:07И вместо того чтобы проходить шаг один и шаг два,
00:01:09я перейду сразу к третьему шагу, чтобы вы увидели процесс в действии.
00:01:12Вот здесь у нас промпт,
00:01:14и вы можете нажать "Run", чтобы запустить его прямо в окне чата.
00:01:18Но на самом деле я собираюсь использовать Claude Code в терминале,
00:01:22где у меня есть навыки, мои MCP-серверы и всё то, к чему я привык,
00:01:26чтобы Pencil мог извлечь из этого пользу.
00:01:29Я скопирую этот промпт и вставлю его в Claude Code (кстати, с первым днем рождения!),
00:01:33и просто укажу использовать MCP-сервер Pencil,
00:01:37на всякий случай.
00:01:39По сути, этот промпт говорит Pencil спроектировать дашборд для платформы управления роверами,
00:01:44используя компоненты.
00:01:45А именно компоненты, которые находятся ниже в UI-ките Lunaris.
00:01:50Если мы вернемся к фрейму, вы увидите, что дашборд создается в реальном времени.
00:01:56А в Claude Code мы можем посмотреть, что именно происходит.
00:01:59Он использует инструмент Pencil MCP batch design для заполнения навигационной панели.
00:02:05Шаг один уже выполнен — создана основная структура макета.
00:02:08Возвращаясь в Pencil, можно наблюдать, как дизайн дополняется и меняется в реальном времени.
00:02:13Теперь, когда Claude закончил работу, мы можем редактировать дизайн на ходу.
00:02:17Должен сказать, я впечатлен тем, что ему удалось сделать:
00:02:20от выбора правильных иконок и цветов до этого аккуратного элемента
00:02:25и этих отличных кнопок.
00:02:27Я заметил, что надпись "show 10 records" расположена слишком близко к краю.
00:02:31Поэтому я кликну на неё и немного изменю отступы.
00:02:34В этом и заключается прелесть Pencil.
00:02:36Любой элемент дизайна можно изменить точно так же, как в Figma,
00:02:40но вы не ограничены только этим UI-китом.
00:02:42На выбор доступно множество вариантов: от Shadcn до Lunaris, Halo, Nitro,
00:02:48и их список постоянно пополняется.
00:02:49Например, если я выберу Shadcn, в разделе тем появится больше опций,
00:02:54позволяющих переключиться на темный режим, изменить тему (например, сделать кнопки желтыми)
00:02:58или сменить общий фон.
00:03:01Также есть UI-киты, которые можно использовать как основу для дизайна.
00:03:05Давайте попробуем создать что-то с чистого листа.
00:03:08Я нажму сюда; по умолчанию используется чат,
00:03:11но я могу скопировать это и перенести в окно чата.
00:03:13Но перед этим я создам новый файл, чтобы начать с пустого холста.
00:03:17Задам ширину больше 800, скажем, 1024, и сделаю высоту побольше.
00:03:24Теперь, выбрав фрейм, я попрошу Claude использовать стайл-гайд.
00:03:28Затем я введу промпт: "создай сайт для французской пекарни
00:03:32в богемном стиле, используя изображения из Unsplash" и так далее.
00:03:36Нажимаю Enter и смотрю на результат.
00:03:39Понятия не имею, чего ожидать, так что посмотрим.
00:03:42Поскольку я использую навык "superpower",
00:03:45он задает мне несколько уточняющих вопросов о сайте.
00:03:47И вот он принялся за работу.
00:03:49Он предложил более широкий фрейм, чем тот, что я задал изначально.
00:03:52Я ускорю видео, чтобы дело пошло быстрее.
00:03:55Похоже, Claude закончил все три страницы, которые обещал сделать.
00:03:59И если взглянуть на макеты, это выглядит действительно впечатляюще.
00:04:02Конечно, есть детали, которые я бы подправил,
00:04:06но если бы я увидел это в сети, я бы не подумал, что это создал ИИ:
00:04:10от логотипа и подобранных изображений до всей структуры макета.
00:04:14Выглядит невероятно.
00:04:16И мелкие недочеты меня не пугают,
00:04:17потому что всё, что нужно — это дважды кликнуть по нужному элементу.
00:04:20Здесь я могу просто перетащить текст вот так, немного его изменить.
00:04:24И готово. Практически всё исправлено.
00:04:26Теперь я попрошу Claude превратить это в работающий веб-сайт.
00:04:30И вот он — готовый сайт.
00:04:32Честно говоря, я не ожидал, что он добавит этот фон с хлебом.
00:04:35В макетах его не было, но это не страшно.
00:04:38Давайте прокрутим вниз.
00:04:39Он перенес почти всё один в один, что очень впечатляет.
00:04:44Перейдем на страницу "Наша история" — идеально.
00:04:47Выглядит точно так же, как в дизайне: красивый текст, три шага
00:04:52и тот факт, что они используют только те ингредиенты, которые едят сами — это круто.
00:04:56Все изображения на своих местах, и даже меню выглядит здорово.
00:05:00Мне нравится горизонтальная линия, которую он добавил после каждого блюда.
00:05:04Главная прелесть этого дизайна в том, что, раз он создан ИИ,
00:05:07я могу подключить его к любой базе данных. Так что здесь реальные данные.
00:05:10Я могу использовать любые другие MCP-инструменты или навыки для улучшения сайта.
00:05:15Не говоря уже о том, что если бы у меня уже были наработки в Figma,
00:05:18я мог бы просто импортировать их в Pencil через меню File.
00:05:22Я добавил ссылку на этот сайт в описании, чтобы вы могли сами его потестить.
00:05:25Мне правда понравилось создавать разные дизайны просто через промпты
00:05:29и видеть, как они строятся на глазах с возможностью правки. Это похоже на магию.
00:05:35К тому же файлы Pencil — это чистый JSON,
00:05:38поэтому ИИ-агентам легко их понимать и транслировать в код.
00:05:42Но каким бы крутым ни был Pencil, он не идеален.
00:05:46У меня была проблема с чатом сборки, который почему-то не отвечал.
00:05:50Окно генерации в новых файлах иногда не исчезало, пока я не сохранял или не перезапускал Pencil,
00:05:56и временами он казался довольно медленным при выполнении определенных действий.
00:05:59Но, честно говоря, это мелочи, над которыми команда, скорее всего, уже работает,
00:06:04как и над возможностью создавать или импортировать кастомные UI-киты, например, из Tailwind Plus.
00:06:11И напомню, на данный момент этот инструмент полностью бесплатен.
00:06:15Так что пользуйтесь моментом, ведь это венчурный проект, и так будет не всегда.
00:06:19Я не дизайнер. Да, сюрприз-сюрприз.
00:06:22И хотя я не пробовал MCP-инструмент от Figma или Sketch, судя по тому, что я видел в сети,
00:06:28Pencil настроить гораздо проще благодаря бесшовной интеграции со многими инструментами.
00:06:34Кстати, о бесшовности: если вы хотите, чтобы Claude Code создавал терминальные интерфейсы на лету,
00:06:39вместо того чтобы кодить их вручную, посмотрите это видео про Claude Canvas,
00:06:42где я подробно показываю, как это сделать.