🇺🇦 Українська | 🇬🇧 English | 🇩🇪 Deutsch

🎬 Дивитися повну інструкцію на YouTube

Якщо це розширення допомогло вам у роботі, підтримайте автора кавою! ☕

Автоматична генерація CSS класів з HTML файлів з інтеграцією Figma. Розроблено завдяки знанням отриманим на курсах GoIT з використанням штучного інтелекту.

• 🚀 Три режими генерації: Мінімальний, Максимальний, Production
• 🎨 Інтеграція з Figma: Імпорт стилів безпосередньо з дизайнів
• 📱 Адаптивні стилі: Автоматична генерація media queries
• 🔧 Оптимізація: Мініфікація та оптимізація для production
• 💾 Збереження налаштувань: Автоматичне збереження конфігурації

code --install-extension vutov-mykola.css-classes-from-html

1. Завантажте .vsix файл з Releases
2. У VS Code: Ctrl+Shift+P → Extensions: Install from VSIX...

git clone https://github.com/VuToV-Mykola/css-classes-from-html.git
cd css-classes-from-html
npm install

1. Відкрийте HTML файл у VS Code
2. Натисніть Ctrl+Shift+P (Windows/Linux) або Cmd+Shift+P (Mac)
3. Виберіть CSS Classes: Show Main Menu
4. Оберіть режим генерації:
   • Мінімальний: Базові CSS класи
   • Максимальний: Повна інтеграція з Figma
   • Production: Оптимізований код

1. Отримайте Figma Personal Access Token
2. Вставте посилання на Figma файл
3. Виберіть Canvas та Layers для імпорту

• includeReset: Включити reset стилі
• includeComments: Додати коментарі
• optimizeCSS: Оптимізувати CSS
• generateResponsive: Генерувати адаптивні стилі

# Клонування репозиторію
git clone https://github.com/VuToV-Mykola/css-classes-from-html.git

# Встановлення залежностей
npm install

# Запуск тестів
npm test

# Створення VSIX пакету
vsce package

MIT License - дивіться файл LICENSE

VuToV-Mykola

• GitHub: @VuToV-Mykola
• Email: vutov.mykola@gmail.com

• GoIT - за знання та навчання
• Anthropic Claude AI - за допомогу в розробці
• VS Code Team - за чудовий редактор

Знайшли помилку? Створіть issue

Внески вітаються! Будь ласка, прочитайте CONTRIBUTING.md

Розроблено з ❤️ в Україні 🇺🇦