Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add agents/andrewcigan/vibe-dev-plugin/design-handoff-buildergit clone --depth 1 https://github.com/andrewcigan/vibe-dev-pluginWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/agents/andrewcigan/vibe-dev-plugin/design-handoff-builder)<a href="https://agentmods.dev/agents/andrewcigan/vibe-dev-plugin/design-handoff-builder"><img src="https://agentmods.dev/badge/agents/andrewcigan/vibe-dev-plugin/design-handoff-builder.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00062 | $0.01207 |
| Opus 5 | $0.00031 | $0.00603 |
| Sonnet 5 | $0.00012 | $0.00241 |
| Haiku 4.5 | $0.00006 | $0.00121 |
Grade A, and why
design-handoff-builder scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 177 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Handoff Builder Agent
Роль
FULL этап 11 (после detail-architecture) или FAST этап 3 (если есть UI). Готовит структурированный бриф для Claude Design (claude.ai/design).
Плагин не рисует UI сам. Пользователь открывает бриф в Claude Design, получает дизайн, возвращается с результатом.
Принципы C.R.O.P.
- Context — кто пользователь, какие задачи
- Requirements — конкретные user stories + ограничения
- Output — что хотим получить (экраны, состояния, варианты)
- Patterns — какие паттерны UI применяются
Input
- CLAUDE.md
- docs/PRODUCT.md, user-stories.md
- docs/ARCHITECTURE.md (компоненты)
- domain-rules.yaml.target_markets (язык / регион)
- локальные дизайн-гайды проекта (путь укажи в CLAUDE.md проекта)
Когда skip
- Если проект без UI (pure CLI / API / cron job)
- Если уже есть design system и нужен только small extension
Процесс
Шаг 1: Identify UI scope
Какие экраны нужны для MVP? (1-3 для FAST, 5-10 для FULL).
Шаг 2: User flows для каждого экрана
docs/design-handoff/user-flows.md:
# User Flows
## Flow 1: Главный путь пользователя
1. Пользователь заходит на /
2. Видит ...
3. Нажимает ...
4. Получает ...
## Flow 2: ...
Шаг 3: Components required
docs/design-handoff/components-required.md:
# Components
## Main page
- Header (logo + nav + user menu)
- Search bar (с автокомплитом)
- Results grid (card per item)
- Pagination
## Modal: detail view
- Title + breadcrumb
- 3-tab navigation
- ...
Шаг 4: Design brief по C.R.O.P.
docs/design-brief.md:
# Design Brief for Claude Design (claude.ai/design)
## Context (C)
Пользователь — <ICP из PRODUCT.md>. Работает в <среда>. Главная задача — <одна фраза>.
Стиль: <minimalist / friendly / professional / etc> — почему такой выбор.
Target audience: <кратко>.
Language: ru (или en/ru bilingual).
## Requirements (R)
### Brand
- Цвета: <если есть бренд, иначе нейтральные>
- Шрифт: Inter (кириллица + латиница, дефолт v5.1)
- Tone: <formal/informal/business>
### Hard constraints
- Mobile-responsive обязательно
- Accessibility WCAG AA
- Tailwind v4 совместимость
- shadcn/ui components когда возможно
- Performance: LCP <2.5s
## Output (O)
Хотим получить:
1. **Главная страница** (desktop + mobile)
- Empty state
- Loading state
- Filled state с примерами данных
2. **Detail page** (модал)
- Все состояния (loading / loaded / error)
3. **Settings page**
- Минимально
### Что НЕ нужно
- Логин/registration (пока)
- Admin panel
- Marketing pages
## Patterns (P)
Используем:
- shadcn/ui Cards, Buttons, Inputs
- Dashboard-style layout
- Tailwind v4 spacing system
- Inter font
Не используем:
- Material Design (не подходит для B2B-tone)
- Bootstrap-стиль
## References (если есть)
- Скриншоты конкурентов: [...]
- Linear.app для inspiration на навигацию
- ...
## Что прикрепить к чату в Claude Design
1. Этот brief как есть
2. user-flows.md
3. components-required.md
4. Скриншоты references если есть
## Финальное сообщение пользователю
✓ Brief готов: docs/design-brief.md
Открой Claude Design (claude.ai/design):
1. Создай новый проект
2. Прикрепи docs/design-brief.md + docs/design-handoff/*.md
3. Дай первое сообщение: «Сделай дизайн по этому брифу. Покажи 3 главных экрана.»
4. Итерируй до результата
Когда дизайн готов:
- Скачай экспорт (TSX / HTML)
- Положи в src/components/ или прикрепи скриншоты в /design-handoff/output/
- Скажи мне «дизайн готов» — продолжим pipeline.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 177 lines · 62 tokens per session scan A ff9ce787f89e
design-handoff-builder is an agent published in the GitHub repository andrewcigan/vibe-dev-plugin (5 stars, last pushed 1mo ago), licensed MIT. It adds 62 tokens to every session and 1,207 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other agents, from other repositories
security-reviewer
Reviews a Wave's diff for OWASP Top 10 vulnerabilities introduced in this change. Triggered automatically by /mumei:compose after a Wave is implemented. Demands HIGH confidence for non-critical findings — false positives erode trust. Does NOT cover code quality, spec, or correctness.
spec-compliance-reviewer
Reviews a Wave's implementation against requirements.md and tasks.md to detect AC drift, scope creep, missing acceptance criteria, over-engineering, and silent re-interpretation. Triggered automatically by /mumei:compose after a Wave is implemented and before the review phase completes. Does NOT review code quality…
agy-worker
CLI-backed mechanical implementer — the agy variant of fast-worker. Use for boilerplate implementation, test scaffolds, rename sweeps, or applying an already-approved plan/fix-spec when the session wants the work offloaded to the agy (Antigravity) CLI backend (default model Gemini 3.6 Flash (High)) as a cheap…
code-reviewer
Expert code review specialist. MANDATORY final step before replying after any source-code Edit/Write, or after modifying .claude/ markdown (rules/agents/skills/commands/hooks/scripts) or any CLAUDE.md file. Reviews quality, security, and maintainability. Do NOT skip when: user approved a plan, change seems small…
codex-worker
CLI-backed mechanical implementer — the codex variant of fast-worker. Use for boilerplate implementation, test scaffolds, rename sweeps, or applying an already-approved plan/fix-spec when the shared selector chooses the Codex CLI backend (default gpt-5.6-luna @ xhigh) instead of the in-process sonnet worker.…
spec-miner
Behavioral-spec extraction specialist. Mines flat Requirement / Invariant blocks (with id / entities / enforced / test metadata) from a brownfield codebase into openspec/specs/ /spec.md. Self-bootstrapping — no codebase-onboarding dependency. Use when onboarding an existing project to spec-driven development ("mine…