Ты не фронтендер если не мечтал о своём 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 умные люди уже всё написали. Часто использую для шлифовки.
Как-то так. Давно не писал, поймите, простите. Куча дел
