98.8K+Télécharger
Aller au guide d’utilisation
huashu-designpar alchaincyf

Huashu Design Skill.

Un skill Claude Code et Codex pour le design d'interface : prototypes HTML haute-fidélité, diapositives, animation et visualisations ; commence par trois ébauches.

  • Web et UI
  • HTML
Télécharger OpenDesignVoir le guide d'utilisation
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由：一张表定入口 ## 核心原则 #0 · 事实验证先于假设（优先级最高，凌驾所有其他流程） ## 核心哲学（优先级从高到低） ## 设计方向顾问（Fallback 模式）
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 33 602 caractères au total

01 Ce qu'il fait

Ce que fait le skill huashu-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Huashu-Design transforme un agent en studio de design basé sur HTML pour des prototypes haute fidélité, des présentations, des démonstrations d'animation et des visualisations. Avant tout nouveau travail visuel, il impose trois ébauches de direction différenciées (même lorsqu'un style ou une marque est spécifié) afin que l'utilisateur choisisse parmi de véritables options rendues plutôt qu'une seule réponse décidée par l'IA.

Il exécute un protocole d'actifs de marque (logos, photos de produits, valeurs de couleur réelles) plutôt que de deviner, vérifie les affirmations factuelles sur les produits via WebSearch avant de concevoir, et applique des règles explicites anti-AI-slop pour la couleur, les icônes, les cartes et l'imagerie. Il n'est pas destiné aux applications web de production ni aux systèmes pilotés par le back-end.

Ce qu'il produit

  • Fichiers de design HTML nommés de façon descriptive, versionnés lors de révisions majeures
  • Présentation HTML multipages avec un mur d'aperçu, exportée automatiquement en PDF et éventuellement en PPTX modifiable
  • Exports d'animation MP4 avec BGM et SFX par défaut
  • Fichiers de validation tels que brand-spec.md et direction-approved.md documentant les actifs et la direction choisie par l'utilisateur
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Vérifier les faits en premier

    Avant de concevoir quoi que ce soit lié à un produit, une technologie ou un événement réel, l'agent doit effectuer une WebSearch pour vérifier son existence, son statut de sortie, sa version et ses spécifications, plutôt que de se fier à sa mémoire d'entraînement.

  2. 02
    Orienter la tâche

    Une table de signaux associe les indices de la tâche (nom de marque, diapositive/PPT, animation/export, application/prototype iOS, critique) au bon point d'entrée et fichier de référence avant que le travail ne commence.

  3. 03
    Exécuter le repli à trois directions

    Toute tâche produisant de nouveaux visuels passe par les phases 1 à 6 : clarifier les besoins, reformuler le brief, verrouiller une spécification de design, sourcer de véritables images, générer trois logiques de design en parallèle, puis attendre le choix de l'utilisateur.

  4. 04
    Répondre aux cinq questions de forme

    Pour chaque page ou plan, l'agent doit répondre au rôle narratif, à la distance de visualisation, à la température visuelle, à la capacité de contenu et au motif visuel avant de construire le système de design.

  5. 05
    Exporter avec vérification

    Les animations sont rendues en MP4 avec BGM et SFX par défaut et vérifiées avec ffprobe pour s'assurer de la présence d'un flux audio ; les présentations sont automatiquement exportées en PDF et éventuellement en PPTX modifiable.

02 Trouvez celui qui vous convient

Quand utiliser le skill huashu-design

Utilisez le skill huashu-design dans Claude Code ou Codex lorsque la tâche relève du design d'interface de ce type. Périmètre et limites ci-dessous, extraits du fichier du skill.

Bon choix

  • Maquettes produit interactives haute fidélité que l’utilisateur peut parcourir en cliquant pour ressentir le flux
  • Diaporamas HTML en 1920x1080 conçus pour fonctionner comme un PPT
  • Design animé piloté par une timeline, utilisé comme matériel vidéo ou démonstration de concept
  • Infographies qualité impression et visualisations fondées sur les données
  • Comparer plusieurs directions de design côte à côte ou ajuster avec Tweaks

Connaître les limites

  • Les applications ou systèmes web de niveau production nécessitant un backend sont hors périmètre
  • Les sites SEO et les systèmes dynamiques pilotés par backend ne passent pas par ce skill

Quoi fournir

  • Checklist des assets de marqueLogo, images produit, captures d’écran d’interface, palette de couleurs, polices et zones interdites demandés en un seul lot avant de rechercher sur les canaux officiels.
  • Référence de style ou de marqueUne URL de site apprécié, une capture d’écran, ou un produit dont l’ambiance doit être reproduite ; en l’absence de référence, l’agent procède avec une hypothèse explicite.
  • Design system ou codebase existantL’agent vérifie d’abord l’existence d’un design system, d’un UI kit, d’une codebase ou d’un fichier Figma avant tout design hi-fi réalisé à partir de zéro.

03 Dans le skill

Règles que le skill huashu-design impose à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Le passage obligatoire à trois directions est à 100 % impératif

    Toute tâche produisant de nouveaux visuels doit présenter trois ébauches de directions différenciées avant exécution, même si l’utilisateur spécifie un style ou une marque ; seules trois exemptions restreintes s’appliquent.

  2. Le logo est un asset obligatoire

    Si un design affiche un nom de produit ou de marque reconnaissable, récupérer son logo officiel est obligatoire, non facultatif, et autant de logos que de produits apparaissent.

  3. Un placeholder plutôt qu’une mauvaise exécution

    Les icônes manquantes reçoivent un bloc gris avec une étiquette texte plutôt qu’un SVG mal dessiné ; les données manquantes reçoivent un commentaire honnête, jamais de chiffres fabriqués.

  4. Aucun contenu de remplissage

    Chaque élément doit justifier sa présence ; l’espace vide se résout par la composition, pas en inventant des statistiques, des icônes sur chaque titre, ou des dégradés partout.

  5. Éviter les motifs identifiés comme AI-slop

    Les dégradés violets, les icônes en emoji, les cartes arrondies avec une bordure gauche colorée en accent, et les personnages ou visages en SVG dessinés par IA sont signalés comme motifs visuels IA par défaut à éviter, sauf si la marque elle-même les utilise.

  6. Contraintes de portée pour React

    Ne jamais nommer un objet de style const styles = {...} car plusieurs composants entreront en conflit ; les composants doivent être exportés entre les balises script via Object.assign(window, {...}).

  7. Les exports d’animation par défaut à l’audio

    Par défaut, l'animation HTML est livrée en MP4 avec musique de fond (BGM) et effets sonores (SFX) ; une version sans son est considérée comme un livrable inachevé, sauf si l'utilisateur demande explicitement l'absence d'audio.

  8. Les decks passent par défaut en multi-fichiers avec un mur de synthèse (Overview Wall)

    Les diaporamas (decks) utilisent par défaut plusieurs fichiers HTML ainsi qu'un assets/deck_index.html comme vue d'ensemble ; l'architecture à fichier unique est réservée aux pitchs minimalistes de ≤5 pages qui n'ont explicitement pas besoin de vue d'ensemble.

04 Mettez-le en pratique

Installer huashu-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter huashu-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

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

Forme générique de la CLI skills pour SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Adaptez ce prompt avec votre propre contenu et contraintes, puis exécutez-le dans Claude Code ou Codex.

Example prompt
做个咖啡主题的 PPT

Source : exemple SKILL.md (verbatim).

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Prendre une capture d'écran Playwright et vérifier les erreurs de console avant la livraison
  • Regarder personnellement le résultat dans un navigateur avant la livraison, car le code écrit par une IA présente souvent des bugs d'interaction
  • Exécuter trois tests de clic Playwright sur les prototypes d'application (vue détaillée, hotspot clé, changement d'onglet) sans aucune pageerror
  • Vérifier le seuil de lisibilité : texte de corps d'au moins 14px, libellés d'au moins 12px, contraste d'au moins 4.5:1

Dans OpenDesign, importez huashu-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
alchaincyf
Repository
github.com/alchaincyf/huashu-design Branche master
Fichier du skill
SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit a790f70
License
MIT D'après LICENSE.
Étoiles du dépôt
24 121 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt alchaincyf/huashu-design. Ne constitue pas une note ou un compteur d'utilisation pour huashu-design.
Vérifié par OpenDesign
2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. 你是谁Présente l'agent comme un studio jouant six rôles : directeur artistique, chercheur de marque, designer visuel/motion, ingénieur, rédacteur.
  2. PrérequisIndique les types de sortie couverts par le skill et précise que les applications web de production sont exclues.
  3. 任务路由：一张表定入口Un tableau associant les signaux de tâche au point d'entrée et au fichier de référence corrects.
  4. 核心原则 #0 · 事实验证先于假设Exige une vérification WebSearch des faits produit avant tout début de travail de conception.
  5. 核心哲学（优先级从高到低）Six principes ordonnés : utiliser le contexte existant, s'aligner avant de construire, proposer des variations, préférer les placeholders, éviter le remplissage, éviter le « slop » d'IA.
  6. 设计方向顾问（Fallback 模式）Définit le processus obligatoire en sept phases produisant trois directions de design parallèles avant l'exécution.
  7. App / iOS 原型专属守则（速查版）Règles spécifiques prioritaires pour les prototypes d'applications mobiles couvrant l'architecture, les images, les cadres d'appareil, les tests de clic.
  8. 工作流程Workflow standard numéroté avec points de contrôle, protocole de fichier-barrière (gate-file) et modèles de questions.
  9. 异常处理Actions de repli prédéfinies pour les demandes vagues, les questions refusées, le contexte contradictoire, les délais serrés.
  10. 技术红线（必读 references/react-setup.md）Contraintes d'implémentation React/Babel et Stage/Sprite non négociables.
  11. Starter Components（assets/下）Répertorie les composants prêts à l'emploi (deck_index.html, animations.jsx, ios_frame.jsx, etc.) et quand utiliser chacun.
  12. 产出要求Conventions de nommage, gestion des versions, emplacement des fichiers et exigences finales de vérification navigateur/Playwright.
Description du skill lui-même
« Huashu Design » — créez des prototypes haute fidélité, des diaporamas, des animations, des visualisations et des revues expertes en HTML. Tout nouveau design commence par trois propositions initiales au choix de l'utilisateur (aucune exception même si un style ou une marque est spécifié), puis exécution après sélection. Mots déclencheurs : prototype, PPT, diaporama, animation, style de design, revue, page HTML, UI mockup, export MP4/GIF, faire quelque chose de soigné. Ne convient pas aux applications Web de production / systèmes nécessitant un backend.

Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 33 602 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill huashu-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Ce skill fonctionne-t-il uniquement dans Claude Code ?

Non, le skill est décrit comme agnostique par rapport à l'agent et fonctionne dans Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent ou tout agent de skill basé sur markdown, avec un mode dégradé documenté pour les runtimes plus faibles sans génération de sous-agents.

Huashu Design

Exécutez huashu-design sur une vraie tâche de design d'interface.

Téléchargez OpenDesign, importez huashu-design depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows