Ты не фронтендер если не мечтал о своём uikit

Дальше поймёте смысл заголовка. Вот ссылка на мой алгоритм как создать дизайн через claude design.

А сейчас
Хочу потрещать про то, как claude code натянул дизайн из claude design!

А натянул он very-very bad. Да, клодик сделал pixel perfect интерфейс за что дадим ему 5 очков. Однако если не объяснить как лучше натянуть дизайн llm пойдёт по пути наименьшего сопротивления и сделает так как сделано в статике от claude-design через inline style, без семантики, примитивов и всех лучших практик написания компонентов))

Сначала вводные
У меня есть один образовательный pet-проект с ai обёрткой для изучения алгоритмов на котором оттачиваю технологии. Может когда-нибудь залью его на сервак но пока столько работы, что ну его нахер

Там такой стек: next.js, tailwind, radix, shadcn/ui.

Фу, скажите, tailwind:) Да, css на классах полная дичь, но если семантически по bem сделать правильно, то в будущем можно относительно легко мигрировать на что-нибудь другое, а пока это идеальный инструмент для старта, который стал де-факто стандартом для нейронок, которые легко с этим инструментарием работают.

Как будем улучшать
– нужно убрать inline-style
– вынести примитивы в @shared/ui
– построить примитивы на базе существующих uikit
– заменить самописные примитивы
– взять от tailwind семантику
– от БЭМ концепцию блок/элемент/модификатор === Card/CardHeader(CardContent,CardFooter)/variant(size/state/disabled)
– можно вкрутить FSD (но в next.js своя иерархия, лучше взять только идею взаимодействия между разными слоями)
– добавить дизайн токены
– вкрутить привычный code-style

и ещё куча всего остального, что будет уже не таким важным после всех этих штук.

Если обобщить
Надо построить свой uikit внутри продукта. Между прочим — мечта каждого фронтендера! Правда так было раньше, сейчас, наверное, уже нет. Времена, когда uikit создаёт целая команда уходят в прошлое. Хотя знаете, сделать нормальную кнопку, которая предусмотрит все варианты использования никакая нейронка не сделает, только под чутким руководством человека.

Так вот
Потрещал с chatgpt — сессия диалога кому надо. Сразу пардон за не образованность.

С ним собрали промт.

набор инструментов получился таким

shadcn/ui - библиотека готовых компонентов
radix ui - примиты, на которых построены компоненты shadcn/ui
CVA — варианты компонентов
clsx/cn - утилита для объединения классов
lucide icons — иконки

формула разработки компонента выглядит так

Tailwind CSS utilities
        +
CSS variables / design tokens
        +
cva variants
        +
cn helper
        +
Radix UI / Headless primitives для сложного поведения
        +
наши shared/ui компоненты
        +
продуктовые компоненты поверх shared/ui

Потом взял промт и пошёл в superpowers.
За пару вечерков на выходных компоненты стали выглядеть достойно, хоть code-style оставлял желать лучшего. Его я улучшил потом, взяв наработки с бота.

А ещё нашёл skill, который, по сути, описывает мои хотелки. Я сделал неправильно и пошёл изобретать велосипед, но ни в чём себя не виню, потому что не знал какой стек использовать под мою хотелку.
Однако теперь понимаю, что для radix умные люди уже всё написали. Часто использую для шлифовки.

Как-то так. Давно не писал, поймите, простите. Куча дел