106.9K+Download
Zur Nutzungsanleitung springen
Create Canvasvon ibelick

Create Canvas Skill.

Vergleiche interaktive Designvarianten in einem Arbeitsbereich mit benennbaren, verschiebbaren Vorschauen.

  • Designexploration
  • Canvas
OpenDesign herunterladenNutzungsanleitung ansehen
Quellprüfung · create-canvasSKILL.md
Aufgabe Vergleiche interaktive Designvarianten in einem Arbeitsbereich mit benennbaren, verschiebbaren Vorschauen. Ergebnisse Eine im Quellcode definierte Registry benannter Live-Vorschauen. Vor dem Start Welche Elemente dazugehören und wie Vorschauen implementiert sind, bestimmt der Quellcode. Der Speicher kann keine Inhalte erzeugen oder ausblenden.
Redaktionelle Zusammenfassung · Quelle geprüft am 2026-11-02 · kein generiertes Beispiel

01 Funktionen

Vergleiche interaktive Designvarianten in einem Arbeitsbereich mit benennbaren, verschiebbaren Vorschauen

Erstelle eine frei anordenbare Arbeitsfläche mit benannten Live-Vorschauen, unabhängigen Varianten, gespeichertem Layout und Interaktionen, die Eingaben erhalten.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Create Canvas erstellt einen Arbeitsbereich, in dem du über den Dialog mehrere interaktive Designvarianten erkundest. Jede Vorschau erhält in einer im Quellcode definierten Registry eine stabile ID und einen lesbaren Namen. Nutzer können den Namen kopieren, um eine bestimmte Version zu referenzieren, Vorschauen an eigenen Griffen verschieben und durch Schwenken oder Zoomen navigieren.

Die Inhalte bleiben in Quelldateien, während der Browser-Speicher das Layout festhält. Diese Trennung macht Folgeaufträge eindeutig: Eine weitere Variante erhält eine eigene Identität und einen unabhängigen Zustand; Änderungen an einer bestehenden Variante erhalten deren Position. Experimente bleiben lokal, bis ihre Übernahme in die Produktion ausdrücklich angefordert wird.

Erwartete Ergebnisse

  • Eine im Quellcode definierte Registry benannter Live-Vorschauen.
  • Eine Arbeitsfläche mit Verschiebegriffen, Kamerasteuerung und unterstützter globaler Theme-Auswahl.
  • Gespeicherte Kamera- und Elementpositionen sowie einen Bericht über geprüfte und ungetestete Interaktionen.
Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Eine sichere Live-Vorschau einrichten

    Prüfe eine vorhandene Arbeitsfläche, bevor du eine weitere erstellst. Binde mit dem Framework des Projekts eine Vorschau mit synthetischen Daten, separater Beschriftung und eigenem Verschiebegriff ein.

  2. 02
    Eigenständige Varianten ergänzen

    Gib jeder neuen Variante eine stabile ID, einen eindeutigen Namen und einen unabhängigen Zustand. Erhalte beim Hinzufügen von Inhalten bisherige Varianten und gemessene Positionen.

  3. 03
    Eingaben beim Navigieren erhalten

    Trenne Canvas-Gesten von Texteingabe, Auswahl und verschachteltem Scrollen. Erhalte das native Verhalten von Portalen und prüfe, dass Kopieren, Verschieben oder Zoomen Vorschauen nicht neu einbindet.

  4. 04
    Layout speichern und Verhalten prüfen

    Speichere begrenzte Kamerawerte, unterstütztes Theme und Positionen anhand der Registry-ID. Prüfe Neuladen, fehlerhafte Speicherdaten und relevante Gerätegesten, bevor du sie als funktionsfähig meldest.

02 Einsatzbereiche

Wann einsetzen?

Welche Elemente dazugehören und wie Vorschauen implementiert sind, bestimmt der Quellcode. Der Speicher kann keine Inhalte erzeugen oder ausblenden.

Gut geeignet

  • DesignvergleichStelle mehrere interaktive Varianten nebeneinander und referenziere sie über ihre genauen Namen.
  • Fortlaufende ExplorationKehre in einen vorhandenen Arbeitsbereich zurück, ohne frühere Varianten oder Layoutentscheidungen zu verlieren.

Zu prüfende Grenzen

  • Inhalte liegen im QuellcodeWelche Elemente dazugehören und wie Vorschauen implementiert sind, bestimmt der Quellcode. Der Speicher kann keine Inhalte erzeugen oder ausblenden.
  • Von der Produktion isoliertExperimente verwenden sichere Testdaten und verändern keinen produktiven Komponentencode.
  • Begrenzter EditorumfangZeichnen, Verbindungslinien, Größenänderungen und eine Rückgängig-Historie entfallen, sofern sie nicht angefordert werden.

Diese Eingaben mitbringen

  • Liste der ExperimenteBenenne die Varianten, vorgesehenen Abmessungen und zu untersuchenden Unterschiede.
  • Sichere KomponentenStelle öffentliche Komponenten-APIs und Testdaten bereit, die personenbezogene Daten und echte Schreibzugriffe vermeiden.
  • Vorhandener ArbeitsbereichGib die aktuelle Route, Registry, das Theme und das zu erhaltende Layout an.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Eindeutige Referenzen

    Kopierbare Namen machen Folgeaufträge wie die Änderung einer bestimmten Version eindeutig.

  2. Unabhängige Varianten

    Neue Versionen behalten eigene Identitäten und Interaktionszustände.

  3. Dauerhafte Anordnung

    Das gespeicherte Layout stellt Positionen wieder her; der aktuelle Quellcode bleibt maßgeblich.

04 Beispielbriefing

Ein konkretes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Quelle und Einrichtung prüfen

Benenne die Varianten, vorgesehenen Abmessungen und zu untersuchenden Unterschiede.

Upstream-Quelldatei
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

Der folgende Verweis öffnet die Originalanleitung. Prüfe vor der Nutzung die Einrichtung des Repositorys; dies ist kein Installationsbefehl.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Rahmenbedingungen in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing
Vergleiche mit create-canvas drei Preiskarten-Experimente in unserem bestehenden Projekt. Behalte die ursprüngliche Karte bei und erstelle zwei unabhängig benannte Varianten mit denselben Tarifdaten und Abmessungen. Verwende sichere Testdaten und erhalte unsere aktuellen produktiven Komponentenimplementierungen. Ergänze kopierbare Namen, eigene Verschiebegriffe sowie Bedienelemente zum Schwenken, Zoomen und Einpassen. Erhalte Texteingaben und Auswahl innerhalb der Vorschauen. Speichere das Layout statt der Formularinhalte. Teste danach Neuladen, Verschieben und Zoomen und berichte über Gerätegesten oder das Verhalten des Browserverlaufs, die du nicht überprüfen konntest.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

  • Beim Hinzufügen neuer Varianten bleiben bisherige IDs, Namen und Positionen erhalten.
  • Kameraänderungen und das Verschieben von Elementen löschen keine Vorschau-Eingaben.
  • Der Speicher enthält nur das Layout; ungültige Einträge werden sicher abgefangen.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellinhaber
ibelick
Repository
ibelick/ui-skills
Skill-Datei
SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-11-02 · 4907a526b079
Redaktionelle Quellenzusammenfassung
Vergleiche interaktive Designvarianten in einem Arbeitsbereich mit benennbaren, verschiebbaren Vorschauen.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Kann der Browser-Speicher zur Inhaltsquelle werden?

Nein. Die Registry definiert die enthaltenen Elemente und ihre Implementierung; gespeicherte Positionen gelten nur für aktuelle IDs.

Garantiert ein separates iframe Sicherheit?

Nein. Die Quelle verlangt sichere Provider und Testdaten vor dem Einbinden. Eine Dokumenttrennung allein verhindert keine echten Anfragen.

Entfernt das Zurücksetzen die Experimente?

Das Zurücksetzen verändert die Kamera und erhält die enthaltenen Elemente, Positionen, Themes und Entwürfe.

OpenDesign

Briefing und Designarbeit an einem Ort.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md