Промт:Ты — редактор портфолио творческого специалиста. Я прикрепляю черновик о себе и материалы моих проектов. Изучи всё целиком.Собери готовые тексты для сайта-портфолио:
1. Главный экран — короткий заголовок, пояснение и текст кнопки.
2. «Обо мне» — кто я, чем занимаюсь, чем могу быть полезен/полезна.
3. Проекты — для каждого название, контекст, моя роль, задача, решение и результат (только если он указан).
4. Услуги или направления работы — если они есть в материалах.
5. Контакты и понятный призыв связаться.Пиши простым живым языком, без клише, самовосхваления и выдуманных фактов. Не добавляй несуществующие проекты, клиентов и цифры. Если данных не хватает, сначала задай конкретные вопросы.Предложи одну цельную версию текста в порядке появления на сайте. Пока не создавай HTML и не разрабатывай дизайн: я сначала проверю и утвержу содержание.
Промпт:Я — [специальность], работаю с [тип клиентов] и создаю портфолио для [цель: работа / заказы / развитие личного бренда]. Я прикрепляю описание себя, своих работ и, если есть, примеры похожих сайтов.Помоги провести короткое исследование:
1. Выдели 2–3 группы моей целевой аудитории. Какие вопросы и сомнения возникают у них перед обращением ко мне?
2. Определи, что важно показать в портфолио: навыки, кейсы, процесс, результаты, отзывы или другое.
3. Сравни 3–5 портфолио специалистов моей ниши. Если доступен поиск в интернете — используй реальные примеры со ссылками. Если поиска нет — честно обозначь выводы как гипотезы.
4. Предложи 3–5 конкретных идей, которые помогут сайту выделиться без выдуманных обещаний.
5. Сформулируй короткое УТП для главного экрана.Дай практичные выводы списком. Не меняй мои утверждённые тексты и пока не создавай HTML. Я сам (а) выберу, какие идеи оставить.
Визуальные референсы сайтов1. Pinterest — общие визуальные референсы
2. Cosmos — подборки, мудборды, визуальные идеи
3. Behance — дизайнерские проекты и портфолио
4. Dribbble — интерфейсы, композиции, анимации
5. Awwwards — необычные сайты и интерактив
6. Godly — современные сайты и лендинги
7. SiteInspire — подборки сайтов по стилям
8. Land-book — референсы лендингов
9. Lapa Ninja — большая коллекция лендингов
10. Minimal Gallery — минималистичные сайты
11. Made in Webflow — готовые сайты с анимацией
12. Framer Gallery — красивые сайты и портфолио
13. One Page Love — одностраничные сайты
02. Библиотеки анимаций и интерактивных элементов
14. 60fps — референсы интерфейсных анимаций
15. Details — анимации, переходы, элементы сайтов
16. Codrops — экспериментальные эффекты и анимации
17. Motion Examples — интерактивные примеры анимаций
18. React Bits — анимированные тексты, фоны, карточки
19. Magic UI — готовые анимированные компоненты
20. Aceternity UI — необычные интерфейсные эффекты
21. Motion Primitives — анимация элементов интерфейса
22. Uiverse — кнопки, переключатели, карточки и CSS-эффекты
23. Osmo — продвинутые веб-анимации и интерактив
24. 21st.dev — компоненты с превью и копируемыми промптами
03. Библиотеки готовых промптов для ChatGPT
Особенно полезны для твоего курса
25. Kinetics — анимации с демонстрациями, CSS-кодом и AI-промптами
26. Motion Prompt — визуальные примеры движений с готовыми описаниями для AI
27. Jiro — визуальные решения и промпты для создания сайтов
28. Kage — референсы сайтов, которые можно превратить в промпты
29. VibePrompt — промпты для отдельных блоков сайта
30. Art Direction Daily — визуальные промпты с примерами результатов
Промпт:Ты — арт-директор и веб-дизайнер. Я прикрепляю референсы будущего сайта: скриншоты, ссылки и заметки «берём / не берём». Проанализируй их и предложи единую визуальную систему. Не копируй один референс целиком.Подготовь документ «Визуальный стиль сайта»:
1. Главная визуальная идея и настроение в 2–3 предложениях.
2. Палитра: фон, текст, акцент и дополнительные цвета с HEX-кодами.
3. Типографика: 1–2 доступных веб-шрифта, размеры заголовков и текста, насыщенность, межстрочный интервал.
4. Сетка и композиция: ширина контента, колонки, отступы, расположение блоков.
5. Детали интерфейса: карточки кейсов, кнопки, скругления, обводки, изображения, hover-состояния.
6. Анимации и интерактивность: только уместные, не мешающие содержанию.
7. Мобильная адаптация: как изменяются меню, карточки и типографика.
8. Чего избегаем — список нежелательных приёмов.Если референсы противоречат друг другу, предложи два чётких визуальных направления на выбор. Пока не создавай сайт и не пиши HTML. Сначала я утвержу визуальный стиль.
Промпт:Ты — опытный веб-дизайнер и фронтенд-разработчик. Прикрепляю три утверждённых набора материалов: «Тексты_сайта», папку с моими работами и изображениями, а также документ «Визуальный_стиль». Используй их как основу без самовольной замены контента.Создай первую рабочую версию моего сайта-портфолио, готовую к бесплатной публикации на GitHub Pages:
1. Сделай статический адаптивный сайт без конструкторов, серверной части и сборщиков.
2. Подготовь файл index.html с HTML, CSS и необходимым JavaScript внутри.
3. Используй папку assets для изображений; все ссылки на файлы должны быть относительными: assets/имя-файла.
4. Соблюдай утверждённую структуру, палитру, типографику и стиль карточек.
5. Адаптируй сайт для телефона, планшета и компьютера.
6. Сделай работающие кнопки, контакты и навигацию, читаемые тексты и alt-описания изображений.Не выдумывай биографию, проекты, результаты и отзывы. Не используй платные библиотеки и сложные зависимости. Сначала кратко перечисли структуру страницы, затем создай файлы для скачивания. Если не можешь выдать файл, покажи полный код и точные имена файлов. После первой версии дождись моих правок.
ПромптТы дорабатываешь уже созданный HTML-сайт. Я прикрепляю текущий index.html, при необходимости папку assets, скриншот проблемного места и пример желаемого результата.Что нужно изменить: [точно опиши проблему].
Как должно выглядеть или работать: [ожидаемый результат].
Что обязательно сохранить: [тексты, блоки, цвета, изображения, анимации].Исправь указанные элементы точечно. Не переделывай весь сайт, не меняй утверждённые тексты, палитру и изображения без моего согласия. Если запрос непонятен, задай до трёх уточняющих вопросов.Одновременно проверь адаптацию на ширинах 360–390 px, 768 px и 1440 px: не должно быть горизонтальной прокрутки, наложений, обрезанного текста и слишком мелких кнопок. Карточки и меню должны удобно работать на телефоне.Верни обновлённый index.html и только те файлы, которые изменились. Коротко перечисли, что исправлено, и что мне проверить в браузере.
Промпт:Помоги мне бесплатно опубликовать готовый статический сайт через GitHub Pages. У меня на компьютере есть папка «03_Сайт» с файлом index.html и папкой assets. Я не умею программировать и хочу всё сделать в браузере GitHub, без терминала.Проводи меня по одному действию за раз. После каждого шага жди моего сообщения «готово» или скриншота.Помоги:
1. Создать публичный репозиторий GitHub.
2. Загрузить index.html в корень репозитория, а изображения — в папку assets.
3. Открыть Settings → Pages.
4. Выбрать Deploy from a branch → main → /(root), сохранить.
5. Найти и открыть опубликованную ссылку.
6. Проверить сайт на компьютере и телефоне: изображения, ссылки, кнопки и контакты.Если публикация не работает, попроси URL или скриншот и объясни, как исправить ошибку. Не проси мои пароли, коды подтверждения и токены. Домен и платный хостинг сейчас не нужны.
