Гайд: сборка дорогого сайта в Claude с помощью Taste Skill

Инструкция по настройке Claude Code и открытого навыка Taste Skill для анализа стильных референсов и верстки веб-страниц под твою нишу. Подходит предпринимателям и маркетологам, которым нужен качественный веб-дизайн без затрат на агентства и долгих согласований.

Шаг 1. Подготовка окружения и установка Taste Skill

1. Открой терминал на своем компьютере в папке веб-проекта.
2. Проверь наличие Node.js (для корректной работы навыка требуется версия Node 22 или новее), выполнив команду:

node -v

1. Установи агентский навык Taste Skill из репозитория Leonxlnx/taste-skill с помощью команды:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

1. В консоли отобразится подтверждение загрузки файла SKILL.md в папку .claude/skills/ вашего проекта.

Шаг 2. Подключение Playwright для работы с сайтами

1. Чтобы Claude мог заходить на открытые веб-ресурсы, считывать точные стили и визуально проверять результат работы в реальном браузере, установи Chromium-компонент Playwright.
2. Запусти команду установки в терминале:

npx playwright install chromium

1. После завершения скачивания ты увидишь статус готовности Chromium. Теперь Claude оснащен инструментом браузерного анализа.

Шаг 3. Запуск анализа референса и сборки страницы

1. Запусти Claude Code в папке проекта командой claude.
2. Скопируй и отправь промпт, указав адрес понравившегося сайта и описание своего бизнеса:

Используй навык design-taste-frontend и инструмент Playwright.
Зайди по ссылке на сайт-референс: [ВСТАВЬ_ССЫЛКУ_НА_САЙТ]

Задачи:
1. Открой страницу через Playwright, изучи верстку и извлеки основные дизайн-токены: цветовые HEX-коды, шрифтовые пары, размеры отступов и стили элементов.
2. Используя эти замеры как ориентир по уровню качества, сформируй структуру и сверстай лендинг для моей ниши: [ОПИСАНИЕ_ТВОЕГО_БИЗНЕСА И ПРЕДЛОЖЕНИЯ].
3. Не копируй чужой текст и контент, а создай уникальную адаптацию под мой продукт.

1. В терминале ты увидишь процесс выполнения: Claude откроет браузер в фоновом режиме, замерит CSS-параметры страницы и сформирует первичный код макета.

Шаг 4. Сравнение вариантов и обоснование дизайна

1. Чтобы выбрать наиболее эффективное визуальное решение, попроси Claude подготовить несколько вариаций первого экрана (Hero-секции).
2. Отправь следующий промпт:

Сделай 3 альтернативных варианта верстки первого экрана:
- Вариант A: Минималистичный (крупный заголовок, фокус на оффере).
- Вариант B: Редакционный (асимметричная сетка, фокус на визуале).
- Вариант C: Конверсионный (акцент на преимущество продукта и заметную CTA-кнопку).

Проанализируй все 3 варианта. Напиши краткое обоснование: какой макет объективно лучше подходит для моей целевой аудитории с точки зрения читаемости и UX/UI, и почему.

1. Ты увидишь текстовый разбор каждого варианта с аргументами по иерархии, контрасту и вниманию пользователя, после чего останется утвердить лучший макет.

Лимиты и нюансы

• Доступ к сайту: Playwright работает с публично доступными веб-страницами. Если сайт защищен сложной капчей, Claude не сможет его открыть — в таком случае загрузите скриншоты сайта в диалог.
• Требования к системе: Для выполнения локальных скриптов анализа требуется Node.js версии 22+ и свободная оперативная память для запуска Chromium.
• Стоимость: Код репозитория Leonxlnx/taste-skill бесплатен (лицензия MIT). Оплата происходит только за токены API Anthropic при работе с моделью Claude.

Что дальше

Сборка первого макета — лишь часть задачи. Чтобы сайт приносил прибыль, его нужно интегрировать с CRM, подключить автоворонку и настроить регулярную обработку входящих заявок.

Если ты хочешь спроектировать и внедрить автономную ИИ-систему под задачи своего бизнеса, напиши в директ @ii.systema слово «система». Разберем твои процессы и подберем решение.