Claude Code
для дизайнеров

Claude Code в 2026 — это не «AI-помощник», а полноценный напарник-сеньор, который пишет 80% твоего кода. Для дизайнеров без бекграунда в программировании это переломный момент: впервые можно делать продакшен-сайты от Figma до прода, не зная PHP, React или Node.js на уровне сеньора. Достаточно понимать принципы и уметь говорить с Claude.

Что такое Claude Code и почему именно он

Claude Code — это терминальный CLI от Anthropic, который умеет работать с файлами твоего проекта. Не просто отвечать на вопросы в чате, а напрямую редактировать код, создавать файлы, запускать команды, тестировать. Альтернативы — Cursor (IDE-форк VS Code), GitHub Copilot, ChatGPT Code Interpreter. Я предпочитаю Claude Code по трём причинам:

• Лучшее понимание контекста. Claude Sonnet 4.5 держит 200k токенов контекста — можно загрузить весь проект и обсудить архитектурные решения.
• Качество кода. Меньше «галлюцинаций», лучшая типизация, грамотная работа с edge cases.
• Прозрачность. Видно каждое действие Claude — какой файл редактирует, какую команду запускает. Никаких «магических» изменений.

Установка и настройка за 10 минут

Все шаги для macOS / Windows / Linux одинаковые:

1. Зарегистрируй аккаунт на claude.ai (Pro-подписка — 20$/мес, окупается за один проект)
2. Установи Node.js (если ещё нет): node --version должен показать v18+
3. В терминале: npm install -g @anthropic-ai/claude-code
4. Авторизуйся: claude login — откроется браузер, подтверди вход
5. Перейди в папку проекта: cd path/to/project
6. Запусти: claude — откроется интерактивная сессия
7. Дай Claude задачу — например, "посмотри проект и расскажи структуру"

Как писать промпты, чтобы Claude понимал

Это главный навык, который отличает джуна от сеньора в работе с AI. Хороший промпт = хороший код. Плохой промпт = мусор + 5 итераций переделок.

Правило 1: давай контекст

Плохо: «Сделай мне форму». Хорошо: «Сделай форму записи на курс: имя (text), email (email), telegram-ник (text), всё required. Submit — открывает mailto с собранными полями. CSS в едином стиле с уже существующим .brief-sheet, использует те же CSS-переменные --amber, --txt. Не используй React или Vue — только vanilla JS.»

Правило 2: ссылайся на файлы

Claude видит твой проект. Используй это: «Посмотри как сделана модалка #brief в portfolio.js (строки 200-500) и сделай похожую модалку #enroll, но с другими полями: ...» — Claude сам прочитает указанный код и сделает в том же стиле.

Правило 3: показывай примеры

Если у тебя есть макет — пришли скриншот через clipboard. Claude видит изображения и читает их детально. «Сделай хиро-блок как на этом скриншоте» работает в 10 раз лучше, чем «сделай красивый хиро».

Правило 4: будь конкретен в стиле

Указывай: «Vanilla HTML/CSS/JS, без фреймворков», «Stack: Next.js 14 App Router», «Strictly TypeScript», «Tailwind с моими переменными в tailwind.config.js». Без этого Claude по умолчанию выберет React + Tailwind, что часто не подходит.

Workflow разработки сайта от Figma до прода

Типовой цикл, как я работаю над лендингом за 50 000 ₽ (примерно 14 часов):

1. Час 1-2: Финальный макет в Figma. Auto Layout, токены, переменные, состояния. Claude любит структурированные макеты.
2. Час 3: Прошу Claude инициализировать проект: claude → «Создай vanilla HTML/CSS/JS проект с index.html, styles.css, script.js. Используй CSS Custom Properties. Подготовь к деплою на Vercel.»
3. Час 4-6: Передаю Claude скриншоты секций по одной. «Сделай hero-секцию как на скрине. Шрифты: Fraunces italic для заголовков, DM Sans для текста. Брейкпоинт 780px.»
4. Час 7-9: Интерактив. «Добавь scroll-snap по секциям. На .work-card сделай glitch-эффект при ховере. Используй CSS-only решения где возможно.»
5. Час 10-11: SEO. «Добавь Schema.org Article + BreadcrumbList. Сгенерируй OG-картинку 1200×630 как SVG inline.» Claude напишет JSON-LD.
6. Час 12-13: Деплой. «Подключи Vercel CLI, деплой на превью, потом на prod. Покажи мне deployment URL.»
7. Час 14: QA — прохожу по сайту, ищу баги. Каждый баг = один промпт «Исправь X в файле Y».

Типичные ошибки новичков

Ошибка 1: слепо принимать код Claude

Claude — не всезнайка. Иногда он пишет лишнее, иногда — устаревшее, иногда — просто неправильное. Если ты не понимаешь, что Claude написал, ты не сможешь это отлаживать через 3 месяца, когда клиент попросит правку. Читай каждую строку. Если непонятно — спрашивай Claude же: «Объясни эту функцию построчно».

Ошибка 2: один гигантский промпт

Плохо: «Сделай мне весь сайт со всеми секциями, формой, авторизацией, бекендом и деплоем». Хорошо: «Сначала сделай только hero. Потом обсудим следующее.» Разбивай работу на маленькие итерации. Claude качественнее на маленьких задачах.

Ошибка 3: игнорировать архитектуру

Если изначально позволить Claude писать «как пишется» — через месяц проект превратится в спагетти. Каждые 2-3 часа делай ревью: «Покажи структуру проекта. Что можно отрефакторить?» — и обсуждай.

Ошибка 4: не делать коммиты часто

Claude иногда ломает рабочий код. Если ты не делал коммит за последние 2 часа — можешь потерять день работы. Коммить каждую завершённую микрозадачу. «Сделал hero — коммит. Сделал navigation — коммит». Используй git как safety net.

Что дальше после Claude

Освоить Claude — это начало. Дальше:

1. Vercel и инфраструктура

Деплой на Vercel — за минуты. Подключение домена, env vars, Edge Functions. Если умеешь работать с Vercel — можешь сделать любой статический или React-сайт.

2. Бэкенд по необходимости

Vercel Functions + Resend для email + Supabase для DB — этого хватает на 80% продуктов. Изучай только когда понадобится.

3. Дизайн-системы под код

Чтобы Claude генерировал код, который ложится в твою систему, нужна правильная Figma: токены, переменные, Auto Layout. Это другой уровень Figma-навыков.

4. SEO + аналитика

Schema.org, OG-теги, Core Web Vitals, GA4. Claude умеет всё это писать, если знать, что просить.

Итого

Claude Code в 2026 — must-have для любого, кто делает сайты. Освоить базу можно за неделю, выйти на коммерческий уровень — за 2-3 месяца. Но без UI/UX-базы это бесполезно: AI напишет код, а нужный код — это другое умение.

Если у тебя есть дизайн-база и желание выйти на новый уровень — давай учиться вместе. Записывайся на курс, разберём твою задачу 1-на-1.