● Communauté
alchaincyf
⚡ Instantané
Huashu Design
par alchaincyf · alchaincyf/huashu-design
Skill de design native HTML pour Claude — prototypes haute fidélité, slides, animations, export MP4, 20 principes de design.
Huashu Design (华术) est une skill Claude Code qui traite HTML/CSS comme canevas de design. Livrez des prototypes, présentations et explainers animés sans Figma. Inclut 20 principes de design codifiés, une revue en 5 dimensions et le rendu MP4. Agnostique aux frameworks ; fonctionne à partir d'un brief approximatif.
Pourquoi l'utiliser
Fonctionnalités clés
- 20 principes de design codifiés (contraste, rythme, modularité, …)
- Revue en 5 dimensions : layout / typographie / couleur / mouvement / contenu
- Export MP4 via rendu headless pour les livrables animés
- Mode prototype haute fidélité — fidélité pixel-perfect ciblée
- Compatible avec tout framework ou HTML brut
Démo en direct
Aperçu en pratique
prêt
Cas d'usage
Usages concrets : Huashu Design
Quand l'utiliser : Vous avez un brief et voulez un prototype cliquable et mesurable, pas une maquette statique.
Déroulement
-
Ancrer le style
Utilise huashu-design. Brief : landing B2B SaaS minimaliste, influence suisse, titres en serif, une couleur d'accent. Génère le plan de layout en suivant tes 20 principes.✓ Copié
→ Plan de layout citant des principes spécifiques appliqués
-
Construire
Produis le HTML/CSS. Fichier unique. Responsive. Pas de frameworks JS.✓ Copié
→ Livrable monofichier passant les tests d'accessibilité de base
-
Revue en 5 dimensions
Lance la revue en 5 dimensions sur ce que tu viens de livrer. Où est-ce insuffisant ?✓ Copié
→ Auto-critique concrète, pas de complaisance
Résultat : Un prototype que vous pouvez tester en A/B ou itérer sans quitter le code.
Pièges
- La skill retombe sur le template générique « hero + features + CTA » — Ancrez la référence de style (suisse, Bauhaus, éditorial) dans chaque prompt
Quand l'utiliser : Vous voulez un explainer de 30 secondes pour votre produit mais ne pouvez pas justifier After Effects.
Déroulement
-
Storyboard
Utilise huashu-design. Crée le storyboard d'un explainer de 30s pour mon produit : problème (8s) / solution (14s) / CTA (8s).✓ Copié
→ Plan image par image
-
Animer en HTML
Implémente chaque scène comme une animation CSS keyframe. Rendu en HTML unique avec une timeline.✓ Copié
→ Le HTML joue proprement dans le navigateur
-
Export
Rendu en MP4 1080p.✓ Copié
→ MP4 écrit sur disque ; durée correspondante
Résultat : Un explainer MP4 livrable depuis un prompt, sans logiciel de montage vidéo.
Pièges
- Les polices s'affichent différemment dans Chrome headless — Intégrez les polices web ; ne comptez pas sur les polices système
Combinaisons
Associez-le à d'autres MCPs pour un effet X10
Storyboard en HTML, finition dans AE pour la qualité broadcast
Ébauche dans huashu-design ; exporte les frames pour la composition AE.✓ Copié
Sauvegarder les itérations aux côtés du brief
Crée /designs/landing-v1/ à v3/ et garde les deux.✓ Copié
Coût et limites
Coût d'exécution
- Quota d'API
- N/A
- Tokens par appel
- Les designs haute fidélité produisent beaucoup de HTML — gardez le périmètre restreint
- Monétaire
- Gratuit
- Astuce
- Générez en petites passes : structure d'abord, style ensuite, finition en dernier
Sécurité
Permissions, secrets, portée
Portées minimales : filesystem-write
Stockage des identifiants : Aucun
Sortie de données : Aucune
Dépannage
Erreurs courantes et correctifs
Le rendu MP4 échoue (ffmpeg manquant)
brew install ffmpeg — la skill l'utilise pour l'assemblage des frames
Vérifier : `ffmpeg -version`
Le design semble générique
Vous n'avez pas ancré une référence de style — nommez-en toujours une (suisse, Bauhaus, Pentagram, …)
La revue donne un retour complaisant sur un mauvais design
Prompt explicite : « sois critique ; liste d'abord ce qui ne va pas »
Alternatives
Huashu Design vs autres
| Alternative | Quand l'utiliser | Compromis |
|---|
| cc-frontend-skill | Vous voulez une voix opiniâtre plutôt qu'une méthodologie | Processus de revue moins structuré |
| Figma | Le flux de travail d'équipe exige Figma | Pas du code ; pas animable de la même façon |