Huashu Design (Claude Skill) — Установка & Живое демо

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

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

20 кодифицированных принципов дизайна (контраст, ритм, модульность, …)
5-мерное ревью: макет / типографика / цвет / движение / содержание
Экспорт в MP4 через headless-рендеринг для анимированных материалов
Режим высокоточного прототипа — точность до пикселя
Работает с любым фреймворком или чистым HTML

Живое демо

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

готово

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "huashu-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "huashu-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/alchaincyf/huashu-design",
          "~/.claude/skills/huashu-design"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add huashu-design-skill -- git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

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

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

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

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

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

Предварительные требования

Skill установлен — git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

Поток

Закрепить стиль

Use huashu-design. Brief: minimal B2B SaaS landing, Swiss-influenced, serif headings, one accent color. Generate layout plan following your 20 principles.✓ Скопировано

→ План макета со ссылками на конкретные применённые принципы
Собрать

Produce HTML/CSS. Single file. Responsive. No JS frameworks.✓ Скопировано

→ Одно-файловый артефакт, проходящий базовую проверку доступности
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 не оправдан.

Поток

Раскадровка

Use huashu-design. Storyboard a 30s explainer for my product: problem (8s) / solution (14s) / CTA (8s).✓ Скопировано

→ Покадровый план
Анимация в HTML

Implement each scene as a CSS keyframe animation. Render as a single HTML with a timeline.✓ Скопировано

→ HTML воспроизводится чисто в браузере
Экспорт

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	Для каждого нового дизайна
generate_html	plan	Собрать по плану
review_5d	html	Саморевью после сборки
render_mp4	html, duration	Анимированный артефакт

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

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

Квота 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