106.9K+Scarica
Vai alla guida all’uso
Create Canvasdi ibelick

Create Canvas Skill.

Raccogli alternative di design interattive in uno spazio di confronto con nomi e posizioni modificabili.

  • Esplorazione del design
  • Canvas
Scarica OpenDesignVedi la guida all'uso
Esame della fonte · create-canvasSKILL.md
Attività Raccogli alternative di design interattive in uno spazio di confronto con nomi e posizioni modificabili. Risultati Un registro definito nel sorgente di anteprime interattive con nome. Prima di iniziare Gli elementi presenti e l’implementazione delle anteprime restano nel sorgente; lo storage non può creare o nascondere contenuti.
Sintesi editoriale · fonte esaminata il 2026-11-02 · non è un esempio generato

01 Funzionalità

Raccogli alternative di design interattive in uno spazio di confronto con nomi e posizioni modificabili

Crea un canvas libero con anteprime nominate, alternative indipendenti, disposizione salvata e interazioni sicure che preservano l’input.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

Create Canvas crea uno spazio per esplorare più alternative di design interattive attraverso la conversazione. Ogni anteprima ha un ID stabile e un nome leggibile in un registro definito nel codice sorgente. Si può copiare il nome per indicare una versione precisa, spostare le anteprime con maniglie dedicate e navigare tramite panoramica o zoom.

Il contenuto resta nei file sorgente, mentre lo storage del browser ricorda la disposizione. Questa distinzione rende concrete le richieste successive: una nuova versione riceve identità e stato propri, mentre modificare una versione esistente ne conserva la posizione. Gli esperimenti restano locali finché non viene richiesto di portarli in produzione.

Risultati attesi

  • Un registro definito nel sorgente di anteprime interattive con nome.
  • Un canvas con maniglie di spostamento, controlli della camera e selezione globale del tema se supportata.
  • Posizioni di camera ed elementi salvate, con un rapporto sulle interazioni verificate e non testate.
Vedi il brief di esempio

Dal brief alla revisione

  1. 01
    Prepara un’anteprima interattiva sicura

    Esamina un canvas esistente prima di crearne un altro. Monta un’anteprima con dati sintetici, etichetta separata e maniglia di spostamento, usando il framework del progetto.

  2. 02
    Aggiungi alternative distinte

    Assegna a ogni nuova variante un ID stabile, un nome univoco e uno stato indipendente. Conserva alternative precedenti e posizioni misurate quando aggiungi contenuto.

  3. 03
    Preserva l’input durante la navigazione

    Separa i gesti del canvas da digitazione, selezione e scorrimento annidato. Mantieni i portali nativi e verifica che copia, spostamento o zoom non rimontino le anteprime.

  4. 04
    Salva la disposizione e verifica il comportamento

    Salva valori della camera entro limiti definiti, tema supportato e posizioni per ID del registro. Verifica ricaricamenti, dati di storage malformati e gesti pertinenti dei dispositivi prima di dichiararli funzionanti.

02 Quando usarlo

Quando usarla

Gli elementi presenti e l’implementazione delle anteprime restano nel sorgente; lo storage non può creare o nascondere contenuti.

Adatta a

  • Confronto di designAffianca più alternative interattive e fai riferimento a nomi esatti.
  • Esplorazione continuativaRiprendi uno spazio esistente senza perdere alternative precedenti o scelte di disposizione.

Limiti da verificare

  • Il sorgente governa il contenutoGli elementi presenti e l’implementazione delle anteprime restano nel sorgente; lo storage non può creare o nascondere contenuti.
  • Isolamento dalla produzioneGli esperimenti usano dati di prova sicuri e non cambiano il codice dei componenti di produzione.
  • Ambito limitato dell’editorDisegno, connettori, ridimensionamento e cronologia di annullamento sono esclusi salvo richiesta.

Cosa portare

  • Elenco degli esperimentiIndica alternative, dimensioni previste e differenze da esplorare.
  • Componenti sicuriFornisci le API pubbliche dei componenti e dati di prova che evitino dati personali e scritture reali.
  • Spazio esistenteIdentifica percorso, registro, tema e disposizione da preservare.

03 Decisioni importanti

Le decisioni importanti

  1. Riferimenti precisi

    I nomi copiabili rendono inequivocabile una richiesta successiva, come modificare una singola versione.

  2. Alternative indipendenti

    Le nuove versioni mantengono identità e stato interattivo separati.

  3. Disposizione persistente

    La disposizione salvata ripristina le posizioni, mentre il sorgente attuale resta autorevole.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Esamina la fonte e la configurazione

Indica alternative, dimensioni previste e differenze da esplorare.

File sorgente originale
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md

Il riferimento seguente apre le istruzioni originali. Verifica la configurazione del repository prima di usarle: non è un comando di installazione.

Inizia con un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio
Usa create-canvas per confrontare tre esperimenti di schede prezzi nel nostro progetto esistente. Mantieni la scheda originale e crea due alternative con nomi indipendenti, stessi dati dei piani e stesse dimensioni. Usa dati di prova sicuri e conserva le implementazioni attuali dei componenti di produzione. Aggiungi nomi copiabili, maniglie dedicate e controlli di panoramica, zoom e adattamento alla vista. Preserva digitazione e selezione nelle anteprime. Salva la disposizione, non i contenuti dei moduli. Dopo la realizzazione, testa ricaricamenti, spostamento e zoom e segnala gesti dei dispositivi o comportamenti della cronologia del browser che non hai potuto verificare.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

  • Le nuove alternative preservano ID, nomi e posizioni precedenti.
  • I cambiamenti della camera e gli spostamenti non cancellano l’input nelle anteprime.
  • Lo storage contiene solo la disposizione e gestisce in modo sicuro le voci non valide.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesignLeggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata e collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte
ibelick
Repository
ibelick/ui-skills
File della skill
SKILL.md
Licenza
MIT
Snapshot esaminato
2026-11-02 · 4907a526b079
Sintesi editoriale della fonte
Raccogli alternative di design interattive in uno spazio di confronto con nomi e posizioni modificabili.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Lo storage del browser può diventare la fonte dei contenuti?

No. Il registro definisce gli elementi e l’implementazione; le posizioni salvate si applicano solo agli ID attuali.

Un iframe separato garantisce la sicurezza?

No. La fonte richiede provider e dati di prova sicuri prima del montaggio: separare i documenti non impedisce da solo richieste reali.

Il ripristino elimina gli esperimenti?

Il ripristino cambia la camera preservando elementi, posizioni, temi e bozze.

OpenDesign

Tieni insieme il brief e il lavoro di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesignSfoglia le skill di design
File sorgente originale
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/create-canvas/SKILL.md