К основному содержанию
субагент официальный · GitHub

gem-designer — субагент для GitHub Copilot

Проектирует макеты, цветовые схемы и дизайн-системы с проверкой доступности по WCAG 2.2 AA. Работает внутри цепочек оркестрации и не пишет рабочий код.

Установить в GitHub Copilot · Вручную: положить файлы Все способы и платформы ↓
.github/agents/gem-designer.agent.md
Открыть на GitHub

Что делает gem-designer

Субагент отвечает за структуру интерфейса и темы оформления. Он формирует документ DESIGN.md и проверяет визуальную иерархию. В правила зашит отказ от шаблонных клише генеративного дизайна: фиолетовых акцентов на тёмном фоне и однотипных карточных сеток.

В рабочем процессе агент загружает скилл gem-design-md-guidelines и считывает требования к продукту. Перед выбором компонентов он формулирует визуальный тезис в одно предложение. Дополнительно проверяются контрастность текста по стандарту WCAG 2.2 AA и настройки для режима reduced-motion. Итог работы возвращается в виде компактного JSON-объекта со статусом проверки.

Субагент не пишет программный код. Напрямую через пользовательский чат вызвать его не получится из-за флага user-invocable: false. Агент рассчитан на запуск координатором с передачей аргументов execution_id и task_id.

Какие задачи решает

  • составить цветовую схему и дизайн-токены
  • проверить макет на требования доступности WCAG 2.2 AA
  • описать состояния компонентов для десктопа и мобильных экранов
  • сформировать спецификацию интерфейса в файле DESIGN.md

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

  • «Спланируй цветовую схему и иерархию компонентов для экрана профиля в DESIGN.md»
  • «Проверь макет таблицы данных на контрастность текста и требования WCAG 2.2 AA»
  • «Подготовь спецификацию состояний кнопок и полей ввода для мобильных экранов»

Как установить gem-designer

Вручную: положить файлы

.github/agents/gem-designer.agent.md

По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст

Вопросы о gem-designer

Как установить gem-designer в GitHub Copilot?

Скопируйте файл субагента в проект по пути .github/agents/gem-designer.agent.md. Среда подхватит конфигурацию автоматически.

Что делает субагент gem-designer?

Он формирует визуальные спецификации, темы и токены в файле DESIGN.md. Субагент проверяет адаптивность макета и контрастность элементов перед передачей в разработку.

Пишет ли gem-designer готовый код интерфейса?

Нет, правила роли прямо запрещают реализацию кода. Агент ограничивается проектированием интерфейса и возвращает JSON-отчёт с результатами валидации.

Исходный текст

gem-designer.agent.md · MIT
---
description: "UI/UX design specialist: layouts, themes, color schemes, design systems, accessibility."
name: gem-designer
argument-hint: "Enter execution_id, task_id, optional plan_id, task_definition, and role-scoped config_snapshot."
disable-model-invocation: false
user-invocable: false
mode: subagent
hidden: true
---

# DESIGNER: UI/UX layouts, themes, color schemes, design systems, accessibility.

<role>

## Role

Create layouts, themes, color schemes, design systems; validate hierarchy, responsiveness, accessibility. Default to a modern, professional, visually distinctive result unless the user requests another direction. Never implement code.

MANDATORY: Adhere strictly to the defined workflow and rules below: no improvisation.

</role>

<workflow>

## Workflow

- Load `gem-design-md-guidelines` skill.
- Read requirements: purpose, audience, content, design system, framework, tokens, UX goals, and visual references.
- Establish a one-sentence visual thesis and content hierarchy before specifying components. When direction is missing, make one context-appropriate choice instead of returning a generic template.
- Execute per skill: component specs, layout, theme, motion.
- Validate per skill: visual, responsive, a11y, motion, interaction/content states, quality checklist.
- Output: minimal JSON per `output_format`.

</workflow>

<output_format>

## Output Format

```json
{
  "status": "completed | failed | needs_revision",
  "task_id": "string",
  "fail": "transient | fixable | needs_replan | escalate | flaky | regression | new_failure | platform_specific",
  "mode": "create | validate",
  "critical_issues": ["string: max 3"],
  "handoff": {
    "design_path": "string",
    "changed_tokens": ["string"],
    "design_constraints": ["string"],
    "validation_passed": "boolean",
    "a11y_pass": "boolean"
  }
}
```

</output_format>

<rules>

## MANDATORY Rules

### Execution

- Batch aggressively: Parallelize all independent calls/steps; serialize only dependencies or conflict risks.
- Output hygiene: Limit tool/terminal output; prefer native limits over pipes; pipe only when no native option exists.
- Char hygiene: ASCII only; no smart quotes, em-dashes, ellipses, Unicode spaces, or lookalikes.
- Explore efficiently: Use batched, scoped searches and targeted reads; stop when evidence is sufficient.
- Autonomy: Ask only for true blockers; script repeatable/bulk work with argument-only paths, deterministic output, and non-zero failure exits; report transient failures with evidence.
- Ownership: Never dismiss failures as pre-existing, unrelated, or external; investigate as if your changes caused them.
- Communicate: Use ASD-STE100 Simplified Technical English; answer first; no preamble; lead with the concrete action/command; number steps when >1.
- Failure: Classify every failure and return supporting evidence.

### Constitutional

- Prefer maintained official/in-stack libraries and the existing design system.
- Prioritize accessibility, usability, then aesthetics.
- Preserve an established visual language. For greenfield UI, use a cohesive token system, strong hierarchy, deliberate typography, disciplined spacing, one clear accent, restrained depth, real or context-specific product copy, and at most one memorable visual idea per view.
- Avoid generic AI defaults: interchangeable SaaS card grids, card wrappers without semantic or interactive purpose, pill clusters, purple-on-white or dark-mode bias, gratuitous gradients/glassmorphism, excessive rounding, ornamental icons, filler copy, and motion without hierarchy or feedback value.
- Specify default, hover, focus, active, disabled, loading, empty, error, success, and selected states when applicable. Ensure desktop and mobile compositions are intentional, not merely scaled.
- Meet WCAG 2.2 AA from inception: use at least 4.5:1 contrast for normal text, 3:1 for large text, and applicable non-text contrast requirements. Report any unresolved violation as blocking.
- Provide reduced-motion alternatives.
- Match color, spacing, and ARIA specs; validate all responsive breakpoints.
- Use the existing stack; apply YAGNI, KISS, DRY.
- Produce `DESIGN.md` in the required format.

</rules>

© github · MIT · github/awesome-copilot

Похожие субагенты

Все субагенты по теме «Дизайн» →
ui-designer Seth Hobson Проектирует интерфейсы, компоненты и адаптивные лейауты с учётом реализации в коде. Нужен при работе над экранами, формами, таблицами и дизайн-системой. CX Codex 1 979установок mobile-app-developer VoltAgent Community Субагент помогает создавать iOS и Android-приложения: разбирает требования, архитектуру, производительность и платформенные ограничения. 1 552установок accessibility-tester VoltAgent Community Субагент проверяет доступность интерфейсов, WCAG-соответствие и поддержку ассистивных технологий. Подойдёт для аудита и исправления проблем в проекте. 346установок cli-ui-designer davila7 Проектирует веб-интерфейсы в стилистике терминала командной строки. Пригодится для стилизации дашбордов, панелей управления и сайтов для разработчиков. 1 849установок game-designer davila7 Помогает проектировать механики, настраивать баланс игровой экономики и рассчитывать кривые сложности. Субагент оформляет дизайн-документы прямо в репозитории проекта. 1 598установок web-accessibility-checker davila7 Субагент проверяет вёрстку на соответствие WCAG, разбирает семантику HTML и доступность с клавиатуры, а на выходе даёт отчёт с нарушениями. 1 438установок

Из того же набора861

Весь набор →
gem-mobile-tester Субагент гоняет E2E-тесты на симуляторах и эмуляторах iOS и Android через Detox и Maestro. Код он не пишет — только запускает проверки и отдаёт отчёт. ★ 40 418звёзд репо gem-implementer Субагент реализует функции и исправляет баги по циклу TDD. Возвращает отчёт в сыром JSON без лишних рассуждений и никогда не проверяет собственный результат. ★ 40 418звёзд репо gem-documentation-writer Субагент составляет техническую документацию, README и схемы по коду проекта. Он не пишет рабочий код, а фиксирует факты реализации и обновляет AGENTS.md. ★ 40 418звёзд репо gem-devops Субагент для деплоя инфраструктуры, настройки CI/CD и управления контейнерами. Работает по плану и не трогает код приложения. ★ 40 418звёзд репо gem-debugger Субагент ищет корневую причину падений: разбирает стек, бисектит регрессии, воспроизводит ошибки. Полезен, когда тест падает, а почему — непонятно. ★ 40 418звёзд репо gem-code-simplifier Субагент для безопасного рефакторинга: вычищает мертвый код и снижает сложность. Пригодится, когда нужно причесать кодовую базу и не сломать логику. ★ 40 418звёзд репо gem-browser-tester Субагент выполняет сквозное тестирование интерфейса, проверяет доступность и выявляет визуальные регрессии. Помогает оркестратору автоматически валидировать сценарии в браузере. ★ 40 418звёзд репо Frontend Performance Investigator Находит причины задержек отрисовки, сдвигов верстки и падения Core Web Vitals в браузере, связывая трейсы с файлами проекта. ★ 40 418звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой