Impeccable помогает Claude создавать сайты, которые не выглядят как ИИ-поделки
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Это Impeccable, инструментарий для обеспечения качества дизайна, который дает вашей среде глубокие знания,
00:00:05необходимые для создания потрясающих сайтов, выявляя 37 антипаттернов дизайна, чтобы ваш ИИ
00:00:12перестал выдавать тот самый шаблонный дизайн, который вы видели столько раз. Он даже позволяет
00:00:17человеку вносить очень точные правки прямо в браузере. Но не очередной ли это распиаренный ИИ-инструмент,
00:00:22который выдает лишь Markdown-файлы и сжигает ваши токены, или он реально полезен? Подписывайтесь, и давайте
00:00:28выясним. Если вы смотрели мое видео о Superpowers, плагине, который помогает Claude писать код лучше,
00:00:36то это нечто похожее, но для дизайна, причем в хорошем смысле. Он дает структурированный рабочий процесс,
00:00:42помогая ИИ создавать отличный дизайн и сайты независимо от агента или среды. Создатель — Пол Бэкхаус,
00:00:47независимый инженер продукта, который на самом деле создал JQUI (если вы достаточно стары, чтобы помнить это),
00:00:53и он так долго писал в Twitter о прогрессе Impeccable, что я уверен,
00:00:58именно это сделало инструмент таким популярным. Что ж, давайте попробуем. Я собираюсь создать домашнюю
00:01:02страницу для своего инструмента по работе с кино, используя Impeccable, чтобы воплотить идеи из головы
00:01:08на экран. Посмотрим, что получится. Я буду использовать четыре ключевые подкоманды: teach, shape,
00:01:14craft и iterate. Ну, iterate — это не совсем подкоманда, но позже в видео станет понятнее.
00:01:19Поехали. Я уже установил навык Impeccable через skill.sh и
00:01:25создал пустую директорию, куда попадет весь код и файлы дизайна. Итак,
00:01:29откроем Claude Code, и первым делом я запущу подкоманду Impeccable teach,
00:01:34которая объяснит системе, для кого этот продукт. Она должна создать файл project.md с
00:01:40важными данными: целью продукта, айдентикой бренда и принципами дизайна. Нажимаем Enter,
00:01:46система говорит, что директория пуста, и мы переходим к первому раунду вопросов. Сейчас
00:01:51важно понять, прежде чем продолжать, разницу между брендом и
00:01:55продуктом. Стиль дизайна продукта — это что-то вроде этого, со шрифтами без засечек и полужирной
00:02:00иерархией, что идеально для утилит или приложений. В то время как стиль бренда тяготеет к
00:02:05антикве (с засечками), курсиву и больше подходит для журналов или изданий. Подробнее о
00:02:10различиях есть на сайте Impeccable, но в моем конкретном случае это будет
00:02:15продукт. Я вписал ответы на три вопроса, нажимаю Enter, и теперь
00:02:19мне предлагают еще несколько вопросов: об индивидуальности, референсах и аудитории. Теперь я
00:02:24ответил на эти уточняющие вопросы, указав названия сайтов, которые мне нравятся, а также
00:02:28целевую аудиторию. После этого Impeccable создает файл product.md и выводит
00:02:33краткое резюме. На этом этапе нас спрашивают: хотим ли мы запустить Impeccable document для создания
00:02:38файла design.md или вызвать Impeccable shape, чтобы проработать язык дизайна для нашей
00:02:43домашней страницы. Пока я выберу Impeccable shape, потому что хочу сначала определиться с
00:02:48визуалом, прежде чем создавать документ по дизайну. Снова нажимаем Enter, и нас ждет еще раунд вопросов
00:02:53для формирования дизайн-брифа. В некоторых случаях или при использовании определенных сред Impeccable
00:02:59создает так называемый "пробник" (probe) с помощью визуальной модели, чтобы еще больше улучшить
00:03:04дизайн. Но так как у Claude Code нет визуальной модели, я попробую обмануть Impeccable
00:03:08и заставить использовать GPT image 2. Посмотрим, сработает ли это. Я ответил на вопросы о цветовом стиле,
00:03:14макете страницы и используемом технологическом стеке. Я указал, что у меня в терминале прописан
00:03:20ключ OpenAI и я хочу использовать GPT image 2 для создания пробника. Окей, он закончил создание,
00:03:25и мы можем взглянуть на варианты A, B и C, чтобы выбрать подходящий. Вот вариант A, который мне
00:03:30очень нравится. Вот B — тоже неплох, но не так хорош, как A. И вариант C, который
00:03:35отлично справился с генерацией ИИ-изображений, но победителем для меня определенно стал A.
00:03:40Я подтверждаю выбор, и спустя время получаю дизайн-бриф с описанием функций,
00:03:45действий пользователя и массой другой информации. Я отвечу на вопросы, заданные в самом
00:03:50конце, и, надеюсь, после этого система создаст сам дизайн. Теперь, когда все готово, следующим шагом
00:03:55должен был стать запуск Impeccable Craft, но система предложила сделать это за меня, и я нажал "yes".
00:04:00И прямо сейчас она создает сайт, используя Astro и Tailwind. Примерно через пять минут
00:04:06написание кода для дизайна завершено. Созданы все эти страницы Astro, конфигурация Tailwind,
00:04:11и выдан детальный отчет о проделанной работе, что выглядит весьма впечатляюще. Мне
00:04:17нравится, что я могу скопировать URL здесь. Сначала идет версия для macOS, затем тестовое видео — оно
00:04:23не работает, но здорово, что его добавили. И информация о продукте с вот таким эффектом:
00:04:28можно перетаскивать ползунок "до и после", это очень приятная деталь. Есть даже команды для
00:04:33установки и FAQ внизу с работающим аккордеоном. Но я заметил и несколько проблем,
00:04:37например, кнопка закрытия очень маленькая, а расположение команд вот здесь выглядит
00:04:43довольно странно. Теперь, прежде чем переходить к итерациям, я хочу создать файл DesignMD,
00:04:49чтобы иметь возможность вносить правки в другой сессии и чтобы система знала все о моем дизайне. Для этого я запущу
00:04:54Impeccable Document. По завершении создается документ дизайна, содержащий всё: от цветов
00:04:59до типографики и даже CSS-стилей, которые используются в моем проекте. Теперь отсюда мы переходим
00:05:06к итерации нашего дизайна, которая, как я упоминал, не является одной командой, а может включать
00:05:10множество действий. Например, если я хочу добавить анимацию, я могу применить подкоманду animate к частям
00:05:15проекта. Можно использовать bolder, чтобы сделать элементы жирнее, и сразу увидеть разницу,
00:05:20или применить любой инструмент из раздела refine, либо попросить Impeccable автоматически
00:05:25доработать дизайн. И лучший способ проводить такую итерацию — не просто говорить среде,
00:05:30какую секцию я хочу изменить, давая одну из этих подкоманд. Вместо этого можно использовать
00:05:35Impeccable Live — это альфа-версия, которая запускается в Claude Code командой Impeccable Live. Вот что она делает:
00:05:39устанавливает пачку скриптов, подключается к сайту через Astro и запускает сервер на порту 800,
00:05:46который отслеживает любые изменения на живом сайте. Если я перейду в браузер и посмотрю на сайт,
00:05:52то увижу розовый оверлей. Если кликнуть на секцию, скажем, с текстом, то появятся
00:05:58опции, которые я показывал: сделать жирнее, спокойнее, добавить лоска и так далее, или я могу просто
00:06:03напечатать то, что хочу. Например: "сделай текст здесь крупнее". Нажимаю "go", и запрос идет
00:06:09напрямую к агенту, обновляя код на живом сайте. Мы видим, что мой промпт был отправлен
00:06:15в Claude Code: "сделай текст крупнее" с указанием конкретной части сайта, где нужны правки.
00:06:20Так можно продолжать проходиться по разным частям сайта, внося изменения, пока результат не устроит.
00:06:25Например, этот блок с программным текстом, который трудно читать. Я ввожу промпт,
00:06:29выбираю количество вариантов и даю Impeccable сделать свое дело. Теперь это выглядит гораздо,
00:06:34гораздо лучше, и изменения автоматически применились ко всем частям сайта, где отображается
00:06:39код. Вот и всё — краткий обзор того, как создать впечатляющий сайт с нуля,
00:06:44используя Impeccable, Claude Code и GPT image 2. Честно говоря, этот инструмент для тех, кто
00:06:50хочет создать что-то красивое, но не хочет слишком глубоко погружаться в детали дизайна. Для
00:06:55этого я бы посоветовал что-то вроде Pencil, где можно очень точно настроить позиционирование,
00:06:59радиус скругления и всё остальное в дизайне. Если хотите узнать больше о Pencil,
00:07:04посмотрите мое предыдущее видео. Хотя Impeccable не зависит от конкретной модели или среды,
00:07:10я бы сказал, что Claude Code — возможно, не лучшая среда для него, просто потому что Impeccable
00:07:15расходует много токенов, особенно если у вас огромные файлы product.md и design.md, которые используются в
00:07:21каждой подкоманде. А Claude Code в сочетании с моделями Claude — это очень дорого.
00:07:26Если бы у меня был шанс провести эксперимент снова, я бы, скорее всего, использовал Codex CLI или Codex GUI,
00:07:32которые позволяют генерировать изображения. Тогда мне не пришлось бы вручную указывать модель GPT image 2,
00:07:38потому что Impeccable сделал бы это сам, зная о возможностях среды,
00:07:43да и Codex или модели GPT гораздо щедрее в плане лимитов использования. А теперь я попробую
00:07:47то, что делают многие ютуберы: направлю вас на видео, которое
00:07:53рекомендовано алгоритмом YouTube на основе вашей истории просмотров. Так что зацените его.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video