Дизайн Claude Code Cursor OpenAI Codex

Impeccable Непревзойденный механизм доработки контента

Руководство по разработке агентов для написания кода с помощью искусственного интеллекта. 1 навык, 23 команды, итерация в реальном браузере и 41 детерминированное правило для фронтенд-дизайна, созданного с помощью ИИ.

Фронтенд-дизайн от Anthropic стал первым широко используемым дизайнерским навыком для Claude. С него все и началось.

Все модели обучались на одних и тех же шаблонах SaaS. Если не следовать рекомендациям, в каждом проекте вы увидите одни и те же элементы: фиолетовый и синий градиенты, карточки внутри карточек, серый текст на цветном фоне, значок в виде квадрата со скругленными углами над каждым заголовком.

Impeccable дополнения:

Один поток настройки. /impeccable init записывает PRODUCT.md и предлагает DESIGN.md, чтобы последующие команды знали аудиторию, направление бренда/продукта, стиль, антиреференсы, цвета, тип и компоненты. 23 команды. Общий словарь дизайна с вашим ИИ: polish, audit, critique, distill, animate, bolder, quieter и многое другое. 41 детерминированное правило для детектора плюс критические проверки только с использованием LLM. Интерфейс командной строки и расширение для браузера запускают детерминированные правила без использования LLM и API-ключа.

Sergey
Автор
Sergey
Опубликовано 10.06.2026
0,0
Views 24

Инструкция по применению

Установка Impeccable

Вариант 1: CLI installer (Recommended)

npx impeccable skills install

Программа автоматически определяет вашу среду разработки и записывает скомпилированную для нее сборку в нужное место (.claude/skills/, .cursor/skills/ и т. д.). Работает с Cursor, Claude Code, Gemini CLI, Codex CLI и другими поддерживаемыми инструментами. После этого перезагрузите среду разработки.

Пользователи Claude Code могут установить плагин с помощью /plugin marketplace add pbakaus/impeccable. Также можно использовать npx skills add pbakaus/impeccable общего назначения, но в этом случае будет установлена одна общая сборка для всех наборов инструментов, а не та, которая была скомпилирована для вашего набора.

Вариант 2: Git Submodule

Для команд, которые хотят, чтобы Impeccable поставлялся и обновлялся через Git, добавьте это репозиторий в качестве подмодуля и свяжите скомпилированную сборку провайдера с папками вашего фреймворка:

git submodule add https://github.com/pbakaus/impeccable .impeccable
npx impeccable skills link --source=.impeccable --providers=claude,cursor
git add .gitmodules .impeccable .claude .cursor
git commit -m "Добавить навыки Impeccable"

Используйте провайдеров, которые нужны вашему проекту, например claude, cursor, gemini, codex, github, opencode, pi, qoder, trae, trae-cn или rovo-dev. Команда связывает отдельные папки с навыками из .impeccable/dist/universal/ и не затрагивает существующие каталоги с реальными навыками, если только вы не укажете --force.

Для обновления позже:

git submodule update --remote .impeccable
npx impeccable skills link --source=.impeccable --providers=claude,cursor

Вариант 3. Скачать с сайта

Зайдите на impeccable.style, скачайте ZIP-архив с инструментом и распакуйте его в свой проект.

Вариант 4. Копирование из репозитория

Cursor:

cp -r dist/cursor/.cursor your-project/

Примечание: для использования навыков с курсором требуется настройка. Переключитесь на ночной канал в настройках курсора → Бета Включите навыки агента в настройках курсора → Правила Узнайте больше о навыках управления курсором

Claude Code:

# Project-specific
cp -r dist/claude-code/.claude your-project/

# Or global (applies to all projects)
cp -r dist/claude-code/.claude/* ~/.claude/

OpenCode:

cp -r dist/opencode/.opencode your-project/

Pi:

cp -r dist/pi/.pi your-project/

Gemini CLI:

cp -r dist/gemini/.gemini your-project/

Примечание: для использования навыков Gemini CLI требуется настройка. Установите предварительную версию: npm i -g @google/gemini-cli@preview Запустите /settings и включите «Навыки» Запустите /skills list для проверки установки Узнайте больше о навыках работы с Gemini CLI

Codex CLI:

# Project-local
cp -r dist/agents/.agents your-project/

# Or user-wide
mkdir -p ~/.agents/skills
cp -r dist/agents/.agents/skills/* ~/.agents/skills/

Субагент-производитель ресурсов поставляется вложенным в agents/ папку навыка, которую автоматически находит Codex. Отдельная .codex/agents/ копия не требуется.

GitHub Copilot:

cp -r dist/github/.github your-project/

Trae:

# Trae China (domestic version)
cp -r dist/trae/.trae-cn/skills/* ~/.trae-cn/skills/

# Trae International
cp -r dist/trae/.trae/skills/* ~/.trae/skills/

Примечание: у Trae есть две версии с разными каталогами конфигурации: Trae China: ~/.trae-cn/skills/ Trae International: ~/.trae/skills/ После копирования перезапустите Trae IDE, чтобы активировать навыки.

Rovo Dev:

# Project-specific
cp -r dist/rovo-dev/.rovodev your-project/

# Or global (applies to all projects)
cp -r dist/rovo-dev/.rovodev/skills/* ~/.rovodev/skills/

Qoder:

# Project-specific
cp -r dist/qoder/.qoder your-project/

# Or global (applies to all projects)
cp -r dist/qoder/.qoder/skills/* ~/.qoder/skills/

Похожие Skills

Дизайн Claude Code Cursor OpenAI Codex

Улучшают веб-интерфейсы

Переносные навыки агента, которые улучшают интерфейсы, созданные с помощью искусственного интеллекта: более …

Star 0,0 Views 25
Дизайн Claude Code Cursor OpenAI Codex OpenCode Other Agents

visual-explainer - agent skill, превращающий вывод терминала в красивые HTML

visual-explainer - Это навык агента, который преобразует сложный вывод терминала в стилизованные …

Star 5,0 Views 146
Дизайн Claude Code Cursor Windsurf

Refactoring UI — Аудит интерфейса

Аудит и исправление визуальной иерархии, отступов, цвета и глубины в веб-интерфейсах по …

Star 0,0 Views 217
Дизайн Claude Code Cursor Windsurf

Frontend Design Excellence

Создаёт отличительные, производственного уровня интерфейсы с высоким качеством дизайна. Используйте когда нужно …

Star 0,0 Views 222

Тут может быть ваша реклама

Пишите info@aisferaic.ru

Авторизуйтесь, чтобы оставить комментарий.

Комментариев: 0

Нет комментариев.