Создаём маркетинговый сайт без дизайнера: 5 практик с Open Design и Claude Code

Вы когда-нибудь пробовали объяснить дизайнеру, что «кнопка должна быть чуть левее и бирюзовее»? А потом ждать три дня, две правки и получить вариант, который всё равно не нравится. Стартапы и инди-команды тратят на это недели и бюджеты, которые могли бы уйти на развитие продукта.

Хорошая новость: в 2026 году у нас есть инструменты, которые убивают эту боль. Open Design — экосистема открытых дизайн-систем с готовыми компонентами, и Claude Code — ИИ-агент, который пишет код по вашему описанию. Вместе они превращают создание маркетингового сайта в конвейер: вы описываете, что хотите, а Claude Code берёт компоненты из Open Design и собирает их на лету.

Ниже — пять практик, которые я обкатал на реальных проектах. Они сэкономят вам не только деньги, но и нервные клетки.

Практика 1. Фундамент: брать чужое, выдавать за своё (легально)

Первый шаг — перестать изобретать велосипед. Open Design (например, opendesign.dev) даёт готовые UI-компоненты: кнопки, карточки, сетки, навигацию. Всё с открытой лицензией, адаптировано под Tailwind CSS 4.x (на май 2026 это стабильный стандарт).

Пример: вместо того чтобы вручную размечать flex gap-4 items-center, достаточно в промпте написать: «Создай hero-секцию в стиле Open Design с заголовком, подзаголовком и двумя кнопками». Claude Code подгрузит нужные компоненты.

Совет: не кастомизируйте всё сразу. Сначала запустите сайт на базовой дизайн-системе, потом — итерации. Иначе рискуете утонуть в микроправках, как это бывает с ручным наймом дизайнера.

Практика 2. Дизайн-токены в Markdown: язык, понятный и человеку, и ИИ

Здесь я нарушаю классический подход «сначала Figma, потом код». Вместо Figma — файл theme.md в вашем репозитории. Claude Code читает Markdown нативно, и это радикально ускоряет процесс.

Структура такого файла:

# Дизайн-токены для сайта ProductHunt-стартапа

## Цвета
- primary: #4F46E5 (Indigo 600)
- secondary: #10B981 (Emerald 500)
- background: #FFFFFF
- text: #1E293B (Slate 800)

## Типографика
- font-family: 'Inter', sans-serif
- h1: 3rem / 1.2 / bold
- body: 1rem / 1.5 / regular

## Отступы
- section-padding: 4rem 1rem
- card-gap: 1.5rem

Когда этот файл лежит в корне проекта, вы добавляете в промпт: «Учти дизайн-токены из theme.md, создай компонент Features». Claude Code читает файл, применяет значения и генерирует код, где каждый класс Tailwind соответствует токену.

Кстати, именно этот приём я подсмотрел в статье Секреты создателя Claude Code. Там же автор рассказывает, как он организует репозиторий для ИИ-агентов — советую.

Практика 3. Одна секция — один промпт: методика точной сборки

Многие пытаются скормить Claude Code задачу «сделай весь лендинг» и получают нечто несвязное. Модели всё ещё тяжело удержать контекст из 20 разных блоков. Выход — декомпозиция.

Я разбиваю сайт на логические куски:

• Hero
• Features (3 колонки)
• How it works (steps)
• Testimonials
• CTA + Footer

Каждая секция — отдельный вызов Claude Code. В промпте я даю:

• ссылку на theme.md (через @theme.md в файловом режиме);
• ссылку на документацию Open Design (через URL);
• описание на русском или английском — что должно быть внутри.

Пример реального промпта из моего проекта:

Создай секцию "How it works" из 3 шагов.
Каждый шаг: иконка (Emoji или SVG), заголовок до 3 слов, описание до 2 строк.
Фон секции — серый (slate-50), шаги — белые карточки с тенью.

Используй компонент Card из Open Design.
Учти дизайн-токены: primary цвет для нумерации, body-шрифт из theme.md.

Результат: чистый Tailwind-код, который не нужно переписывать. Если что-то не так — правите промпт и регенерируете.

Этот подход перекликается с методикой из промпт-инжиниринга для не-инженеров — там разложена техника «одна задача — один промпт».

Практика 4. Мобильная адаптация в один проход

Обычно адаптив — это отдельная итерация: дизайнер рисует mobile, верстальщик переписывает. С Claude Code можно сделать это сразу, если правильно задать промпт.

Ключ — в начале сессии объявить, что все компоненты должны быть responsive. Добавьте в theme.md раздел:

## Responsive breakpoints
- sm: 640px
- md: 768px
- lg: 1024px
- base: mobile-first

И в промпт: «Следуй mobile-first из theme.md. На мобильных — одна колонка, на desktop — три». Claude Code понимает классы вида grid grid-cols-1 md:grid-cols-3 и автоматически их расставляет.

В этом плане эксперимент Claude Code vs ручная разработка показал, что ИИ-агент справляется с адаптивом быстрее разработчика среднего уровня. Но финальная доводка всё равно остаётся за человеком.

Практика 5. Итеративный рефакторинг: когда сайт уже есть, но хочется красивее

Вы собрали первую версию за вечер. Сайт работает, но вид — «франкенштейн». Тут на помощь приходит Claude Code в режиме редактирования. Вместо того чтобы переписывать всё вручную, вы даёте задание: «Приведи все секции к единому стилю: отступы 4rem сверху/снизу, заголовки через Inter bold 2rem, все ссылки — primary цвет».

Claude Code откроет файлы, найдёт несоответствия и исправит их. Это работает, потому что модель запомнила theme.md и Open Design. Рефакторинг занимает минуты, а не часы.

Типичная ошибка: просить «сделай красиво». Модель не понимает эстетику. Вместо этого давайте конкретные метрики: «увеличь контраст текста на 20%», «замени скругления с rounded на rounded-xl».

Кстати, про разницу подходов — если вы сомневаетесь, стоит ли использовать Claude Code или альтернативы, почитайте сравнение Claude Code vs OpenCode. Там разобраны кейсы, когда один инструмент выигрывает у другого.

Пошаговый план: создаём лендинг за день

На основе пяти практик вот реальный сценарий, который я повторяю для MVP-сайта любого стартапа:

1. Создайте репозиторий с Next.js 14 (апп-роутер) и Tailwind CSS 4. Закиньте туда Open Design как npm-пакет.
2. Напишите theme.md с дизайн-токенами (цвета, шрифты, отступы).
3. Запустите Claude Code в терминале — достаточно команды claude с флагом --project.
4. Скармливайте промпты по одной секции. Каждый результат сохраняйте в отдельный компонент (Hero.tsx, Features.tsx и т.д.).
5. Соберите всё в layout и прогоните через DevTools.
6. Дайте Claude Code команду на рефакторинг — привести к единому стилю, проверить контрастность, добавить hover-эффекты.
7. Задеплойте через Vercel или Cloudflare Pages — там есть бесплатный хостинг с авто-DNS.

Всё. Через 6–8 часов у вас готовый сайт, который выглядит как работа дизайн-студии. Если нужен пример такого процесса, смотрите вайбкодинг на практике — там похожий кейс с тремя AI-сервисами.

Возможные ошибки и как их избежать

За год работы с Claude Code и Open Design я наступил на эти грабли, чтобы вы не наступили:

• Перегенерация — если править промпт 10 раз, модель может «сломать» соседние компоненты. Лучше пересоздавать блок заново, а не чинить.
• Копирайт — Open Design обычно MIT, но сами тексты и изображения вы должны генерировать сами или брать из легальных источников. Claude Code не проверяет лицензии картинок.
• Зависимость от версий — в 2026 году Open Design постоянно обновляется. Если используете конкретную версию пакета, укажите её в package.json, иначе при очередном npm update всё сломается.
• Не кладите всё в один промпт — модель может забыть предыдущие указания. Декомпозиция — ваше всё.

Если вы новичок в веб-дизайне, но хотите понимать, что генерирует Claude Code, рекомендую пройти курс по HTML и CSS на Skillbox — база лишней не бывает. А чтобы быстро адаптировать дизайн-системы без кода, посмотрите курс по Tilda — он научит собирать сайты визуально, а навыки можно конвертировать в промпты для Claude Code.

Блиц-ответы на частые вопросы

Мир фронтенда меняется — в 2026 году дизайнер для простого маркетингового сайта становится опцией, а не необходимостью. Open Design и Claude Code дают вам суперсилу: вы описываете словами то, что хотите, и получаете чистый код. Осталось только отключить перфекционизм и запустить сайт сегодня, а не «когда наймём дизайнера».

P.S. Если у вас остались вопросы — пишите в комментариях. Я собираю самые частые и сделаю продолжение с разбором конкретных промптов.

Подписаться на канал