Сайт в одиночку. Инструменты, которые заменяют команду.
Подборка сервисов для насмотренности и скорости: дизайн-системы, готовые компоненты, анимации. И два подхода, как передать дизайн в Claude Code.
Когда я собирал свой первый сайт, самым интересным был вопрос: а как вообще рождается дизайн-система? Откуда берутся цвета, шрифты и отступы, чтобы всё выглядело цельно, а не как случайный набор блоков?
Оказалось, всё проще, чем кажется. Есть три подхода, и все три не требуют дизайнера.
Извлечь
Понравился чей-то сайт? Скинь его в Claude Code и попроси извлечь дизайн-систему: палитру, типографику, стиль кнопок. Получаешь файл и собираешь всё по нему.
Взять готовое
Есть каталоги с сотнями проработанных дизайн-систем. Копируешь один Markdown-файл, вставляешь в Claude Code и просишь: интегрируй. Дизайнер не нужен.
Собирать из блоков
Покажи ИИ библиотеку готовых компонентов, например shadcn/ui или Tailwind, и попроси использовать её. Кнопки, формы и секции уже нарисованы.
Всё, что ниже, в первую очередь для насмотренности. Чем больше хороших решений ты видел, тем точнее объясняешь ИИ, чего хочешь.
Дизайн-система и насмотренность
С этого всё начинается: сначала смотришь, как делают сильные, потом забираешь их систему себе в проект.
Dribbble
Галерея работ дизайнеров со всего мира: интерфейсы, лендинги, айдентика. Вводишь тему и смотришь, как её решали сильные ребята. Понравившийся референс можно скинуть скриншотом в Claude Code.
dribbble.com→Дизайн-системаGetDesign.md
Каталог готовых дизайн-систем в одном Markdown-файле: цвета, типографика и отступы сотен известных продуктов, от Apple до Tesla. Копируешь файл в проект, и ИИ держит единый стиль.
getdesign.md→Дизайн-системаDesignMD.ai
Сообщество дизайн-систем для тех, кто собирает продукты с ИИ. Скачиваешь файл DESIGN.md, кладёшь в корень проекта, и Claude стилизует приложение по нему.
designmd.ai→Дизайн-системаRefero Styles
Каталог из 2000+ дизайн-систем реальных продуктов (Apple, Notion, Vercel, Cal.com и других), уже разобранных в формате, понятном ИИ. Берёшь готовый DESIGN.md, отдаёшь в Claude Code — и он держит стиль выбранного продукта. Есть и свой MCP, чтобы ИИ изучал чужие экраны и потоки перед сборкой.
styles.refero.design→Готовые компоненты
Не изобретай кнопку, она уже нарисована. Покажи ИИ библиотеку и попроси собирать из готовых блоков.
shadcn/ui
Библиотека компонентов на React: кнопки, формы, таблицы, диалоги. Код копируется прямо в проект, поэтому его легко менять под себя. Стандарт де-факто в ИИ-разработке.
ui.shadcn.com→КомпонентыTailwind CSS Plus
Официальная библиотека готовых компонентов и шаблонов на Tailwind: секции, формы, дашборды. Говоришь ИИ «используй этот блок» и не собираешь вёрстку с нуля.
tailwindcss.com/plus→Компоненты21st.dev
Каталог готовых UI-паттернов с кодом: герои, прайсинги, меню. Нашёл блок, скопировал код или промпт, вставил в Claude Code.
21st.dev→Анимации и вау-эффекты
Аккуратная вёрстка продаёт доверие, а анимация добавляет тот самый дорогой вид. Главное не переборщить.
Magic UI
Анимированные компоненты и секции для лендингов: бегущие ленты, светящиеся карточки, эффекты текста. Тот самый вау-слой поверх аккуратной вёрстки.
magicui.design→АнимацииAceternity UI
Набор эффектных компонентов с анимациями для React и Next.js: 3D-карточки, параллаксы, живые фоны. Копируешь код и получаешь дорогой вид за минуты.
ui.aceternity.com→Скорость и данные
Когда нужно быстро: готовые промпты для лендингов и инструмент, который превращает чужие сайты в материал для ресёрча.
MotionSites
Библиотека готовых промптов и анимированных секций. Копируешь промпт, вставляешь в ИИ и получаешь красивый лендинг за минуты.
motionsites.ai→ДанныеFirecrawl
Превращает любой сайт в чистые данные для ИИ. Пригодится для ресёрча: изучить структуру конкурентов или собрать материал для своего сайта.
firecrawl.dev→Инструменты будут меняться, это нормально. Насмотренность и умение точно ставить задачу ИИ останутся с тобой.
Спасибо, что дочитал. До скорых встреч.
