106.9K+Télécharger
Aller au guide d’utilisation
Create Canvaspar ibelick

Create Canvas Skill.

Gardez vos variantes de design interactives dans un espace de comparaison nommé et réorganisable.

  • Exploration de design
  • Canevas
Télécharger OpenDesignVoir le guide d'utilisation
Revue de la source · create-canvasSKILL.md
Tâche Gardez vos variantes de design interactives dans un espace de comparaison nommé et réorganisable. Résultats Un registre défini dans le code source, contenant des aperçus interactifs nommés. Avant de commencer La liste des éléments et l’implémentation des aperçus restent dans le code source ; le stockage ne peut ni créer ni masquer du contenu.
Résumé éditorial · source examinée le 2026-11-02 · ce n’est pas un exemple généré

01 Fonctionnement

Gardez vos variantes de design interactives dans un espace de comparaison nommé et réorganisable

Créez un canevas libre avec des aperçus interactifs nommés, des variantes indépendantes, une disposition enregistrée et des interactions qui préservent les saisies.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

Create Canvas crée un espace pour explorer plusieurs variantes de design interactives au fil de la conversation. Chaque aperçu possède un ID stable et un nom lisible dans un registre défini dans le code source. On peut copier ce nom pour désigner une version précise, déplacer les aperçus avec des poignées dédiées et naviguer par déplacement ou zoom.

Le contenu reste dans les fichiers source, tandis que le stockage du navigateur mémorise la disposition. Cette séparation rend les demandes suivantes précises : une nouvelle version reçoit sa propre identité et son propre état, alors qu’une modification d’une version existante conserve sa place. Les expérimentations restent locales tant qu’un passage en production n’est pas demandé.

Livrables attendus

  • Un registre défini dans le code source, contenant des aperçus interactifs nommés.
  • Un canevas avec poignées de déplacement, commandes de caméra et sélection globale de thème lorsqu’elle est prise en charge.
  • Des positions de caméra et d’éléments enregistrées, avec un bilan des interactions vérifiées ou non testées.
Voir l'exemple de brief

Du brief à la revue

  1. 01
    Créer un aperçu interactif sûr

    Inspectez un canevas existant avant d’en créer un autre. Montez un aperçu avec des données synthétiques, un libellé séparé et une poignée de déplacement, en utilisant le framework du projet.

  2. 02
    Ajouter des variantes distinctes

    Attribuez à chaque nouvelle variante un ID stable, un nom unique et un état indépendant. Préservez les variantes précédentes et leurs positions mesurées lors de l’ajout de contenu.

  3. 03
    Préserver la saisie pendant la navigation

    Séparez les gestes du canevas de la saisie, de la sélection et du défilement imbriqué. Conservez les portails natifs et vérifiez que copier, déplacer ou zoomer ne remonte pas les aperçus.

  4. 04
    Enregistrer la disposition et vérifier le comportement

    Enregistrez des valeurs de caméra bornées, le thème pris en charge et les positions par ID du registre. Vérifiez les rechargements, les données de stockage mal formées et les gestes pertinents sur les appareils avant de les déclarer fonctionnels.

02 Cas d’usage

Quand l’utiliser

La liste des éléments et l’implémentation des aperçus restent dans le code source ; le stockage ne peut ni créer ni masquer du contenu.

Un bon choix

  • Comparaison de designsGardez plusieurs variantes interactives côte à côte et désignez-les par leur nom exact.
  • Exploration continueRevenez dans un espace existant sans perdre les variantes précédentes ni les choix de disposition.

Limites à vérifier

  • Le code source définit le contenuLa liste des éléments et l’implémentation des aperçus restent dans le code source ; le stockage ne peut ni créer ni masquer du contenu.
  • Isolation de la productionLes expérimentations utilisent des données de test sûres et ne modifient pas le code des composants de production.
  • Périmètre d’édition limitéDessin, connecteurs, redimensionnement et historique d’annulation sont exclus sauf demande explicite.

Éléments à fournir

  • Liste des expérimentationsNommez les variantes, les dimensions prévues et les différences à explorer.
  • Composants sûrsFournissez les API publiques des composants et des données de test évitant données personnelles et écritures réelles.
  • Espace existantIdentifiez la route, le registre, le thème et la disposition à préserver.

03 Décisions importantes

Les décisions importantes

  1. Références précises

    Des noms copiables rendent sans ambiguïté une demande ultérieure visant, par exemple, une seule version.

  2. Variantes indépendantes

    Les nouvelles versions gardent une identité et un état interactif distincts.

  3. Disposition persistante

    La disposition enregistrée restaure les positions, tandis que le code source courant reste la référence.

04 Exemple de brief

Essayez un brief ciblé

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

Examinez la source et la configuration

Nommez les variantes, les dimensions prévues et les différences à explorer.

Fichier source amont
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

Le lien ci-dessous ouvre les instructions d’origine. Vérifiez la configuration du dépôt avant utilisation ; ce n’est pas une commande d’installation.

Commencez par un livrable

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

Exemple de brief
Utilise create-canvas pour comparer trois expérimentations de cartes tarifaires dans notre projet existant. Conserve la carte d’origine et crée deux variantes nommées indépendamment avec les mêmes données d’offres et dimensions. Utilise des données de test sûres et conserve nos implémentations actuelles de composants de production. Ajoute des noms copiables, des poignées de déplacement dédiées et des commandes de déplacement, zoom et ajustement à l’écran. Préserve la saisie et la sélection dans les aperçus. Enregistre la disposition, pas le contenu des formulaires. Après réalisation, teste rechargement, déplacement et zoom ; signale les gestes sur appareil ou les comportements d’historique du navigateur que tu n’as pas pu vérifier.

Examinez le résultat

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

  • Les nouvelles variantes préservent les ID, noms et positions précédents.
  • Les changements de caméra et déplacements d’éléments n’effacent pas les saisies des aperçus.
  • Le stockage ne contient que la disposition et les entrées invalides déclenchent un repli sûr.

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 ses outils externes, ses identifiants et ses dépendances logicielles.

Télécharger OpenDesignLire 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
ibelick
Dépôt
ibelick/ui-skills
Fichier du skill
SKILL.md
Licence
MIT
Version examinée
2026-11-02 · 4907a526b079
Résumé éditorial de la source
Gardez vos variantes de design interactives dans un espace de comparaison nommé et réorganisable.

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

Le stockage du navigateur peut-il devenir la source du contenu ?

Non. Le registre définit les éléments et leur implémentation ; les positions enregistrées ne s’appliquent qu’aux ID actuels.

Une iframe séparée garantit-elle la sécurité ?

Non. La source exige des providers et données de test sûrs avant le montage ; la séparation des documents seule n’empêche pas les requêtes réelles.

La réinitialisation supprime-t-elle les expérimentations ?

Elle modifie la caméra tout en préservant les éléments, leurs positions, les thèmes et les brouillons.

OpenDesign

Gardez votre brief et votre travail de design au même endroit.

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 flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md