impeccable
Создавайте качественные интерфейсы с помощью ИИ
Интерфейсы, сгенерированные ИИ, часто выглядят шаблонно и безлико. Impeccable направляет ИИ через экспертные дизайнерские решения, создавая уникальный фронтенд-код производственного качества.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «impeccable». Создать hero-секцию для портфолио креативного агентства с выразительной типографикой и асимметричной компоновкой
Ожидаемый результат:
Адаптивная hero-секция с плавной дисплейной типографикой через clamp(), асимметричная сетка с вариативными отступами, уникальная шрифтовая пара, выбранная по процедуре выбора шрифтов, и чёткая визуальная иерархия, проходящая тест прищура.
Использование «impeccable». Извлечь повторно используемые токены со страницы с несогласованными значениями цветов
Ожидаемый результат:
Согласованная система токенов дизайна с примитивными цветами на основе OKLCH, тонированными нейтральными шкалами, семантическими маппингами цветов для основных и статусных цветов и документированными рекомендациями по использованию каждого токена.
Использование «impeccable». Спроектировать доступную контактную форму с корректной валидацией
Ожидаемый результат:
Форма с видимыми метками, валидацией по blur, описательными сообщениями об ошибках с aria-describedby, корректными кольцами фокуса через focus-visible и подходящими по размеру зонами нажатия для мобильных пользователей.
Аудит безопасности
Низкий рискAll 329 static findings are false positives. The scanner misinterpreted Markdown code fences as shell commands, design terminology as cryptographic patterns, and documentation URLs as network risks. The only real operational risk is a post-update cleanup script that removes deprecated skill files from the filesystem, which is benign and documented to the user before execution. No malicious intent, data exfiltration, or dangerous code execution detected.
Проблемы низкого риска (1)
Факторы риска
⚙️ Внешние команды (1)
📁 Доступ к файловой системе (3)
Оценка качества
Что вы можете построить
Редизайн маркетингового сайта
Основатель стартапа хочет, чтобы его лендинг выделялся среди множества одинаковых SaaS-шаблонов. Impeccable направляет ИИ через смелое эстетическое направление с уникальной типографикой и цветовыми решениями.
Создание системы дизайна с нуля
Разработчику нужно извлечь согласованные токены дизайна, компоненты и паттерны из существующей кодовой базы в повторно используемую систему дизайна. Режим extract выявляет повторно используемые паттерны и формализует их.
Доступный дизайн форм и взаимодействий
Продуктовой команде нужны правильно спроектированные формы, состояния фокуса, паттерны загрузки и навигация с клавиатуры. Impeccable предоставляет справочные материалы по соответствию WCAG, Popover API и дизайну колец фокуса.
Попробуйте эти промпты
Запустите /impeccable teach, чтобы собрать контекст дизайна для моего проекта. Сначала просканируйте кодовую базу, затем задайте мне вопросы, на которые ещё нужны ответы.
Запустите /impeccable craft страницу тарифов для SaaS-продукта. Целевая аудитория — владельцы малого бизнеса, ценящие ясность и скорость. Тон бренда — уверенный, практичный и без лишних слов.
Запустите /impeccable extract общие токены дизайна и повторно используемые компоненты из моей существующей библиотеки компонентов. Сосредоточьтесь на цветах, отступах, типографике и вариантах кнопок.
Запустите /impeccable craft панель мониторинга в тёмной теме для инструмента наблюдаемости, используемого SRE-инженерами. Интерфейс должен быть насыщенным информацией, но читаемым, с приглушённой цветовой палитрой и чёткой иерархией визуализации данных.
Лучшие практики
- Всегда собирайте контекст дизайна у пользователя перед созданием любых дизайн-работ. Проверьте существующие инструкции, затем .impeccable.md, затем запустите поток teach.
- Придерживайтесь смелого эстетического направления вместо отступления к безопасным шаблонным настройкам по умолчанию. И максимализм, и минимализм работают при осознанном исполнении.
- Запускайте тест на ИИ-шлак для каждого результата: узнает ли кто-то сразу, что это сгенерировано ИИ? Если да, дизайн нуждается в более уникальных творческих решениях.
Избегать
- Использование рефлекторных шрифтов, таких как Inter, Fraunces, Space Grotesk и Cormorant, создающих однообразие в проектах, сгенерированных ИИ.
- Использование по умолчанию тёмных фонов с голубым текстом, градиентов от фиолетового к синему или светящихся акцентов на тёмном фоне — наиболее узнаваемых признаков дизайна от ИИ.
- Использование акцентных полос border-left на карточках, градиентного текста и глассморфизма в качестве декора, которые явно запрещены как паттерны ИИ-шлака.
Часто задаваемые вопросы
Когда следует использовать Impeccable?
В чём разница между режимами craft, teach и extract?
Работает ли Impeccable с React, Vue или другими фреймворками?
Как Impeccable предотвращает создание типовых дизайнов от ИИ?
Может ли Impeccable помочь с обеспечением доступности?
Что происходит при обновлении до новой версии Impeccable?
Сведения для разработчиков
Автор
pbakausЛицензия
Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution.
Ссылка
main
Структура файлов