Baoyu Designpar JimLiu

Baoyu Design Skill.

Utilisez un workflow de design basé sur des fichiers pour les prototypes, les concepts de présentation et les systèmes visuels réutilisables.

Prototypage
Design systems
Présentations

Télécharger OpenDesign Voir le guide d’utilisation

Revue de la source · Baoyu DesignSKILL.md

Tâche Prototypage Produit • Des livrables de design HTML autonomes avec les ressources copiées • Un projet avec des liaisons design-system enregistrées et des métadonnées de ressources • Des exports de présentations ou d’animations pris en charge lorsque leurs workflows dédiés s’appliquent Avant de commencer Un agent capable de manipuler des fichiers, ainsi que la méthodologie du dépôt, ses guides intégrés, ses documents de référence et ses scripts. Les parcours d’export et d’import ont leurs propres prérequis.

Résumé éditorial · source examinée le 2026-10-07 · exemple non généré

01 Fonctionnement

Baoyu Design : livrables HTML autonomes

Un orchestrateur de design HTML avec des recettes propres à chaque type de livrable, des parcours d’import et de création design-system, un aperçu local et des workflows d’export soigneusement délimités.

Workflow issu de la sourcePas un benchmark d’exécution

La méthode de travail

Baoyu Design est un skill d’orchestration étendu pour produire des livrables de design HTML. Son point d’entrée oriente les différents livrables, comme les wireframes, écrans d’application, diagrammes, documents et diapositives, vers des guides intégrés spécialisés, tandis qu’une méthodologie commune fournit le processus de design.

Sa particularité est le contexte de design explicite. Il peut orienter des fichiers Figma locaux, des références de dépôt et des HTML/CSS existants vers des workflows d’import, ou lier un projet à un design system copié. Les livrables restent regroupés avec leurs ressources et les métadonnées du projet, au lieu de devenir des fichiers HTML isolés. Le périmètre d’export est précis : l’export PowerPoint s’applique aux présentations créées dans sa structure de diapositives prise en charge, pas à n’importe quel HTML.

Livrables attendus

Des livrables de design HTML autonomes avec les ressources copiées
Un projet avec des liaisons design-system enregistrées et des métadonnées de ressources
Des exports de présentations ou d’animations pris en charge lorsque leurs workflows dédiés s’appliquent

Voir l’exemple de brief

Du brief à la relecture

01
Établir le contexte
Identifiez le type de livrable, le niveau de fidélité, les références de marque et tout design system existant avant de choisir une recette.
02
Charger le bon parcours
Suivez le guide intégré approprié et la référence d’outils de l’environnement de l’agent, sans supposer que tous les environnements disposent des mêmes outils d’aperçu.
03
Lier le design system
Si vous utilisez un système existant, importez-en une copie locale au projet et enregistrez sa liaison. Si vous en créez un, suivez le workflow de compilation, de vérification et d’aperçu.
04
Construire et prévisualiser
Gardez le HTML et les ressources référencées ensemble, servez le résultat en local et vérifiez-le dans un véritable aperçu avant de le considérer comme livré.

02 Cas d’usage

Quand l’utiliser

Un agent capable de manipuler des fichiers, ainsi que la méthodologie du dépôt, ses guides intégrés, ses documents de référence et ses scripts. Les parcours d’export et d’import ont leurs propres prérequis.

Cas adaptés

Concepts de design explorablesConvient à un prototype ou à un livrable visuel basé sur des fichiers que les parties prenantes peuvent ouvrir et examiner.
Travail sur des systèmes réutilisablesLe point d’entrée propose des parcours explicites pour créer, importer, valider et prévisualiser des éléments design-system.

Limites à vérifier

Export délimitéSon parcours PowerPoint concerne les présentations prises en charge créées avec ce skill ; il ne promet pas de convertir n’importe quelle page web en présentation modifiable.
Le point d’entrée est un orchestrateurLe processus de création et les outils propres à chaque environnement se trouvent dans des fichiers supplémentaires. Un SKILL.md copié seul omet des instructions essentielles.

Éléments à fournir

Type de livrablePrécisez si le résultat attendu est un wireframe, un écran haute fidélité, une présentation, un document, un diagramme ou une autre forme prise en charge.
Références de designFournissez la marque, le kit d’interface, le fichier Figma local, le HTML/CSS ou la référence de dépôt ciblée pertinents.
Contraintes de sortieIndiquez où le projet doit se trouver et si un aperçu dans le navigateur ou un export pris en charge particulier est requis.

03 Décisions importantes

Décisions importantes

Le contexte de design suit le projet
Les copies locales du système et les métadonnées rendent la contrainte visuelle explicite à la reprise du travail.
Règles propres à chaque livrable
Les e-mails, documents proches de l’impression, présentations et écrans interactifs suivent des recettes distinctes plutôt qu’une formule unique de page web.

04 Exemple de brief

Essayer un brief ciblé

L’exemple de brief ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Récupérez le répertoire baoyu-design complet et pas seulement le fichier d’entrée ; conservez built-in-skills, agents, references et les composants de départ.

Fichier source amont

https://github.com/JimLiu/baoyu-design/blob/6530033592bf7fa58bc1a5a2a2ad278da45213a9/skills/baoyu-design/SKILL.md

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief

Utilisez Baoyu Design pour créer un prototype HTML autonome d’une application de lecture éditoriale à partir de la référence HTML/CSS fournie. Conservez ses jetons de typographie et de couleur, enregistrez la liaison design-system et réalisez deux états de lecture réalistes. Gardez les ressources en local, prévisualisez via HTTP et n’essayez pas d’exporter vers PowerPoint.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

Le livrable respecte le contexte de design fourni.
Les ressources référencées se trouvent dans le projet livré.
L’aperçu se charge et le périmètre d’export choisi est présenté fidèlement.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles sont fournis.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: JimLiu
Dépôt: JimLiu/baoyu-design
Fichier du skill: skills/baoyu-design/SKILL.md
Licence: MIT
Version examinée: 2026-10-07 · 6530033592bf

Résumé éditorial de la source

Un orchestrateur de design HTML avec des recettes propres à chaque type de livrable, des parcours d’import et de création design-system, un aperçu local et des workflows d’export soigneusement délimités.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Dépend-il d’un seul agent de code ?

Il n’est pas lié à un seul agent de code. La source décrit un workflow basé sur des fichiers, avec des références d’outils distinctes pour les environnements pris en charge.

Peut-il lire un fichier Figma local ?

Le point d’entrée comprend un parcours d’import hors ligne de fichiers .fig. Son guide d’import détaillé et ses scripts sont nécessaires pour ce workflow.

Peut-il exporter n’importe quel HTML vers PowerPoint ?

Non. La source limite explicitement l’export de présentations à ses HTML pris en charge, structurés en diapositives.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, vos contenus sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre workflow.

Télécharger OpenDesign Parcourir les skills de design