huashu-design-html-native — скилл дизайна
Превращает запрос словами в готовый файл: прототип, слайды, анимацию или инфографику на HTML/CSS/JS. Figma не нужна.
npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a claude-codeЧто делает huashu-design-html-native
Скилл работает в агентах, которые читают SKILL.md: Claude, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode. Вы описываете, что хотите получить, агент собирает одностраничный HTML с кликабельным прототипом в рамке iPhone 15 Pro или Android, колоду слайдов, таймлайн-анимацию с экспортом в MP4 и GIF, инфографику под печать. Отдельный режим — разбор дизайна по пяти измерениям с радиальной диаграммой и списком Keep/Fix/Quick Wins.
Внутри репозитория лежат готовые ассеты: animations.jsx с примитивами Stage, Sprite, Easing и interpolate, рамки устройств, движок слайдов deck_stage.js, панель вариантов design_canvas.jsx, 24 примера и шесть фоновых треков. Скрипты render-video.js, convert-formats.sh, add-music.sh и html2pptx.js закрывают рендер видео через Playwright, интерполяцию до 60 fps, подмешивание музыки и перенос стилей DOM в редактируемые объекты PPTX.
Агент не начинает вслепую: сначала задаёт пачку вопросов и ждёт ответы, помечает допущения и заглушки прямо в HTML, показывает серый скелет на утверждение. Если в задаче есть конкретный бренд, скилл требует достать фирменные цвета из скачанных ассетов и записать их в brand-spec.md — угадывать по памяти он не станет. Для рендера видео нужен Playwright, так что проверьте, что он у вас стоит, прежде чем просить MP4.
Какие задачи решает
- собрать кликабельный прототип приложения в рамке телефона
- сделать колоду слайдов и выгрузить её в редактируемый PPTX
- отрендерить анимацию в MP4 и GIF с фоновой музыкой
- разложить три варианта дизайна рядом на одном полотне
- получить разбор макета по пяти измерениям со списком правок
Примеры запросов агенту
- сделай прототип приложения для медитации в рамке iPhone
- собери колоду слайдов про итоги квартала и выгрузи в PPTX
- сгенерируй анимацию логотипа и экспортируй в MP4
Как установить huashu-design-html-native
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a claude-code2Вручную: положить файлы
~/.claude/skills/huashu-design-html-native/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/huashu-design-html-native/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a codex2Вручную: положить файлы
.agents/skills/huashu-design-html-native/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a cursor2Вручную: положить файлы
.cursor/skills/huashu-design-html-native/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills huashu-design-html-native2Вручную: положить файлы
.github/skills/huashu-design-html-native/SKILL.md1Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a gemini-cli2Командой платформы
gemini skills install https://github.com/reason-machines/trending-skills --path skills/huashu-design-html-nativeВручную: положить файлы
.devin/skills/huashu-design-html-native/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о huashu-design-html-native
Как установить huashu-design-html-native в Claude?
Выполните npx skills add reason-machines/trending-skills --skill huashu-design-html-native -a claude-code. После этого файл скилла появится по пути ~/.claude/skills/huashu-design-html-native/SKILL.md.
Что делает huashu-design-html-native?
Собирает дизайн-артефакты из текстового запроса: прототипы, слайды, анимации, инфографику — всё в HTML/CSS/JS. Плюс умеет выгружать результат в MP4, GIF, PPTX и PDF.
Нужен ли Figma для работы скилла?
Нет. Всё строится на HTML, CSS и JavaScript, а результат — готовый файл, который открывается в браузере.
