Прототип посадочной страницы
Берём черновик из модуля 4 и превращаем его в рабочий HTML-прототип с помощью Stitch, Claude и MCP-сервера. Никаких навыков вёрстки не нужно.
Работающую HTML-страницу, которую можно открыть в браузере, показать команде и передать разработчику — не макет в Figma, а готовый прототип на реальном контенте вашей клиники.
Зачем прототип, а не макет
Обычный путь: маркетолог пишет ТЗ → дизайнер делает макет в Figma → разработчик верстает. Три итерации, две недели, потеря смысла на каждом переходе.
Наш путь: готовый текст из модуля 4 сразу становится HTML-прототипом. Вы видите реальную страницу с вашим контентом, а не абстрактный макет. Дизайнер получает не ТЗ, а готовую структуру для доработки.
2–3 недели, много итераций
30–60 минут, итерации прямо в чате
Шаг 1: Подготовка контекста для Stitch
Stitch лучше всего работает, когда получает структурированный контент с чёткими инструкциями. Сначала попросите Claude подготовить «бриф для дизайна» из вашего черновика:
Прочитай @content/landing-draft.md и @context/clinic-context.md
Подготовь бриф для создания визуального прототипа посадочной страницы.
Включи:
1. Цветовая схема и тон — на основе tone of voice клиники из clinic-context.md
(строгий/тёплый/доверительный/современный)
2. Список всех секций страницы в порядке размещения — название + 1 строка о цели секции
3. Для каждой секции — финальный текстовый контент из landing-draft.md
(заголовки, подзаголовки, тезисы, CTA)
4. Типы блоков: hero, 3-column features, testimonials, CTA, FAQ — что подходит
5. Пожелания по стилю: медицинская ниша, аудитория — женщины 30–45,
эмоция «доверие, не тревога»
Формат — структурированный Markdown.
Сохрани в design/landing-brief.mdШаг 2: Создание прототипа в Stitch
Stitch — это AI-инструмент для создания UI-прототипов. Открывается через MCP-сервер прямо из Cursor или Claude Code — не нужно переходить в браузер.
stitch.
Если не подключён — откройте настройки MCP и добавьте сервер Stitch по инструкции из модуля 0.
Прочитай @design/landing-brief.md
Создай визуальный прототип посадочной страницы через инструмент Stitch.
Требования к дизайну:
- Стиль: чистый, профессиональный, доверительный — медицинская клиника
- Цветовая схема: белый фон, акцент — [укажите цвет бренда или «тёплый синий»]
- Типографика: читаемая, не декоративная
- Hero-секция: крупный заголовок, подзаголовок, CTA-кнопка
- Мобильная адаптация: секции укладываются в колонку
Используй все тексты из брифа — не заглушки Lorem Ipsum, а реальный контент клиники.
После создания — выведи ссылку на проект в Stitch и HTML-код страницы.Шаг 3: Итерация дизайна
Stitch позволяет вносить правки текстовыми командами — не нужно разбираться в CSS или переверстывать вручную.
Посмотрите прототип глазами пациента
Откройте прototип и пройдите по странице сверху вниз. Задайте себе: «Я испуганная женщина 38 лет, которая не знает с чего начать — что я вижу?»
Фиксируйте что не работает
Не «мне не нравится» — а «этот блок пугает» или «CTA-кнопка не видна». Конкретика помогает агенту понять задачу.
Давайте правки через промпты
Попросите Stitch изменить конкретный блок — цвет, порядок секций, размер шрифта, добавить иконки.
В проекте Stitch [ID проекта] внеси правки в экран [название экрана]:
1. [Конкретная правка: например, «Сделай CTA-кнопку более заметной,
увеличь размер и измени цвет на акцентный»]
2. [Следующая правка]
3. [Следующая правка]
После правок выведи обновлённый HTML.Шаг 4: Экспорт HTML
После согласования прототипа с командой — экспортируйте HTML-код. Это готовая основа для разработчика:
Получи финальный HTML-код экрана из проекта Stitch [ID проекта].
Сохрани в prototypes/landing-v1.html
Дополнительно создай файл prototypes/handoff-notes.md с:
- Список всех секций и их назначение
- Цветовые коды используемых цветов
- Шрифты
- Компоненты, которые нужна будет реализовать разработчику
- Что ещё нужно добавить до финального запуска (формы, аналитика, мобильная версия)