Разобрать задачу

Кейс · Сайты и веб-приложения

Корпоративный сайт производства: пиксель-перфект вёрстка из Figma

Пиксель-перфект вёрстка из Figma: 20+ страниц, 4 брейкпоинта. Пиксель-перфект многостраничник из сложного макета с адаптивом под четыре разрешения и авторским конвейером автосборки из Figma.

Хочу так же Все кейсы
Заказчик: Компания «ТЕХ» — промоборудование и контрактная электроника Закрывали утечку: деньги не доходили до кассы
Что болело

Большой макет и четыре разрешения — это месяцы ручной вёрстки и расхождения с дизайном на каждом экране.

Что изменилось

Сайт собран пиксель в пиксель под четыре разрешения, сборка из макета автоматизирована: правка дизайна не превращается в переверстку.

Задача

Что значит сверстать корпоративный сайт пиксель-перфект по Figma?

Сверстать многостраничный корпоративный сайт в максимальном соответствии с большим Figma-макетом — в четырёх брейкпоинтах: 1920, 1280, 768 и 390.

Решение

Как работает конвейер «дизайн-в-код» на Figma REST API?

Чистый HTML + CSS без фреймворков, строго по дизайн-токенам. Авторский Python-тулчейн «дизайн-в-код»: выгрузка дерева узлов через Figma REST API, экспорт векторов, автогенерация страниц и аудит соответствия макету. Живой поиск по каталогу, форма заявки, SEO-обвязка с llms.txt.

HTML5CSS3 (токены)JSFigma REST APIPython / PillowVercel Functions

Результат

Что получило производство: многостраничник с адаптивом под четыре разрешения

Пиксель-перфект многостраничник из сложного макета с адаптивом под четыре разрешения и авторским конвейером автосборки из Figma.

Проект в проде: tex-preview.vercel.app

Вопросы

Что обычно спрашивают про этот кейс

Под какие разрешения сделан адаптив?

Под четыре брейкпоинта из макета: 1920, 1280, 768 и 390. Вёрстка идёт строго по дизайн-токенам, на чистом HTML и CSS без фреймворков.

Зачем свой Python-тулчейн, если у Figma есть экспорт?

Он выгружает дерево узлов через Figma REST API, экспортирует векторы, генерирует страницы и отдельно проводит аудит соответствия макету. Именно аудита соответствия обычный экспорт не даёт.

Что на сайте кроме страниц каталога?

Живой поиск по каталогу, форма заявки и SEO-обвязка вместе с llms.txt.

Смотрите также

Услуги, из которых собран этот проект

Другие кейсы

Страница обновлена 14 сентября 2026. Автор — Остап Андреевич, ИИ-инженер полного цикла.

Условия

Что у вас на руках после расчёта утечки

Расчёт — рабочий документ о вашем процессе, а не презентация обо мне. Он остаётся у вас, даже если работать не станем.

01Цифра потери

Сколько денег уходит в месяц и на чём: часы людей, ошибки, недоведённые заявки. С основанием, а не с потолка.

02Что чинить первым

Порядок: что закрывать сейчас, что подождёт, что не окупится вовсе. Последнее говорю прямо.

03Ответ, нужен ли я

Если задача решается без ИИ или без меня — так и скажу. Дешевле узнать это на расчёте, чем через три месяца.

Как снимается ваш риск
  • Если внедрение по расчёту не окупается — скажу это до начала работ, а не после.
  • Работа делится на этапы: каждый принимаете и оплачиваете отдельно. Не устроил результат этапа — следующий не начинаем.
  • Проекты веду сам, по очереди: дату старта называю на расчёте, а не «как-нибудь».
От вас на расчёт нужны 30–40 минут и человек, который знает, как процесс устроен сейчас.

Следующий шаг

Расчёт утечки за 30–40 минут

Хотите похожий результат у себя? Расскажите про задачу — разберу и скажу, решается ли она вообще. Назову цифру потери. Ни к чему не обязывает.

Telegram@anonosya · отвечаю лично Позвонить+7 985 674-98-89 · ответит Андреич, голосовой ИИ MAXроссийский мессенджер Почтаit@oaiweb.ru · для документов

Оставить заявку

Опишите задачу в одной строке — свяжусь и скажу, решается это ИИ или нет.

Telegram Позвонить Заявка