🎨 Picasso Orchestrator: Claude Design 🔄 Claude Code [Bridge Loop]

Первый двунаправленный цикл с оценкой-шлюзом между Claude Code и Claude Design.Бриф → Дизайн → Реализация → Оценка → Доработка.

Хватит гадать, совпадает ли реализация с дизайном. Пусть цикл докажет это сам.

Picasso соединяет Claude Code с Claude Design в замкнутый цикл обратной связи — на вход подаётся структурированный бриф, на выход — верифицированный код, а между ними стоит шлюз точности с математической оценкой. Никаких «и так сойдёт». Либо оценка достигает 9.0 / 10, либо цикл продолжается.

⚡ Быстрый старт — 3 шага, 30 секунд

# 01 · Установка (однострочник — автоматически патчит ~/.claude)
curl -fsSL https://cdn.jsdelivr.net/gh/RazvanGabrielNiculae/picasso-claude-design-claude-code-bridge-loop@main/scripts/install-oneliner.sh | bash

# 02 · Проверка корректности подключения
picasso-bridge verify --smoke

# 03 · Запуск первого цикла
/picasso --design-loop "hero cinematic for B2B SaaS" --scope complex

💡 Нужна пошаговая настройка? Добавьте --wizard к команде установки — он интерактивно проведёт через настройку шлюза, максимального числа раундов и подключения хуков.

🔁 Как это работает

flowchart LR
    A([picasso]) --> B[ASSUMPTIONS] --> C[DESIGN.md] --> D[Claude Design] --> E[Implement] --> F[Render] --> G[Score] --> H{Gate 9.0}
    H -- "✅" --> I([APPROVED])
    H -- "📉" --> J([STAGNATED])
    H -- "🔄 refine" --> D

    style A fill:#ff2d95,stroke:#ff4fa8,color:#fff
    style B fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style C fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style D fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style E fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style F fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style G fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    style H fill:#2a2000,stroke:#ffd83d,color:#fff59d
    style I fill:#0d2e1a,stroke:#4caf50,color:#7cf0a0
    style J fill:#2e1a0d,stroke:#ff9800,color:#ffb14a

1. Бриф → Опишите цель дизайна на естественном языке (/picasso --design-loop "hero for B2B SaaS")
2. ASSUMPTIONS → Picasso выводит выведенные токены как явный блок до любого обращения к браузеру — вы правите их прямо в тексте
3. DESIGN.md → Генерируется структурированная спецификация из 9 разделов: цвета · типографика · макет · анимация · адаптивность · доступность
4. Claude Design → Picasso отправляет структурированный промпт и захватывает визуальное предложение через скриншот
5. Реализация → Субагент с нулевым контекстом применяет только изменённые разделы DESIGN.md (~200 токенов против 2 000 при наивном подходе)
6. Рендер → Десктоп всегда · мобильный только если предыдущая оценка адаптивности < 8.0
7. Оценка → Взвешенный шлюз: ΔE цвета (25%) · типографика (20%) · макет (20%) · компоненты (15%) · анимация (10%) · адаптивность (10%)
8. Расхождения → Максимум 3 строки · формат с объявленной целью: текущее → целевое · передаются в следующий раунд
9. Шлюз → score ≥ 9.0 → ✅ APPROVED · плато → STAGNATED · иначе → доработка и повтор с шага 4

📊 Цифры

🔧 Требования

🔄 Цикл — 7 шагов за раунд

Полное описание каждого шага, примеры вывода и диаграммы состояний — в docs/LOOP.md.

🎛️ Режимы

Полная документация по режимам — в docs/MODES.md.

🧩 Паттерны оркестрации

Полное описание всех 9 паттернов — в docs/DESIGN-PATTERNS.md.

🧠 Философский фундамент: принципы Karpathy

Подробнее — в docs/DESIGN-PATTERNS.md#philosophical-foundation.

Picasso реализует четыре принципа из подхода Karpathy к надёжным AI-системам:

1. Явность предположений — ASSUMPTIONS-блок делает все выводы видимыми до начала работы
2. Минимальный контекст — субагент с нулевым контекстом и ленивые чтения сокращают шум
3. Измеримые критерии выхода — шлюз 9.0/10 заменяет субъективное «выглядит хорошо»
4. Защита от стагнации — детектор плато предотвращает бесконечные циклы без прогресса

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

📄 Лицензия

MIT — подробности в файле LICENSE.