Топ ИИ-сервисов для дизайна ваших сайтов: бесплатно

Вдогонку к предыдущему посту — вообще, сам ролик (и сайты, которые в нем упомянуты) собрал для меня агент, но вам так зашло, что я попросил Клод отдельно выписать для вас сами ресурсы, сохраняем:

Дизайн-система

styles.refero.design — больше двух тысяч разборов стиля реальных сайтов с цветами, шрифтами, отступами и готовым файлом DESIGN.md, который скармливаешь нейронке. Смотреть и копировать можно без регистрации.

ui.shadcn.com — бесплатные компоненты с открытым кодом. Это основа, из которой собираешь свою систему, и её можно тащить в коммерческий проект.

Свои цвета

tweakcn.com — редактор тем для shadcn с ползунками для цвета, скруглений, отступов и теней. Крутишь, пока не понравится, и забираешь готовую тему. Работает без регистрации. Через ИИ бесплатно можно сделать пять тем, дальше нужен Pro за $8 в месяц.

Референсы

mobbin.com — скриншоты реальных приложений и сайтов. Бесплатно открыта только часть, а полный доступ стоит от $10 в месяц при оплате за год.

Для сайтов есть бесплатная замена, lapa.ninja. Там больше семи тысяч лендингов, и все открыты.

Шрифты с кириллицей

fonts.google.com — все шрифты бесплатные, их можно ставить на коммерческий сайт и даже в логотип. Кириллица есть у 294 семейств: включи фильтр по языку, и останутся только они. Для старта попробуй Manrope, Onest, Golos Text, Inter и Unbounded.

Иконки

iconify.design — больше 300 тысяч иконок в 222 наборах, и лицензия у каждого своя, так что глянь её, прежде чем ставить.

solar-icons.vercel.app — иконки Solar в шести стилях. В коммерции можно, но автора (480 Design) нужно указать.

3dicons.co — объёмные иконки под лицензией CC0, ставишь куда угодно, даже не указывая автора.

Готовые блоки

21st.dev — больше 12 тысяч компонентов, и к каждому приложен промпт для нейронки. Бесплатно можно забрать два в день, дальше подписка от $6 в месяц при оплате за год.

Если лимит душит, бери ui.shadcn.com/blocks и magicui.design, оба бесплатные и с открытым кодом.

Витрина, ради которой стоило досмотреть ролик от агента:

storybook.js.org — бесплатная витрина, где цвета, шрифты и экраны проекта собираются в одном месте. На storybook.js.org/ai лежит готовый промпт, по которому агент сам ставит Storybook и собирает туда компоненты. ИИ-функции у них пока в тестовом режиме, а MCP-сервер работает только с React.

Я бы шёл так. Берёшь стиль в Refero, красишь тему в tweakcn, ставишь шрифт с кириллицей из Google Fonts, докидываешь иконки и блоки, а в конце просишь агента собрать всё в Storybook. Тогда видишь внешку целиком, а не кусками по экранам.

Сохрани пост, пригодится на следующем проекте. Вот так агент и ролик делает, и собирает для нас полезные подборки. Кайф же!