Четыре сайта, которые дают ИИ-кодеру стиль, анимации и фон

Как повторить

1. Откройте styles.refero.design и найдите дизайн-систему по названию бренда, настроению или цвету. Каждый из этих параметров ищется отдельно.
2. Откройте карточку стиля. В ней цвета, шрифты, отступы, компоненты и файл DESIGN.md, где весь стиль описан текстом для ИИ-кодера.
3. Скопируйте DESIGN.md в начало промпта и после него просите сгенерировать интерфейс.
4. За анимированными блоками (навбары, карусели отзывов, Dynamic Island) зайдите на cult-ui.com → Docs → нужный компонент и скопируйте команду установки. Компоненты ставятся как в shadcn/ui, поэтому он должен быть настроен в проекте. Например:

pnpm dlx shadcn@latest add https://cult-ui.com/r/dynamic-island.json

Команда кладёт код компонента прямо в ваш проект, его можно свободно править. Бесплатны 78 базовых компонентов по лицензии MIT. Ещё 129+ блоков и шаблонов входят в Pro-версию с разовой оплатой 129–179 долларов.

5. Для анимированного 3D-градиентного фона откройте shadergradient.co, настройте параметры в браузере, скопируйте сгенерированный код или ссылку и вставьте на сайт. Писать WebGL-шейдер (код графики для браузера) вручную не нужно.
6. Если нужен целый сайт с базой данных и бэкендом (серверной частью), в Manus.im откройте Agent → New task и опишите сайт текстом. Сервис платный, его рекомендация отмечена метками #ad и #manuspartner, поэтому независимой её считать не стоит.

Как проверить результат

Признак того, что DESIGN.md сработал: в интерфейсе появились цвета и шрифты из файла, а стандартный индиго из Tailwind исчез. Компонент Cult UI должен лечь в папку components/ui/ вашего проекта. Если команда вместо этого добавила npm-пакет в package.json, установка прошла неправильно. Если градиент на сайте вышел статичным, значит, анимацию не включили перед экспортом.

Ссылки

• Refero Styles: библиотека дизайн-систем с файлами DESIGN.md.
• Cult UI: анимированные компоненты с командами установки.
• ShaderGradient: редактор 3D-градиентного фона с экспортом кода.
• Manus: платный агент, который собирает сайт с бэкендом по текстовому описанию.

Источник: buildingwiththane, Instagram Reels.