Три шага, после которых Claude перестаёт лепить всем один и тот же сайт: библиотека вкуса, два дизайн-скилла с MCP и сборка веером из пяти версий. Все промпты ниже - рабочие, скопировал и вставил.
▶ Смотреть видеоClaude сам разложит твои скриншоты по семьям стилей и даст словарь, которым дальше с ним разговаривать.
Impeccable и Taste Skill ставятся одним промптом прямо в чат, без терминала и установщиков.
Higgsfield по MCP: модель сама сходит за картинками в 2K и вставит их в готовый слот вёрстки.
Интерфейс прямо на сайте: шрифты, цвета и анимации ползунками, нужный CSS копируется кнопкой.
Набери 20 скриншотов сайтов, которые тебе нравятся, и сложи в папку screens рядом с проектом. Это твой вкус в файлах - дальше Claude берёт стиль оттуда, а не из головы.
собери мне локальный каталог референсов и запусти его на локальном сервере, не файлом рядом папка screens там скриншоты сайтов которые мне нравятся сначала посмотри каждую картинку по очереди и вытащи с неё название сайта, стиль, шрифты, цвет, текстуру, сетку дальше собери приложение: 1 сгруппируй все скриншоты по семьям стилей, каждой семье дай короткое название из двух трёх слов 2 сверху панель фильтров по семьям, у каждой счётчик сколько внутри, слева кнопка все с общим числом, справа плашка сколько всего семей получилось 3 сетка карточек: превью скриншота, название сайта, подпись семьи и теги словарь чем этот дизайн держится. если тегов больше трёх показывай три и плюс сколько осталось 4 по клику на карточку модалка: название, семья, одна строка почему этот дизайн работает, полный список тегов 5 в модалке блок рецепта картинки: шаблон вида подставь свой объект, отправить в higgsfield gpt image 2 в качестве 2k, и под ним готовый текст рецепта под этот стиль 6 в модалке три кнопки скопировать бриф это описание для сборки всего сайта в этом стиле, скопировать промпт картинки, закрыть 7 на каждую семью отдельный экран со сводным словарём стиля, там теги всей семьи в одном месте всё тяни из папки screens автоматически, ничего не вписывай руками, добавлю картинки потом сам подхватит оформи тёмно, моношрифтом, как технический каталог. без фиолетовых градиентов и без inter
Руками ничего не устанавливаем - просто просим Claude поставить их себе. Скиллы ложатся в папку проекта, а не глобально: открыл другой проект - ставь заново.
поставь себе два дизайн-скилла в этот проект https://github.com/pbakaus/impeccable https://github.com/Leonxlnx/taste-skill скачай репозитории и положи скиллы в .claude/skills этого проекта второй это не один скилл а тринадцать, ставь все в конце покажи списком что реально встало
Не пытайся получить всё с одного захода, это лотерея. Закидываешь широкую сеть на пять эстетик сразу и выбираешь глазами.
собери лендинг для венчурного фонда mastodont ventures, они заходят в ии стартапы на самом раннем этапе главная кнопка прислать свой проект — на странице она подписана send us your project, стоит в первом экране и повторяется в конце страницы интент: чтобы основатель за 3 секунды подумал эти люди видят будущее раньше остальных и им можно доверить свой проект. спокойная сила, без хайпа и без пафоса всегда: одна большая монументальная картинка держит страницу, изображение вплетено в макет а не лежит отдельной шапкой, высокая типографическая иерархия, заголовок это утверждение о деле фонда а не лозунг, технические пометки на полях никогда: фиолетовые градиенты, глянцевые 3d шары, стоковые улыбки, всё скругленное, сетка иконок с фичами, inter и системные шрифты, радужная палитра сделай 5 версий страницы, каждая в своей папке v1 v2 v3 v4 v5, интент и запреты одинаковые для всех не смешивай направления, каждая версия честно уходит в свою эстетику важно: картинки первого экрана придут позже. сейчас ничего не генерируй и не подбирай в каждой версии зарезервируй место под главную картинку ровно там, где сказано в строке место, с правильными пропорциями, и заполни его плоской css заглушкой в палитре направления размеры шрифтов и воздуха задай так, будто картинка уже стоит, чтобы настоящая встала без единого изменения вёрстки направление 1 бумажный коллаж: рваная бумага, полароид, скотч и скрепки, ransom-буквы, гранж-скан, штампы, чёрное на белом, один акцентный цвет референс screens/реф1.jpg посмотри его до вёрстки, повторяй ощущение а не содержание будущая картинка: скан рваного бумажного коллажа с полароидом и штампом место: изолированный коллаж справа по центру на бумажном фоне, вокруг моно-выноски направление 2 кислотный плакат: жёлтый на чёрном, плакатный гротеск во весь экран, силуэты, гигантский астериск, номерные блоки, контур-повтор, гранж-шум референс screens/реф3.jpg посмотри его до вёрстки, повторяй ощущение а не содержание будущая картинка: дуотон силуэт в движении, кислотный жёлтый на чёрном место: во весь экран, заголовок слева по самой тёмной части кадра направление 3 тёмная сцена: луч прожектора, чёрная сцена, узкий гротеск, ч/б фото, много воздуха, тёплый свет, висящая лампа референс screens/реф7.jpg посмотри его до вёрстки, повторяй ощущение а не содержание будущая картинка: ч/б кадр с одним источником света в темноте, много пустоты сверху место: во весь экран, верхняя половина тёмный воздух под мелкий центрированный заголовок направление 4 металл и электрик: электрик синий, жидкий металл, сжатый гротеск, модульные блоки, мелкие подписи, серые заливки, текст сквозь фото референс screens/реф5.jpg посмотри его до вёрстки, повторяй ощущение а не содержание будущая картинка: макро жидкого металла с электрик синим отсветом место: правая половина кадра, текстовая колонка слева, мелкие подписи по краю направление 5 алый акцент: алый на сером, тонкий сериф, ч/б стрит фото, красная плашка, круглая маска, триптих, наклонный дисплей референс screens/реф9.jpg посмотри его до вёрстки, повторяй ощущение а не содержание будущая картинка: ч/б портрет в круглой маске с алой плашкой место: правая половина на сером, слева колонка с тонким серифом у каждой версии сверху панель переключения версий в две строки: номер сверху, название снизу, плюс кнопка all 5 и подпись keys 1-5, переключение клавишами 1-5 графику и фактуру рисуй кодом, генераторы картинок пока не подключаем весь текст на странице на английском тон текста: короткое утверждение с характером, а не рекламный лозунг используй скилл impeccable
Выбрал стиль - не тыкай пальцем в небо дальше, а иди тем же веером внутри эстетики. Первый экран останется, поменяется только тело страницы.
давай оставим версию кислотный плакат, сделай мне три варианта этой же эстетики, поменяй формат тела страницы
Claude сам сходит в Higgsfield, проверит баланс кредитов, сгенерит варианты в 2K и соберёт страницу для примерки - об этом даже просить не надо.
берём версию с индексом слева. теперь надо добить главную картинку в библиотеке есть примеры первого экрана для этой эстетики, посмотри их сделай четыре разные картинки под этот экран, используй higgsfield mcp, качество 2k и выведи их одной страницей чтобы я мог переключать
давай возьмём вариант 4 и сделай несколько его версий, добавь немного цвета сейчас всё чёрно белое, хочу лёгкий акцент, покажи так же одной страницей
Ставим выбранную картинку и просим убрать резкий стык между первым экраном и телом, плюс поочерёдное появление элементов.
ставим выбранный вариант как главную картинку на страницу посмотри переход между первым экраном и телом, чтобы не было резкого обрыва, сделай мягко и при загрузке пусть элементы выплывают по очереди, чтобы ощущалось весомо
Вместо «сделай попремиальнее» - собираем интерфейс настройки поверх дев-сервера. Такую панель можно отдавать заказчику вместе с сайтом.
сделай как в claude design, добавь панель твиков поверх дев сервера чтобы я мог менять шрифт заголовка, размеры, начертание, акцентные цвета, анимацию и отдельно типографику тела: гарнитуру, размер, интерлиньяж вообще всё где есть решение по дизайну давай агрессивно, выкати максимум настроек, и кнопку скопировать css