huashu-designавтор alchaincyf

Huashu Design Skill.

Навык для Claude Code и Codex для UI-дизайна: высококачественные HTML-прототипы, слайды, анимация и визуализации; начинается с трёх черновиков.

Web и UI
HTML

Скачать OpenDesign Инструкция по использованию

alchaincyf/huashu-design · SKILL.mdSKILL.md

--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由：一张表定入口 ## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程） ## 核心哲学（优先级从高到低） ## 设计方向顾问（Fallback 模式）

Метаданные и заголовки секций прочитаны из исходного файла 2026-09-14 · 33 602 символа полностью

01 Что делает

Что делает skill huashu-design в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Huashu-Design превращает агента в дизайн-студию на базе HTML для создания высококачественных прототипов, презентаций, демо анимации и визуализаций. Перед любой новой визуальной работой он требует подготовить три различных черновика направления (даже если стиль или бренд уже заданы), чтобы пользователь выбирал из реально отрендеренных вариантов, а не из единственного решения, принятого ИИ.

Он выполняет протокол работы с бренд-активами (логотипы, фотографии продукта, реальные значения цвета) вместо угадывания, проверяет фактические утверждения о продуктах через WebSearch перед началом дизайна и применяет явные правила против «AI-slop» для цвета, иконок, карточек и изображений. Он не предназначен для продакшн веб-приложений или систем с бэкенд-логикой.

Что он выдаёт

HTML-файлы дизайна с описательными именами, с версионированием при значительных изменениях
Многостраничная HTML-презентация со стеной обзора, автоматически экспортируемая в PDF и опционально в редактируемый PPTX
Экспорт анимации в MP4 с фоновой музыкой и звуковыми эффектами по умолчанию
Контрольные файлы, такие как brand-spec.md и direction-approved.md, документирующие активы и выбранное пользователем направление

Смотрите пример запроса ↗

Как это работает

01
Сначала проверьте факты
Перед созданием дизайна, связанного с реальным продуктом, технологией или событием, агент должен проверить через WebSearch его существование, статус релиза, версию и характеристики, а не полагаться на данные обучения.
02
Маршрутизация задачи
Таблица сигналов сопоставляет признаки задачи (название бренда, слайд/PPT, анимация/экспорт, приложение/прототип iOS, критика) с правильной точкой входа и справочным файлом перед началом работы.
03
Запустите резервный вариант с тремя направлениями
Любая задача, создающая новую визуальную составляющую, проходит через фазы 1–6: уточнение потребностей, переформулировка брифа, фиксация дизайн-спецификации, поиск реальных изображений, порождение трёх параллельных дизайн-логик, а затем ожидание выбора пользователя.
04
Ответьте на пять вопросов формы
Для каждой страницы или кадра агент должен определить нарративную роль, дистанцию просмотра, визуальную температуру, информационную ёмкость и визуальный мотив, прежде чем строить дизайн-систему.
05
Экспорт с верификацией
Анимации по умолчанию рендерятся в MP4 с фоновой музыкой и звуковыми эффектами и проверяются с помощью ffprobe на наличие аудиопотока; презентации автоматически экспортируются в PDF и опционально в редактируемый PPTX.

02 Определите своё применение

Когда использовать навык huashu-design

Используйте навык huashu-design в Claude Code или Codex, когда задача — UI-дизайн такого рода. Применимость и ограничения ниже взяты из файла самого навыка.

Хорошо подходит

Интерактивные высокодетализированные макеты продукта, по которым пользователь может кликать и почувствовать флоу
HTML-слайды 1920x1080, работающие как PPT
Моушн-дизайн на основе таймлайна, используемый как видеоматериал или концепт-демо
Инфографика печатного качества и визуализации на основе данных
Сравнение нескольких направлений дизайна рядом друг с другом или доработка с помощью Tweaks

Знайте границы

Продуктовые веб-приложения или системы, требующие backend, вне области применения
SEO-сайты и динамические системы на backend не проходят через этот skill

Что предоставить

Чек-лист брендовых материаловЛоготип, изображения продукта, скриншоты интерфейса, цветовая палитра, шрифты и запретные зоны запрашиваются одним пакетом перед поиском по официальным каналам.
Референс стиля или брендаURL понравившегося сайта, скриншот или продукт, чью атмосферу нужно передать; если такого нет, агент действует, исходя из заявленного предположения.
Существующая дизайн-система или кодовая базаАгент сначала проверяет, существует ли дизайн-система, UI-кит, кодовая база или Figma, прежде чем делать hi-fi дизайн с нуля.

03 Внутри скилла

Правила, которые skill huashu-design задаёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Гейт из трёх направлений — 100% обязателен
Любая задача, создающая новые визуалы, должна показать три различных черновика направлений перед выполнением, даже если пользователь указал стиль или бренд; действуют лишь три узких исключения.
Логотип — обязательный актив
Если дизайн показывает узнаваемый продукт или название бренда, получение его официального логотипа обязательно, а не опционально, причём логотипов должно быть столько, сколько продуктов представлено.
Плейсхолдер вместо плохого исполнения
Для отсутствующих иконок используется серый блок с текстовой подписью, а не плохо нарисованный SVG; для отсутствующих данных даётся честный комментарий, а не выдуманные цифры.
Никакого лишнего контента
Каждый элемент должен заслуживать своего места; пустое пространство решается композицией, а не выдумыванием статистики, иконок на каждом заголовке или градиентов повсюду.
Избегайте распознаваемых паттернов AI-слопа
Фиолетовые градиенты, эмодзи-иконки, скруглённые карточки с цветным акцентом слева и нарисованные AI-люди/лица помечены как типовые визуальные паттерны AI, которых нужно избегать, если сам бренд их не использует.
Ограничения области видимости React
Никогда не называйте объект стилей const styles = {...}, так как компоненты будут конфликтовать; компоненты должны экспортироваться между script-тегами через Object.assign(window, {...}).
Экспорт анимации по умолчанию для аудио
HTML-анимация по умолчанию выпускается как MP4 с фоновой музыкой и звуковыми эффектами; беззвучная версия считается незавершённым артефактом, если пользователь явно не попросил отказаться от звука.
Дек по умолчанию — несколько файлов с обзорной стеной (Overview Wall)
Слайд-деки по умолчанию состоят из нескольких HTML-файлов плюс assets/deck_index.html как обзор; однофайловая архитектура подходит только для минимальных презентаций из ≤5 страниц, где обзор явно не нужен.

04 Применение

Установить huashu-design в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить huashu-design в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

Общая форма CLI-команды skills для SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Адаптируйте этот промт с вашим содержимым и ограничениями, затем запустите его в Claude Code или Codex.

Example prompt

做个咖啡主题的 PPT

Источник: пример SKILL.md (буквально).

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Сделайте скриншот в Playwright и проверьте ошибки консоли перед сдачей
Лично посмотрите результат в браузере перед сдачей, так как в коде, написанном ИИ, часто встречаются ошибки взаимодействия
Запустите три клик-теста Playwright на прототипах приложения (детальный вид, ключевая горячая зона, переключение вкладок) без единой pageerror
Проверьте минимальный порог читаемости: основной текст не менее 14px, подписи не менее 12px, контраст не менее 4.5:1

В OpenDesign импортируйте huashu-design по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: alchaincyf
Repository: github.com/alchaincyf/huashu-design Ветка master
Файл skill: SKILL.md Контрольная сумма содержимого зафиксирована при проверке; коммит a790f70
License: MIT Из LICENSE.
Звёзды репозитория: 24 121 Снимок GitHub от 14 сентября 2026 года для всего репозитория alchaincyf/huashu-design. Это не рейтинг и не счётчик использования huashu-design.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

你是谁Определяет агента как студию, играющую шесть ролей: арт-директор, бренд-исследователь, визуальный/моушн-дизайнер, инженер, копирайтер.
Предварительные условияУказывает, какие типы результатов охватывает skill и что production-веб-приложения исключены.
任务路由：一张表定入口Таблица сопоставления сигналов задачи с нужной точкой входа и файлом-справочником.
核心原则 #0 · 事实验证先于假设Требует проверки фактов о продукте через WebSearch до начала любой дизайн-работы.
核心哲学（优先级从高到低）Шесть упорядоченных принципов: использовать существующий контекст, согласовывать перед созданием, давать варианты, предпочитать плейсхолдеры, избегать наполнителя, избегать AI slop.
设计方向顾问（Fallback 模式）Определяет обязательный семиэтапный процесс, дающий три параллельных дизайн-направления перед реализацией.
App / iOS 原型专属守则（速查版）Специфические обязательные правила для прототипов мобильных приложений: архитектура, изображения, рамки устройств, клик-тесты.
工作流程Пронумерованный стандартный рабочий процесс с чекпоинтами, протоколом gate-файла и шаблонами вопросов.
异常处理Заранее определённые запасные действия для расплывчатых запросов, отклонённых вопросов, конфликтующего контекста, жёстких дедлайнов.
技术红线（必读 references/react-setup.md）Неприемлемые к изменению ограничения реализации React/Babel и Stage/Sprite.
Starter Components（assets/下）Перечисляет готовые компоненты (deck_index.html, animations.jsx, ios_frame.jsx и т.д.) и когда каждый использовать.
产出要求Правила именования, версионирования, расположения файлов и требования финальной проверки в браузере/Playwright.

Собственное описание skill

«Huashu Design — создание высокоточных прототипов, слайдов, анимации, визуализаций и экспертных обзоров на HTML. Для любого нового дизайна на 100% сначала делаются три черновых варианта на выбор пользователя (указание стиля/бренда не освобождает от этого), только после выбора начинается реализация. Триггерные слова: сделать прототип, PPT, слайды, анимация, стиль дизайна, обзор, сделать HTML-страницу, UI mockup, экспорт MP4/GIF, сделать красиво. Не подходит для production-уровня Web App и систем, требующих бэкенд.»

Описание из начала SKILL.md. Полный файл содержит около 33 602 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill huashu-design

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Работает ли этот skill только в Claude Code?

Нет, skill описан как агент-независимый и работает в Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent или любом markdown-агенте с поддержкой skill, с задокументированным ослабленным режимом для более слабых сред без запуска субагентов.

Huashu Design

Запустите huashu-design на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте huashu-design по ссылке на его SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

Что делает skill huashu-design в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать навык huashu-design

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые skill huashu-design задаёт Claude Code и Codex

Гейт из трёх направлений — 100% обязателен

Логотип — обязательный актив

Плейсхолдер вместо плохого исполнения

Никакого лишнего контента

Избегайте распознаваемых паттернов AI-слопа

Ограничения области видимости React

Экспорт анимации по умолчанию для аудио

Дек по умолчанию — несколько файлов с обзорной стеной (Overview Wall)