Agent_design — Универсальный Агент Дизайна (Claude Edition)

Готовый системный промпт + библиотека skills для Claude Code, превращающий его в Senior Lead Product Designer & Creative Technologist. Агент пишет верстку (HTML/CSS/JSX) с продуктовым и художественным мышлением, избегая «AI-слопа» и generic-паттернов.

Весь системный промпт — в CLAUDE.md. AGENTS.md — symlink на него же (для агентов, читающих agent-формат вместо claude-формата).

Что умеет агент

• Лендинги, презентации, коммерческие предложения — модульный код на React + Babel inline, с реальными ассетами или подписанными placeholder'ами (никаких пустых <div>).
• Мультибрендовость — загружает готовую бренд-систему проекта (DESIGN.md) или создаёт новую через брифинг с пользователем.
• Извлечение дизайна с референсного URL (design-extract) — «сделай как stripe.com», «склонируй стиль сайта X» → анализ и запись в DESIGN.md.
• Презентации — два движка на выбор: ppt-html (36 готовых тем: tokyo-night, dracula, swiss и т.д., presenter mode) и ppt-guizang (magazine/swiss премиум-стиль, 22 layout'а, WebGL-фоны).
• Логотипы и айдентика (logo-generator) — 6+ SVG-вариантов на запрос + showcase на 12 фонах + экспорт в PNG.
• Моушен-дизайн (motion-huashu) — анимации и видеоролики (Stage+Sprite, экспорт в MP4 25/60fps, фоновая музыка).
• 133 atomic UI-skills + 151 готовая бренд-система (open-design) — референсы для лендингов, дашбордов, компонентов (Stripe, Linear, Apple, Vercel, Tesla, Airbnb и др.).
• Verification-проход перед сдачей — anti-slop чек-лист, 5D critique (philosophy / hierarchy / craft / functionality / originality), адаптивность и accessibility (44px touch target).
• Конвертация HTML → PDF (tools/).

Как пользоваться

1. Склонируй репозиторий и открой папку в Claude Code (CLI, десктоп-приложение или IDE-расширение).
2. Claude Code сам подхватит CLAUDE.md как системный промпт агента — никаких дополнительных настроек не нужно.
3. Опиши задачу: «сделай лендинг для проекта X», «презентация в стиле Х», «извлеки дизайн с сайта Y», «сделай логотип для Z».
4. Если бренд-система для проекта уже есть в projects/<name>/DESIGN.md — агент подхватит её автоматически. Если нет — задаст уточняющие вопросы (аудитория, тональность, референс) и создаст новую.
5. Агент проведёт задачу по внутреннему 7-шаговому workflow (бриф → эстетика → asset inventory → скелет → генерация → верификация → handoff) и сохранит результат в projects/<name>/.

Подробный роутер skills (какой skill вызывать для какой задачи) — в CLAUDE.md, раздел 3.

Структура репозитория

Agent_design/
├── CLAUDE.md              # главный системный промпт агента
├── AGENTS.md              # symlink → CLAUDE.md
├── .claude/
│   ├── settings.json      # MCP-конфиг (design-extract)
│   └── skills/            # библиотека skills
│       ├── core/          # anti-slop + reference-design (базовые правила)
│       ├── design-extract/ # вытащить дизайн с URL
│       ├── open-design/   # 133 atomic skills + 151 design-systems + craft
│       ├── ppt-guizang/   # презентации: magazine/swiss премиум
│       ├── ppt-html/      # презентации: 36 тем
│       ├── logo-generator/ # SVG-логотипы + showcase
│       ├── motion-huashu/ # анимации, MP4-экспорт
│       └── rules/         # material-3, garden (5D critique), claudedesign-to-swiftui
├── starters/              # legacy fallback компоненты (deck_stage.js, animations.jsx)
├── tools/                 # HTML → PDF конвертеры
└── docs/                  # инструкции

projects/ и brands/ — рабочие папки для реальных проектов агента — не входят в публичный репозиторий (см. .gitignore), это только шаблон/движок самого агента.

Технологический стек

React 18 + Babel standalone inline (pinned CDN-версии, см. CLAUDE.md раздел 5), без сборки — открывается прямо в браузере.

Контакты

Вопросы, доработки, сотрудничество — Telegram: @bogman108