Figma за один вечер: как я догонял веб-дизайн 2026 года в диалоге с ИИ

Я — разработчик с 1998 года: HTML, CSS, .NET Core Blazor, в свое время прошел через Photoshop, Adobe Illustrator, Corel Draw, GIMP, Inkscape, PageMaker, MS FrontPage и Bootstrap. Figma полностью пропустил: когда она появилась, я был не в теме веб-дизайна. А сейчас понадобилось быстро вникнуть, выбрать инструмент и начать править существующий интерфейс платформы. Вместо учебника — разговор с ИИ «Алиса» как с персональным наставником. Этот текст — живой диалог, в котором я задавал вопросы, уточнял контекст и просил сокращать, а Алиса подстраивалась под мой стек и задачу.

---

Часть 1. Первый запрос: что пропустил, чем заменить, как работать поверх существующего дизайна

👤 Я: Мне нужно срочно прокачаться в веб-дизайне. Я занимаюсь им с 1998 г. HTML, CSS, .NET Core Blazor. Раньше владел Photoshop, Adobe Illustrator, растровая и векторная графика. Начинал еще в 90-х с Corel Draw… Полностью пропустил Figma. Когда она появилась — я веб-дизайном не занимался, не в теме. Посвяти меня в эту магию. Я так понял — там надо платить ежемесячно. Сейчас проблемы с оплатой из России из-за санкций. Какие альтернативы? Может даже — что-то лучше посоветуешь. Я разрабатываю проект веб-платформы, интерфейс, UX/UI, какие сейчас развитые хорошие инструменты. Мне надо взять существующий дизайн и на нем как-то легко и удобно нанести что добавить, что убрать, что поменять/исправить. Какие инструменты сегодня самые удобные и продвинутые (легко интегрируемые с ИИ, имеющие API или открытый формат файлов…). Допустим поверх скриншота. А может — даже поверх реального HTML-рендера, а лучше DHTML-рендера.

🤖 Алиса: Отличный вопрос — и бэкграунд у вас как раз тот, с которого вход в эту тему занимает пару дней, а не месяцев. Давайте по порядку: что пропустили, чем заменить и как работать поверх существующего дизайна.

Что такое Figma и почему она стала стандартом

Figma — браузерный векторный редактор интерфейсов с совместной работой в реальном времени. По сути, «Google Docs для дизайна»: несколько человек одновременно рисуют на одном холсте, видят изменения друг друга, оставляют комментарии. Ключевые понятия, которые вам нужно знать:

• Auto Layout — аналог flexbox из CSS, но визуально. Контейнеры автоматически раскладывают дочерние элементы, реагируют на изменение контента.

• Components — переиспользуемые элементы (кнопки, карточки, модалки) с вариациями. Изменили мастер-компонент — обновились все экземпляры.

• Variants — состояния компонента (default, hover, active, disabled) в одном блоке.

• Design Tokens / Variables — переменные для цветов, отступов, шрифтов. По сути, CSS-переменные, но в визуальном редакторе.

• Dev Mode — панель для разработчиков: показывает CSS-значения, расстояния, экспортирует ассеты.

• Prototyping — связывание экранов кликами, анимация переходов.

• Plugins — огромная экосистема плагинов, включая AI-генерацию.

Ситуация с Figma в России

Сам сервис работает без VPN, аккаунты не блокирует. Бесплатный тариф Starter даёт неограниченные личные черновики — для одного человека этого может хватить. Но платная подписка с российской карты не проходит с 2022 года. Способы оплаты:

• Посредники (Oplatym.ru и подобные) — ~1600–2500 ₽/мес с комиссией, оплата через Telegram-менеджера.

• Зарубежная карта (физическая или виртуальная, Казахстан/Армения/Грузия) — прямая оплата, $16/мес.

• Знакомые за границей — оплачивают своей картой, вы компенсируете.

Виртуальные карты оформляются онлайн за несколько минут. Вариант рабочий, но требует доверия к сервису-эмитенту.

Альтернативы — что реально стоит

Penpot — open-source, бесплатно, self-host

Open-source платформа от испанской компании Kaleidos. Главная альтернатива Figma по философии: ваш код открыт, данные у вас, формат — SVG + CSS + JSON.

• Бесплатно в облаке (до 8 человек, 10 ГБ) или self-host на своём сервере через Docker Compose — сервер от €5/мес.

• Нативный SVG-формат — файлы открыты, читаются любым векторным редактором, можно версионировать в Git.

• CSS Grid и Flex Layout — разработчики сразу видят готовый CSS/SVG код, без перевода.

• REST API и MCP-сервер — подключение AI-агентов и автоматизация.

• Design Tokens встроены как нативная функция.

• Минусы: UX чуть менее отполирован, чем Figma; нет импорта .fig-файлов; меньше плагинов.

Для вас как разработчика на .NET Blazor — Penpot, возможно, лучший выбор: открытый формат, API, нет vendor lock-in, и данные на вашем сервере.

Lunacy — бесплатно, офлайн, десктоп

Продукт Icons8 (компания с русскими корнями). Нативное приложение для Windows, macOS и Linux.

• Полностью бесплатный для личного и коммерческого использования.

• Работает офлайн, файлы хранятся локально.

• Импорт из Figma и Sketch.

• Встроенные библиотеки иконок, фото, иллюстраций Icons8.

• AI-инструменты: удаление фона, апскейлер изображений, генерация аватаров и текста.

• Pro-версия (~$12/мес) — расширенные AI-функции и векторная графика в полном разрешении. Но базовый редактор бесплатен и не требует Pro.

• Минусы: облачная синхронизация ограничена на бесплатном тарифе (10 облачных документов, ~30 дней истории); нет полноценного Dev Mode как в Figma; командный handoff слабее.

Pixso — максимально похож на Figma

Китайский онлайн-редактор, ближайший клон Figma по интерфейсу и логике.

• Работает из РФ без VPN, русский интерфейс.

• Импорт .fig-файлов без ограничений.

• Бесплатный тариф — безлимит файлов.

• Платные планы от $8/мес.

• Минусы: проприетарный, данные в облаке вендора; экосистема плагинов меньше.

Сравнение

Инструменты для вашей задачи: правки поверх существующего дизайна

Вам нужно взять существующий интерфейс и нанести правки — добавить, убрать, изменить. Вот варианты от простого к продвинутому:

Visily — скриншот в редактируемый макет

AI-инструмент, который делает ровно то, что вы описали: превращает скриншот сайта или приложения в редактируемый макет.

• Есть Chrome-расширение: скриншотите страницу прямо в браузере → отправляете в Visily → получаете редактируемый wireframe.

• AI распознаёт элементы, текст, цвета — каждый элемент становится отдельным редактируемым компонентом.

• Можно менять текст, цвета, двигать элементы, добавлять новые экраны.

• Бесплатно для базовых задач, прототипирование включено.

• Минусы: AI-редактирование иногда регенерирует весь экран вместо точечной правки; нет auto layout.

Screenshot-to-Code — скриншот в HTML/React/Vue

Open-source проект на GitHub: загружаете скриншот → получаете чистый код (HTML+Tailwind, React, Vue).

• Использует GPT-4o, Claude Opus, Gemini.

• Поддерживает запись экрана → рабочий прототип.

• Можно self-host, нужен ключ API одной из моделей.

• Для вас как разработчика — после правок в коде можно сразу интегрировать в Blazor-проект.

Работа поверх живого HTML-рендера

Это самый продвинутый сценарий, и здесь есть несколько подходов:

1. Chrome DevTools overlay — скриншот макета как полупрозрачный слой поверх рендера. Расширение PixelParallel для Chrome накладывает PNG-скриншот на страницу для pixel-perfect сверки.

2. Figma Dev Mode / Penpot Code Inspect — если макет в редакторе, Dev Mode показывает CSS-значения каждого элемента. В Penpot есть нативная панель Code Inspect с готовым CSS/SVG.

3. Browser DevTools direct editing — Chrome DevTools позволяет редактировать DOM и CSS прямо в браузере, видеть изменения мгновенно. Можно добавить аннотации через console или расширения.

4. HTML-in-Canvas API — новый Chrome API, позволяет рендерить живые DOM-элементы прямо на Canvas. Пока экспериментальный, но концептуально — именно то, о чём вы спрашиваете: аннотации и подсказки как настоящие HTML-элементы поверх canvas-сцены.

Моя рекомендация для вашего сценария

Учитывая ваш бэкграунд (HTML/CSS, Blazor, графический дизайн с 90-х) и задачу (править существующий интерфейс платформы):

Базовый инструмент — Penpot. Открытый формат SVG, API, MCP для AI-агентов, self-host на своём сервере, бесплатно. Как разработчику вам будет комфортно: дизайн выражен как код, не нужно переводить из проприетарного формата.

Для быстрых правок поверх скриншотов — Visily. Скриншотите текущий интерфейс → получаете редактируемый макет → наносите правки → показываете команде или заказчику.

Для прототипирования в коде — screenshot-to-code. Скриншот → рабочий HTML/React-код, который можно адаптировать под Blazor.

Lunacy держите как десктопный офлайн-редактор на случай, когда нужно поработать без интернета или открыть .sketch/.fig файлы.

Если есть зарубежная карта — Figma по-прежнему самый мощный инструмент с экосистемой плагинов и AI, и интеграция с OpenAI Codex через MCP уже работает. Но для независимости и контроля Penpot — разумный выбор.

С чего планируете начать — с Penpot на своём сервере или с чего-то попроще вроде Visily для первых правок?

---

Часть 2. Уточнение контекста: бумага, Bootstrap и просьба сократить

👤 Я: До этого я пользовался подходом, когда просто делал наброски на бумаге — основные разделы страницы, блоки… В последние лет 10 использовал Bootstrap (CSS framework). Забыл уточнить, когда давал вводные в контекст. Перепиши ответ. Покороче пока, сокращенно — только самое важное, ключевое, в детали — потом въеду.

🤖 Алиса: Коротко по сути — с твоим бэкграундом (бумага + Bootstrap + Blazor) и задачей «быстро править существующий дизайн» вот самое рабочее:

• Penpot — главная альтернатива Figma: open‑source, есть self‑host, формат SVG+CSS+JSON, API и MCP для AI. Для разработчика (и тем более на .NET) это самый «прозрачный» вариант без vendor lock‑in.

• Visily — если надо быстро взять скриншот интерфейса и сделать из него редактируемый макет, чтобы двигать/менять блоки. Идеально для правок «что убрать/добавить».

• Lunacy — бесплатный офлайн‑редактор под Windows, удобно, когда надо открыть файл и работать без сети.

• Pixso — максимально похож на Figma по интерфейсу, бесплатный тариф, импорт .fig, работает из РФ.

Учитывая Bootstrap и бумажные наброски: делай быстрые скетчи как раньше, а в Penpot сразу собирай на Auto Layout (это почти как flex/grid в Bootstrap) — переход будет естественным.

Если скажешь, что важнее прямо сейчас (быстрые правки, прототипы под Blazor или совместная работа с командой) — подскажу 3–5 конкретных шагов и плагинов/инструментов под эту цель.

---

Часть 3. Добавляю GIMP, Inkscape, PageMaker, FrontPage

👤 Я: Еще, кстати, последние лет 15 я плотно использовал GIMP и Inkscape. А в 2000-х — PageMaker, MS FrontPage… пока не перешел на VS Studio в 2006.

🤖 Алиса: С твоим стеком (GIMP/Inkscape + PageMaker/FrontPage + Bootstrap + Blazor) переход на современные инструменты будет почти безболезненным.

Что брать прямо сейчас

• Penpot — лучший старт. Ты привык к векторной графике (Inkscape) и слоям (GIMP) — в Penpot это есть, плюс Auto Layout (по сути, визуальный Bootstrap-flex). Формат SVG/CSS/JSON тебе как разработчику будет «прозрачен», плюс API и MCP для связки с ИИ. Можно поднять у себя на сервере — никаких проблем с оплатой.

• Visily — если нужно быстро править существующий интерфейс: делаешь скриншот → получаешь редактируемый макет → двигаешь блоки, меняешь текст. Идеально, чтобы не перерисовывать всё с нуля.

• Lunacy — бесплатный офлайн-редактор под Windows, удобно для быстрой правки графики и иконок без интернета.

• Pixso — если хочется максимально близко к Figma по интерфейсу, работает из РФ, бесплатный тариф, импорт .fig.

Как это ложится на твой подход

• Бумажные наброски остаются отличным первым шагом — дальше ты просто «подтягиваешь» их в Penpot.

• Bootstrap-мышление отлично стыкуется с Auto Layout и компонентами: ты сразу видишь, как блоки будут вести себя при изменении контента.

• GIMP/Inkscape опыт поможет быстро разбираться с графикой внутри этих редакторов: слои, маски, векторные фигуры — логика похожая.

• Для Blazor-проекта удобно так: Penpot для макетов и компонентов → экспорт стилей/переменных → реализация в Razor/CSS.

Скажи, какая задача сейчас самая острая (например, «надо быстро поправить текущий макет», «сделать прототип с нуля», «организовать совместную работу с дизайнером») — дам 3–5 конкретных шагов под неё.

---

Итоги и выводы

1. Начинай с контекста о себе. Чем больше ИИ знает о твоём стеке и опыте, тем точнее он подстроит объяснения. Я сразу сказал про HTML/CSS/Blazor, Photoshop, Corel Draw — и Алиса смогла проводить параллели.

2. Не жди идеального промпта с первого раза. Можно писать быстро, с опечатками и без пробелов — главное, чтобы смысл был ясен. ИИ поймёт. Лучше отправить «кривой» запрос, чем откладывать диалог.

3. Проси ИИ сокращать и итерировать. Вторым сообщением я попросил «покороче, только ключевое» — и получил концентрат. Это нормальный рабочий цикл: сначала развернутый ответ, потом сжатый.

4. Добавляй детали по ходу. Когда вспомнил про GIMP/Inkscape и FrontPage — ответ сразно стал релевантнее. Диалог с ИИ выигрывает у поиска именно такими уточнениями.

5. ИИ — наставник, а не замена инструменту. Алиса не нарисует макет за тебя, но за один вечер выстроит карту инструментов, объяснит термины и предложит точку входа под твой бэкграунд.

6. Выбирай инструмент под задачу, а не под хайп. Для разработчика с Blazor-проектом и задачей «править существующий интерфейс» разумным выбором выглядит Penpot (открытый формат, API, self-host) + Visily (быстрые правки поверх скриншотов) + Lunacy (офлайн-редактор на всякий случай).

7. Скорость формулирования важнее красоты текста. Живой диалог с ИИ ценен тем, что он позволяет думать вслух и уточнять на ходу — это и есть метод личного обучения.