Месяц назад начал серьёзно использовать Claude Design — это AI-дизайнер от Anthropic в…
Месяц назад начал серьёзно использовать Claude Design — это AI-дизайнер от Anthropic в браузере. За месяц собрал на нём редизайн новостного портала, личный кабинет, админку и Telegram Mini App. Делюсь рабочим процессом — без лишней теории, только то что реально работает.
🎨 claude.ai/design — отдельный продукт, не путать с обычным чатом и не путать с artifacts. Под капотом Claude Opus 4.7 (самая сильная модель Anthropic). Включён в подписку Pro/Max/Team — отдельно платить не надо.
📐 ЧТО ЭТО — 5 ФАКТОВ
- Дизайн через диалог — каждое сообщение перерисовывает живой HTML/CSS canvas
- Под капотом Claude Opus 4.7, можно переключить на Sonnet/Haiku
- 7 встроенных режимов: Wireframe, Frontend design, Make a deck, Animated video, Interactive prototype, Tweakable, Export PPTX
- 8 форматов экспорта: ZIP-handoff, PDF, PPTX, Canva, standalone HTML, GitHub PR, ссылка
- Включено в Claude Pro/Max/Team — не отдельный продукт
🔁 WORKFLOW ЗА 4 ШАГА
- Промпт со структурой — контекст, задача, бренд, состав, адаптив, референсы. Не «сделай красивый» — описывай блоками.
- Итерации в чате — «hero темнее на 2 шага», «gap +50%», «hover на строки таблицы». Каждое сообщение перерисовывает canvas.
- Handoff to Claude Code — кнопка справа сверху, скачивается ZIP с HTML/CSS/JSX и README для агента.
- Claude Code переносит в проект — читает прототип как референс, использует существующие токены и компоненты, не копирует 1-в-1.
🛠 РЕАЛЬНЫЕ ПРОЕКТЫ — что я собрал за месяц
- news.hamidun.com — новостной портал: 9 desktop + 4 mobile экрана, AI-диалог в статьях, reading-UX, 6 языков
- @Jhamidun_newsbot — Telegram Mini App: 8 экранов 390×844, haptic feedback, pull-to-refresh, native MainButton
- «Тело худело» — лендинг и кабинет коуч-проекта: тёмный гламурный визуал, истории клиентов, тарифы и запись на поток
- techpred.online — лендинг конференции МФТИ «Сдвиг»: анимация, episodic-структура, регистрация
- Шаблоны обложек вебинаров — один HTML с CSS-переменными, подставляешь данные → уникальная обложка за секунду
- Шаблоны КП — брендовая HTML-вёрстка с гибкими блоками: услуги, кейсы, цены, команда
- Карточки для каруселей в канал — этот пост сделан в этом же шаблоне
✅ 5 ПАТТЕРНОВ ПРОМПТОВ КОТОРЫЕ ЭКОНОМЯТ ЧАСЫ
- Дизайн-система ПЕРВОЙ — сначала «создай tokens.css», потом экраны на этих токенах. Иначе каждый экран в своём стиле.
- Несколько вариантов сразу — «3 dashboard'а: карточный · список с metrics · split с sidebar» — выбираешь, дёшево.
- Референсы скриншотами — drag-drop Linear/Stripe/Vercel → «как тут, но с нашими токенами». AI отлично копирует стиль.
- Конкретика в итерациях — не «сделай круче», а «spacing +50%», «hero на 2 шага темнее», «кнопку в --cyan».
- Multi-screen в одном проекте — лендинг + кабинет + админка серией = единые токены и общий handoff.
⚠️ АНТИ-ПАТТЕРНЫ — ЧТО НЕ ДЕЛАТЬ
- Промпт «сделай красивый dashboard» — получишь generic, теряешь время на переделки
- Делать 10 экранов перед первым handoff — лучше 1-2, проверить перенос, потом продолжать
- Игнорировать README в bundle — там обычно ключевая инструкция от агента
- Копировать divы прототипа в React 1-в-1 — прототип это референс, не production-код
- Создавать новые токены вместо существующих в проекте — фрагментирует дизайн-систему
📦 ЧТО В HANDOFF-БАНДЛЕ
В ZIP: README для агента (читать ПЕРВЫМ) · главный HTML мокапа · styles.css с токенами · components.jsx (атомы) · chrome.jsx (sidebar/topbar) · uploads/ с референсами.
Бонус: URL мокапа стабильный — можно вернуться, доработать, сделать новый handoff. Сохраняй в репо рядом с bundle.
🎯 Если этот пост наберёт 50 реакций — соберу подробный гайд-инструкцию с разбором проектов, рабочими промптами и anti-паттернами. Возможно, проведу живой вебинар с примерами в реальном времени.
🤝 — оба варианта
Если есть конкретный экран или флоу который хочется разобрать первым — напишите в комменты, соберу список приоритетов.
➡️ Готовим ИИшницу ⬅️
#ИИ #ClaudeDesign #дизайн #anthropic
Оригинал: пост в Telegram · подписаться на «Готовим ИИшницу»