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