Покажите Claude сайты, которые вам нравятся.
Он разберёт их оформление, составит ТЗ, соберёт ваш сайт и проверит его в браузере.
Стартовый набор для разработки сайта в Claude Code
- 4 навыка для агента
- 17 готовых промптов
- 8 этапов работы
Как использовать стартовый набор?
-
01
Скопируйте папку набора для своего проекта.
-
02
Добавьте сайты, которые нравятся: скриншоты, ссылки или записи экрана с анимацией.
-
03
Положите материалы о своём деле: тексты, фотографии, цены, контакты. Подойдут и обычные заметки.
-
04
Откройте папку в Claude Code и напишите
создавай.
Дальше агент работает по восьми этапам, прописанным в наборе.
- Этап 01Подготовка
Читает материалы и проверяет, всё ли есть для начала работы
- Этап 02Бриф
Определяет задачу сайта и какое действие должен совершить посетитель
- Этап 03Разбор примеров
Выделяет приёмы, которые стоит перенести в ваш проект
- Этап 04Дизайн
Выбирает композицию и согласует шрифты, цвета и отступы
- Этап 05Техническое задание
Описывает будущий сайт до начала разработки
- Этап 06Сборка
Создаёт страницы для большого экрана и телефона
- Этап 07Анимация
Добавляет движение там, где оно помогает показать содержание
- Этап 08Проверка
Открывает сайт в браузере, ищет ошибки и исправляет их
- «Цветовая гамма, металлический блеск»
- «Шрифты, плавные линии»
- «Появление каких-то деталей»
03_project/04_TZ.md
| Пожелание из материалов проекта | Решение из разбора агента |
|---|---|
| «Цветовая гамма, металлический блеск» | Холодные серые оттенки и стальной градиент, передающий блеск металла |
| «Шрифты, плавные линии» | Крупный узкий шрифт с засечками; для русского текста нужна замена с кириллицей |
| «Появление каких-то деталей» | Текст появляется по строкам при прокрутке; часть композиции остаётся на месте |
Шаблон задания уже входит в набор
После сборки агент открывает сайт в браузере и проверяет свою работу.
В набор встроено больше 30 автоматических проверок.
Проверка ищет:
- текст и блоки, которые вылезают за край экрана;
- неработающие ссылки, изображения и шрифты;
- слишком маленькие кнопки на телефоне;
- ошибки в браузере и пути к файлам, которые сломаются после загрузки на хостинг;
- пропавший текст, заглушки и скачки вёрстки;
- слишком тяжёлые изображения, шрифты и скрипты.
Что вы получаете в наборе?
Основа работы
- 4 навыка для Claude Code
Подробные инструкции для разбора референсов, выбора дизайна, анимации и визуальной проверки
- 8 этапов
Агент следует строго заданной последовательности и проверяет результат каждого этапа
- 17 готовых промптов
Задания для разбора стиля, композиции, анимации, проверки и финальной редактуры
- 7 шаблонов проектных документов
Сохраняют бриф, стиль, настройки оформления, ТЗ, отчёт о проверке, журнал и список использованных материалов
- 3 вспомогательных скрипта
Делают скриншоты сайтов, извлекают кадры из видео и проверяют готовый сайт
Разбор примеров и дизайн
- 31 стиль
Словарь визуальных стилей описывает характерные приёмы и ошибки; помогает перевести ваши пожелания в конкретные решения
- 20 разобранных концепций сайтов
Показывает, как связать тему, композицию, оформление и анимацию
- 11 шагов и формула промпта
Основной алгоритм проектирования: помогает пройти от постановки задачи до тестирования готового сайта
- 7 типов страниц
Агент учитывает назначение сайта: презентовать продукт, показать каталог, помочь сравнить или выбрать
- 3 варианта композиции
Перед сборкой агент рассматривает сдержанный, наиболее подходящий и смелый варианты; выбирает один и объясняет решение
- 5 дизайнерских приемов
Подсказывают агенту, какие изменения заметнее влияют на результат и с чего начать
- 18 советов
Объясняют агенту, когда уместны стекло, плитки, видео на первом экране и другие часто повторяемые приёмы
- Единые настройки оформления
Позволяют агенту собрать цвета, шрифты и отступы в общую систему, чтобы разделы сайта сочетались друг с другом
- 10 шагов адаптации компонента
Помогают агенту встраивать готовые блоки в оформление вашего сайта
Анимация
- 19 наименований анимации
Даёт названия движениям, которые вы показываете в записях экрана
- 20 рецептов анимации
Объясняют агенту, как устроить сцену при прокрутке, переход или отклик на действие пользователя
- Таблица инструментов анимации
Помогает выбрать библиотеку под нужный эффект
Проверка
- 10 признаков шаблонности и 20 вопросов
Проверка на шаблонность помогает найти одинаковые карточки, случайный декор и другие решения, из-за которых сайты похожи друг на друга
- 15 ограничений для типовых решений
Запрещают агенту использовать привычные украшения без причины; исключения он обосновывает вашими референсами
- 8 разобранных ошибок из практики
Предупреждают о проблемах с кириллицей, путями к файлам, закреплёнными блоками и мобильной версией
Готовый сайт и все файлы проекта остаются у вас.
04_site/dist/
Сайт для размещения на хостинге. Агент собирает готовые файлы в отдельную папку. В наборе есть инструкция по загрузке на Beget.
04_site/
Исходники для дальнейших правок. Можно менять тексты, изображения и разделы, поручая работу Claude.
03_project/
Документы проекта. Бриф, разбор стиля, ТЗ, общие настройки оформления, отчёт о проверке, журнал работы и список использованных материалов.
Автор набора
Стартовый набор для разработки сайта
В набор входят:
- 1Папка для Claude Code с четырьмя навыками агента, алгоритмом из восьми этапов, 17 промптами, словарями стилей и анимации, шаблонами документов и автоматической проверкой сайта.
- 2Короткий гайд: как подготовить примеры и материалы, запустить работу и вносить правки.
- 3Подборка сайтов для вдохновения внутри гайда.
- 4Инструкция по настройке инструмента, с которым Claude сам открывает и проверяет сайт в браузере.
Для работы нужны Claude Code и Node.js 20 или новее. Рекомендуется подписка Claude Pro.
ДемоСпособ получения уточняется
Оплатить — 990 ₽Вопросы перед покупкой
Для каких сайтов подходит набор?
Для сайта о вас, вашей услуге или продукте: страница эксперта, портфолио, предложение услуги, презентация продукта или анонс мероприятия. Писать код самому не нужно: вы готовите материалы и выбираете примеры, агент занимается разработкой. Набор рассчитан на одностраничные сайты. Интернет-магазин с корзиной и сайт с личным кабинетом потребуют дополнительной разработки.
Я не программист. Смогу пользоваться набором?
Да. Нужно установить Claude Code и Node.js, открыть папку и добавить материалы. Код пишет агент. Порядок запуска описан в гайде.
Нужно знать названия стилей и шрифтов?
Нет. Покажите понравившиеся сайты и, если хотите, напишите, что привлекло внимание. Агент разберёт оформление по инструкциям набора.
Мне придётся читать все инструкции и выбирать промпты?
Нет. Они предназначены для агента: он обращается к нужным файлам по ходу работы. Вы готовите материалы и запускаете процесс.
Какая нужна подписка?
Рекомендуется Claude Pro.
Где взять примеры сайтов?
В гайде есть подборка для вдохновения. Выберите 3–5 примеров: один может нравиться шрифтами, другой расположением блоков или анимацией.
Можно просто дать ссылки?
Да, агент может открыть сайты и снять их в браузере. Если сайт закрыт от автоматического просмотра, добавьте скриншоты. Анимацию удобно показать записью экрана.
Что делать, если нет своих фотографий?
Можно построить оформление на шрифтах, графике и анимации. Агент также может создать изображения программно.
Получится копия чужого сайта?
Агент переносит приёмы оформления в ваш проект. Тексты, изображения и содержание берёт из ваших материалов.
Что делать, если работа прервалась?
Напишите продолжай. Агент прочитает журнал и вернётся к незавершённому этапу.
Можно посмотреть план до сборки?
Да. Запустите командой создавай, но покажи ТЗ. Агент подготовит техническое задание и дождётся вашего решения.
Можно потом поменять сайт?
Да. Напишите переделай… и объясните, что изменить. Агент внесёт правки и повторит проверку.
Где разместить готовый сайт?
На хостинге для статических сайтов.
Начните с сайта, который вам нравится.
Добавьте примеры и расскажите о своём проекте. Инструкции для агента уже собраны — всю оставшуюся работу он сделает за вас.
Забрать набор — 990 ₽