Skills

Huashu Design : obtenir un design HTML livrable en une phrase

Pour qui veut générer dans l’assistant un prototype cliquable ou un diaporama présentable, à condition d’installer avec la commande npx officielle et de vérifier d’abord que le dossier d’installation contient des sous-dossiers, pas seulement SKILL.md.

Official source · huashu-design

Install

npx skills add alchaincyf/huashu-design

À qui ça s’adresse

Pour qui veut, dans l’assistant, obtenir un design livrable en une phrase. Formulation officielle : tapez une phrase dans votre agent et récupérez un design que vous pouvez livrer. Le titre du dépôt le présente comme un skill de design natif HTML, couvrant prototypes haute fidélité, diapositives et animation, plus vingt philosophies de design, un contrôle en cinq dimensions et l’export MP4.

Le profil le plus adapté a déjà une demande en une phrase (faire un prototype cliquable, ou un jeu de diapositives présentable) et peut exécuter npx skills add sur cette machine. Ce n’est pas pour qui veut seulement en parler sans vérifier que le dossier d’installation est complet.

Avant de commencer, il faut pouvoir exécuter la commande d’installation officielle. Le texte officiel dit que c’est commun à plusieurs agents et que plusieurs environnements peuvent l’installer ; ne pas lire cette liste comme un périmètre mutuellement exclusif.

Premier essai en 3 minutes

Rester sur le chemin principal npx. La première fois, vérifier que l’installation est complète avant de décider de générer des fichiers.

Prérequis : npm/npx est déjà présent sur cette machine. Au premier essai, ne pas exporter de MP4 et ne pas écrire de fichiers vers un chemin non confirmé.

Emplacement d’installation : exécuter dans l’espace de travail :

npx skills add alchaincyf/huashu-design

Une fois installé, jeter un œil au dossier d’installation comme le dit le texte d’origine, par exemple ~/.claude/skills/huashu-design/. S’il n’y a que SKILL.md et aucun de ces sous-dossiers, le CLI skills est trop ancien (≤1.5.15 a le défaut de ne synchroniser qu’un seul fichier ; corrigé en 1.5.19). Mettre à jour le CLI d’abord, puis continuer. Ne pas compléter les sous-dossiers à la main.

Dépôt officiel :

https://github.com/alchaincyf/huashu-design

Déclencheur à bas risque : une fois le dossier complet, demander en une phrase à l’assistant de préparer une vérification de prototype interactif, plutôt que d’exporter d’abord une vidéo. Livraison d’origine pour un prototype interactif : HTML en un fichier, vrai iPhone bezel, cliquable, vérifié avec Playwright, environ 10–15 minutes. Avant de générer, confirmer le chemin du HTML ; après génération, l’ouvrir en local et terminer la vérification Playwright avant de le traiter comme livrable.

Signal de succès : le dossier d’installation ne contient pas seulement SKILL.md, et vous n’avez encore écrit aucun fichier d’export non confirmé.

Cas d’usage

Cas 1 : prototype interactif App / Web cliquable. Livré en HTML d’un seul fichier, avec vrai iPhone bezel, cliquable, vérifié avec Playwright. Pour qui a déjà un parcours sur un écran et veut d’abord voir un prototype haute fidélité. Confirmer le chemin de sortie, puis générer ; ne pas l’envoyer à d’autres avant que la vérification passe.

Cas 2 : diapositives de présentation. Texte d’origine : HTML deck (présentation dans le navigateur) plus PPTX éditable (zones de texte conservées), environ 15–25 minutes. Pour qui a déjà un plan et a besoin de quelque chose à présenter et encore à modifier. Le PPTX écrit un fichier ; confirmer l’emplacement d’enregistrement avant de générer ; après génération, ouvrir en local, vérifier les zones de texte, puis diffuser.

Limites d’usage

L’animation sur timeline exporte MP4 (25fps / 60fps interpolation), GIF (palette optimisée) et BGM, environ 8–12 minutes. Les fichiers sont plus lourds ; ne pas en faire le premier essai.

La seule commande d’installation est npx skills add alchaincyf/huashu-design. Si le dossier est incomplet, le texte d’origine ne pointe qu’un problème de version du CLI ; ne pas inventer d’autres installeurs.

Les vingt philosophies de design et le contrôle en cinq dimensions n’apparaissent que dans le titre du dépôt ; le corps cité sur cette page ne liste pas les items. Ne pas inventer de noms de philosophies ni de grille de contrôle.

Ne pas inventer de chemins de skill absents du texte, et ne pas lire « installable partout » comme si les étapes de chaque environnement étaient déjà écrites.