—
description:
globs:
alwaysApply: true
—
Соблюдать макет на 100%
Не придумывать свое пока я не дам такое задание
Читать правила перед созданием сайта
При верстке по Figma макету ВСЕГДА:
1. 1.
Скачивать ВСЕ графические элементы из макета, включая:
— Иконки и стрелки (даже простые)
— Логотипы и изображения
— Декоративные элементы
— SVG графику любой сложности
2. 2.
НЕ создавать CSS-аналоги графических элементов, если они есть в макете как отдельные объекты
3. 3.
Проверять данные Figma на наличие всех IMAGE-SVG элементов в структуре макета
4. 4.
Использовать оригинальные ресурсы вместо самодельных CSS-решений для:
— Стрелок и указателей
— Иконок
— Декоративных элементов
— Любой векторной графики
5. 5.
Анализировать структуру макета перед началом верстки, чтобы выявить все графические элементы
«ЗАПРЕЩЕНО: Использовать `get_metadata` как финальный источник данных для верстки. ВСЕГДА после анализа метаданных получать код каждого дочернего элемента через `get_code`,
используя их `node-id`. Любые отклонения от этого правила запрещены.»
Для скачивания изображений!!!
Всегда использовать curl.exe вместо curl в PowerShell
Для длинных URL — использовать переменные
Проверять статус команды с помощью $LASTEXITCODE
## Правило: Точное воспроизведение Autolayout структуры Figma
При верстке по Figma макету ВСЕГДА:
Пример
# Использовать обратные кавычки для переноса строк:
curl.exe -o «images\file.png» \
«http://localhost:3845/assets/verylongfilename.png»
# Или переменные:
$file = «images\rectangle38.png»
$url = «http://localhost:3845/assets/dc3f5ee6396c2731666cbeb504c586ea95600a50.png»
curl.exe -o $file $url
### 1. Анализ структуры перед кодированием
— Изучить иерархию фреймов в Figma до написания HTML
— Проанализировать каждый layout (mode, justifyContent, alignItems, gap)
— Записать точные размеры (width, height) каждого элемента
— Понять логику выравнивания на каждом уровне вложенности
### 2. Точное воспроизведение структуры
— Создавать HTML элементы для каждого фрейма из Figma
— Сохранять иерархию — не упрощать структуру
— Использовать имена классов соответствующие именам фреймов
— НЕ объединять разные фреймы в один CSS класс
### 3. Правила CSS согласно Autolayout
— mode: column → flex-direction: column
— mode: row → flex-direction: row
— justifyContent → точно копировать значение
— alignItems → точно копировать значение
— gap → использовать точное значение в пикселях
— sizing: fixed → задавать точные width/height
— sizing: hug → width/height: fit-content или auto
— sizing: fill → width/height: 100%
### 4. Проверка каждого элемента
— Сравнивать размеры с данными из Figma
— Проверять выравнивание каждого дочернего элемента
— Тестировать на соответствие визуальному макету
### 5. Запрещенные упрощения
— ❌ НЕ использовать align-items: flex-end для всей колонки, если в Figma разные элементы имеют разное выравнивание
— ❌ НЕ делать одинаковые размеры, если в Figma они разные
— ❌ НЕ упрощать структуру фреймов
— ❌ НЕ игнорировать промежуточные контейнеры
Принцип: Каждый фрейм в Figma = отдельный HTML элемент с точными CSS свойствами
# Правило скачивания изображений через curl при работе с Figma MCP
## Когда использовать curl для скачивания изображений:
### 1. После получения кода из Figma MCP
— MCP сервер предоставляет localhost ссылки на изображения
— Формат: http://localhost:3845/assets/[hash].[расширение]
— Эти ссылки активны только во время работы MCP сервера
# Синтаксис:
curl -o «путь\к\файлу.расширение» «localhost_ссылка»
# Примеры:
curl -o «project2\images\photo.jpg» «http://localhost:3845/assets/42dae864d0c14285234ad289f552a268dd6e47f0.png»
curl -o «project2\images\logo.svg» «http://localhost:3845/assets/131d5c28b1bc2107d259cb5fce9ed7ddb25f54db.svg»
curl -o «project2\images\arrow.svg» «http://localhost:3845/assets/f2b53e3add2dd62574f88fb3ab7ef054b851f7a1.svg»
## Правило для избежания ошибок с графическими элементами
Чтобы я не делал подобных ошибок в будущем, нужно добавить следующее правило:
### 📋 Правило анализа Figma структуры:
«При работе с Figma макетом ОБЯЗАТЕЛЬНО:
1. 1.
Сначала анализировать метаданные каждого узла через get_metadata
2. 2.
Проверять все дочерние элементы в структуре
3. 3.
Получать код для каждого отдельного элемента , а не только для родительского контейнера
4. 4.
НЕ объединять разные node-id в один ресурс
5. 5.
НЕ использовать CSS трансформации вместо оригинальных ресурсов
6. 6.
Каждый элемент с уникальным node-id = отдельный файл/ресурс » «
# РАБОТА С SVG ИЗ FIGMA
## КРИТИЧЕСКИ ВАЖНО — ПРОБЛЕМЫ SVG:
⚠️ SVG файлы из Figma часто содержат CSS переменные типа `var(—stroke-0, black)` которые НЕ ОПРЕДЕЛЕНЫ в проекте
⚠️ SVG файлы могут содержать проблематичные атрибуты `preserveAspectRatio=»none»` и `overflow=»visible»`
## ОБЯЗАТЕЛЬНЫЕ ИСПРАВЛЕНИЯ SVG:
1. **Заменить CSS переменные**: `fill=»var(—stroke-0, black)»` → `fill=»currentColor»`
2. **Убрать проблематичные атрибуты**:
— Удалить `preserveAspectRatio=»none»`
— Удалить `overflow=»visible»`
— Удалить `style=»display: block;»`
3. **Установить фиксированные размеры**: `width=»17″ height=»8″` вместо `width=»100%» height=»100%»`
4. **Использовать currentColor**: Позволяет управлять цветом через CSS свойство `color`
## ПРИМЕР ИСПРАВЛЕНИЯ:
❌ НЕПРАВИЛЬНО (как приходит из Figma):
«`svg
<svg preserveAspectRatio=»none» width=»100%» height=»100%» overflow=»visible» style=»display: block;» viewBox=»0 0 17 8″ fill=»none»>
<path fill=»var(—stroke-0, black)» d=»…»/>
</svg>
«`
✅ ПРАВИЛЬНО (после исправления):
«`svg
<svg width=»17″ height=»8″ viewBox=»0 0 17 8″ fill=»none» xmlns=»http://www.w3.org/2000/svg»>
<path fill=»currentColor» d=»…»/>
</svg>
«`
## CSS ДЛЯ SVG ИКОНОК:
«`css
.icon {
width: 15px;
height: auto;
color: var(—icon-color);
flex-shrink: 0;
}
«` Внимание правило нужно соблюдать
### 📋 ГЛОБАЛЬНОЕ ПРАВИЛО: Проверка трансформаций Figma элементов
«При работе с ЛЮБЫМИ элементами из Figma ОБЯЗАТЕЛЬНО проверять:
### 🔍 1. Анализ трансформаций в Figma:
— Rotation (поворот): Проверить угол поворота элемента в свойствах
— Scale (масштаб): Убедиться в корректном масштабировании
— Flip (отражение): Проверить горизонтальное/вертикальное отражение
— Position (позиция): Сравнить относительное расположение элементов
### 🎯 2. Универсальный алгоритм проверки:
«`
1. Получить метаданные элемента
(get_metadata)
2. Проанализировать свойства
трансформации в Figma
3. Получить код элемента (get_code)
4. Получить изображение для визуальной
проверки (get_image)
5. Сравнить ожидаемый результат с
полученным
6. Применить необходимые CSS трансформации
«`
### ⚙️ 3. CSS трансформации для коррекции:
— transform: rotate(Xdeg) — для поворота
— transform: scaleX(-1) — для горизонтального отражения
— transform: scaleY(-1) — для вертикального отражения
— transform: scale(X, Y) — для масштабирования
### 🔧 4. Проверочный чек-лист для КАЖДОГО элемента:
— ✅ Соответствует ли направление/ориентация макету?
— ✅ Правильный ли масштаб элемента?
— ✅ Корректное ли позиционирование?
— ✅ Нужны ли дополнительные трансформации?
— ✅ Работают ли интерактивные состояния?
### 🎨 5. Особое внимание к элементам:
— Стрелки и указатели — проверка направления
— Иконки с ориентацией — проверка поворота
— Логотипы и текст — проверка отражения
— Декоративные элементы — проверка позиционирования
### 🚀 Ключевой принцип:
«Каждый элемент должен пройти визуальную проверку на соответствие оригинальному макету, независимо от его типа и сложности!»
—
# ПРАВИЛА ВЕРСТКИ (УТОЧНЕНИЯ)
### Правило: Объединение адаптивных элементов
> **Примечание:** Данное правило является уточнением для **Правила: Точное воспроизведение Autolayout структуры Figma** и применяется в приоритетном порядке при создании адаптивной верстки.
**Приоритетом является чистая и эффективная HTML-структура.**
1. **Разрешается объединять** фреймы из Figma, которые представляют один и тот же смысловой блок в разных адаптивных макетах (например, логотип в десктопной и мобильной версии).
2. **Цель** — избежать дублирования HTML-элементов. Вместо этого следует использовать один HTML-элемент и изменять его стили с помощью CSS Media Queries.
3. При объединении графических элементов (например, двух разных логотипов) **следует использовать наиболее подходящий или универсальный ассет**. Если выбор неочевиден, AI должен уточнить у пользователя, какой ассет использовать.
—