Как сделать дизайн сайта в HTML?

Дизайн сайта напрямую в HTML и CSS возможен и иногда даже быстрее, чем через Figma, но подходит не всем: нужно свободно владеть CSS и держать в голове визуальную композицию без наглядного холста. Для простого одностраничника или личного проекта это рабочий путь, для коммерческого сайта с утверждением у заказчика - рискованный.

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

Есть и обратная сторона: в HTML и CSS сразу видно реальное поведение - как текст переносится, как элементы ведут себя на разных экранах, как выглядит настоящий шрифт вместо картинки-заглушки. Figma-макет иногда красиво выглядит на холсте и разваливается при вёрстке, потому что дизайнер не учёл границы браузера.

Рабочий компромисс, которым пользуются многие студии: черновой каркас страницы (блоки, отступы, сетка) собирают сразу в коде, а детальную проработку ключевых экранов - главную, карточку товара - делают в Figma для утверждения с заказчиком. Так экономится время на рутинных страницах и сохраняется контроль на важных.