# design-bridge

Читает DESIGN.md из репозитория awesome-design-md и превращает его в готовые указания для сборки интерфейса под выбранный бренд.

- субагент · `type=agent` · Claude Code · ★ 26065
- Автор: VoltAgent Community
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/VoltAgent/awesome-claude-code-subagents/tree/HEAD/categories/01-core-development/design-bridge.md
- Обновлён: 2026-10-11
- HTML: https://affpapa.org/nevibecode/agents/design-bridge

## Что делает

Субагент берёт файл DESIGN.md из репозитория VoltAgent/awesome-design-md и разбирает его по девяти разделам: тема и атмосфера, палитра с ролями, типографика, компоненты, сетка, тени, адаптивность и готовые промпты. На выходе — файл `.claude/design/instructions-<site>.md` с таблицей цветов и примерами промптов для компонентов.

Сначала агент спрашивает, какой сайт нужен, и проверяет, есть ли он в репозитории. Если сайта нет, предложит альтернативы. Дальше тянет документ через WebFetch или читает локальный кэш и сохраняет его в `.claude/design/`. Работает с `Read`, `Write`, `Edit`, `Bash`, `Glob`, `Grep`, `WebFetch`, `WebSearch`.

Готовые инструкции он не применяет сам, а передаёт дальше — `ui-designer`, `frontend-developer`, `prompt-engineer`. Значения из исходного дизайна не меняет без запроса и не додумывает пропущенное: если раздела в DESIGN.md нет, он так и останется незакрытым. Это повод проверить документ до запуска, иначе пробел всплывёт уже на этапе вёрстки.

## Установка

### Claude Code (родная платформа)

1. **Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add VoltAgent/awesome-claude-code-subagents
```
В чате агента (не в терминале):
```text
/plugin install voltagent-core-dev@voltagent-subagents
```

2. **Вручную: положить файлы**
- Файл: `.claude/agents/design-bridge.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/design-bridge.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/design-bridge.md` — Cursor понимает и .claude/agents/

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/VoltAgent/awesome-claude-code-subagents/tree/HEAD/categories/01-core-development/design-bridge.md

## Когда брать
- перенести палитру и типографику из DESIGN.md в понятные указания для вёрстки
- собрать таблицу цветов с hex-кодами и ролями
- подготовить промпты для кнопок, карточек и навигации
- сверить, все ли девять разделов есть в исходном документе
- передать разбор дизайна другим субагентам без потери деталей

## Примеры запросов агенту
- Разбери DESIGN.md для stripe и сохрани инструкции в .claude/design/
- Хочу повторить вид notion — проверь, есть ли он в awesome-design-md, и вытащи палитру с типографикой
- Сделай instructions-файл по выбранному сайту и подскажи, каких субагентов подключить дальше

## Похожие
- [awesome-design-md](https://affpapa.org/nevibecode/skills/awesome-design-md.md) — скилл · 666 установок
- [frontend-design](https://affpapa.org/nevibecode/skills/ilm-alan-frontend-design.md) — скилл · 580 установок
- [figma-create-design-system-rules](https://affpapa.org/nevibecode/skills/figma-create-design-system-rules.md) — скилл · 2900 установок
- [ui-design](https://affpapa.org/nevibecode/skills/ui-design.md) — скилл · 1800 установок
- [atomic-design-fundamentals](https://affpapa.org/nevibecode/skills/atomic-design-fundamentals.md) — скилл · 766 установок
- [stitch::generate-design](https://affpapa.org/nevibecode/skills/stitchgenerate-design.md) — скилл · 10800 установок

Из того же набора: [voltagent/awesome-claude-code-subagents](https://affpapa.org/nevibecode/by/voltagent/awesome-claude-code-subagents.md) — 145 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md