Frontend Design Toolkit

## Обзор

Рабочий процесс дизайн-в-код: начните с дизайн-направления, создайте визуальные макеты, затем постройте посадочную страницу — три взаимодополняющих инструмента в одном плагине.

- **frontend-design** — Определите визуальную идентичность: стиль, палитру, типографику и производственный код компонентов
- **canvas-design** — Создавайте визуальные макеты: постеры, hero-изображения и макеты в формате PNG/PDF
- **page-builder** — Собирайте посадочные страницы, используя компоненты Tailark с структурированными секциями

## Быстрый старт

1. Установите плагин: `npx skillstore add @frontend-design-toolkit`
2. Опишите ваш проект и целевую аудиторию в **frontend-design** → получите направление стиля, цветовую палитру и код компонентов
3. Используйте **canvas-design** для создания hero-изображений, баннеров или визуальных материалов, соответствующих стилю
4. Передайте дизайн-токены и контент в **page-builder** → получите полноценную посадочную страницу

## Пошаговое руководство: Создание страницы запуска продукта

**Шаг 1 — Дизайн-направление**
> "Создайте дизайн-систему для SaaS инструментов для разработчиков. Современный, тёмная тема, с синими и фиолетовыми акцентами."

frontend-design возвращает: цветовую палитру, типографическую шкалу, компоненты кнопок/карточек в производственном коде.

**Шаг 2 — Визуальные материалы**
> "Создайте hero-баннер для посадочной страницы. Абстрактные геометрические фигуры, тёмный фон, синий градиент."

canvas-design создаёт hero-изображение в PNG, соответствующее установленной палитре.

**Шаг 3 — Сборка страницы**
> "Создайте посадочную страницу с: hero-секцией, сеткой функций из 3 колонок, таблицей цен, CTA-футером."

page-builder генерирует полноценную страницу, используя компоненты Tailark, включая дизайн-токены из шага 1.

## Область применения и границы

**Этот набор инструментов предназначен для:**
- Новых посадочных страниц, маркетинговых страниц, кампаний
- Страниц запуска продуктов и промо-микросайтов
- Прототипов и дизайн-исследований
- Портфолио и личных сайтов

**Не предназначен для:**
- Замены существующих сложных веб-приложений
- Замены полноценной дизайн-системы уже находящейся в продакшене
- E-commerce оформлений заказов или многошаговых форм
- Server-side рендеринга или бэкенд-интеграции

## Обработка ошибок

- **Дизайн не соответствует бренду** → Вернитесь к шагу 1 (frontend-design) и уточните направление стиля. Скорректируйте палитру, типографику или настроение перед перегенерацией последующих материалов
- **Визуальный макет не попадает в цель** → Перезапустите canvas-design с более конкретными ограничениями. Явно ссылайтесь на дизайн-токены из шага 1
- **Неверная структура страницы** → Измените промпт page-builder с инструкциями на уровне секций. Результат — стандартный HTML/Tailwind — ручное редактирование всегда возможно
- **Никогда не авто-деплоится в продакшен** — Все выходные данные — локальные файлы. Вы проверяете и деплоите вручную
- **Храните версии сгенерированных материалов** — Сохраняйте каждую итерацию, чтобы вы могли сравнить и откатиться к предыдущему дизайн-направлению

## Советы

- Начните с общего в frontend-design, затем сужайте. Чёткое направление стиля делает два других инструмента гораздо эффективнее
- canvas-design создаёт оригинальную графику — он никогда не копирует работу существующих художников
- page-builder работает лучше всего с конкретными описаниями секций, а не с расплывчатыми запросами
- Все три инструмента производят статический вывод (код, изображения, HTML) — без runtime зависимостей