/ Каталог / Песочница / Huashu Design
← Все серверы ↗ GitHub
● Сообщество alchaincyf ⚡ Сразу

Huashu Design

автор alchaincyf · alchaincyf/huashu-design

Нативный HTML-дизайн-skill для Claude — высокоточные прототипы, слайды, анимации, экспорт в MP4, 20 принципов дизайна.

Huashu Design (华术) — это skill для Claude Code, использующий HTML/CSS как дизайн-полотно. Создавайте прототипы, слайд-деки и анимированные объяснения без Figma. Включает 20 зафиксированных принципов дизайна, 5-мерное ревью и рендеринг в MP4. Независимость от фреймворка; работает от обычного описания идеи.

▶ Смотреть демо 📦 Установить 💡 Сценарии

Зачем использовать

Ключевые функции

Живое демо

Как выглядит на практике

готово

Установка

Репозиторий автора · Официальная документация Claude Skills

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

Реальные сценарии: Huashu Design

Быстро прототипировать лендинг продукта в HTML

👤 Основатели и дизайнеры, предпочитающие код Figma ⏱ ~60 min intermediate

Когда использовать: У вас есть бриф и вы хотите кликабельный, измеримый прототип, а не статический мокап.

Поток
  1. Закрепить стиль
    Use huashu-design. Brief: minimal B2B SaaS landing, Swiss-influenced, serif headings, one accent color. Generate layout plan following your 20 principles.✓ Скопировано
    → План макета со ссылками на конкретные применённые принципы
  2. Собрать
    Produce HTML/CSS. Single file. Responsive. No JS frameworks.✓ Скопировано
    → Одно-файловый артефакт, проходящий базовую проверку доступности
  3. 5-мерное ревью
    Run the 5-dimension review on what you just shipped. Where does it fall short?✓ Скопировано
    → Критическое саморевью, а не похвала

Итог: Прототип, над которым можно проводить A/B-тест или итерировать без выхода из кода.

Подводные камни
  • Skill откатывается к стандартному шаблону «hero + features + CTA» — Указывайте стилевой ориентир (Swiss, Bauhaus, editorial) в каждом промпте
Сочетать с: filesystem

Создать анимированное объяснение и экспортировать в MP4

👤 Разработчики и создатели контента, выпускающие видео о продукте ⏱ ~120 min advanced

Когда использовать: Вам нужен 30-секундный explainer для продукта, но After Effects не оправдан.

Поток
  1. Раскадровка
    Use huashu-design. Storyboard a 30s explainer for my product: problem (8s) / solution (14s) / CTA (8s).✓ Скопировано
    → Покадровый план
  2. Анимация в HTML
    Implement each scene as a CSS keyframe animation. Render as a single HTML with a timeline.✓ Скопировано
    → HTML воспроизводится чисто в браузере
  3. Экспорт
    Render to 1080p MP4.✓ Скопировано
    → MP4 записан на диск; продолжительность совпадает

Итог: Готовый MP4-explainer из промпта без видеоредактора.

Подводные камни
  • Шрифты рендерятся по-другому в headless Chrome — Встраивайте веб-шрифты; не полагайтесь на системные шрифты
Сочетать с: filesystem · after-effects

Комбинации

Сочетайте с другими MCP — эффект x10

huashu-design-skill + after-effects

Раскадровка в HTML, финальная обработка в AE для broadcast-качества

Draft in huashu-design; export frames for AE compositing.✓ Скопировано
huashu-design-skill + filesystem

Сохранять итерации рядом с брифом

Create /designs/landing-v1/ through v3/ and keep both.✓ Скопировано

Инструменты

Что предоставляет этот MCP

ИнструментВходные данныеКогда вызыватьСтоимость
plan_layout brief, style_ref Для каждого нового дизайна 0
generate_html plan Собрать по плану 0
review_5d html Саморевью после сборки 0
render_mp4 html, duration Анимированный артефакт 0

Стоимость и лимиты

Во что обходится

Квота API
Нет
Токенов на вызов
Высокоточные дизайны генерируют много HTML — держите область чёткой
Деньги
Бесплатно
Совет
Генерируйте маленькими шагами: сначала структура, потом стилизация, потом полировка

Безопасность

Права, секреты, радиус поражения

Минимальные скоупы: filesystem-write
Хранение учётных данных: Отсутствует
Исходящий трафик: Отсутствует

Устранение неполадок

Частые ошибки и исправления

Рендеринг MP4 не удался (ffmpeg отсутствует)

brew install ffmpeg — skill использует его для склейки кадров

Проверить: `ffmpeg -version`
Дизайн выглядит шаблонно

Вы не указали стилевой ориентир — всегда называйте один (Swiss, Bauhaus, Pentagram, …)

Ревью даёт положительную обратную связь на плохой дизайн

Явный промпт: "be critical; list what's wrong first"

Альтернативы

Huashu Design в сравнении

АльтернативаКогда использоватьКомпромисс
cc-frontend-skillХотите выраженный авторский голос, а не методологиюМенее структурированный процесс ревью
FigmaКомандный процесс требует FigmaНе код; не такой же способ анимации

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills