Skill di design per Claude Code, Codex e il tuo agente.

Metti sotto stress l'interfaccia esistente con dati estremi realistici e un selettore di confronto solo per lo sviluppo; riferisci i problemi prima di correggerli.

Codice sorgente del componente, dati demo esistenti e limiti dei campi; un'app in esecuzione e un browser per la verifica visiva.

• Stress test dell'interfaccia
• Fixture per casi limite
• Rapporto di revisione

Diagnostica i fotogrammi persi nelle animazioni web: costo di rendering, contesa sul main thread, aggiornamenti React a ogni fotogramma e variabili CSS ereditate.

Il codice dell'animazione e un'interazione riproducibile; profilazione del browser e un dispositivo reale di destinazione per verificare le prestazioni.

• Animazione web
• Prestazioni dei fotogrammi
• Revisione diagnostica

Ricrea uno screenshot fornito nell'app esistente, poi renderizza al viewport di riferimento e correggi le differenze visibili.

Fornisci un'immagine di riferimento leggibile, il suo viewport di destinazione, l'accesso al progetto e gli asset disponibili. Per verificare la corrispondenza visiva serve il rendering nel browser. Non sono richiesti un account UIZZE né una connessione MCP.

• Da screenshot a codice
• Corrispondenza al riferimento
• Implementazione UI

Instrada le richieste video verso il workflow giusto, riprendi i progetti esistenti e coordina composizione HTML, contenuti multimediali, anteprima e rendering.

La CLI richiede Node.js 22+ e FFmpeg. Si parte dalle skill di base; i workflow di creazione vengono installati su richiesta. Servizi multimediali e rendering cloud possono aggiungere altri requisiti.

• Da HTML a video
• Instradamento del workflow
• Produzione video

Spiega idee tecniche con meccanismi isometrici in SVG curati e interazione guidata dal modello.

Il kit richiede Node.js 20.10+ e Chrome o Chromium per i controlli. La CLI delle skill ha un proprio requisito Node; il README indica 22.20+ per la CLI 1.7.1.

• SVG isometrico
• Spiegazioni tecniche
• Figure interattive

Arte generativa con p5.js: particelle con seed, campi di flusso e parametri regolabili.

Richiede: p5.js

• Images & Generative Art
• Generative art
• In OpenDesign

Applica i colori e la tipografia ufficiali del brand Anthropic a qualsiasi artefatto. Solo brand Anthropic.

• Brand & Design Systems
• In OpenDesign

Poster originali e pezzi visivi statici forniti come PNG o PDF.

• Images & Generative Art
• PNG / PDF
• In OpenDesign

Definisce una direzione visiva distintiva, tipografia e layout per UI web nuove o esistenti.

• Web & UI
• Codice UI
• In OpenDesign

GIF animate che rispettano i limiti di dimensione e risoluzione di Slack.

• Motion & Video
• GIF
• In OpenDesign

Applica o genera temi colore e tipografia per pagine, slide e documenti.

• Brand & Design Systems
• In OpenDesign

Artefatti HTML interattivi multi-componente con React, Tailwind e shadcn/ui.

• Web & UI
• HTML
• In OpenDesign

Consulenza di product design che propone un design system completo: estetica, tipografia, colore, layout, motion.

• Brand & Design Systems
• Design system
• In OpenDesign

Produce HTML/CSS di qualità production a partire da una direzione di design concordata.

• Web & UI
• HTML

QA con occhio da designer di una pagina costruita: incoerenze, spaziature, gerarchia, pattern sciatti; poi li corregge.

• Design Review & Accessibility
• Report di revisione
• In OpenDesign

Genera diverse varianti di design in parallelo e apre una tavola di confronto per il feedback.

• Web & UI
• Codice UI

Trasforma una descrizione o sorgente Mermaid in un file Excalidraw modificabile più SVG e PNG renderizzati.

Richiede: Excalidraw

• Diagrams & Data Visualization
• Diagram

Audit del design visivo di app iOS su hardware reale.

• Mobile Apps
• Report di revisione

Revisiona un piano di design per completezza e rischio di esperienza prima dell'implementazione.

• Design Review & Accessibility
• Report di revisione
• In OpenDesign

Banner per social media, annunci, hero di siti web e stampa.

• Images & Generative Art
• Image

Tono di voce del brand, identità visiva, framework di messaggistica e coerenza del brand.

• Brand & Design Systems

Identità di brand, design token, stile UI, generazione logo e programmi di identità aziendale.

Richiede: Servizio di generazione immagini (Gemini, Atlas Cloud o MuAPI)

• Brand & Design Systems

Token di design a tre livelli, specifiche dei componenti e generazione di presentazioni.

• Brand & Design Systems
• Design system

Presentazioni HTML strategiche con Chart.js, design token e layout responsive.

Richiede: Chart.js

• Presentations
• Slide HTML
• In OpenDesign

Styling UI accessibile con shadcn/ui, Tailwind CSS e grafica basata su canvas.

Richiede: shadcn/ui, Tailwind CSS

• Web & UI
• Codice UI

Intelligenza di design UI/UX per web, mobile e desktop: layout, colore, tipografia e regole UX.

• Web & UI
• Codice UI
• In OpenDesign

Aggiunge, cerca, corregge, stilizza e compone componenti shadcn in un progetto.

Richiede: shadcn/ui

• Web & UI
• Codice UI

Costruisce interfacce utente di qualità produttiva, accessibili e responsive.

• Web & UI
• Codice UI

Board di linee guida brand premium, sistemi logo e presentazioni di identità tramite generazione di immagini.

Richiede: Servizio di generazione immagini

• Brand & Design Systems
• Image
• In OpenDesign

Design frontend rigoroso per landing page, portfolio e redesign.

• Web & UI
• Codice UI
• In OpenDesign

Layout editoriali, varietà di layout e animazioni GSAP in un'unica skill frontend.

Richiede: GSAP

• Web & UI
• Codice UI

Insegna i dettagli delle agenzie di alto livello: tipografia, spaziature, ombre, card e animazioni.

• Web & UI

Genera e analizza prima un'immagine di design, poi implementa la pagina corrispondente.

Richiede: Servizio di generazione immagini

• Web & UI
• Codice UI

Concept e flussi di schermate mobile ad alta fedeltà tramite generazione di immagini.

Richiede: Servizio di generazione immagini

• Mobile Apps
• Image
• In OpenDesign

Riferimenti di design per siti web sezione per sezione tramite generazione di immagini.

Richiede: Servizio di generazione immagini

• Web & UI
• Image
• In OpenDesign

Interfacce brutaliste che fondono tipografia svizzera con estetica terminale.

• Web & UI
• Codice UI

Interfacce pulite, monocromatiche, in stile editoriale.

• Web & UI
• Codice UI

Revisiona un sito web o un'app esistente e lo aggiorna a una qualità visiva premium.

• Design Review & Accessibility
• Codice UI

Scrive un DESIGN.md per Google Stitch con enfasi sulla distintività visiva.

Richiede: Google Stitch

• Brand & Design Systems
• DESIGN.md

Una skill per progettare, criticare, verificare, rifinire, animare e perfezionare interfacce.

• Design Review & Accessibility
• Codice UI
• In OpenDesign

Trasforma testo, note o un articolo in un video esplicativo senza volti con immagini di scena inventate.

Richiede: HyperFrames

• Motion & Video
• Video

Importa asset Figma, token di brand e storyboard in una composizione HyperFrames.

Richiede: HyperFrames, Figma

• Motion & Video
• Video

Crea o modifica un video HyperFrames multi-scena personalizzato quando nessun template è adatto.

Richiede: HyperFrames

• Motion & Video
• Video

Regole di animazione, blueprint delle scene, transizioni e adattatori runtime per HyperFrames.

Richiede: HyperFrames

• Motion & Video
• Video

Direzione creativa per video HyperFrames: palette, tipografia, composizione, voice-over, ritmo.

Richiede: HyperFrames

• Motion & Video
• Video

Punch-in, zoom, reframe, movimenti Ken Burns e keyframe 2D/3D per HyperFrames.

Richiede: HyperFrames

• Motion & Video
• Video

Motion graphics brevi orientate al design: tipografia cinetica, contatori statistici, logo sting, lower third.

Richiede: HyperFrames

• Motion & Video
• Video

Trasforma un URL di prodotto, script o brief in un video di lancio o promo prodotto.

Richiede: HyperFrames

• Motion & Video
• Video

Presentazioni interattive HyperFrames con frammenti, ramificazioni e modalità relatore.

Richiede: HyperFrames

• Presentations
• Slide HTML

Presentazioni per sviluppatori con Markdown, componenti Vue, evidenziazione del codice e animazione.

Needs: Slidev

• Presentations
• Slide HTML

Interfacce conformi a WCAG 2.2 con accessibilità mobile e supporto per tecnologie assistive.

• Design Review & Accessibility
• Codice UI

Intervista sull'identità di brand, poi genera e itera una landing page tramite Stitch.

Richiede: Google Stitch

• Web & UI
• Codice UI

Sistemi di design scalabili: token, infrastruttura di temi, architettura dei componenti.

• Brand & Design Systems
• Design system

Microinterazioni, motion, transizioni e pattern di feedback utente.

• Motion & Video
• Codice UI

Dashboard KPI: selezione delle metriche, scelta dei grafici, layout e pattern in tempo reale.

• Diagrams & Data Visualization
• Dashboard

UI Android nativa con Material Design 3 e Jetpack Compose.

• Mobile Apps
• Codice UI

UI iOS nativa secondo le linee guida Apple Human Interface Guidelines con SwiftUI.

• Mobile Apps
• Codice UI

Valida e ripara deck PPTX modificabili per geometria, accessibilità e integrità del pacchetto.

• Presentations
• PPTX

Analizza un PPTX di riferimento per tema, tipografia, ritmo di layout e diagnostica.

• Presentations
• Report di revisione

Crea specifiche JSON con coordinate esplicite per presentazioni PPTX modificabili.

• Presentations
• PPTX

Seleziona e posiziona icone, immagini, SVG e infografiche approvate in una presentazione PPTX.

• Presentations
• PPTX

Stili React Native, navigazione e animazioni Reanimated.

Richiede: React Native

• Mobile Apps
• Codice UI

Layout responsive con container query, tipografia fluida, CSS Grid e breakpoint mobile-first.

• Web & UI
• Codice UI

Testa applicazioni web con i lettori di schermo VoiceOver, NVDA e JAWS.

• Design Review & Accessibility
• Report di revisione

Design system con Tailwind CSS v4: token, librerie di componenti, pattern responsive.

Richiede: Tailwind CSS

• Brand & Design Systems
• Design system

Tipografia, teoria del colore, sistemi di spaziatura e iconografia per una grafica coerente.

• Brand & Design Systems

Audit WCAG 2.2 con test automatizzati, verifiche manuali e linee guida per la correzione.

• Design Review & Accessibility
• Report di revisione

Pattern di componenti React, Vue e Svelte riutilizzabili e strategie di composizione.

• Web & UI
• Codice UI

Crea e modifica file di diagrammi draw.io (.drawio, .drawio.svg, .drawio.png).

Richiede: draw.io

• Diagrams & Data Visualization
• Diagram

Genera diagrammi e mappe mentali Excalidraw da linguaggio naturale.

Richiede: Excalidraw

• Diagrams & Data Visualization
• Diagram

Parallasse, sezioni fisse, scorrimento orizzontale e animazioni di scorrimento del testo.

Richiede: GSAP

• Motion & Video
• Codice UI

Design professionale UI/UX, componenti e design system in Penpot tramite strumenti MCP.

Richiede: Penpot MCP

• Web & UI
• File di design

Design di report Power BI: selezione dei grafici, layout, leggibilità, accessibilità.

Richiede: Power BI

• Diagrams & Data Visualization
• Dashboard

Ispeziona visivamente un sito web in esecuzione e individua e corregge problemi di layout.

• Design Review & Accessibility
• Report di revisione

Costruisce un'animazione da zero, decidendo in sequenza scopo, strumento, proprietà, curva e durata.

• Motion & Video
• Codice UI

Gesti, animazioni a molla e transizioni per React Native ed Expo.

Richiede: React Native / Expo

• Mobile Apps
• Codice UI

Glossario inverso che trasforma una descrizione vaga di movimento nel suo termine esatto.

• Motion & Video

I gesti di Apple, il movimento fisico e la gerarchia spaziale tradotti per il web.

• Web & UI
• Codice UI

La filosofia di Emil Kowalski sulla rifinitura UI, il design dei componenti e le decisioni di animazione.

• Web & UI
• In OpenDesign

Individua i punti di una UI che dovrebbero essere animati, con suggerimenti sui parametri, ed esclude il resto.

• Motion & Video
• Report di revisione

Controlla il codice di animazione esistente e produce piani di implementazione prioritari e autonomi.

• Design Review & Accessibility
• Report di revisione

Costruisce diverse versioni effettivamente differenti di un elemento UI dietro un selettore visuale live.

• Web & UI
• Codice UI

Esamina il codice delle animazioni per timing, interazione e rifinitura secondo standard qualitativi elevati.

• Design Review & Accessibility
• Report di revisione
• In OpenDesign

Transizioni di pagina fluide con l'API View Transition di React.

Richiede: React

• Motion & Video
• Codice UI

Slide HTML ricche di animazioni da zero o convertite da file PowerPoint (PPT).

• Presentations
• Slide HTML
• In OpenDesign

Renderizza specifiche JSON in interfacce terminale interattive con Ink.

Richiede: Ink

• Web & UI
• UI terminale

Genera o modifica immagini raster: illustrazioni, foto, texture, sprite, mockup.

Richiede: Servizio di generazione immagini

• Images & Generative Art
• Image
• In OpenDesign

Deck PPT HTML orizzontali single-file in stile magazine o Swiss, con speaker view e sincronizzazione.

• Presentations
• Slide HTML
• In OpenDesign

Definisce o applica le linee guida del brand per qualsiasi prodotto: colore, tipografia, logo e tono di voce.

• Brand & Design Systems

Acquisisce l'identità del brand una volta attraverso un wizard di 10 domande per documenti e deck successivi.

• Brand & Design Systems
• Design system

Converte una presentazione Markdown in slide brandizzate.

• Presentations
• Slide HTML

Design token, documentazione dei componenti, calcoli responsive e handoff per sviluppatori.

• Brand & Design Systems
• Design system

Personas data-driven, journey map, framework di usability testing e sintesi della ricerca.

• UX e ricerca
• Documento di ricerca

Prototipi HTML ad alta fedeltà, slide, animazioni e visualizzazioni; parte da tre bozze.

• Web & UI
• HTML

Audit WCAG 2.1 AA di un design o pagina: contrasto, tastiera, aree touch.

• Design Review & Accessibility
• Report di revisione

Feedback di design strutturato su usabilità, gerarchia e coerenza.

• Design Review & Accessibility
• Report di revisione

Specifiche di handoff per sviluppatori da un design: layout, token, stati dei componenti, breakpoint.

• Brand & Design Systems
• Specifica di consegna

Verifica, documenta o estende un design system esistente.

• Brand & Design Systems
• Design system

Sintetizza interviste, sondaggi e note di test in temi e raccomandazioni.

• UX e ricerca
• Documento di ricerca

Pianifica, conduce e sintetizza interviste utente, sondaggi e test di usabilità.

• UX e ricerca
• Documento di ricerca

Scrive o revisiona UX copy: microcopy, messaggi di errore, stati vuoti, CTA.

• UX e ricerca

API core GSAP: to/from/fromTo, easing, stagger, matchMedia, reduced motion.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

GSAP in Vue, Svelte e altri framework non-React: lifecycle, scoping, cleanup.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

Performance GSAP: transforms, evitare layout thrash, will-change, batching.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

Plugin GSAP: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG e physics.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

GSAP in React e Next.js con l'hook useGSAP, refs, context e cleanup.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

Animazioni collegate allo scroll con ScrollTrigger: pinning, scrub, trigger, parallasse.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

Timeline GSAP: parametro position, nesting e controllo della riproduzione.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

Helper gsap.utils: clamp, mapRange, interpolate, snap, wrap, pipe.

Richiede: GSAP

• Motion & Video
• Codice UI
• In OpenDesign

Palette di colori e abbinamenti di font pronti per presentazioni, per PPT e task di design.

• Brand & Design Systems

Un sistema visivo coerente per slide PPT basato su regole di raggio e spaziatura.

• Presentations

Trasforma foto di persone, animali, oggetti o loghi in quattro sticker GIF con didascalia.

• Motion & Video
• GIF
• In OpenDesign

Genera, modifica e legge presentazioni PowerPoint (PPTX) modificabili.

• Presentations
• PPTX
• In OpenDesign

Shader GLSL: ray marching, SDF, fluidi, particelle, visual procedurali.

Richiede: GLSL / WebGL

• Images & Generative Art
• Generative art
• In OpenDesign

Implementa singole slide PowerPoint con PptxGenJS.

Richiede: PptxGenJS

• Presentations
• PPTX

Ripulisce rapidamente il codice UI correggendo spaziatura, gerarchia, tipografia e piccoli problemi di layout.

• Design Review & Accessibility
• Codice UI

Crea o aggiorna un DESIGN.md da un repository di prodotto esistente o da un sito web pubblico.

• Brand & Design Systems
• DESIGN.md

Verifica e corregge errori di ARIA, tastiera, focus, contrasto e form.

• Design Review & Accessibility
• Report di revisione

Individua e corregge animazioni CSS/JS e movimenti collegati allo scroll poco fluidi.

• Motion & Video
• Report di revisione

Verifica una superficie di prodotto rispetto alle proprie evidenze di design e scrive piani di implementazione.

• Design Review & Accessibility
• Report di revisione

Analizza i progetti Stitch e scrive un DESIGN.md semantico.

Richiede: Google Stitch

• Brand & Design Systems
• DESIGN.md
• In OpenDesign

Riscrive idee UI vaghe in prompt rifiniti e ottimizzati per Stitch.

Richiede: Google Stitch

• Web & UI
• In OpenDesign

Converte i design Stitch in dashboard React + Vite con TanStack Query.

Richiede: Google Stitch

• Web & UI
• Codice UI

Video tutorial dai progetti Stitch con transizioni e zoom Remotion.

Richiede: Google Stitch, Remotion

• Motion & Video
• Video
• In OpenDesign

Integrazione e personalizzazione dei componenti shadcn/ui: scoperta, installazione, best practice.

Richiede: shadcn/ui

• Web & UI
• Codice UI
• In OpenDesign

Converte il codice frontend in un design Stitch tramite HTML statico ed estrazione del design system.

Richiede: Google Stitch

• Web & UI
• File di design

Estrae un DESIGN.md completo dal codice sorgente frontend in qualsiasi framework.

• Brand & Design Systems
• DESIGN.md

Estrae snapshot HTML statici autonomi con CSS e immagini inline.

• Web & UI
• HTML

Genera, modifica e varia schermate in Stitch da testo o immagini di riferimento.

Richiede: Google Stitch

• Web & UI
• File di design

Crea, aggiorna e applica design system in Stitch tramite strumenti MCP.

Richiede: Google Stitch

• Brand & Design Systems
• Design system

Converte o sincronizza i design Stitch in componenti React + Vite modulari.

Richiede: Google Stitch

• Web & UI
• Codice UI

Converte o sincronizza i design HTML di Stitch in componenti React Native.

Richiede: Google Stitch, React Native

• Mobile Apps
• Codice UI

Design di interfacce curato per dashboard, pannelli admin, strumenti SaaS e pagine di impostazioni.

• Web & UI
• Codice UI

Principi di design engineering per la definizione di hover, ombre, bordi, icone, tipografia e microinterazioni.

• Web & UI

Verifica e migliora l'accessibilità web seguendo WCAG 2.2.

• Design Review & Accessibility
• Report di revisione

Applica i principi del motion design: timing, easing, coreografia e fondamenti dell'animazione.

• Motion & Video

Assistente per la ricerca utente end-to-end: qualitativa e quantitativa, guide e piani.

• UX e ricerca
• Documento di ricerca

Implementa token, componenti e layout adattivi di Material Design 3.

• Mobile Apps
• Codice UI

Movimento di interazione intenzionale, o revisione di animazioni esistenti, secondo Kowalski, Krehel e Tompkins.

• Motion & Video

Nomenclatura dei colori, teoria, spazi, palette, scale, gradienti, conversioni e contrasto.

• Brand & Design Systems
• In OpenDesign

Visualizza dati come grafici a barre, linee, torta, radar, Sankey, mappe mentali e diagrammi di flusso tramite l'API AntV.

Richiede: AntV API

• Diagrams & Data Visualization
• Immagine grafico

Crea infografiche da un testo fornito.

Richiede: AntV API

• Diagrams & Data Visualization
• Image

Microcopy orientato all'utente e accessibile: pulsanti, etichette, errori, form, onboarding.

• UX e ricerca

Mantieni ogni problema di accessibilità collegato all'elemento interessato, alla correzione proposta e al risultato della verifica.

Python per gli strumenti inclusi, accesso al codice sorgente e un browser o una configurazione con tecnologie assistive per la validazione nel contesto.

• Accessibilità
• Design Review
• Frontend

Pianifica una presentazione accademica attorno ad argomentazione, evidenze e titoli delle slide; uno strumento separato crea il file PPTX.

Richiede una Skill PPTX separata. La scheda elenca markitdown, PptxGenJS, LibreOffice e Poppler come dipendenze legate all'implementazione.

• Presentazioni
• Ricerca accademica
• PowerPoint

Scrivi script ExtendScript per creare e modificare documenti, artwork ed esportazioni di Illustrator.

Adobe Illustrator CC o successivo; gli script generati vengono eseguiti nel suo ambiente ExtendScript.

• Design vettoriale
• Automazione
• Illustrator

Raggruppa le osservazioni di ricerca in temi mantenendo il collegamento con le evidenze originali.

Usa un agente in grado di leggere le trascrizioni o le note fornite. Indica gli ID dei partecipanti e la domanda di design; la skill sintetizza evidenze esistenti e non raccoglie interviste.

• UX Research
• Sintesi

Dai a una transizione uno scopo chiaro e un profilo di movimento che sostenga il cambio di stato dell'interfaccia.

Fornisci gli stati prima e dopo dell'interfaccia, l'innesco e i dispositivi di destinazione. Usa un'anteprima eseguibile per verificare i tempi, l'interruzione e il comportamento con movimento ridotto.

• Movimento nell'interfaccia
• Indicazioni di design

Parti dagli oggetti e dai vincoli reali del prodotto prima di scegliere un trattamento visivo.

Un agente in grado di leggere i file del progetto; supporto al rendering per i controlli visivi. UIZZE MCP a pagamento è facoltativo.

• Progettazione UI
• Revisione del design

Crea grafici con AntV G2 v5 usando mark, encoding, scale e interazioni.

Richiede @antv/g2 v5 o il bundle per browser documentato. Il recupero facoltativo dei riferimenti usa il servizio di contesto esterno AntV.

• Data Visualization
• Grafici
• JavaScript

Visualizza dati di rete con AntV G6 v5, inclusi layout a grafo ed esplorazione interattiva.

Un'applicazione che usa @antv/g6 v5, un contenitore del grafo nel browser e l'accesso alla rete se serve il servizio di recupero dei riferimenti documentato. Verifica le API rispetto alla versione installata.

• Visualizzazione di grafi
• Reti
• AntV

Crea un editor di diagrammi nodo-arco con AntV X6, inclusi connessioni, comportamento di modifica e plugin richiesti.

Usa l'API @antv/x6 v3 come documentata, con una canvas nel browser e i plugin richiesti. Il recupero di riferimenti aggiuntivi richiede l'accesso alla rete. Verifica gli esempi rispetto alla versione installata.

• Editor di diagrammi
• Interfacce a nodi
• AntV

Crea un video esplicativo originale, basato su fonti, con narrazione e un linguaggio visivo volutamente coerente.

Richiede il progetto Remotion/Node fornito, script Python di supporto, capacità di rendering e un percorso TTS adatto. Le impostazioni predefinite documentate per cinese e inglese usano motori vocali diversi; la costruzione multi-agente fa parte del flusso di lavoro descritto.

• Motion graphics
• Video
• Remotion

Componi un set coordinato di immagini per la scheda dell'app store a partire da screenshot, didascalie e asset visivi.

Richiede l'editor Next.js incluso nel pacchetto, un ambiente Node/package-manager supportato e un browser. L'esportazione PNG usa html-to-image; acquisizioni di origine, font e altri asset richiedono i diritti d'uso appropriati.

• Marketing delle app
• Screenshot
• Localizzazione

Rivedi le interfacce delle piattaforme Apple rispetto alle linee guida di design e accessibilità specifiche per piattaforma.

Python 3 per il checker, che usa solo la libreria standard; le Human Interface Guidelines (HIG) di Apple aggiornate; e l'accesso a un dispositivo o a un simulatore per verificare i comportamenti.

• UI nativa
• Accessibilità
• Revisione del design

Pianifica e genera illustrazioni che spiegano le idee chiave nei punti pertinenti di un articolo.

Servono un backend di generazione raster disponibile e i file di riferimento e configurazione della Skill; l'accesso al backend e il relativo costo sono separati.

• Illustrazione editoriale
• Design dei contenuti

Pianifica cosa insegna ogni vignetta prima di generare le pagine del fumetto.

Un backend di immagini disponibile; Bun o un runtime Bun basato su npx per lo script di unione PDF fornito.

• Fumetti
• Design educativo
• Storytelling

Genera la copertina di un articolo attorno a un'idea centrale, con una composizione e uno stile visivo definiti.

Un backend per immagini raster disponibile e i riferimenti di configurazione e direzione artistica della Skill.

• Design editoriale
• Immagini di copertina

Usa un flusso di design basato su file per prototipi, concept di presentazioni e sistemi visivi riutilizzabili.

Un agente in grado di lavorare con i file e la metodologia, le guide integrate, i documenti di riferimento e gli script del repository. I percorsi di esportazione e importazione hanno prerequisiti propri.

• Prototipazione
• Design system
• Presentazioni

Mantieni relazioni, etichette e percorsi dei connettori espliciti in un file vettoriale ispezionabile.

Un ambiente di testo/codice per SVG; Bun o Bun tramite npx per lo script di conversione PNG fornito.

• Diagrammi
• SVG
• Progettazione dell'informazione

Esegui job di generazione e modifica di immagini tramite provider supportati, inclusi i flussi di lavoro batch.

Bun o un runtime Bun basato su npx, adattatori dei provider completi e credenziali o login per il percorso supportato scelto.

• Generazione di immagini
• Flussi di lavoro batch
• Asset visivi

Trasforma il contenuto in un'infografica con un layout di confronto, gerarchia, processo o panoramica adatto al materiale.

Un backend per immagini raster disponibile, più i riferimenti per layout, stile e configurazione.

• Infografiche
• Design dell'informazione

Genera slide illustrate e assembla una presentazione basata su immagini da condividere; i singoli oggetti delle slide non sono modificabili.

Un backend di generazione raster e Bun, oppure Bun tramite npx, per gli script di assemblaggio PPTX/PDF.

• Presentazioni
• Design editoriale

Crea una serie di card immagine per Xiaohongshu visivamente coerente, con un'idea principale per card.

Un backend raster disponibile con un adeguato supporto per i riferimenti, più i riferimenti di configurazione e di layout delle card.

• Grafiche social
• Content design
• Card immagine

Trasforma il materiale di partenza in un articolo HTML leggibile, con tipografia, layout e illustrazioni editoriali.

La build documentata usa Node/npm, Vite, React, TypeScript e Reacticle. L'estrazione dei documenti e l'output PDF facoltativo possono richiedere strumenti aggiuntivi; le immagini generate richiedono un backend disponibile separatamente.

• Design editoriale
• HTML
• Longform

Analizza i raggruppamenti di card dei partecipanti per proporre categorie di navigazione e individuare gli elementi ambigui.

Fornisci i risultati completi del card sorting, incluse le collocazioni e le etichette di ciascun partecipante e il metodo dello studio. La skill analizza le evidenze fornite; il reclutamento e la raccolta dei dati sono separati.

• UX Research
• Sintesi

Pianifica un test del primo clic per verificare se le persone riescono a capire da dove iniziare un'attività.

Fornisci la schermata o il prototipo, l'obiettivo dell'utente e i criteri di reclutamento. La skill crea un piano di test; condurre le sessioni e raccogliere i clic richiede un setup di studio separato.

• UX
• Indicazioni di design

Trasforma il materiale di partenza in slide illustrate e assembla un PPTX con contenuti basati su immagini, anziché modificabili singolarmente.

Python 3, un backend di generazione di immagini disponibile e gli script di assemblaggio e registrazione dello stato del repository. I documenti di workflow richiamati sono necessari per l'esecuzione effettiva.

• Presentazioni
• Generazione di immagini

Trasforma un colore di brand in un insieme utilizzabile di ruoli dell'interfaccia e di combinazioni tra primo piano e sfondo.

Fornisci i colori del brand, i ruoli dell'interfaccia e gli obiettivi di accessibilità. Usa gli stati reali dei componenti e uno strumento di verifica del contrasto per valutare le combinazioni di colore proposte.

• Design del colore
• Guida al design

Rendi un componente implementabile spiegandone il comportamento con la stessa cura dell'aspetto.

Fornisci lo scopo del componente, le varianti visive e la piattaforma di destinazione. Il risultato è una specifica per l'implementazione e i test, non un componente implementato.

• Design system
• Specifiche

Progetta ciò che il sistema dice, ciò che si aspetta in risposta e come si riprende quando le due cose non coincidono.

Fornisci le attività supportate, i vincoli del canale e i requisiti di conferma. I flussi vocali richiedono anche test su dispositivi e sul riconoscimento vocale; un dialogo scritto da solo non può stabilire la qualità del riconoscimento.

• UX
• Indicazioni di design

Traduci la gerarchia dell'interfaccia in superfici scure invece di invertirne i colori.

Parti da una palette esistente in modalità chiara, da esempi di componenti e da asset multimediali. Usa un'interfaccia renderizzata per verificare il contrasto in modalità scura, il cambio di tema e il trattamento delle immagini.

• Design del colore
• Guida al design

Genera layout di slide alternativi da un'unica fonte di contenuto, poi usa l'editor locale per visualizzarli in anteprima ed esportarli.

Richiede Node.js 20+, npm e il generatore incluso nel pacchetto della skill. Usa il suo servizio di anteprima locale per le funzioni di modifica ed esportazione: un comune server statico non fornisce quelle API.

• Presentazioni
• Slide HTML
• PPTX

Scegli il grafico che rende comprensibile il confronto, non quello che sembra più elaborato.

Fornisci i dati reali, le definizioni dei campi, la domanda del lettore e i vincoli di visualizzazione. La skill guida la progettazione del grafico; la validazione dei dati e l'implementazione del grafico restano attività separate.

• Data Visualization
• Linee guida di design

Dai alle decisioni visive nomi e relazioni che i componenti possano riutilizzare.

Fornisci i valori visivi esistenti, esempi di componenti e vincoli di denominazione. La skill definisce i nomi dei token e le loro relazioni; gli strumenti di esportazione e l'integrazione con i framework richiedono una configurazione separata.

• Design system
• Specifiche

Cattura le esperienze che si sviluppano tra una sessione e l'altra, invece di cercare di ricostruirle in un'unica intervista.

Fornisci l'obiettivo della ricerca, i criteri per i partecipanti, l'arco temporale e gli strumenti di registrazione realizzabili. Il risultato è un piano di studio; reclutamento, check-in e raccolta dei dati dei partecipanti restano da svolgere.

• UX Research
• Pianificazione dello studio

Stabilisci prima lo screenshot desiderato, poi usalo come obiettivo per l'implementazione.

Serve un'immagine di riferimento, oppure l'accesso alla generazione di immagini se non ne viene fornita una. I requisiti dettagliati degli strumenti dipendono dal workflow di riferimento selezionato e non sono stati stabiliti dalla sola voce principale.

• Iterazione visiva
• Game design
• Prototipazione

Condividi la prospettiva di un utente mantenendo distinte le prove dirette dall'interpretazione.

Un agente in grado di leggere le tue note di ricerca, un utente o segmento definito e la decisione di design che la mappa deve orientare.

• UX Research
• Sintesi

Fai in modo che gli errori spieghino cosa è successo e offrano alle persone una via d'uscita senza perdere il loro lavoro.

Un agente in grado di leggere i flussi interessati, i casi di errore noti e le azioni di recupero che il tuo prodotto supporta davvero.

• UX
• Linee guida di design

Mappa i componenti Figma pubblicati ai componenti di codice corrispondenti con Code Connect.

Figma MCP connesso, accesso ai componenti pubblicati e al codebase, oltre a diritto Code Connect valido e permessi di modifica.

• Figma
• Design system
• Handoff agli sviluppatori

Documenta i percorsi del repository, i componenti e le convenzioni che un agente deve usare per implementare i design di Figma.

Connessione a Figma MCP e accesso al codebase di destinazione; il formato delle regole di destinazione dipende dall'host di coding.

• Figma
• Design system
• Regole per agenti

Crea una schermata Figma modificabile che resta collegata al suo design system.

Figma MCP connesso, accesso al file di destinazione, un design system pubblicato e la Skill complementare figma-use per le operazioni sul canvas.

• Figma
• UI Design
• Design system

Costruisci una libreria Figma riutilizzabile, partendo dai design token e aggiungendo poi i componenti.

Figma MCP con accesso a file modificabili, accesso al repository e la Skill complementare figma-use più i riferimenti di supporto.

• Figma
• Design system
• Librerie di componenti

Implementa un design Figma usando i componenti e le convenzioni del repository di destinazione, poi confronta il risultato con il design.

Figma MCP connesso, accesso al design selezionato e al repository di destinazione, più un'anteprima eseguibile per la validazione visiva.

• Figma
• Frontend Design
• Handoff per sviluppatori

Specifica il percorso dal primo campo all'invio andato a buon fine, comprese le correzioni e i ritorni successivi.

Un agente in grado di leggere il brief del modulo, i campi obbligatori e le regole di validazione, e le eventuali schermate del modulo esistenti.

• UX
• Linee guida di design

Trasforma un compito di modellazione quotato in oggetti FreeCAD che restano ispezionabili e modificabili.

FreeCAD con il suo Python incluso; il lavoro sulla GUI usa inoltre PySide incluso e il lavoro sullo scenegraph usa Pivy.

• Design 3D
• CAD
• Python

Genera e salva asset immagine tramite un provider supportato, usando le credenziali configurate del progetto.

Servono una chiave API di un provider supportato e l'accesso alla rete; la disponibilità dei modelli e i costi d'uso vanno verificati separatamente.

• Generazione di immagini
• Asset visivi

Progetta ciò che accade prima, durante e dopo un gesto, non solo l'azione finale dello swipe.

Un agente in grado di leggere il brief di interazione, le piattaforme di destinazione e le azioni disponibili tramite pulsanti o menu.

• UX
• Linee guida di design

Prepara prompt per immagini ed esegui generazione o modifica con uno strumento immagini nativo disponibile o con il flusso API locale configurato.

La modalità API locale richiede l'abilitazione esplicita di Garden, script Node e credenziali configurate. La modalità nativa dipende dallo strumento immagini dell'host. Accesso ai modelli, prezzi e parametri supportati vanno verificati in quell'ambiente.

• Generazione di immagini
• Progettazione dei prompt
• Modifica delle immagini

Rivedi l'usabilità dell'interfaccia e documenta le evidenze alla base di ogni risultato, senza presentare il giudizio degli esperti come ricerca con partecipanti.

Un agente in grado di ispezionare l'interfaccia, un insieme definito di task utente e i vincoli di dominio rilevanti.

• UX
• Linee guida di design

Scegli un trattamento foil o una trasformazione dell'intera immagine che dipende dall'angolo prima di realizzare la carta.

Richiede generazione di immagini, Python, Blender e un runtime web per il visualizzatore fornito. La fonte menziona l'installazione locale delle dipendenze durante la pipeline.

• Design 3D
• Carte collezionabili
• Blender

Costruisci un cortometraggio a partire da una direzione artistica, non da una sequenza di transizioni tra diapositive. Huashu Art Motion combina scene disegnate con il codice, sprite di personaggi e revisione del movimento in un flusso di rendering locale.

Il rendering locale richiede uv, FFmpeg e Playwright Chromium. Fornisci fotogrammi di personaggi esistenti oppure usa un flusso separato di generazione di immagini per gli sprite di aspetto umano; audio e font richiedono risorse e autorizzazioni proprie.

• Animazione artistica
• Canvas
• Cortometraggi

Crea una skill di design riutilizzabile da riferimenti visivi, regole di design e token.

Servono accesso ai file, strumenti adeguati per ispezionare i riferimenti, Node per validate.mjs e una revisione nel browser per avere certezza visiva. La disponibilità degli strumenti influisce sulla fedeltà dell'estrazione.

• Design system
• Creazione di Skill
• Design token

Dai alle icone un sistema coerente di costruzione e denominazione, invece di raccogliere simboli scollegati.

Un agente in grado di esaminare icone rappresentative, le dimensioni previste e i formati di design e di codice richiesti.

• Design system
• Specifiche

Dai alle illustrazioni commissionate o ricorrenti un linguaggio visivo condiviso e un ruolo chiaro nell'interfaccia.

Un agente in grado di esaminare riferimenti visivi, colori del prodotto e le schermate e le dimensioni in cui compariranno le illustrazioni.

• UX
• Linee guida di design

Converti slide visive in una presentazione strutturata, invece di inserire screenshot dietro testo modificabile.

Richiede la CLI editppt, adeguate capacità di generazione di immagini e l'esecuzione multi-agente per le presentazioni con più pagine. PaddleOCR è un supporto opzionale da configurare; i suggerimenti offline hanno un profilo di qualità diverso.

• Presentazioni
• PowerPoint
• Ricostruzione

Decidi dove appartengono le informazioni prima di decidere che aspetto avrà la navigazione.

Richiede contenuti di prodotto ed evidenze sulle attività degli utenti; la fonte non richiede una particolare applicazione di design.

• Strategia UX
• Struttura dei contenuti

Trasforma gli obiettivi di ricerca in domande che invitano a portare evidenze invece di suggerire una risposta.

Gli input principali sono obiettivi di ricerca, criteri dei partecipanti e vincoli della sessione; non è fornito alcun servizio di registrazione o reclutamento.

• UX Research
• Interviste

Reimposta una decisione di prodotto partendo da ciò che una persona sta cercando di ottenere.

Richiede ricerca sugli utenti o ipotesi chiaramente etichettate; non raccoglie interviste da sé.

• UX Research
• Strategia di prodotto

Collega i singoli punti di contatto nell'esperienza che una persona vive realmente.

Usa persona, ricerche e analytics esistenti; non è prevista alcuna misurazione automatica del sentiment.

• Ricerca UX
• Journey mapping

Collega l'argomentazione della pagina e le sue regole visive attorno a un'unica conversione prevista.

Non è richiesto un singolo runtime applicativo; gli esempi di implementazione fanno riferimento a valori Tailwind, IntersectionObserver e strumenti di animazione facoltativi.

• Landing page
• Copywriting
• Web design

Collega una proposta di valore reale alle sezioni della pagina prima di generare i componenti.

Serve un progetto React o Next.js compatibile con Tailwind; i componenti UI citati e gli strumenti opzionali di analisi del brand potrebbero richiedere una configurazione separata.

• Landing page
• Copywriting
• Frontend

Definisci colonne, margini e comportamento responsive condivisi per layout di pagina correlati.

Nessuna dipendenza runtime indicata; servono vincoli reali sui contenuti per scegliere valori di griglia utili.

• UI Design
• Layout responsive

Mostra cosa sta succedendo durante un'attesa senza ingannare le persone sull'avanzamento.

I tempi accurati delle operazioni e le capacità di avanzamento devono essere forniti dal team di prodotto o di implementazione.

• Interaction design
• UX del caricamento

Prepara l'interfaccia alle differenze linguistiche, non solo alle stringhe tradotte.

Servono testi nelle lingue di destinazione, font e una revisione linguistica o culturale adeguata; non è inclusa alcuna piattaforma di localizzazione automatica.

• Design system
• Localizzazione

Costruisci e testa il marchio prima di estenderlo a un kit di brand completo.

La fonte descrive script di supporto in Python privi di dipendenze, mentre il rendering effettivo delle immagini richiede un renderer disponibile come CairoSVG, Inkscape, Chrome o un'altra opzione supportata.

• Branding
• Logo Design
• SVG

Fornisci al team di sviluppo il comportamento alla base di una piccola interazione, non solo un riferimento di animazione.

Non è richiesta una particolare libreria di animazione; resta comunque necessario il test sul dispositivo di destinazione.

• Interaction design
• Handoff UI

Rendi le decisioni sull'animazione riutilizzabili tra componenti e team.

Richiede un'implementazione dei token o un equivalente della piattaforma; la fonte non impone alcun framework di animazione.

• Design system
• Movimento

Genera o modifica immagini con OpenRouter usando immagini di riferimento e uno script Python incluso.

uv, lo script Python incluso e una OPENROUTER_API_KEY con accesso ai modelli e crediti adeguati.

• Modifica di immagini
• Composizione

Trasforma una gerarchia informativa in controlli di navigazione riconoscibili e in percorsi chiari tra le destinazioni.

Richiede una gerarchia informativa e le priorità delle attività; non è fornito alcun pacchetto di componenti di navigazione.

• Interaction design
• Navigazione

Aiuta i nuovi utenti a ottenere un risultato utile prima di chiedere loro di imparare l'intero prodotto.

Richiede definizioni di attivazione specifiche del prodotto e strumentazione per qualsiasi misurazione successiva.

• Interaction design
• Onboarding

Applica un sistema di brand a una pagina HTML o a una presentazione, usando regole di layout adatte al formato scelto.

L'estrazione del brand da URL richiede Firecrawl. Gli output predefiniti evitano dipendenze JavaScript esterne, ma font o immagini possono comunque richiedere la propria disponibilità e i relativi diritti.

• Web design
• Presentazioni
• Sistemi di brand

Una guida frontend con indicazioni molto marcate per landing page espressive, portfolio e presentazioni interattive.

Un progetto frontend e le eventuali librerie di animazione scelte deliberatamente; la guida non richiede un unico runtime.

• Design frontend
• Movimento
• Tipografia

Mantieni testo e tempi dei sottotitoli in una struttura dati definita prima di applicare lo stile sulla timeline del video.

Un progetto Remotion, @remotion/captions e i file di riferimento pertinenti per trascrizione, importazione e visualizzazione.

• Video
• Sottotitoli

Configura un progetto e una composizione Remotion a partire da un brief video, con un'anteprima disponibile durante lo sviluppo.

Node.js, Git, installazione dei pacchetti, Remotion Studio e i riferimenti correlati a composizione e layout.

• Video
• React

Rendi un video modificabile in Studio cambiando il modo in cui il suo sorgente React espone livelli, tempistiche e controlli.

Serve una versione di Remotion che supporti le API Interactive documentate; per l'interpolazione modificabile dei percorsi descritta serve inoltre @remotion/paths.

• Video
• React
• Interazione

Crea mappe animate in Remotion, scegliendo tecnica di mappatura, provider e dati per l'inquadratura desiderata.

Remotion più le librerie e i dati della tecnica selezionata; secondo la fonte acquisita, Mapbox richiede una chiave.

• Video
• Mappe

Scrivi markup React che si comporta come una timeline video, non come una pagina web con animazione CSS.

Remotion e pacchetti specifici per le funzioni, corrispondenti alla versione del progetto; i riferimenti collegati indicano gli ulteriori requisiti per media, effetti, font o esportazione.

• Video
• React
• Movimento

Scegli una macro per una sequenza di comandi e uno script quando il compito di modellazione richiede logica.

Rhino 7 o successivo; Rhino 8 è l'ambiente consigliato dalla fonte per lo Script Editor unificato.

• Design 3D
• CAD
• Automazione

Un viaggio di camera pre-renderizzato controllato dallo scroll, non un mondo 3D live.

La pipeline documentata usa Higgsfield e un percorso video Monid, oltre a ffmpeg/ffprobe e a un ambiente browser. Account dei provider, crediti, capacità dei modelli ed eventuali percorsi immagine opzionali richiedono una verifica aggiornata.

• Animazione allo scroll
• Video
• Landing page

Progetta l'intera esperienza di recupero, comprese le ricerche che falliscono.

I servizi di ricerca e la strumentazione delle query sono esterni a questa guida.

• Interaction design
• Ricerca

Rendi visibile il lavoro operativo che sta dietro a ciò che il cliente vede.

Richiede evidenze su stakeholder e processi; non accede ai sistemi operativi in autonomia.

• Strategia UX
• Service design

Scrivi shader Slang e verifica come input, risorse e output si collegano al renderer.

Servono un ambiente di compilazione Slang e un renderer adatti al backend di destinazione; per le affermazioni sull'integrazione è necessaria una validazione lato host.

• Shader
• Grafica GPU
• Design 3D

Scegli la spaziatura in base a relazione e scopo, non con ritocchi isolati in pixel.

Non è richiesto alcuno strumento specifico per i token; l'applicazione dipende dal sistema di componenti esistente.

• Design UI
• Design token

Descrivi che cosa può succedere dopo, a partire da ogni stato di un componente.

Non è richiesto alcun pacchetto state-machine specifico; l'implementazione effettiva e i test restano lavoro a valle.

• Interaction design
• Modellazione del comportamento

Permetti a un'unica libreria di componenti di cambiare aspetto senza duplicarne la struttura.

L'implementazione usa il sistema di token del progetto o equivalenti della piattaforma; il cambio a runtime va realizzato e testato.

• Design system
• Theming

Recupera un marchio o un'icona di servizio esistente nel formato di cui il tuo progetto ha bisogno.

Richiede accesso alla rete per il registro o la CDN. Le integrazioni React, CLI, Figma e MCP sono superfici opzionali, non prerequisiti per il semplice recupero di URL.

• Asset di brand
• SVG
• Diagrammi cloud

Definisci una strategia di riproduzione e blending per un modello di personaggio o prodotto già caricato.

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Scegli come rappresentare la forma prima di aggiungere stile alla superficie o animazioni.

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Collega un gesto all'oggetto 3D previsto usando le coordinate effettive del canvas e della camera.

Un progetto Three.js funzionante e un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Rendi leggibile un modello con un'illuminazione pensata, non con una luminosità indiscriminata.

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Abbina il modello di shading alla superficie, poi ispezionala con l'illuminazione prevista.

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Tratta gli effetti schermo come una pipeline di rendering ordinata, non come filtri indipendenti.

Un progetto Three.js funzionante con renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Usa un comportamento personalizzato dei vertici o dei pixel quando i preset dei materiali non riescono a esprimere l'effetto.

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Assegna a ogni immagine il ruolo corretto prima di diagnosticare una superficie stirata o sbiadita.

Un progetto Three.js funzionante con un renderer; verifica gli esempi della fonte rispetto alla versione installata. Controlli e loader aggiuntivi dipendono dal percorso scelto.

• 3D
• Three.js

Crea una gerarchia leggibile a partire da un piccolo insieme di stili di testo documentati.

Per una validazione visiva significativa servono i file dei font effettivi o i font di piattaforma disponibili.

• Design UI
• Tipografia

Decidi che cosa lo studio deve far imparare prima di fissare le sessioni.

Richiede un artefatto di test utilizzabile e l'accesso ai partecipanti; non vengono forniti reclutamento né una piattaforma per le sessioni.

• UX Research
• Test di usabilità

Mostra i percorsi che un utente può seguire per completare un solo obiettivo.

La fonte non richiede alcuna applicazione di diagrammi; il formato di output scelto deve mantenere una notazione chiara.

• Prototipazione
• Flussi utente

Offri alle decisioni di prodotto un riferimento coerente sugli utenti, senza inventare la storia di un cliente.

Richiede evidenze autentiche sugli utenti per affermazioni basate sulla ricerca; gli URL di prodotto forniti potrebbero richiedere un'indagine separata.

• UX Research
• Persona

Pianifica e assembla un video di prodotto Remotion a partire da catture dell'interfaccia, istruzioni di inquadratura e una composizione temporizzata.

Richiede un ambiente Remotion/Node, la cattura da browser e ffmpeg. Alcuni componenti richiedono pacchetti legati a Three.js; l'analisi musicale facoltativa e l'esportazione per Jianying aggiungono dipendenze separate. Verifica in modo indipendente la licenza applicabile di Remotion.

• Video di prodotto
• Remotion
• Motion design

Scegli che cosa deve essere notato per primo, poi fai in modo che la composizione sostenga questa scelta.

Servono contenuti reali e una revisione sul rendering; non è incluso alcuno strumento di valutazione visiva.

• Design UI
• Composizione

Stabilisci una direzione visiva, costruisci un'interfaccia rappresentativa e verificala nel browser prima di ampliare il design.

Serve un agente in grado di scrivere codice e un ambiente frontend con rendering nel browser. Alcuni pattern possono usare React, Babel, grafici o altre librerie; l'accettazione nel browser richiede uno strumento browser adatto.

• Frontend Design
• Prototipazione
• Design system

Crea presentazioni basate sul browser con scene visive scandite dai passaggi e narrazione opzionale; la registrazione è un passaggio separato.

Usa Vite, React, TypeScript e strumenti Node. L'eventuale TTS dipende dal provider scelto, dalle credenziali e dall'adattatore; la registrazione finale richiede la cattura dal browser o un software di registrazione.

• Presentazioni
• Movimento
• Narrazione

Rendi una schermata a bassa fedeltà abbastanza precisa da poter discutere di comportamento e contenuti.

Non è richiesto alcuno strumento di wireframing specifico; un brief utilizzabile deve includere informazioni su contenuti e stati.

• Prototipazione
• Wireframe