Power Designpar ItsssssJack

Power Design Skill.

Choisissez d’abord le support, puis appliquez la marque sans confondre les exigences des diapositives et celles d’un site web.

Design web
Présentations
Systèmes de marque

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

Revue de la source · Power DesignSKILL.md

Tâche Design web Produit • Une présentation ou un site web responsive HTML ; les polices et images liées peuvent nécessiter un accès réseau. • Un enregistrement de style de marque réutilisable lors de l’extraction d’une nouvelle marque source. • Un résultat vérifié selon la liste de contrôle des diapositives ou du site pour le contenu, la mise en page et l’accessibilité. Avant de commencer L’extraction de marque à partir d’une URL nécessite Firecrawl. Les sorties par défaut évitent les dépendances externes JavaScript, mais les polices ou les images peuvent néanmoins exiger leur propre disponibilité et leurs propres droits.

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

01 Fonctionnement

Créer des présentations ou des sites HTML guidés par la marque

Un workflow de design HTML avec extraction de marque partagée et règles distinctes pour les présentations et les sites web responsives.

Workflow fondé sur la sourcePas un benchmark d’exécution

Méthode de travail

Power Design propose deux voies de production qui partagent une base de marque : une présentation HTML à cadre fixe et un site web responsive. Il peut utiliser l’URL d’une marque via Firecrawl, un style de marque fourni ou une base neutre par défaut. Les références de fond, de premier plan, d’accent, de police, de rayon et de ton alimentent ensuite les règles propres à chaque support.

Cette distinction compte, car une diapositive lisible une fois projetée et une page web utilisable n’obéissent pas aux mêmes contraintes. La voie diapositive privilégie une quantité limitée de contenu, une zone de sécurité, un point visuel unique et un mode de présentation clair. La voie site web ajoute la mise en page responsive, la structure sémantique, l’accès au clavier, le comportement des thèmes, les formulaires et les métadonnées. Ce sont des objectifs de conception, non des résultats de performance mesurés.

Livrables attendus

Une présentation ou un site web responsive HTML ; les polices et images liées peuvent nécessiter un accès réseau.
Un enregistrement de style de marque réutilisable lors de l’extraction d’une nouvelle marque source.
Un résultat vérifié selon la liste de contrôle des diapositives ou du site pour le contenu, la mise en page et l’accessibilité.

Voir l’exemple de brief

Du brief à la revue

01
Choisir présentation ou site
Déterminez le support de sortie avant de choisir les règles ou le canevas.
02
Établir les éléments de marque
Utilisez une extraction autorisée depuis une URL, un style existant de la bibliothèque ou la base neutre.
03
Appliquer le bon référentiel de règles
Utilisez les contraintes de présentation pour les diapositives et les exigences d’interaction responsive pour les sites web.
04
Enregistrer et inspecter
Ouvrez le résultat, vérifiez son comportement propre au support et itérez à partir du rendu réel.

02 Cas d’usage

Quand l’utiliser

L’extraction de marque à partir d’une URL nécessite Firecrawl. Les sorties par défaut évitent les dépendances externes JavaScript, mais les polices ou les images peuvent néanmoins exiger leur propre disponibilité et leurs propres droits.

Bon cas d’usage

Présentations HTML de marqueUtile lorsque le livrable attendu est une présentation dans le navigateur.
Pages marketing responsivesFournit par défaut une base sans framework, avec des thèmes clair et sombre fondés sur des tokens.

Limites à vérifier

Pas un exportateur PPTXLa sortie par défaut documentée est HTML, et non un fichier PowerPoint natif.
L’extraction de marque exige un accèsLa marque basée sur une URL dépend d’une intégration Firecrawl disponible et de sources accessibles.
Des objectifs ne sont pas des mesuresLes budgets de performance et les seuils de lisibilité indiqués doivent être vérifiés sur le résultat réel, et non affirmés automatiquement.

Éléments à fournir

Support et objectifIndiquez si le résultat est une présentation ou un site, ainsi que l’action ou le message qu’il doit soutenir.
Source de la marqueFournissez une URL, une marque connue de la bibliothèque ou l’autorisation d’utiliser un style neutre.
Contenu et publicFournissez les véritables affirmations, sections, points clés et destinataires visés.

03 Décisions importantes

Décisions importantes

Règles propres à chaque support
Un canevas de diapositive fixe ne doit pas hériter de la densité d’un site web, et une page web ne doit pas hériter d’hypothèses d’interaction propres aux présentations.
Enregistrement de marque partagé
Le style de marque extrait peut alimenter les deux voies, tandis que leurs règles de mise en page restent séparées.
HTML simple par défaut
La source privilégie une sortie autonome, sauf si un projet plus vaste ou un framework est explicitement nécessaire.

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

Conservez les principes, la bibliothèque de marques et les références d’extraction avec le Skill. La source n’établit pas d’installateur universel en une seule ligne.

Fichier source amont

https://github.com/ItsssssJack/power-design/blob/f0c4143a38787aa33975b0e1811ccdf27d3014a1/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

Utilise power-design pour créer une page HTML responsive, et non une présentation, pour l’atelier fourni. Utilise notre fichier de style de marque et les détails vérifiés de l’événement. Garde une seule action d’inscription, prends en charge l’usage au clavier et les thèmes clair et sombre, et indique séparément les vérifications réelles de la fenêtre d’affichage et des performances par rapport aux objectifs de conception.

Inspecter le résultat

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

Le résultat choisi respecte les règles du bon support.
Les valeurs de marque sont traçables jusqu’au style fourni ou extrait.
Le site ou la présentation est inspecté dans le contexte de navigateur prévu.

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

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: ItsssssJack
Dépôt: ItsssssJack/power-design
Fichier du skill: SKILL.md
Licence: MIT
Version examinée: 2026-10-07 · f0c4143a3878

Résumé éditorial de la source

Un workflow de design HTML avec extraction de marque partagée et règles distinctes pour les présentations et les sites web responsives.

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

06 Questions avant de commencer

Questions avant de commencer

Peut-il produire des fichiers PowerPoint ?

La source décrit des présentations HTML. Un livrable PPTX natif nécessite un workflow distinct de conversion ou de création.

Faut-il toujours Firecrawl ?

Seule la voie d’extraction par URL en dépend ; la source propose aussi des styles de marque existants et une base neutre par défaut.

Les modes clair et sombre sont-ils inclus pour les sites web ?

Ils font partie de la configuration web documentée par défaut, avec un bouton manuel persistant, sauf si le périmètre est modifié.

OpenDesign

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

Gardez votre brief, vos 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