Интерактивная Showcase-платформа для тестирования, визуализации и экспорта высокоплотных дизайн-токенов в формате XML-инструкций для AI-инженеров UI. Построена на стеке Next.js 16 (App Router), React 19, Tailwind CSS v4 (Rust Compiler) и Zustand.
Для детального погружения в архитектуру и принципы параметрического дизайна ознакомьтесь со следующими разделами:
- Архитектура проекта (docs/architecture.md) — описание взаимодействия компонентов, системы инжектирования переменных
:rootв HSL-формате, Zustand-хранилища и руководство по стилизации новых UI-компонентов. - Исследование 15 уникальных тем (docs/15_unique_themes.md) — концептуальная теория DTCG токенов, шесть осей нецветового дизайна и подробная спецификация каждой из 15 визуальных топологий.
- Технический аудит (docs/technical_audit.md) — результаты аудита файлов, готовность функционала и рекомендации по развитию.
- 15 уникальных топологий: От строгого каркасного режима (Wireframe) и неоморфизма (Tactile Emboss) до футуристического киберпанка (Haptic Sharp) и CRT-терминала (Monospaced Terminal).
- Динамический CSS-инжектор: Преобразует HEX-цвета палитр в HSL-значения для Radix и Base-UI, рассчитывает неоморфные тени, накладывает гауссово размытие и настраивает кривые Безье переходов.
- Специализированные палитры: Для ключевых тем добавлены уникальные цветовые схемы (Neon Cyberpunk, Aurora Blue, Yellow Pop Art и др.).
- Навигация с клавиатуры: Быстрое переключение геометрии тем (стрелки влево/вправо) и цветовых схем (стрелки вверх/вниз) с умной защитой от ложных срабатываний при вводе текста.
- Генератор промптов (Prompt Engine): Экспортирует выбранную конфигурацию токенов и правил в структурированную XML-инструкцию для AI-ассистентов (Claude, Gemini), генерирующих чистый UI.
Убедитесь, что у вас установлен Node.js версии 18+, после чего выполните:
npm installnpm run devОткройте http://localhost:3000 для просмотра интерактивного Showcase.
npm run buildnpm run lint