Repolode
alchaincyf

alchaincyf/huashu-design

HTML-native дизайн-скилл для AI-агентов, который превращает текстовый запрос в прототипы, презентации, анимацию и инфографику.

Open source альтернатива:FigmaAdobe After Effects

Звёзды
25,426
Форки
2,850
Открытые issues
4
Последний коммит
3 дня назад

Что это?

Huashu Design — это скилл для AI-агентов, который устанавливается в Claude Code, Codex, Cursor и аналогичные инструменты. Агент создаёт дизайн-материалы в виде HTML-файлов: по запросу можно получить кликабельный прототип приложения в стиле iPhone, презентацию с возможностью экспорта в редактируемый PPTX, анимацию по временной шкале с экспортом в MP4 или GIF либо инфографику для печати.

В основе скилла лежит протокол работы с бренд-материалами: если указать конкретный бренд, агент ищет его официальные страницы и материалы, извлекает из них значения цветов и фиксирует их в спецификации бренда перед началом дизайна. Если запрос сформулирован расплывчато, агент предлагает варианты стиля из библиотеки из 84 HTML-native стилей, показывает шесть миниатюр и создаёт три полноценных варианта на выбор.

Также в скилл входит проверка дизайна по пяти измерениям: соответствие концепции, визуальная иерархия, проработка деталей, функциональность и новизна. По итогам формируется список Keep / Fix / Quick Wins. Основной процесс выполняется локально, а дополнительные облачные функции, например преобразование текста в речь и AI-проверка видео, изолированы в отдельной папке и требуют явного подтверждения.

Ключевые возможности

  • 01Создаёт прототипы в виде отдельных HTML-файлов, в том числе с рамкой iPhone 15 Pro и кликабельными сценариями из нескольких экранов.
  • 02Экспортирует презентации в HTML для показа и в редактируемый PPTX с настоящими текстовыми блоками.
  • 03Рендерит анимацию по временной шкале в MP4 и GIF; доступны интерполяция до 60 fps и фоновая музыка.
  • 04Помогает исследовать варианты дизайна с помощью миниатюр и библиотеки из 84 стилей.
  • 05Проводит критику дизайна по пяти измерениям, строит радарную диаграмму и предлагает конкретный список исправлений.

Сценарии использования

  • Подготовить несколько вариантов оформления презентации для конференции, прежде чем выбрать один.
  • Создать кликабельный прототип мобильного приложения по описанию в одну строку.
  • Сделать короткую анимацию для запуска продукта и экспортировать её в MP4 или GIF.
  • Получить структурированную критику существующего дизайна перед передачей в работу.

Быстрый старт

  1. 1

    Установите skill с помощью skills CLI

    npx skills add alchaincyf/huashu-design
  2. 2

    Откройте своего агента (Claude Code, Codex, Cursor и т. д.) и опишите желаемый дизайн обычным языком

Что важно знать

  • Нельзя экспортировать в Figma PPTX с редактируемыми слоями; результат можно получить в формате HTML, скриншотов, видео или PPTX с редактируемым текстом.
  • Сложная 3D-анимация, физические эффекты и анимация частиц выходят за рамки возможностей skill.
  • По оценке автора, дизайн, созданный с нуля без исходных материалов бренда, получает около 60–65 баллов за качество, поэтому рекомендуется предоставлять брендовые материалы.

Темы

Частые вопросы

Что такое huashu-design?
HTML-native дизайн-скилл для AI-агентов, который превращает текстовый запрос в прототипы, презентации, анимацию и инфографику. Huashu Design — это скилл для AI-агентов, который устанавливается в Claude Code, Codex, Cursor и аналогичные инструменты. Агент создаёт дизайн-материалы в виде HTML-файлов: по запросу можно получить кликабельный прототип приложения в стиле iPhone, презентацию с возможностью экспорта в редактируемый PPTX, анимацию по временной шкале с экспортом в MP4 или GIF либо инфографику для печати.
huashu-design можно использовать бесплатно? Какая у него лицензия?
huashu-design распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
huashu-design всё ещё поддерживается?
Активно поддерживается. Последний коммит в huashu-design — 17 окт. 2026 г..
Для чего можно использовать huashu-design?
Подготовить несколько вариантов оформления презентации для конференции, прежде чем выбрать один. Создать кликабельный прототип мобильного приложения по описанию в одну строку. Сделать короткую анимацию для запуска продукта и экспортировать её в MP4 или GIF. Получить структурированную критику существующего дизайна перед передачей в работу.
Как установить huashu-design?
Установите skill с помощью skills CLI: npx skills add alchaincyf/huashu-design Откройте своего агента (Claude Code, Codex, Cursor и т. д.) и опишите желаемый дизайн обычным языком
Где скачать huashu-design?
Исходный код и инструкции по установке — на GitHub: https://github.com/alchaincyf/huashu-design

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты