Бесплатные источники дизайна, чтобы сайт от ИИ-агента не выглядел шаблонным

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

1. Откройте mobbin.com и соберите несколько скриншотов приложений в похожем духе. Это референс композиции и настроения, а не готовый код.
2. На styles.refero.design найдите стиль, близкий к проекту, и скопируйте его DESIGN.md. Это текстовый файл с описанием дизайн-системы реального сайта: цвета, типографика, отступы, компоненты. Формат подходит для Cursor, Claude Code, Codex, v0 и Lovable.
3. Если начинаете с компонентов, возьмите базу ui.shadcn.com. Цвета и скругления углов удобнее менять в визуальном редакторе tweakcn.com, чем править CSS-переменные руками.
4. Подберите шрифт с кириллицей на fonts.google.com или fontshare.com.
5. Плоские иконки берите в iconify.design: там тысячи наборов в одном формате, или в бесплатном наборе Solar Icons. Для объёмного акцента подойдёт 3dicons.co.
6. Готовый блок (первый экран, тарифы, форму) заберите с 21st.dev. Он ставится поверх shadcn-проекта командой npx shadcn add "https://21st.dev/r/...". Если блоков нужно много, на бесплатном плане сбор растянется на несколько дней.
7. Сложите DESIGN.md, скриншоты, шрифт и иконки в один промпт или положите рядом с CLAUDE.md (файл с инструкциями для агента в проекте). В промпте явно попросите агента держаться этих материалов: файл, который просто лежит в проекте, агент не учтёт.

Storybook в этот набор не входит. Это инструмент для разработки и документирования компонентов, материала для дизайна он не даёт.

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

После прогона агента посмотрите на страницу: акцентный цвет больше не чёрно-белый, шрифт не Inter, иконки не только из стандартного набора Lucide. Хотя бы один блок перекликается с референсом из Mobbin. Если сайт не изменился, агент не подхватил материалы: явно сошлитесь в промпте на DESIGN.md и остальные файлы.

Ссылки

• Mobbin: скриншоты экранов реальных приложений.
• Refero Styles: дизайн-системы реальных сайтов, DESIGN.md копируется бесплатно.
• shadcn/ui: открытая база компонентов.
• tweakcn: визуальный редактор тем для shadcn/ui.
• Google Fonts: бесплатные шрифты, в том числе с кириллицей.
• Fontshare: ещё один бесплатный каталог шрифтов.
• Iconify: поиск по сотням открытых наборов иконок.
• 3dicons: бесплатные объёмные 3D-иконки.
• Solar Icons: бесплатный набор иконок; адрес на Vercel не похож на официальный домен набора.
• 21st.dev: готовые блоки на React, Tailwind и shadcn.

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