Покрокова інструкція зі створення лендингу
Нижче наведено детальний приклад створення інформаційного лендингу, присвяченого місії NASA Artemis II, у середовищі Claude Design — від початку роботи над проєктом і до його експорту.
Крок 1. Ініціація нового проєкту
Для започаткування роботи відкрийте Claude Design. За замовчуванням активований розділ Prototype. Тут необхідно обрати один із двох доступних режимів:
1. Wireframe (каркас): цей режим передбачає створення структурної основи проєкту. Штучний інтелект концентрується виключно на побудові архітектури сторінки, не враховуючи елементи брендингу. На робочому полотні виникають сірі блоки, базові поля введення та умовні замінники зображень.
2. High fidelity (високодеталізований прототип): у цьому режимі сірі Wireframe-блоки замінюються корпоративними компонентами, підтягуються фірмові шрифти, а також застосовуються коректні радіуси заокруглення елементів.
Далі слід вписати в спеціальне поле назву нового проєкту та підтвердити дію, натиснувши кнопку «+ Create».
Крок 2. Формування опису завдання
У чаті, що з’явиться після ініціалізації проєкту, необхідно прописати докладний опис майбутнього лендингу. Чим більш деталізованим буде інструктаж (промпт), тим якіснішим виявиться результат. Наприклад:
– Англомовний варіант: Create an informational landing page about NASA’s Artemis II mission ― the first crewed lunar flyby in over 50 years, launched April 1, 2026 and splashed down April 10, 2026. Target audience: space enthusiasts and general public. Use a dark space-themed color scheme with deep navy and white text. Sections: hero with mission name, launch and splashdown dates, crew profiles (Reid Wiseman, Victor Glover, Christina Koch, Jeremy Hansen), mission timeline with key milestones, Orion spacecraft specs block, and a footer with links to NASA’s official Artemis page. Style: clean, modern, editorial.
– Переклад українською: Створіть інформаційний лендинг про місію NASA Artemis II — перший за понад 50 років пілотований обліт Місяця, із запуском 1 квітня 2026 року та приводненням 10 квітня 2026 року. Цільова аудиторія: ентузіасти космосу та широке коло громадськості. Використовуйте темну колірну палітру в космічній тематиці з насиченим темно-синім фоном та білим текстом. Секції включають: героїчний блок із назвою місії, датами старту і приводнення, профілі екіпажу (Рід Вайзман, Віктор Гловер, Крістіна Кох, Джеремі Гансен), таймлайн місії з ключовими подіями, блок із характеристиками космічного корабля Orion, а також футер з посиланнями на офіційну сторінку NASA Artemis. Стиль виконання — чистий, сучасний, редакційного характеру.
Крок 3. Аналіз першої редакції
Після введення завдання штучний інтелект Claude створить початкову версію лендингу на робочому полотні. На цьому етапі варто оцінити загальну структуру: розташування головної (hero) секції, логіку порядку розміщення блоків, вибрану колірну гаму та типографіку. Деталі оформлення залишаються для подальшого вдосконалення.
Крок 4. Послідовне покращення дизайну
Наступний етап передбачає ітеративне доопрацювання макету за допомогою різноманітних інструментів редагування. Серед них варто виділити:
– Інлайн-коментарі: наприклад, щоб внести уточнення щодо профілю одного із членів екіпажу, клацніть безпосередньо на відповідному блоці. Так можна залишити точковий коментар із конкретним проханням. Приклад інструкції:
Англійською: Add a subtitle under Victor Glover’s name: “First Black astronaut on a lunar mission”. Also add a small NASA logo badge next to each crew member’s photo.
Українською: Додайте підзаголовок під іменем Віктора Гловера: «Перший темношкірий астронавт на місячній місії». Також додайте маленький значок із логотипом NASA поруч із фотографією кожного учасника екіпажу.
– Пряме редагування текстового контенту: змініть заголовок у головній секції. Наприклад, «Artemis II» замініть на «Artemis II Mission» для більшої конкретики.
– Створення меню: Claude допоможе згенерувати додаткове меню для більш тонких налаштувань та організації навігації.
Крок 5. Експорт готового проєкту
Коли всі коригування внесені, завершений лендинг можна експортувати через меню «Share». Доступні варіанти включають:
– Copy link — скопіювати внутрішнє посилання для перегляду колегами;
– Download project as .zip — завантажити архів із усіма компонентами проєкту;
– Export as PDF — створити файл для надсилання чи друку;
– Export as PPTX — експорт для презентацій у форматах PowerPoint або Google Slides;
– Send to Canva — направити до Canva для подальшого редагування;
– Export as standalone HTML — отримати автономну вебсторінку;
– Handoff to Claude Code — відправити поточний дизайн до Claude Code для реалізації коду.
Таким чином, послідовна робота у середовищі Claude Design дозволяє створити професійний, детальний і стильний лендинг, придатний для широкого кола користувачів і тематично приурочений до масштабної космічної місії.
