Huashu Design — скилл
Дизайн-скилл на HTML: кликабельные прототипы, слайды с экспортом в PPTX, анимации в MP4 и GIF, инфографика и экспертное ревью
- 27 960 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Запускает скрипты экспорта и Playwright
- Скачивает изображения из открытых источников
Установка
- Работает в
Ручная установка
npx skills add alchaincyf/huashu-designНужна свежая версия CLI skills, иначе установится только SKILL.md.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Запускает скрипты экспорта и Playwright
- Скачивает изображения из открытых источников
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл делает агента дизайнером, который выпускает готовый визуальный результат в HTML. Для любой новой задачи он сначала показывает три разных направления и работает дальше только после выбора. Умеет собирать кликабельные прототипы приложений в рамке iPhone с проверкой через Playwright, презентации для браузера с редактируемым PPTX, анимации по таймлайну с экспортом в MP4 и GIF и инфографику для печати. Отдельный режим проводит ревью готового дизайна по пяти измерениям и выдает список исправлений.
Для кого. Для продактов, маркетологов и дизайнеров, которым нужны прототипы, слайды и ролики без Figma и After Effects.
Подходит, если
- Нужен кликабельный прототип мобильного приложения
- Нужна короткая анимация к запуску продукта
- Нужно оценить готовый макет и получить список правок
Не подходит, если
- Нужно боевое веб-приложение с бэкендом или SEO-сайт, автор прямо это исключает
- Не читаете по-китайски и не готовы к англоязычному README как единственной опоре
Пример запроса к агенту
Сделай прототип приложения-помодоро на четыре экрана, чтобы можно было кликатьОграничения
Основные инструкции SKILL.md на китайском, есть английский README. Скилл зависит от папок references, assets, scripts и demos, старые версии CLI skills ставили только SKILL.md, поэтому после установки нужно проверить содержимое. Экспорт видео требует локальных инструментов, проверка прототипов использует Playwright.
Как отключить. Удалите папку huashu-design из каталога скиллов агента, например ~/.claude/skills/huashu-design.
Частые вопросы
Можно ли использовать в коммерческих проектах?
Да, автор перевел скилл на лицензию MIT, прежнее ограничение для компаний отменено.
Почему после установки есть только SKILL.md?
Это баг старых версий CLI skills, обновите CLI и переустановите или используйте git clone.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для Codex, который превращает статьи и заметки в набор страниц-картинок в китайском рисованном стиле технических объяснений
Двенадцать скиллов, по которым агент собирает однофайловые HTML-анимации: слайды, схемы протоколов, архитектурные диаграммы и демо для записи экрана
Пять скиллов: веб-презентации для записи видео, дизайн веб-страниц, промпты для GPT Image 2, поиск по базе знаний и статьи
Скиллы и CLI от HeyGen: агент пишет HTML-композиции и рендерит из них MP4-ролики, субтитры, моушн-графику и слайды
Скилл превращает фотографии зданий, улиц и местной культуры в оформленные редакционные постеры через модель генерации изображений
Скилл превращает статью, README или сайт в вертикальный промо-ролик на HyperFrames: сначала бриф и согласование, потом ресурсы, сборка и проверка
Коротко о README
README на китайском с английской версией рядом. Показана установка через npx skills и запасной вариант через git clone с проверкой вложенных папок. Таблица возможностей перечисляет прототипы, слайды, анимации, варианты дизайна, инфографику, подбор направления и ревью, дальше идет галерея демо, созданных самим скиллом. Описана связь с Claude Design и история смены лицензии на MIT.
Бейдж для README
Исходный SKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- # 花叔Design · Huashu-Design ## 你是谁 **你是设计师，不是写HTML的程序员。** HTML只是你的媒介，就像别人用Figma、 用AE、用InDesign——工具不定义你，交付标准才定义你。 那个标准是：**产出要让人认不出是AI做的。** 不是「AI做得还行」， 是别人看到会问「这哪个工作室做的」。你有能力达到——现在的模型可以调用任何一位 顶尖设计师、任何一家顶级工作室积累的方法和品味，**限制通常不在能力， 在于有没有先认定自己要做到那个水准**。 ### 你不是一个人，是一个工作室 一件像样的设计交付，顶级工作室不会只派一个人。你要**依次成为他们每一个**： | 角色 | 他负责什么 | 缺了会怎样 | |---|---|---| | **艺术总监** | 定方向、判品味、砍掉不够好的 | 做出「都还行」的平庸作品 | | **品牌研究员** | 找到真实资产（logo/产品图/UI），理解品牌气质 | 凭想象画品牌，一眼假 | | **视觉设计师** | 版式、色彩、字体、层级 | 元素堆在一起，没有秩序 | | **动效设计师** | 时间、缓动、节奏 | 动画生硬，像PPT切换 | | **前端工程师** | 把设计精确实现出来 | 稿子好看，做出来走样 | | **文案** | 每一句话都为设计服务 | 用 Lorem ipsum 或「标题文字」占位交付 | **媒介变了，主导角色就要换**——做幻灯片时别像网页，做动画时别像Dashboard， 做App原型时别像说明书。开工前先想清楚：这次谁主导。