bauhaus-design-skill

Claude Skill для генерации фронтендов, постеров, дашбордов и веб-интерфейсов на основе принципов дизайна Баухаус и швейцарского интернационального типографического стиля.

Вдохновлён работами Йозефа Мюллера-Брокманна, Макса Билла, Яна Чихольда, Герберта Байера и Ласло Мохой-Надя.

Что делает скилл

При активации скилл инструктирует Claude создавать веб-интерфейсы по пяти ключевым принципам:

1. Математические сеточные системы — 12-колоночные (или 3/4/6) сетки как структурный каркас
2. Типографическая иерархия через масштаб — только гротески, одна гарнитура, математические пропорции
3. Цвет как информация — максимум 3 цвета, никаких градиентов и теней
4. Геометрическая абстракция — окружности, прямоугольники, диагонали как визуальный словарь
5. Асимметричный баланс — нецентрированные композиции, активное использование белого пространства

Установка

Claude Desktop / Claude Code

Скопируйте папку bauhaus-design-skill в директорию скиллов или установите файл .skill, если он упакован.

Вручную

Поместите папку туда, где конфигурация Claude сможет её найти, и убедитесь, что SKILL.md доступен как скилл.

Фразы-триггеры

Скилл активируется при упоминании:

• Bauhaus, Swiss design, International Typographic Style
• Grid systems, Müller-Brockmann, Max Bill, Jan Tschichold
• Constructivism, De Stijl-influenced UI
• «Clean modernist», «grid-based design», «Swiss poster»
• Neue Grafik, Akzidenz-Grotesk, Helvetica-era aesthetics

Примеры

Все примеры ниже сгенерированы Claude с использованием этого скилла.

Концертный постер (стиль Мюллера-Брокманна)

Концентрические дуги, типографика с выравниванием по левому краю, единственный красный акцент, диагональная линия напряжения.

Дашборд (светлая тема)

12-колоночная сетка, острые углы, никаких теней, синий акцент, табличные данные со встроенными столбчатыми диаграммами.

Дашборд (тёмная тема)

Редакционный макет (светлая тема)

Асимметричное разделение колонок 7:4, хронология в боковой панели, выносная цитата с акцентной рамкой, геометрический орнамент.

Редакционный макет (тёмная тема)

Поддерживаемые платформы

• Web (HTML/CSS/SVG): см. SKILL.md
• iOS (SwiftUI): см. IOS_ADAPTATION.md

Быстрый старт для iOS

Адаптация для iOS переводит пять принципов Баухауса в SwiftUI:

1. Сетка → LazyVGrid / Grid с BauhausTokens.gutter
2. Типографика → SF Pro, математическая шкала кегля (коэффициент 1.333)
3. Цвет → максимум 3 цвета, без градиентов, перечисление BauhausTokens
4. Геометрия → Canvas / Path / Shape (замена SVG)
5. Асимметрия → пропорциональные разбивки HStack, выравнивание .leading

Примеры для iOS

Постер / Hero

Крупный заголовок с геометрическим акцентом (концентрические окружности + диагональ), типографика по левому краю, единственная красная акцентная полоса.

Дашборд (светлая тема)

Карточки метрик в двухколоночном LazyVGrid, встроенные столбчатые диаграммы, отступы из BauhausTokens.

Дашборд (тёмная тема)

Та же структура, тёмная палитра. Никаких градиентов и материалов — только сплошные цветовые поля.

Редакционный макет

Асимметричный макет 7:5 с выносной цитатой (акцентная рамка) и боковой временно́й шкалой.

Список статей

Асимметричные строки списка 7:5, красные акцентные квадраты, метки дат в верхнем регистре.

Лицензия

MIT