AiDisgn

Загружаешь скриншот дизайна — получаешь готовые React-компоненты с подставленными цветами, отступами и радиусами. Плюс AI_CONTEXT.md, чтобы AI-агент использовал именно эти компоненты, а не писал CSS с нуля.

Зачем это нужно

Ты делаешь лендинг по макету из Figma. Вместо того чтобы вручную копировать цвета и размеры, просто скидываешь скриншот в терминал:

npx aidisgn generate макет.png --output ./output --seed 1

Получаешь:

output/
├── Button.tsx     ← кнопка с твоими цветами и отступами
├── Card.tsx       ← карточка с твоим стилем
└── AI_CONTEXT.md  ← файл-инструкция для AI-агента

Установка

npm i -g aidisgn

Или без глобальной установки:

npx aidisgn generate screenshot.png

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

скриншот → извлечение палитры → вариация по seed → проверка контраста → генерация кода

1. Извлечение — K-Means кластеризация находит фон, акцент, определяет тёмную тему
2. Вариация — seed задаёт конкретные значения (сдвиг hue, радиус, тени, отступы)
3. Проверка — WCAG AA контраст текст/фон всегда >= 4.5:1
4. Генерация — Handlebars шаблоны заполняются токенами → готовые .tsx файлы
5. AI-контекст — AI_CONTEXT.md с hex-кодами и пропсами для AI-агента

Команды

aidisgn generate <скриншот> --output <папка> --seed <число>
aidisgn info <скриншот>     — посмотреть что извлеклось
aidisgn stacks              — доступные стеки

Почему не мультимодальная модель

| | GPT-4V / Claude | AiDisgn | |---|---|---| | Одинаковый результат | Нет | Да — один seed, побитово идентичный | | Контраст | Не гарантирован | >= 4.5:1 всегда | | Скорость | 3–10 сек | ~100мс | | Стоимость | ~1000 токенов | 0 |

Структура

src/
├── extractor.ts          — изображение → палитра
├── mutator.ts            — палитра + seed → токены
├── validator.ts          — проверка контраста
├── template-engine.ts    — токены → .tsx
├── ai-context.ts         — токены → AI_CONTEXT.md
├── pipeline.ts           — оркестратор
└── cli.ts                — CLI
templates/react-ts-tailwind/
├── Button.tsx.hbs
└── Card.tsx.hbs

Лицензия

MIT