Обычный AI-дизайн выглядит так: просишь агента «сделай лендинг для Stripe», а он выдаёт фиолетовые градиенты, иконки-эмодзи и шрифт Inter. Цвета примерно похожи на Stripe, логотип выдуман, скриншотов продукта нет. Это AI-slop, и заказчик его не примет.
Разработчики, которые хотят быстро сделать прототип или презентацию не открывая Figma, упираются в то, что AI-агенты не умеют работать с брендом — они галлюцинируют дизайн из памяти, вместо того чтобы собрать реальные ассеты и на их основе построить макет. Huashu Design решает эту проблему жёстким протоколом: сначала данные, потом дизайн.
О сервисе
Huashu Design — это open-source skill для терминальных AI-агентов (Claude Code, Cursor, Codex, OpenClaw, Hermes). Ставится одной командой:
npx skills add alchaincyf/huashu-design
После этого вашему агенту можно сказать «сделай кликабельный iOS-прототип на 4 экрана» или «собери презентацию про AI» — и на выходе будет готовый результат через 10–25 минут.
На выходе: HTML-прототипы с настоящим фреймом iPhone, MP4/GIF-анимации, редактируемые PowerPoint-файлы (реальные текстовые блоки, не картинки), PDF и SVG для инфографики.
Автор — китайский разработчик Huasheng (花叔), известный по Cat Fill Light (топ-1 App Store), книге о DeepSeek и скиллу Nüwa. Лицензия MIT.
Зачем это нужно
Основная проблема AI-дизайна — модель начинает с пустого холста и вспоминает бренд из обучающих данных. Цвета — «примерно как у Stripe», логотип — выдуманный, контент — Lorem Ipsum. Чтобы результат выглядел как реальная работа, нужны реальные данные бренда.
Huashu Design решает это через Core Asset Protocol — жёсткое правило из пяти шагов:
1. Спросить у пользователя про ассеты (логотип, фото, UI-скриншоты, палитра, шрифты, гайдлайны) 2. Найти официальные ресурсы через поиск 3. Скачать с тремя запасными путями для каждого типа 4. Извлечь реальные цвета из найденных файлов 5. Зафиксировать всё в brand-spec.md
Никакого угадывания из памяти. Сначала данные — потом дизайн.
Дополнительные механики:
- Fact Verification First — если задача упоминает продукт, первое действие — веб-поиск для проверки существования, версии и спецификаций
- Anti AI-slop правила — никаких фиолетовых градиентов по умолчанию, никаких SVG-силуэтов вместо реальных фото, никакого Inter в качестве дисплейного шрифта
- Junior Designer Workflow — агент не пытается сделать идеально с первого раза. Сначала показывает набросок с плейсхолдерами, потом заполняет контентом, потом предлагает вариации
Как это работает
Внутри — 40 HTML-native стилей (20 для веба, 20 для презентаций), чистый CSS без генерации изображений. Движок анимаций — Stage + Sprite модель с четырьмя API: useTime, useSprite, interpolate, Easing. Экспорт MP4 (25/60fps) с BGM и SFX.
Для работы с брендом — 5-шаговый Core Asset Protocol. Для случаев, когда пользователь не знает, чего хочет — Design Direction Consultant: три subagent'а параллельно генерируют три разных визуальных направления, и пользователь выбирает, глядя на реальные макеты, а не читая описания стилей.
Встроенная 5-мерная система ревью дизайна: философская согласованность, визуальная иерархия, детали исполнения, функциональность, инновационность. Каждая ось — оценка 0–10, визуализация радаром и список Keep / Fix / Quick Wins.
Примеры использования
Кейс 1 — Сайт через терминал (Pimenov, апрель 2026)
Разработчик использовал huashu-design для работы над новым сайтом. Вместо того чтобы открывать Figma, он описал задачу агенту — и получил готовый прототип.
«Скилл реально сильно меня выручил. Это не просто экономия времени — инструмент меняет сам подход к задаче.» — Pimenov
Кейс 2 — Прототип за 30 минут (Олег Цветков, vc.ru)
Олег рассказал, как использовал Codex + huashu-design. Сценарий: описал идею в Notion, скормил ссылку агенту с промптом «собери интерактивный прототип UX для приложения». Через 30 минут — кликабельный прототип на его UIKit.
Олег честно отмечает: «Визуально вышло что-то сомнительное — нереально много скруглённых углов и рамочек внутри других рамочек. Но по части UX для моей задачи — довольно нормально». Дальше он допиливал интерфейс промптами, как если бы сидел с дизайнером и вносил правки.
«Сам факт поражает — рабочий прототип UI за пару часов через ИИ, как новая норма.» — Олег Цветков
Видео-демонстрация работы huashu-design: https://dimino.me/videos/huashu-demo.mp4
Guardrails и ограничения
- Не поддерживает слоёвую редактируемую графику (нет Figma-экспорта)
- Сложные анимации уровня Framer Motion — не его профиль
- При полностью пустом бренде (нет лого, нет цветов, нет референсов) качество падает до 60–65 баллов
- Автор сам оценивает skill на 80/100 — это не замена дизайнеру, а инструмент для тех, кто не хочет открывать графический редактор
Почему это полезно для нас
Huashu Design закрывает разрыв между «идеей» и «прототипом» без переключения контекста. Если у нас уже есть пайплайн PlanEx для контента, добавление дизайн-скилла позволяет агенту не только писать статьи, но и делать обложки, прототипы интерфейсов и презентации — не выходя из терминала.
Конкретные сценарии:
- Обложка для статьи на dimino.me вместо OG-картинки
- Быстрый прототип интерфейса для идеи, которую обсуждаем в чате
- Презентация для клиента по сайту с motion-эффектами
Что делать сначала
1. Установить: npx skills add alchaincyf/huashu-design 2. Попробовать простой промпт: «Сделай одностраничный лендинг для [проект] с хедером, тремя преимуществами и формой» 3. Поэкспериментировать с дизайн-направлениями: дайте агенту задачу без указания стиля — Design Direction Consultant предложит 3 варианта на выбор
Подводные камни
- Skill устанавливается в проект, не глобально — установите туда, где работает агент
- Первый запуск может быть медленным (агент скачивает зависимости)
- На выходе HTML — его можно показать, но нельзя импортировать в Figma/Keynote и править слои
- Качество сильно зависит от того, насколько хорошо вы описали задачу. Чем больше контекста — тем лучше результат
---
Если вам когда-нибудь хотелось сделать прототип, не открывая графический редактор — huashu-design это тот инструмент, ради которого стоит запустить терминал.