AIKraft/AI/Войти
AIKraft/Skills/gpui-kit-design-guides

gpui-kit-design-guides

Нормативные руководства по дизайну для десктопных приложений GPUI Kit. Используйте перед созданием или изменением экранов, макетов, компонентов и интерфейсного текста, а также при проверке качества UI на соответствие правилам.

LOLongbridge official Дизайн ★ 16.5k

Что делает навык

Набор нормативных руководств по дизайну для десктопных приложений GPUI Kit, обязательный к применению при создании или изменении интерфейсов. Он задает стандарты визуального языка, паттернов компоновки, состояний компонентов и текстового оформления, обеспечивая соответствие UI правилам платформы.

Когда применять

  • Создание новых экранов, макетов или компонентов с нуля
  • Изменение существующих интерфейсов и редизайн
  • Проверка качества UI на соответствие правилам дизайна (ревью)
  • Генерация интерфейсов ИИ-агентом
  • Выбор компонентов и определение их композиции

Как работает

  1. Скачайте файл руководства references/design-guides.md (или fetch https://gpui-kit.com/docs/design-guides.md, если файл отсутствует)
  2. Прочитайте разделы «Design thesis» и «Start from the task» для понимания контекста задачи
  3. Изучите соответствующие разделы руководства (Visual language, Layout patterns, Components, Interaction states и др.) в зависимости от типа изменений
  4. Применяйте правила: используйте семантические токены cx.theme() вместо raw hex, соблюдайте десктопные конвенции (клавиатура, окна, меню)
  5. Сформируйте интерфейс, обеспечив видимые состояния (hover, focus, disabled и др.) и корректные оверлеи (Escape для закрытия)
  6. Завершите работу, пройдя Design review checklist против выполненной работы

Примеры запросов агенту

Создай экран настроек профиля, строго следуя руководствам GPUI Kit Design Guides
Проверь текущий макет диалогового окна на соответствие разделу Feedback and overlays из design-guides.md
Реализуй кнопку действия для удаления элемента, используя правильные токены и текст по правилам Interface language

Что понадобится

  • Доступ к файлу references/design-guides.md или интернету для fetch https://gpui-kit.com/docs/design-guides.md
  • Доступ к Coding Guides (./coding-guides.md или https://gpui-kit.com/docs/coding-guides.md)

Описание составлено по SKILL.md навыка, сверено 09.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «gpui-kit-design-guides» из репозитория: # https://github.com/longbridge/gpui-kit
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r gpui-kit-design-guides/ ~/.claude/skills/gpui-kit-design-guides/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.