Что получится
Одностраничный сайт с цветами, шрифтами и текстами твоего бизнеса. Claude сам откроет его в браузере, снимет на ширине телефона и компьютера и исправит, что съехало.
Быстрый путь
Если Claude Code уже стоит и ты хотя бы раз открывал его командой claude, введи в терминале (окне для команд) две команды по очереди. Потом открой Claude Code в пустой папке командой claude и вставь промпт - задание для Claude. Текст в квадратных скобках замени своим.
claude plugin install frontend-design@claude-plugins-official
claude plugin install playwright@claude-plugins-official
Используй скилл frontend-design. Сделай одностраничный сайт в папке site/ одним файлом index.html. Бизнес: [что продаём, кому, город]. Нужно на странице: [разделы и главная кнопка]. Цены, часы и адрес не выдумывай - ставь [уточнить]. Потом открой страницу в браузере через Playwright, сделай снимки экрана шириной 390 и 1440, найди и исправь ошибки. Не больше 3 кругов проверки.Проверили: 28.10.2026 на Mac в Claude Code со скиллом frontend-design и плагином Playwright на трёх вымышленных бизнесах - кофейне, студии керамики и цветочной мастерской. Быстрый путь, шаг 6 и шаги 7-8 запускали отдельными прогонами, кофейню - одним общим промптом памятка+сайт (с неё картинки в шаге 7). В каждом прогоне сайта Claude сам открыл страницу, снял её на ширине 390 и 1440 и за 2-3 круга исправил, что нашёл; в шаге 6 он открыл сайт-образец в браузере. В одном прогоне страница не открылась в браузере напрямую - Claude открыл её другим способом, после этого в промпт шага 7 добавили такую подсказку. Не проверили: установку командами claude plugin install - тот же скилл, файл в файл, клали прямо в папку проекта; окна разрешений - прогоны шли одной командой без вопросов; промпт шага 7 с подсказкой про другой способ открыть страницу; браузер с окном - Playwright работал без окна; работу на Windows и Linux.
Что нужно и сколько стоит
- Компьютер с macOS, Windows или Linux.
- Claude Code и платный тариф Claude. Pro стоит $17 в месяц при оплате за год ($200 сразу) или $20 при помесячной оплате. На бесплатном тарифе Free Claude Code нет. Подойдут и тарифы Max, Team, Enterprise. Цены - на странице тарифов Claude.
- Скилл - набор правил для Claude. Здесь это официальный скилл Anthropic
frontend-design: он задаёт палитру, шрифты и подачу под твой бизнес. Скилл бесплатный, лицензия Apache 2.0 разрешает свободно им пользоваться. - Плагин - дополнение к Claude Code. Скилл и проверка ставятся плагинами из официального каталога Anthropic. Проверку даёт плагин Playwright от Microsoft: через него Claude открывает страницу в браузере и снимает её.
- Node.js - программа, на которой работает Playwright.
С телефона
С телефона можно прочитать страницу и сохранить промпты в заметки. Ставить программы и делать сайт - на компьютере: открой там эту страницу.
Шаг 1 Поставь Claude Code
Где: терминал - окно для команд на компьютере.
На Mac или Linux вставь команду:
curl -fsSL https://claude.ai/install.sh | bash
На Windows - в PowerShell (командной строке Windows):
irm https://claude.ai/install.ps1 | iex
Пока программа скачивается, терминал ничего не показывает - это нормально.
Должно получиться: в новом окне терминала команда claude --version пишет номер версии.
Если не получилось: терминал пишет, что claude не найден, - открой раздел про эту ошибку в инструкции по установке Claude Code.
Шаг 2 Войди в Claude Code
При первом запуске Claude Code просит войти в аккаунт и сам подключает официальный каталог плагинов.
Где: в терминале.
claude
Войди в аккаунт Claude по подсказкам в браузере. После входа закрой окно терминала.
Должно получиться: ты вошёл в аккаунт, Claude Code ждёт твоего сообщения.
Если не получилось: вернись к шагу 1 и проверь claude --version.
Шаг 3 Поставь скилл дизайна
Где: в новом окне терминала.
claude plugin install frontend-design@claude-plugins-official
Должно получиться: терминал пишет строку, которая начинается с Successfully installed plugin: frontend-design@claude-plugins-official - плагин установлен. Он подключится при следующем запуске Claude Code.
Если не получилось: без первого входа из шага 2 каталог плагинов не подключён - пройди шаг 2 и повтори команду.
Шаг 4 Поставь проверку в браузере
Где: в том же терминале.
Сначала поставь Node.js с nodejs.org, если его ещё нет. Потом введи:
claude plugin install playwright@claude-plugins-official
Должно получиться: терминал пишет строку, которая начинается с Successfully installed plugin: playwright@claude-plugins-official.
Если не получилось: проверь, что Node.js установлен, и повтори команду.
Шаг 5 Открой Claude Code в пустой папке
В этой папке лягут сайт, памятка бренда и снимки проверки.
Где: создай новую пустую папку и открой терминал в ней.
claude
Claude Code спрашивает разрешение, перед тем как создать файл или открыть браузер. Прочитай, что он хочет сделать, и разреши.
Должно получиться: Claude Code открыт в этой папке и ждёт сообщения.
Шаг 6 Собери памятку бренда
Памятка нужна для первой версии сайта и для всех правок после. Впиши в промпт свой бизнес, цвета, 2-3 своих текста и ссылки на 1-3 сайта, которые нравятся.
Где: в Claude Code.
Используй скилл frontend-design. Сделай файл brand.md - памятку моего бренда для сайта: цвета, шрифты с русскими буквами, как мы говорим с клиентами и что нам не подходит. Бизнес: [что продаём, кому, город]. Цвета: [свои цвета или «предложи сам по теме»]. Как говорим: [2-3 примера наших текстов]. Сайты, которые нравятся: [1-3 ссылки] - открой их в браузере через Playwright и опиши, что в них взять: подача, плотность, движение, без копирования. Не подходит: шаблонные фиолетовые градиенты и стоковые фото.Должно получиться: в папке появился brand.md, а Claude рассказал, что взял с сайтов-образцов.
Если не получилось: Claude не открыл сайт-образец - напиши ему: «открой ссылку через Playwright».
Шаг 7 Сделай сайт с проверкой
Где: в Claude Code, в той же папке.
Используй скилл frontend-design и памятку brand.md. Сделай одностраничный сайт в папке site/ одним файлом index.html без сборки. Нужно на странице: [разделы и главная кнопка, например «Позвонить»]. Тексты на русском, цены, часы и адрес не выдумывай - ставь [уточнить]. Добавь 2-3 спокойные анимации: появление блоков при прокрутке, наведение на кнопки. Потом проверь себя: открой страницу в браузере через Playwright (не открывается напрямую - открой другим способом и скажи каким), сделай снимки экрана шириной 390 и 1440, сохрани их в папку snimki/, посмотри и найди ошибки - наезжающий текст, пустые места, ошибки в консоли, невидимые кнопки - и исправь. Повтори проверку, пока ошибок нет, но не больше 3 кругов. В конце коротко напиши, что исправил на каждом круге.
Увеличить
УвеличитьЧтобы посмотреть сайт самому, дважды щёлкни по файлу site/index.html в папке.
Должно получиться: в папке есть site/index.html и snimki/, а Claude написал, что исправил на каждом круге.
Если не получилось: Claude пишет, что не может открыть страницу в браузере, - проверь Node.js (шаг 4) и попроси его открыть файл site/index.html другим способом.
Шаг 8 Поправь сайт словами
Опиши, что не нравится, - Claude поправит и снова снимет страницу.
Где: в Claude Code, в той же папке.
Поправь сайт в site/index.html: [что не нравится, своими словами]. Сверься с brand.md. Потом снова открой страницу в браузере через Playwright, сделай снимки шириной 390 и 1440 в папку snimki/ и проверь, что после правки ничего не поехало. В конце напиши, что поменял.Должно получиться: правка видна на сайте, на новых снимках ничего не съехало.
Итоговая проверка
Перед тем как показывать сайт людям:
- Прочитай весь текст на сайте, сверь названия товаров, меню и услуг со своими.
- Попроси Claude заменить все пометки «уточнить» твоими ценами, часами, адресом и телефоном.
- Форма заявки и кнопка звонка могут быть заглушкой: проверь, что номер набирается, а заявка куда-то приходит. Если нет - попроси Claude подключить их.
- Сайт пока - файл на твоём компьютере. Как выложить его в интернет, эта инструкция не рассказывает.
Если не получилось
- Claude не находит скилл. Закрой Claude Code и открой снова командой
claude- плагины подключаются при запуске. Не помогло - повтори шаг 3. - Claude не может открыть браузер. Проверь, что стоит Node.js, и повтори шаг 4.
- Сайт выглядит шаблонно. Допиши в
brand.mdсвои тексты и ссылки на сайты, которые нравятся, и повтори шаг 7.