𝕿𝖛𝖆𝖘𝖙𝖆𝖗

Самый интеллектуальный frontend-дизайн-скилл для Claude Code

Назван в честь ведийского божественного мастера — создателя инструментов для богов

Введите /design landing page for a SaaS product и наблюдайте, как Tvastar:
запускает цветовую науку · выбирает из 18 библиотек · применяет принципы движения Disney
проверяет WCAG · генерирует production-код · прогоняет 86 правил линтинга · ждёт вашего подтверждения

Установить за 30 секунд → · Команды · Библиотеки · Примеры

Проблема AI-генерируемого UI

Каждый AI-инструмент производит один и тот же дизайн: шрифт Inter, индиго-градиент, три скруглённые карточки, никаких эффектов курсора, Aurora везде вне зависимости от контекста. Это выглядит как AI-работа — потому что так и есть: одни и те же дефолты для каждого проекта.

Tvastar работает иначе. Он читает ваш реальный стек, проверяет коэффициенты контрастности, подбирает разные компоненты для Y2K-социальной сети, финтех-дашборда и люксового редакционного сайта, и производит код, который проходит реальные аудиты доступности. Он знает, что params — это Promise в Next.js 15. Он знает, что Aurora не работает на светлых фонах. Он знает, что разница между ease-out и linear имеет значение.

«Разрыв между тем, что производит AI, и тем, что получает награды — это одно: дизайн-интеллект. Tvastar — этот слой.»

Установка

Одна команда

# Клонировать
git clone https://github.com/yourusername/tvastar.git
cd tvastar

# Установить
bash install.sh

Вручную

# Создать директорию для скиллов
mkdir -p ~/.claude/skills

# Скопировать скилл
cp -r ui-design-intelligence/ ~/.claude/skills/

# Проверить
python3 ~/.claude/skills/ui-design-intelligence/scripts/test_all.py

Windows

# Сначала установить кодировку (требуется для Unicode-вывода)
$env:PYTHONIOENCODING = "utf-8"

# Затем установить обычным способом — install.sh работает в Git Bash / WSL
bash install.sh

Требования: Python 3.10+ · Claude Code (любая версия)
Не требует npm install. Без конфигурационных файлов. Работает сразу.

Использование

Откройте Claude Code в директории вашего проекта. Это весь процесс настройки.

# Базовый — Tvastar читает ваш стек и делает всё остальное
/design landing page for a SaaS product

# Конкретная эстетика
/design Y2K social media platform

# С указанием типа страницы
/design fintech analytics dashboard

# Точечные команды
/review HeroSection.tsx
/ship
/component PricingCard
/a11y src/components/

Команда /design автоматически определяет ваш стек — версию Tailwind, установленные библиотеки, существующие цветовые токены — и строит решение вокруг того, что у вас уже есть.

Что происходит при вводе /design

Вы подтверждаете дизайн-план до того, как будет написана хоть одна строка кода.

18 компонентных библиотек

Tvastar знает, когда использовать каждую. Не просто «react-bits или aceternity» — правильный компонент из правильной библиотеки для каждого из 14 слотов.

Уровень 1 — Основа

Уровень 2 — Визуальный WOW (1-2 на дизайн)

Уровень 3 — Секционные блоки

Уровень 4 — Данные и формы

Уровень 5 — Специфичные для фреймворков

24 профиля дизайн-стилей

Каждый стиль имеет собственные списки компонентов, антипаттерны и логику выбора. Tvastar производит совершенно разный результат для каждого:

Встроенная наука доступности

Tvastar не просто «проверяет контрастность». Он понимает цветовую науку:

• WCAG AA/AAA — автоматическая проверка всех пар текст/фон
• Цветовые пространства — работает в OKLCH для перцептивно равномерных палитр
• Тёмный режим — генерирует семантические токены, которые работают в обоих режимах
• Фокус-менеджмент — правильные focus-visible стили для каждого компонента
• ARIA-паттерны — корректная разметка для диалогов, меню, вкладок

86 правил линтинга

После генерации кода Tvastar прогоняет 86 правил, сгруппированных по категориям:

Критические проблемы исправляются автоматически. Остальные выводятся с объяснениями.

Команды

Примеры

SaaS лендинг

Tvastar выберет: Magic UI BentoGrid для фич · shadcn/ui для форм · Tremor для метрик · минималистичную палитру с проверкой WCAG

Y2K социальная платформа

Tvastar выберет: Animata SplashCursor · Magic UI RetroGrid · Cult UI DynamicIsland · кислотную палитру с ретро-типографикой

Финтех дашборд

Tvastar выберет: Tremor для всех графиков · shadcn/ui DataTable · нейтральную профессиональную палитру · строгое соответствие WCAG AA

Структура проекта

Лицензия

MIT — используйте свободно в коммерческих проектах.

Назван в честь Тваштара (Тваштри) — ведийского божественного мастера,
кующего инструменты и оружие для богов

Создавайте красивое. Создавайте доступное. Создавайте быстро.