Библиотека визуальных направлений · сентябрь 2026

Картотека дизайн-схем

Готовые open source схемы, которыми можно заменить дефолтный вид проекта — так же, как раньше заменялся нео-брутализм. Каждая карточка: чем это является, на чём собрано, живо ли ещё.

поддерживается архив / без поддержки стек

Нео-брутализм

5 проектов Исходный neobrutalism.dev больше не развивается; экосистема переехала в форки и порты.
Кнопка

neobrutalism.dev

Первоисточник схемы: жёсткие чёрные обводки, смещённая сплошная тень, кислотные заливки. Документация по-прежнему полезна как справочник токенов.

neobrutalism.dev/docs
не поддерживаетсяshadcn/ui
Retro UI

RetroUI

Сейчас основная замена: 50+ компонентов, 158+ блоков и шаблонов, 7 тем через переменные shadcn. Самый безопасный выбор, если нужен нео-брутализм в новом проекте.

retroui.dev · блог: /blog/neobrutalism-dev-alternative
поддерживаетсяReact + Tailwind + Radix/Base UI
Компонент

neobrutalism-components

Набор компонентов прямо поверх shadcn/ui, около 5.2k звёзд. Ставится в существующий проект без миграции.

github.com/ekmas/neobrutalism-components
живойReact + shadcn/ui
Vue / Svelte

neobrutalism-vue · neobrutalism-svelte

Порты той же схемы: Vue-реестр Tailwind-компонентов и версия поверх shadcn-svelte.

github.com/topics/neobrutalism
Vue · Svelte
Angular

ng-brutalism

Нео-брутализм для Angular на сигналах, zoneless, Tailwind v4. Редкий случай — большинство наборов только под React.

github.com/topics/neubrutalism
Angular 18+ · Tailwind v4

Пиксель и 8-бит

2 проекта Ближайший родственник брутализма: тоже жёсткие края, но игровая интонация.
START

8bitcn/ui

Ретро-компоненты с пиксельными границами и геймпадной логикой элементов, ~1.9k звёзд. Структура один в один как у shadcn/ui — можно подменять покомпонентно.

8bitcn.com · github.com/TheOrcDev/8bitcn-ui
поддерживаетсяNext.js + TS + shadcn/ui
PIXEL

Pixelact UI

Пиксель-арт реестр компонентов поверх shadcn/ui. Мягче и «игрушечнее» 8bitcn, больше цвета.

github.com/pixelact-ui/pixelact-ui
живойReact + shadcn/ui

Стекло

2 проекта Полная противоположность брутализму: размытие, прозрачность, мягкие тени. Помнить, что это же — верхняя строчка списка примет «ИИ-дизайна».
Панель

Glasscn UI

Библиотека компонентов shadcn/ui с glassmorphism-вариантами и дополнительными элементами. Совместима с обычным shadcn — стекло включается вариантом.

github.com/itsjavi/glasscn-ui
React + Tailwind
59 компонентов

shadcn-glass-ui-library

59 компонентов, 3 темы, заявлена нулевая миграция — ставится поверх существующего shadcn-проекта.

github.com/artyhoo/shadcn-glass-ui-library
React + shadcn/ui

Ретро-ОС и терминал

7 проектов Чистый CSS без React — подключается тегом и работает где угодно, включая статические страницы и отчёты.
readme.txt_ □ ×
Окно как в 1998-м

98.css · XP.css · 7.css

Три родственные библиотеки: интерфейсы Windows 98, XP и 7 — фаски, серый металл, системные диалоги. Хороши для инструментов и «служебных» страниц.

jdan.github.io/98.css · botoxparty.github.io/XP.css · khang-nd.github.io/7.css
живыечистый CSS
NES

NES.css · PSone.css

Консольная эстетика: NES.css — восьмибитная, PSone.css сделана по её образцу под PlayStation 1. Только CSS, без зависимостей.

github.com/nostalgic-css/NES.css
чистый CSS
> make build

TuiCss · terminal.css

TuiCss воспроизводит интерфейсы MS-DOS (синие панели, псевдографика), terminal.css — аккуратный моноширинный «терминальный» стиль для текстовых сайтов и документации.

Сводный список ретро-фреймворков: github.com/matt-auckland/retro-css
чистый CSS
aesthetic

aesthetic-css

Вейпорвейв-фреймворк: неоновые градиенты, сетка-перспектива, хромированный текст. Единственная схема в списке, которая полностью отказывается от сдержанности.

github.com/torch2424/aesthetic-css
чистый CSS
## awesome-css-frameworks

awesome-css-frameworks

Общий каталог CSS-фреймворков с указанием размера, лицензии и активности — отсюда удобно искать схему, которой ещё нет в этой картотеке.

github.com/troxler/awesome-css-frameworks
обновляетсясписок

Схемы как контекст для агента

2 репозитория Не библиотеки компонентов, а текстовые описания стиля, которые кладутся в проект и задают вид генерируемого кода.
# DESIGN.md — 73+ брендов

awesome-design-md

73+ готовых файла DESIGN.md, снятых с реальных сайтов: Linear, Stripe, Notion, Supabase, PostHog, Figma, Apple, Nike, Tesla, плюс ретро-веб вроде Dell 1996 и Nintendo 2001. Кладётся в проект — агент верстает в этом стиле. Модель-агностично.

github.com/voltagent/awesome-design-md
пополняетсяMarkdown
# 9 визуальных семейств

awesome-claude-design

Систематизирует девять визуальных направлений с референсами (список ниже) и отдельно перечисляет дефолты, которые стоит запрещать промптом: тиловый акцент везде, мигающие статус-точки, вложенные карточки, декоративные полоски слева, сетки из трёх фича-блоков.

github.com/rohitg00/awesome-claude-design
пополняетсяMarkdown

Где сравнивать

2 площадки Если нужен внешний аргумент, какая модель лучше справляется с визуальной задачей.

Design Arena

Слепое парное голосование по одинаковому промпту, Elo-лидерборды по категориям: сайты, UI-компоненты, геймдев, дата-виз, 3D. Названия моделей скрыты до голоса.

designarena.ai/leaderboard/code
обновляетсябенчмарк

WebDev Arena

То же самое, но задачи ближе к реальной фронтенд-работе, а не к «сделай красиво».

arena.ai/leaderboard
обновляетсябенчмарк