Тендеры и лиды
Информация
Эту статью мы написали по итогам совместного воркшопа агентства Доклаб и дизайн-студии 505.cx. Ивент проходил на III отраслевой практической маркетинговой конференции в реальном времени. За 60 минут на примере CLM-презентации (интерактивной презентации, которую обычно представитель фарм-компаний показывает врачам с планшета), мы показываем возможности ИИ, команда рассказала и показала, почему нейросеть не заменяет команду, но значительно ускоряет процесс. К сожалению, без работы головой и руками пока не обойтись.
Четыре принципа, которые мы учитывали в работе:
Галлюцинации — наша главная боль
Нейросети могут выдумывать факты и в медицине это особенно критично. Каждый тезис должен иметь проверенный источник (PubMed, JAMA, Lancet, РКИ, ресурсы Минздрава и др.).
Финальная проверка всегда на MSL
Медицинский советник проводит детальную проверку всего контента, источников и интерпретации фактов. Даже используя наш пайплайн вы не застрахованы от неточностей и неверных переводов английских терминов. Проверка — всегда!
Артефакты дизайна и кода
Результат работы AI почти всегда требует ручной чистки: подгон отступов, типографики, исправление багов в коде и анимациях. Часто интерактивные элементы (поп-апы, калькуляторы и др.) работают некорректно.
AI — это только ускоритель
AI оптимизирует рутину и дает команде больше сфокусироваться на смыслах. Но, как и любой инструмент, это работает только в слаженной и профессиональной команде, которая отлично понимает что делает.
Мы разбиваем процесс на 3 пайплайна — написание текста, дизайн и разработка. Каждый из них содержит свой набор инструментов и определенную последовательность.
Model Context Protocol — протокол, который позволяет разрозненным нейросетям и инструментам обмениваться данными напрямую, без копипасты руками.
Через MCP работа из серии чатов превращается в единый программно-управляемый процесс. Это и есть мостик между копирайтингом, дизайном и разработкой.
Но это лишь «улучшайзинг» и оптимизация времени, можно работать и без коннекторов – переносить результаты работы из разных нейронок руками.
Промт – это ТЗ для нейросети. Качество промта равно качество результата. Расплывчатый запрос дает плохой результат, хороший промт ведет себя как бриф: понятна цель, аудитория, формат и ограничения.
Конкретность
Чем больше деталей — тем меньше глюков на выходе.
Контекст
Дайте нейросети ту же информацию, которую вы бы дали джуну, который сел делать этот проект.
Формат
Заранее опишите структуру ответа: список, таблица, JSON, чек-лист.
Структура из 5 блоков основных блоков даст оптимальный результат:
Лайфхак — попросите ChatGPT написать промт под вашу задачу. Укажите, для какой именно нейронки вы это делаете и кратко опишите задачу. ChatGPT даст структурный промт с правильными настройками нейросети.
Шесть приемов, которые стабильно улучшают результат на медицинских и маркетинговых задачах.
Примеры
Дайте 2–3 примера правильного результата. Нейросеть «копирует» стиль и формат намного точнее, чем по словесному описанию.
Цепочка мыслей
Попросите «рассуждать пошагово, прежде чем дать финальный ответ». Точность на расчетах и логике вырастает заметно.
Ограничения и запреты
Прямо перечислите, что НЕЛЬЗЯ делать, например «не используй рекламные штампы», «не сокращай дозировки», «не выдумывай источники».
Селф-чек
В конце промта «проверь себя по чек-листу: есть ли источник у каждого тезиса; нет ли запрещенных формулировок».
Интерактивное взаимодействие
Один большой промт почти всегда хуже, чем серия из 3-4 уточняющих. Дайте уточнение промта после первого ответа нейросети. Но на этапе дизайна может сработать обратный способ – Claude Design выдает лучше результат если сделать большой подробный промт, а не идти короткими итерациями, плюс это экономит кредиты.
In English, please!
Качество работы моделей на английском языке значительно лучше. Делайте основную работу на английском, и уже потом переводите на русский.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13590 тендеров
проведено за восемь лет работы нашего сайта.
Perplexity — «поисковик» с доступом к платным академическим источникам через коннекторы и удобным механизмом поиска цитирования. Premium Sources подтягивают PubMed, JAMA, NEJM, Lancet и Cochrane напрямую — это экономия 3–5 часов ручной работы с источниками. Pro Search делает 3–5 шагов рассуждений с проверкой источников и собирает прямые ссылки на PDF файлы.
С его помощью ищем доказательную базу для будущей презентации и собираем в папку PDF файлы.
Промт:
Act as a senior medical evidence researcher specializing in anticoagulation, venous thromboembolism, atrial fibrillation, and evidence synthesis for HCP materials.
Goal
Find high-quality peer-reviewed academic sources on apixaban efficacy and safety, with special focus on direct or indirect comparison versus rivaroxaban.
I need direct PDF links whenever available. If a PDF is not available, provide the official article page, DOI, PubMed/PMC link, or full-text page.
Search settings and source hierarchy
Prioritize peer-reviewed sources: PubMed, PubMed Central, NEJM, JAMA Network, The Lancet / Lancet Haematology, Annals of Internal Medicine, Blood Advances / ASH, Journal of Thrombosis and Haemostasis, TH Open, PLOS, Wiley, Elsevier / ScienceDirect, Oxford Academic, ACC, ESC, ASH.
Prefer direct PDF links from publishers or academic repositories. Use manufacturer pages, news, blogs, Medscape-like pages only to identify references, not as evidence. Exclude non-academic, promotional, or unverified sources from the final table.
Final output format
Create a ranked table with these columns: Rank by importance / popularity for medical evidence Study / article name Year Indication Study type Comparator Key efficacy finding Key safety finding Why it is useful for an HCP / CLM presentation Direct PDF link Official article / PubMed / DOI link Notes and limitations
Important rules
Do not hallucinate links, data, HRs, RRs, p-values, or conclusions. Verify every PDF link before including it. Mark links as «direct publisher PDF», «PMC PDF», «institutional PDF», or «no PDF found». Separate randomized clinical trials from observational real-world studies and case reports. Clearly flag off-label uses or non-registered indications. Give exact citations and DOIs where available.
NotebookLM – AI-ассистент, который отвечает строго по загруженным документам — никаких выдумок и галлюцинаций. Каждый ответ идет с кликабельной ссылкой на конкретный фрагмент PDF. Free-тариф дает возможность загрузить до 50 источников в каждом блокноте — этого достаточно для создания любой CLM. Studio-режим автоматически собирает Audio Overview, Mind Map, FAQ и презентацию из ваших источников.
Загружаем PDF файлы из шага 1 в NotebookLM. Дальше работа идет только по этим документам — нейросеть ничего не придумывает.
Результат индексации 4х файлов исследований, загруженных в новый блокнот Notebook LM: В чате появляется возможность работы с данными строго по загруженным данным а в Studio уже собран первый прототип презентации, но пока без правильной структуры.
Claude – лучший агент для работы со структурой данных, длинными с цепочкой рассуждений и оркестрации разных нейросетей через MCP протоколы и различные интеграции. В нашем сетапе Claude — это ядро всего пайплайна. Projects позволяет создавать гибкие контексты с кастомными настройками. MCP-коннекторы подключают NotebookLM, Figma, GitHub и др. — Claude работает с источниками напрямую, без ручного переноса. Мы работали на Opus 4.8 — флагманской модели на момент проведения воркшопа.
Вручную или через MCP Claude забирает данные из NotebookLM. Используем Claude Projects — туда загружаем инструкции по комплаенсу и правилам медицинского написания текста.
Создайте проект в Projects c описанием стиля, стоп-словами, референсами хороших CLM презентаций. Подключаем Claude к Figma через штатный коннектор и Notebook LM через MCP.
Промт-инструкция для проекта
You are a medical marketing writer and scientific strategist specializing in communications for healthcare professionals.
Your task is to transform strict scientific and medical information into clear, concise, engaging, marketing-relevant content for cardiologists — without distorting the evidence.
IMPORTANT LANGUAGE RULE:
All final answers must be written in Russian, unless I explicitly ask otherwise.
SOURCE RULES — STRICT PRIORITY:
1. First, use ONLY the documents, PDFs, files, studies, SmPCs, guidelines, clinical papers, briefs, and other sources that I provide inside this project.
2. Do not use general knowledge to fill gaps.
3. Do not invent facts, numbers, endpoints, clinical claims, safety claims, comparisons, or conclusions.
4. If the answer is not present in the provided sources, clearly state in Russian:
«В предоставленных источниках нет достаточного ответа на этот вопрос.»
5. Only after that, you may search or rely on verified academic and regulatory sources, preferably:
- PubMed / MEDLINE
- European Medicines Agency / EMA
- FDA
- ESC / ACC / AHA guidelines
- peer-reviewed journals
- official SmPC / prescribing information
- Cochrane Reviews
6. When using external sources, clearly separate:
- «Данные из предоставленных источников»
- «Дополнительные данные из академических источников»
7. Always provide citations or source references for scientific and clinical claims.
Полная версия промта
Промт сборки текста презентации
Сreate ONLY the content structure and medical-marketing copy for a CLM presentation for cardiologists. Do NOT create the slide design. Do NOT create speaker notes unless explicitly useful. The final answer must be in Russian. Connect to notebooklm - notebook Apixaban and take information from this notebook.
Product context:
- Brand: Апиксамакс — fictional brand
- INN: Apixaban
- Company: РКНФарм
- Pack: 180 tablets
- Audience: cardiologists
- Format: CLM presentation content for doctor-facing promotion
- Tone: concise, scientific, confident, clinically useful, compliant, not consumer-style
Important compliance rule: Do NOT invent real medical or bioequivalence data as if it were factual. If you need to create bioequivalence indicators for the fictional brand, clearly label them as «черновые mock-данные / placeholders» and state that they must be replaced with data from the real bioequivalence study before medical/legal/regulatory review.
Output format: Answer in Russian.
Structure the answer like this:
1. «Общая стратегическая идея CLM»
2. «Слайд 1. Апиксамакс: сопоставимость с оригинальным апиксабаном + доступность терапии»
3. «Слайд 2. Почему апиксабан — сильный выбор среди ПОАК»
4. «Слайд 3. Апиксабан vs ривароксабан: где у апиксабана сильные стороны»
5. «Список обязательных источников для проверки»
6. «Claims, которые нельзя использовать без подтверждения»
GPT-5.5 лучше Claude передает эмпатию: естественный маркетинговый тон на русском языке, правильный перевод медицинских терминов, сильные CTA, тонкая работа с эмоциональной частью сообщения для врача и пациента. Включает Canvas — совместное редактирование длинных текстов с правками по предложениям. Custom Instructions + Memory держат портрет ЦА и TOV.
Claude хорошо структурирует факты, но «маркетинговый русский» — слабое место модели Opus. ChatGPT адаптирует сухой медицинский текст под конкретный портрет врача, задает правильный TOV.
Ты — медицинский маркетинговый райтер и стратег по CLM-презентациям для врачей. Я дам тебе научный контент CLM-презентации для врачей. Твоя задача — не просто перевести и сократить, а превратить научный материал в ясную, убедительную и compliance-safe коммуникацию для врача.
Переписать контент так, чтобы врачу было сразу понятно: 1. в какой клинической ситуации нужен препарат; 2. какую проблему он решает; 3. почему его стоит рассмотреть; 4. какие научные данные это подтверждают; 5. как препарат логично вписывается в клиническую практику. Правила работы:
1. Используй только тот научный контент, который я дам. - Не придумывай новые данные. - Не добавляй неподтвержденные claims. - Если для сильного маркетингового утверждения не хватает доказательств, пометь: [нужно подтвердить источником].
2. Перепиши весь контент на русский язык. - Устоявшиеся медицинские термины, международные названия исследований, шкал, endpoints, guidelines, MACE, HR, CI, non-inferiority, superiority и т.д. можно оставлять на английском, если так понятнее врачу. - Не делай дословный перевод — адаптируй под язык врача.
3. Сделай контент более маркетинговым, но строго научным. - Заголовки должны быть цепляющими, но compliance-safe. - Не используй преувеличения вроде «лучший», «самый эффективный», «революционный», если это прямо не доказано. - Вместо этого используй формулировки: «демонстрирует», «показал», «может быть рассмотрен», «подтверждено в исследовании», «ассоциирован с», «в сравнении с».
4. Построй логические связи. Не просто переписывай слайды отдельно. Собери из них понятную историю: - клиническая проблема; - почему это важно для врача; - какой терапевтический выбор стоит перед врачом; - где появляется наш препарат; - какие данные подтверждают его место; - какой практический вывод должен сделать врач.
5. Для каждого слайда дай структуру: Слайд X. [новый цепляющий compliance-safe заголовок] Главная мысль слайда: [1 короткое предложение — что врач должен запомнить] Логика для врача: [2–4 предложения, объясняющие, почему это важно и как связано с назначением препарата] Основной текст для слайда: [готовый текст, который можно перенести в дизайн] Ключевые акценты / bullets: - [короткий тезис] - [короткий тезис] - [короткий тезис] Данные / доказательства: - [исследование / источник / показатель, если есть в исходном контенте] - [что именно это доказывает] Практический вывод для врача: [одно предложение: что врач должен подумать или сделать после этого слайда] Что можно вынести в визуал: [идея схемы, таблицы, диаграммы, patient flow, comparison block, карточки и т.д.]
6. Стиль: - коротко; - точно; - врачебно; - без рекламной воды; - с сильными заголовками; - с ясной клинической логикой; - 1 слайд = 1 главная мысль. Начни с анализа исходного контента, затем сразу выдай переработанную структуру презентации.
Результат
Было:
В исследовании ARISTOTLE апиксабан показал снижение риска инсульта на 21% по сравнению с варфарином (HR 0.79; 95% CI 0.66–0.95; p=0.01) при сопоставимом профиле безопасности».
Стало:
На 21% меньше риска инсульта — без компромисса по безопасности. Данные ARISTOTLE говорят сами за себя: апиксабан дает вашему пациенту защиту, в которой вы можете быть уверены.
Конечно, тут он перегнул палку и нужно править :)
Финальный промт для Claude в Figma. Забираем переработанный текст и структуру презентации и возвращаемся в Claude для финального шага пайплайна «Написание текста».
You have access to the connected Figma workspace and are allowed to create and edit content directly inside the file.
I will provide content in an attachment.
Deliverables:
- 3 main presentation slides.
- Additional popup / overlay / drill-down slides if they help explain the content better.
- All slides must be created directly in Figma.
Workflow
1. Read and fully understand the attached content.
2. Extract:
- the core message;
- key arguments;
- supporting evidence;
- important numbers, facts, and quotes.
3. Organize the material into a clear presentation narrative.
4. Create:
- Slide 1 — Core Insight / Problem / Opportunity
- Slide 2 — Main Argument / Explanation
- Slide 3 — Conclusion / Recommendation / Takeaway
5. If some information would overload the main slides, create additional popup slides that can act as:
- drill-down screens;
- supporting evidence;
- methodology explanations;
- detailed examples;
- expanded data views;
- references;
- appendix-style overlays.
Design requirements:
- Create actual Figma frames, not just text blocks.
- Use Auto Layout whenever appropriate.
- Use proper spacing, hierarchy, and grid structure.
- Maintain consistent typography and visual rhythm.
- Create presentation-ready slides that could be shown to executives or clients without further redesign.
На этом варианте удобно сделать сверку данных по структуре и логике, это нужно для следующего этапа.
Claude.ai позволяет генерировать полноценные UI-интерфейсы прямо в браузере: компоненты,экраны, дизайн-системы — без кода и без Figma. Все на основе простых текстовых промтов.
Браузер
Работает прямо в claude.ai — не нужно устанавливать плагины или покупать дополнительные инструменты.
Живой HTML
Результат — это настоящий HTML/CSS, который можно открыть в браузере или вставить в CLM.
Итерации
Можно вносить правки текстом: «сделай кнопку больше», «поменяй цвет», «добавь блок».
Другие инструменты генерируют картинки или стили, но не собирают рабочий интерфейс. В отличие от Figma AI или Midjorney, Claude Design выдает структуру, компоненты и разметку готовую к использованию в CLM.
Что можно создавать:
CLM-слайды
Экраны презентации для врача: текст, инфографика, таблицы, навигация.
Дизайн-система
UI-кит: цвета, типографика, кнопки, карточки, иконки — в одном файле.
Email-шаблоны
HTML-письма для HCP: персонализированные, адаптивные, под бренд
Лендинги
Промо-страницы для акций, конгрессов, продуктов — одним промтом.
Интерактивные квизы
Проверочные задания и тесты для медпредставителей и врачей.
Дашборды
Интерфейсы для отображения данных: таблицы, графики, KPI-панели.
Вся работа ведется в https://claude.ai/design (на момент написания статьи доступен только по этой ссылке). Создаем проект, загружаем бренд-гайд или описание стиля, далее интегрируем через промты — каждый следующий промт уточняет результат.
Промт:
Ты — UX/UI дизайнер. Создай HTML дизайн-систему для фармацевтической CLM-презентации.
Бренд: [название препарата]
Цвета: [основной #XXXXXX, акцентный #XXXXXX]
Шрифт: [название]
Тон: профессиональный, медицинский
Что нужно создать:
— Цветовая палитра (primary, secondary, neutral, success, error)
— Типографика (h1–h4, body, caption, label)
— Кнопки (primary, secondary, disabled, hover-состояния)
— Карточки (с тенью и без, с иконкой)
— Таблицы (с заголовком, зебра)
— Иконки-плейсхолдеры
— Навигационная панель CLM
Формат: один HTML-файл со всеми компонентами на одной странице, без внешних зависимостей.
Что входит в готовый UI-кит:
— Цветовая палитра — primary, secondary, neutral, состояния
— Типографика — заголовки h1–h4, body, caption
— Кнопки — все состояния: default, hover, disabled
— Поля ввода и формы
— Карточки — с иконкой, с тенью, без рамки
— Таблицы — зебра, с заголовком
— Навигация CLM — нижняя панель, прогресс-бар
— Иконки и иллюстрации — плейсхолдеры под замену
GPT-4o с генерацией изображений — самый удобный инструмент для создания медицинских иллюстраций, инфографики и брендированных визуалов для CLM.
Промт
Описываем сцену: стиль, цвета, персонаж, объект, фон. Чем точнее — тем меньше итераций.
Стиль
Указываем референс: «в стиле медицинской инфографики», «3D render», «flat illustration».
Бренд
Добавляем hex-коды бренда, просим использовать конкретные цвета.
Итерации
Правим текстом в том же диалоге: «добавь логотип», «убери текст», «сделай фон белым».
Gemini 2.0 Flash умеет редактировать изображение в контексте диалога. Особенно ценна при работе с многократными правками одного изображения.
Контекстные модели
Gemini понимает серию правок в рамках одного диалога и помнит исходное изображение — не нужно загружать его заново каждый раз.
Многократное редактирование
Можно вносить правки итеративно: изменить фон, потом добавить текст, потом скорректировать цвет — все в одном потоке.
Nano Banana Pro 4k
Самая продвинутая модель, в разрешении 4к выдает лучший результат.
Все визуальные материалы в этой статье сгенерированы с помощью ChatGPT и Gemini — без фотостока и без дизайнера.
Дизайн система
HTML UI-кит с цветами, шрифтами, кнопками, карточками и таблицами — под бренд препарата.
Контент слайдов
Тексты, данные исследований, ключевые сообщения — подготовлены и выверены на предыдущих шагах.
Изображения
Иллюстрации, инфографика и визуальные акценты — сгенерированы в ChatGPT и Gemini.
Один промт — и Claude собирает все три источника в готовую HTML-презентацию.
Промт:
Create a presentation in Claude Design using the attached design system and the prepared slide-by-slide content.
The content is already divided into slides.
Do not rewrite, shorten, rephrase, add new meanings, split slides, merge slides, or change the slide order.
Work only with the visual presentation of each slide: composition, hierarchy, rhythm, accents, image usage, element placement, interface logic, and overall clarity.
Core principle:
For each slide, choose the visual format based on the meaning of its content, not based on slide number.
Build the presentation with a strong visual rhythm.
Alternate slide formats according to the meaning of the content: full-bleed or nearly full-bleed background slides, clean infographic slides, contextual photo slides, large-number slides, diagram / mechanism slides, and card-based slides. Avoid repeating the same slide structure several times in a row.
Even when neighboring slides have similar content, vary the visual structure through scale, image placement, accent type, layout logic, infographic format, and text density. Alternate visual intensity: after an expressive or image-led slide, use a more structured slide; after a dense rational slide, add a visual pause through a strong image, large statement, large number, or contextual human element.
Use only the visual language, components, grids, typography, colors, masks, frames, lines, cards, graphic accents, interaction patterns, and composition logic from the attached design system.
Do not invent a new style.
Полная версия промта
Как это выглядит в работе:
Промт в Claude
Вставляем дизайн-систему + контент в один диалог
Получаем HTML
Claude генерирует готовый HTML-файл за 30–60 секунд
Открываем в браузере
Смотрим результат, фиксируем что исправить
Итерируем
Уточняем промтом: «исправь слайд 3», «добавь таблицу»
Что получилось:
Готовый дизайн презентации
Навигация по слайдам: стрелки или свайп
Брендированный дизайн из UI-кита
Все изображения и таблицы встроены
Claude Design и Claude Code — два продукта одной экосистемы.
Handoff (команда экспорта, которая передает не слитую верстку, а именно бандл проекта) передает рабочий проект: файлы, контекст и инструкции для агента. Экспорт собирает целый бандл: файлы дизайна, скриншоты экранов и README с инструкциями, как именно должен Claude Code работать с этим проектом. Бандл попадает в папку проекта. Дальше слайды правятся промптами и руками, это уже рабочий редактируемый продакшн-код.
Нажимаем кнопку Share — Handoff to Claude Code.
Перед тем как выполнить команду Handoff в Claude Code и он подтянет бандл из Claude Design, нужно выполнить несколько настроек.
Локальный Handoff устроен так: Claude Design отдает вам промпт, в который зашит URL бандла, и вы вставляете этот промпт в Claude Code, запущенный в нужной папке. Чтобы вставленная команда сработала, к этому моменту должно быть готово следующее.
Подготовлена папка проекта на компьютере
Локальный Handoff скачивает бандл и кладет его в каталог, поэтому заранее создайте пустую папку под проект слайдов.
Не нужно ничего туда заранее класть — туда «приземлится» бандл.
Настроены разрешения
Kоманда Handoff Заставит Claude Code скачать бандл по URL. При выполнении он, скорее всего, спросит разрешение на обращение к этой ссылке и загрузку файлов — разрешайте. Можно заранее в настройках дать разрешение на самостоятельно подтверждение выполнения скачивания и команд. Настройки эти разного уровня. Выполните их в зависимости от желаемого уровня доступа.
Что делает Claude Code?
Он читает README и историю, осматривает файлы и начинает приводить слайды к целевому виду согласно README. Если вы запускали его в plan mode, он сначала покажет, что собирается сделать, ничего не трогая, и подождет вашего одобрения.
Если git был инициализирован заранее — все эти изменения вы видите как дифф и можете в любой момент откатиться.
Режим Preview
После выполнения команды, вы можете посмотреть на готовый результат и далее начинать процесс доработки прямо в командной строке Claude Code.
Промт:
You are a senior frontend engineer.
Task: adapt the existing project layout for a 2560×1600 desktop resolution.
Important:
Do not redesign the product from scratch.
Do not change business logic, routes, data structures, texts, images, or existing functionality.
Preserve the current visual identity and composition.
The goal is to make the existing layout look correct, balanced, and premium on a 2560×1600 screen.
Target resolution:
2560px width
1600px height
16:10 aspect ratio
Desktop / large monitor layout
What you need to do:
Audit the current layout
Inspect the project structure.
Find the main layout files, page components, CSS / SCSS / Tailwind styles, containers, grids, and responsive breakpoints.
Identify elements that look too small, too stretched, too sparse, misaligned, or visually unbalanced on 2560×1600.
Add or improve large-screen responsiveness
Add a dedicated large-screen breakpoint for 2560×1600 if needed.
Improve max-width rules for main content containers.
Avoid uncontrolled full-width stretching.
Keep readable content width.
Make spacing, margins, paddings, and gaps proportional for large desktop screens.
Ensure cards, sections, images, tables, navigation, sidebars, modals, and headers scale naturally.
Preserve visual hierarchy
Headlines should not look too small on 2560px width.
Body text should remain readable but not oversized.
Buttons and interactive elements should feel proportionate.
Empty space should look intentional, not accidental.
Important content should remain visually dominant.
Fix viewport-specific issues Check and fix:
horizontal scroll
cropped blocks
excessive empty areas
broken grids
tiny UI elements
stretched images
misaligned headers / footers
broken sidebar or navigation width
sections that should remain centered
content that should have max-width limits
Implementation requirements
Make the smallest clean set of changes.
Prefer reusable layout tokens, CSS variables, Tailwind breakpoints, or shared container classes over one-off fixes.
Keep the layout adaptive for smaller screens as well.
Do not break existing mobile/tablet/standard desktop behavior.
Add comments only where the layout logic is not obvious.
Testing After changes:
Run the project locally.
Test the layout at:
1440×900
1920×1080
2560×1600
The main required target is 2560×1600.
Take screenshots or describe visually what changed.
Verify there are no console errors.
Verify there is no horizontal scroll.
Verify all key pages/components still work.
Acceptance criteria:
The project looks visually balanced on 2560×1600.
Main content is not stretched across the entire screen unless intentionally designed that way.
Layout uses the available screen space intelligently.
Navigation, hero sections, grids, cards, and content blocks are aligned and proportionate.
Existing functionality remains unchanged.
Smaller resolutions are not degraded.
Start by analyzing the current layout and then implement the necessary changes.
После Handoff вы не передаете макеты, а дорабатываете живой код. Один и тот же цикл повторяется для каждого слайда — пока верстка не готова.
Как правильно:
Будьте конкретны — не «выглядит плохо», а «уменьши отступ между блоками до 8px».
Описывайте сразу весь объём задачи, а не по одному файлу.
Перед рискованными многофайловыми изменениями всегда используйте plan mode.
Коммитьте перед крупными правками.
Примеры запросов:
В файле slide-02.html увеличь заголовок до 48px и выровняй блок по центру.
Вынеси повторяющиеся стили всех слайдов в общий файл shared/css/base.css и подключи его в каждом слайде относительным путём».
Сделай все слайды фиксированного размера 1024×768, без вертикальной прокрутки».
Переименуй файлы слайдов по схеме 01-intro.html, 02-mechanism.html … и обнови все внутренние ссылки».
Git нужен не строго обязательно для редактирования HTML, но сильно рекомендуется: это «страховочная сетка» — перед любыми правками Claude Code можно зафиксировать состояние и при необходимости откатиться.
Git хранит историю изменений: перед любой правкой можно зафиксировать состояние и откатиться, если вёрстка поедет. Claude Code видит репозиторий сам.
Последним шагом, просим собрать Standalone файл.
В папке проекта готовая сборка презентации.
Финальная вид проекта — один HTML на слайд + общая папка. Слайды приводятся к единой структуре, проверяются и упаковываются под вашу CLM-платформу.
Важно: состав пакета, именование, control-файлы и структура zip различаются у разных CLM-платформ. Финальную упаковку выполняет исполнитель под требования конкретной платформы.
При правильном взаимодействии ИИ становится хорошим инструментом и помощником и сильно ускоряет процесс работы, но главным создателем все равно остается человек. С развитием нейросетей развиваются и люди, мы качаем насмотренность, повышаем объем знаний и уровень экспертизы, и при таком раскладе никакая технология нас заменить не сможет. Мы верим, что будущее – за гибридом технологий и человеческого фактора.
