🚘 На работе захотели лендинг. Но я уже два года не занимался нормальной версткой, чтоб сразу с мобилкой, WebP, доступностью, lazy load и семантикой, а не диватозить.
Тогда на него ушло 2 дня работы и еще пару дней на правки. Но верстка все же получилась шакальной: без lazy load и других плюшек.
🚤 На своем пути к быстрой верстке, я тестил разные инструменты для конвертации дизайна из Figma в код, но все они либо давали что то нечитаемое, что трудно поддерживать, либо хотели миллиона ручных правок, что было равно по времени обычной SCSS верстке.
Теперь же у нас есть готовый инструмент для продакшена. Он легко конвертирует дизайн в код с учетом доступности, семантики и структуры проекта.
Все, что нужно — это правильно составить промпт с нашими пожеланиями и подключить Figma MCP к курсору.
🖥 Инструкция простая. Самое сложное — получить токен Figma и вставить его в конфиг нашего MCP. После чего он будет доступен в UI курсора с двумя командами:
get_figma_data и download_figma_images.Что здорово: можно заранее указать в промпте, как раскидать иконки и картинки по директориям. Например, SVG в папку icons, фоны — в background, а остальное в зависимости от блока макета.
Чтобы результат был точнее, важно следить за контекстом. Чем меньше блок дизайна мы конвертируем в код, тем меньше галлюцинаций мы получим на выходе.
👀 Вот что получилось, готовность 80%:
https:/длинный-хэш-из-IPFS/landing
Теперь осталось вырезать его из Vue и перетащить отдельным проектом на Nuxt 4, который вышел 5 дней назад.
Ведь нам нужен HTML с CSS и SEO, а не JS-а пачка, который, по слухам, трудно индексировать поисковикам.
📊 #статистика День 1327 | 3372 час в IT