EV
ce-frontend-design
Создаёт веб-интерфейсы с высоким качеством дизайна: лендинги, веб-приложения, дашборды, админ-панели и компоненты. Учитывает существующие дизайн-системы, работает с композицией, типографикой, цветом, анимацией и копирайтингом. Подходит для новых проектов и доработки существующих.
Что делает навык
Создаёт уникальные интерфейсы уровня production, избегая шаблонного AI-дизайна. Работает с композицией, типографикой, цветом, анимацией и копирайтингом, адаптируясь к существующим дизайн-системам или создавая новые с нуля.
Когда применять
- Разработка лендингов и маркетинговых страниц с нуля
- Создание дашбордов и веб-приложений с плотной подачей данных
- Добавление новых компонентов в существующие приложения с сохранением стиля
- Редизайн или доработка интерфейсов с учётом текущей дизайн-системы
Как работает
- Определить контекст: сканировать кодбейс на наличие дизайн-токенов, библиотек (shadcn/ui, Tailwind и др.) и выбрать режим (Existing, Partial, Greenfield, Ambiguous)
- Составить план: сформулировать визуальную концепцию, план контента и 2–3 идеи взаимодействия (motion)
- Реализовать дизайн: применить принципы типографики, цвета, композиции и доступности (WCAG AA), избегая карточек без необходимости
- Проверить визуально: выполнить один проход самопроверки на соответствие стандартам качества и устранить явные ошибки
Примеры запросов агенту
Создай лендинг для нового SaaS-продукта с нуля, используя зелёный акцентный цвет и шрифт с засечками для заголовков
Добавь компонент фильтрации в существующую админ-панель, строго следуя текущей дизайн-системе и токенам
Разработай дашборд с тёмной темой и плотной подачей данных, используя моноширинные шрифты для цифр
Что понадобится
- Доступ к инструментам поиска файлов и контента (Glob/Grep) для анализа кодбейса
- Наличие в проекте инструментов визуализации или браузерных MCP-инструментов для проверки (Playwright, Puppeteer и др.)
Описание составлено по SKILL.md навыка, сверено 09.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «ce-frontend-design» из репозитория:
# https://github.com/everyinc/compound-engineering-plugin
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r ce-frontend-design/ ~/.claude/skills/ce-frontend-design/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.