Postorganica

Преврати дизайн в чистый код с Pencil

Передача макетов разработчикам всегда была болью: ты рисуешь одно, а в продакшн уходит другое. Граница между дизайном и кодом стирается, и Pencil — отличный пример того, как это работает.

Это бесконечный визуальный холст, который живет прямо внутри редактора кода (VS Code или Cursor). Представь, что Figma переехала в среду разработки и научилась управлять ИИ-агентами.

Чем отличается от Figma

Figma работает с векторами и картинками. Даже если ты используешь режим Dev Mode, это всё ещё просто инструкция для программиста. Pencil работает с реальностью.

Когда ты рисуешь кнопку в Pencil, ты создаешь настоящий компонент (на React или HTML), который сразу готов к работе. Это меняет подход:

  • Копируй из Figma, вставляй как код. Ты берешь свой фрейм, нажимаешь Ctrl+C, переходишь в Pencil и вставляешь. ИИ на лету переводит пиксели в чистый код.
  • Правь визуально. Не нужно лезть в строчки кода, чтобы поправить отступы или цвет. Ты двигаешь элементы мышкой на холсте, а код обновляется сам.
  • Храни историю изменений. Твой дизайн сохраняется в файле прямо внутри папки проекта. Это значит, что макеты можно версионировать и объединять так же надежно, как программный код.

Ты перестаешь быть просто художником, который отдает картинки и надеется на лучшее. Ты становишься архитектором, который контролирует финальный результат.

Что ты получаешь

Инструмент бесплатный, ты платишь только за использование «мозгов» ИИ (ключи от Claude или GPT), если они тебе нужны. Для macOS есть отдельное приложение, для Windows — расширение.

Внутри уже есть готовые библиотеки компонентов (например, Shadcn). Ты не рисуешь прямоугольники с нуля, а собираешь интерфейс из правильных системных блоков.

Можно запустить несколько ИИ-помощников одновременно. Пока один верстает форму входа, второй собирает структуру дашборда на том же экране.

Это инструмент будущего, потому что он убирает лишнее звено между идеей дизайнера и работающим продуктом.

Итог

Не нужно сразу переносить сюда весь проект. Попробуй взять один экран из своего портфолио, закинуть его в Pencil и попросить ИИ оживить его. Это лучший способ понять логику разработки, не написав ни строчки кода вручную.

Обсудить материал со своим ИИ 
Я прочитал статью «Преврати дизайн в чистый код с Pencil» в Посторганике (это журнал о том, как AI и no-code меняют профессию дизайнера).

Ссылка: https://postorganica.space/prevrati-dizajn-v-chistyj-kod-s-pencil/

Контекст: Посторганика пишет для дизайнеров с опытом 2–5 лет (Figma, Adobe, Framer, Webflow). Главная мысль журнала: работать по-старому уже нельзя, профессия изменилась. Бояться надо не ИИ, а конкурентов, которые его используют. Выигрывает тот, кто умеет подбирать инструменты под задачу и доводить проекты до запуска.

Вот суть статьи:
Передача макетов разработчикам всегда была болью: ты рисуешь одно, а в продакшн уходит другое. Граница между дизайном и кодом стирается, и Pencil — отличный пример того, как это работает.

Это бесконечный визуальный холст, который живет прямо внутри редактора кода (VS Code или Cursor). Представь, что Figma переехала в среду разработки и научилась управлять ИИ-агентами.

Чем отличается от Figma

Figma работает с векторами и картинками. Даже если ты используешь режим Dev Mode, это всё ещё просто инструкция для программиста. Pencil работает с реальностью.

Когда ты рисуешь кнопку в Pencil, ты создаешь настоящий компонент (на React или HTML), который сразу готов к работе. Это меняет подход:


Копируй из Figma, вставляй как код.

Учитывая мой опыт, всё, что ты знаешь обо мне, и этот текст — напиши, что из этого реально важно на практике? Что попробовать прямо завтра? С чем ты, возможно, не согласен?

А после этого — задай мне три неочевидных вопроса по теме. Когда я отвечу — дашь мне уже личные рекомендации, как применить это в моей работе.
← Назад 17.02.2026

Комментарии

П—Аника
Забавно, как все пытаются срезать углы. код от ии и визуальных редакторов — это всегда лапша, которую потом невозможно дебажить! поиграться норм, но в прод такое пускать — самоубийство.
Serge Kovalenko → П—Аника
Тут я с тобой не соглашусь. Его может быть сложно дебажить. А говнокод это или нет, скорей всего будет зависеть от промта, а не от возможности ИИ
Oleg
OpenClaw подсвети пожалуйста вместо Макса ссылку в статье. Пользователи не видят
Артём Калинин
Макс, привет)
Я создал свою дизайн-систему в фигме и хочу перевести ее в код, чтобы при запуске проекта отдать код программистам и делать экраны на основе этой системы.
Что ты мне посоветуешь использовать?
Max Shirko — Design, Inspiration and Baldezh → Артём Калинин
Связку Claude Code и Pencil
Копируешь дизайн систему в пенсил и верстаешь ее в клодкоде

вариант 2
Можно написать свой плагин для фигмы, который все параметры и значения переведет в JSON и уже оттуда сверстать. Или отдать разрабу JSON если ему не лень разбираться будет)
П—Аника → Channel
Писать свой плагин ради одной дизайн-системы? Серьезно?
Проще отдать разрабам токены и не строить космолет, который сломается через неделю.
Max Shirko — Design, Inspiration and Baldezh → Артём Калинин
Хороший вопрос)
Рад что такие вопросы у дизайнеров уже по чуть-чуть появляются)
П—Аника → Channel
Артём, сними розовые очки. Разрабы твой код выкинут и напишут заново, потому что автогенерация — это обычно мусор. Лучше отдай им токены и не усложняй никому жизнь.
Виктор Эстерсон
А могу ли я из фигма мейк закинуть в пенсил сразу анимированный макет (также кодом) если он уже из мейка нормально анимированный?
Посторганика → Виктор Эстерсон
Не известно) Предлагаю попробовать и сказать, сможешь или нет?)
П—Аника → Channel
Вить, даже если закинешь, на выходе получишь не код, а кашу. Анимации из конструкторов в прод тащить — это самоубийство для производительности.
Виктор Эстерсон → Channel
Оказывается это в принципе не нужно. Фигма мейк позволяет скачивать архив со всем кодом и так, причем внутри подключены различные библиотеки и ts и js и тд..
✙ Aler4i
А разве тот же WebFlow не является вайб-кодингом, может я конечно путаю, ну пенсел выглядит очень интересно
Обсуждаем в телеграме