Краткие факты
| Тип | Самостоятельный технический демо-проект — не заказ клиента |
| Источник | Сторонний Figma-файл, Whitepace — SaaS Landing Page V2 от Al Razi Siam, CC BY 4.0 |
| Реализовано как | WordPress Classic Theme, без плагинов, без конструкторов |
| Объём | Все 11 секций, 5 брейкпоинтов (320–1920px) |
| Живое демо | demo.noircraftlab.com |
| Код | github.com/noircraftlab/agency-demo-01 (публичный, GPL-2.0-or-later) |
| Оценка воспроизводимой сборки | ~28–32 часа |
Я взял чужой, профессионально сделанный Figma-файл и собрал из него production-тему WordPress — пиксель в пиксель. Задача была не в том, чтобы что-то придумать, а в том, чтобы доказать конкретное обещание, которое я даю агентствам и клиентам: пришли Figma-файл — получи фикс-цену и сборку, которая ей реально соответствует. Без «примерно так же», без раздутых плагинами тем, без сюрпризов при сверке с оригиналом.
Задача
Большинство портфолио показывают вкус самого дизайнера/разработчика. Это доказывает, что ты умеешь придумывать. Но не доказывает, что ты умеешь честно реализовать чужой дизайн в реальных условиях — с несогласованной типографикой, которую никто не просил чинить, с иллюстрациями, которые нельзя использовать по лицензии, с пятью брейкпоинтами и с клиентом, который будет сверять твою сборку с исходным фреймом. Мне нужен был проект, который проверяет именно это — а не витрина собственных предпочтений.
Подход
- Выбрал настоящую сложность. SaaS-лендинг из 11 секций, а не одностраничник — и обязался собрать все секции без сокращения объёма ради скорости.
- Ноль зависимостей. WordPress Classic Theme, без Elementor, без Bootstrap, без jQuery, без сборочных фреймворков кроме Sass — так же лаконично и переносимо, как и хотел бы клиент.
- Два полных pixel-perfect прохода, а не «достаточно адаптивно». На 1152px и 1920px переносы текста замерялись по точному инстансу шрифта из дизайна ещё до написания CSS.
- Честно закрыл лицензионный пробел. Три блока с иллюстрациями в исходном файле были плейсхолдерами — оригинальная графика лицензирована отдельно и не подлежит распространению. Заменил на иллюстрации с открытой лицензией, перекрасил под палитру дизайна, указал источник в README.
- Документировал по ходу. Спецификация написана до сборки, changelog — по ходу, и честный раздел «известные компромиссы» вместо того, чтобы молча исправить — или молча скрыть — несколько несостыковок, изначально заложенных в исходном дизайне.
Результаты
Замерено 26.07.2026, живое демо:
- W3C-валидация: 0 ошибок
- Lighthouse desktop: Performance 99 · Accessibility 96 · Best Practices 100 · TBT 0мс · CLS 0.008
- Чистая активация на свежей установке WordPress, без плагинов
- Все 11 секций реализованы — ни одна не сокращена и не упрощена
- Оценка воспроизводимой сборки аналогичного лендинга: ~28–32 часа
Известные компромиссы
Три момента относятся к исходному дизайну, а не к моей сборке — я воспроизвёл их как есть, а не «исправил», потому что задача была соответствовать дизайну, а не улучшать его: навигация в шапке набрана другим шрифтом, чем остальной макет, одна CTA-кнопка — третьим шрифтом, а отступы между колонками в футере отличаются на пиксель между колонками.
Один компромисс — действительно мой: декоративные подчёркивания отклоняются примерно на 2px от исходного фрейма на нескольких промежуточных ширинах. Они привязаны к слову, которое подчёркивают, — поэтому переживают любой перенос строки, вместо того чтобы стоять на фиксированной позиции, которая сломалась бы при первом же изменении текста.
Стек
WordPress Classic Theme · PHP 8.3+ · SCSS (Dart Sass, 7-1-lite) · Vanilla JS (ES6+). Осознанно отсутствуют: конструкторы страниц, CSS/JS-фреймворки, родительские темы.
Для нетехнического читателя
Если фрилансер когда-нибудь сдавал тебе сайт, который «в целом» похож на утверждённый дизайн — с чуть съехавшими отступами, шрифтом «почти таким же», мобильной версией, которую явно никто не проверял, — вот как выглядит альтернатива: независимая пересборка построчно, сверенная с оригинальным файлом, где оставшиеся расхождения названы намеренно, а не спрятаны.