Aurora Veil
A self-contained WebGL2 hero: layered aurora light curtains warped over a night sky scattered with stars; move the cursor to sway the veil.
Prototipo.
Mockup interattivi di prodotti — dashboard, app, landing page, strumenti interni. Qualsiasi cosa che mostreresti a uno stakeholder e per cui faresti click attraverso.
Tipo di artefatto
Scena
Post del blog
Articolo lungo / post del blog — con testata, segnaposto per immagine hero, corpo dell'articolo con figure e citazioni in evidenza, firma dell'autore, post correlati. Da usare quando il brief richiede 'blog', 'articolo', 'post', 'saggio' o 'caso studio'.
Caustic Pool
A self-contained WebGL2 hero: animated water caustics woven from domain-warped ripples; click the water to drop a ripple. No meshes, no textures.
Referto caso clinico
Presentazione strutturata di casi medici per visite, conferenze e documentazione. Genera referti in formato SOAP o narrativo con parametri vitali fisiologicamente accurati, esami di laboratorio e piani basati sull'evidenza.
Mappa delle capacità interattiva Codex
Trasforma un articolo lungo, thread, memo o descrizione di prodotto in una mappa delle capacità interattiva stile Codex con ciclo di workflow, matrice di casi d'uso e pannello dettagli responsive.
Critique
Esegue una revisione esperta del design a 5 dimensioni su qualsiasi artefatto HTML nel progetto — Filosofia/Gerarchia visiva/Dettagli/Funzionalità/Innovazione, ciascuna valutata da 0 a 10. Genera un report HTML autonomo con grafico radar, punteggi documentati e tre liste: Mantenere/Correggere/Vittorie rapide.
Dashboard
Dashboard amministrativa e analitica in un singolo file HTML. Barra laterale sinistra fissa, barra superiore con utente/ricerca, griglia principale di schede KPI e grafici. Da usare per schermate di 'dashboard', 'admin', 'analytics' o 'pannello di controllo'.
Report di Visualizzazione Dati
Trasforma dati CSV, Excel o JSON in una pagina di report visivo raffinato.
Dating Web
Dashboard per incontri/matchmaking orientato al consumatore con navigazione laterale sinistra, ticker dei segnali della community, KPI principali, grafico a barre dei match reciproci a 30 giorni e blocco trend del tasso di match. Tipografia editoriale con accenti sobri. Ideale per siti di incontri, matchmaking, dashboard di community o social network.
prototipo Leggi il prompt completo → Valutazione DCF
Valutazione dei flussi di cassa scontati e analisi del valore intrinseco per aziende quotate. Per DCF, valore equo, valore intrinseco, prezzo obiettivo e analisi di sovra/sottovalutazione.
Depth Gallery
A scroll-reactive 3D image gallery in Three.js: Z-stacked images crossfade over per-image mood backgrounds with velocity breath, a glowing cursor trail and an editorial CMYK/RGB/HEX/PMS color card.
Vetrina 3D di dispositivi
Vetrina statica in 3D di iPhone e MacBook con HTML reale incorporato sugli schermi, rifrazione della lente in vetro e composizione girevole a 360 gradi.
Guida digitale
Anteprima di guida digitale a due pagine — pagina 1: copertina (titolo, autore, statistiche 'Cosa contiene', anteprima dell'indice); pagina 2: doppia pagina (corpo della lezione con citazione e lista di passaggi). Tono lifestyle / brand creator. Usare quando il brief chiede 'e-guide', 'guida digitale', 'lookbook', 'lead magnet', 'guida creator', 'playbook', 'guida PDF' o '电子指南'.
Distortion & Grain
A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
Pagina di documentazione
Una pagina di documentazione con navigazione laterale, corpo dell'articolo scorrevole e indice dei contenuti. Da usare quando il brief menziona 'documentazione', 'guida', 'riferimento API' o 'tutorial'.
Email marketing
Template email per lancio prodotto con testata, immagine hero, titolo in corsivo, testo principale, CTA primario e griglia specifiche in layout HTML a colonna singola centrata.
Runbook di ingegneria
Un runbook di ingegneria — panoramica del servizio, tabella degli alert, link alle dashboard, procedure comuni con comandi copiabili, rotazione delle reperibilità e checklist di risposta agli incidenti. Da usare per runbook, doc ops, guide on-call, doc SRE o 运维手册.
Report finanziario
Report finanziario trimestrale/mensile con testata KPI, grafici fatturato e burn, tabella riepilogo P&L, evidenze principali e paragrafo prospettive. Usare quando il brief menziona 'report finanziario', 'report Q3', 'revisione MRR', 'P&L' o '财报'.
Template dashboard live Flowai
Dashboard di gestione team in stile FlowAI con tre schede (Membri del team, Dettagli team, Registro attività), riga statistiche KPI, tabella membri, grafico a barre di distribuzione ruoli, sparkline di presenza online e attività, e pannello top contributori. Supporta tema chiaro/scuro, tooltip grafici, zoom e esportazione CSV.
App gamificata
Prototipo di app mobile gamificata su tre schermate: copertina, quest giornaliere con nastri XP e barra livello, dettagli quest. Ideale per app gamificate, tracker di abitudini, app life RPG, app level-up, quest giornaliere e app XP/streak.
Dashboard GitHub
Dashboard di analisi del repository GitHub — stelle, fork, contributori, issue, pull request, attività recente e principali contributori. Da utilizzare per dashboard di repository GitHub, report di crescita open-source, pagina di salute del repository o vista analitica GitHub.
Halftone Drift
A self-contained WebGL2 hero: a flowing field screened through a rotated halftone dot grid into a duotone print aesthetic; move the cursor to bend the drift.
Holographic Foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
Horizontal Parallax Gallery
A horizontal-scroll WebGL gallery (Three.js): frames glide sideways with lerp smoothing and each image parallaxes its texture (UV shift) by its position in the viewport.
Onboarding HR
Piano di onboarding per nuovi assunti su una singola pagina — calendario della prima settimana, presentazione buddy + manager, percorso formativo, checklist attrezzature e obiettivi 'sei pronto quando…'. Da usare quando il brief menziona 'onboarding', 'nuovo assunto', 'piano prima settimana' o '入职'.
Html Ppt Taste Brutalist
Presentazione HTML 16:9 in stile tactical-telemetry / terminale CRT. Slide carbonio CRT disattivato, monospazio fosforo bianco, accento rosso pericolo, overlay scanline, sintassi ASCII, densità prima della decorazione. Distillato da Leonxlnx/taste-skill `brutalist-skill` (modalità Tactical Telemetry).
Html Ppt Taste Editorial
Presentazione HTML 16:9 in stile editoriale minimalista. Slide color crema caldo, serif per i titoli + grottesco per il corpo, linee sottili, metadati monospazio, ampi spazi bianchi, un accento. Distillato da Leonxlnx/taste-skill `minimalist-skill`.
Fattura
Pagina fattura stampabile — blocco mittente + destinatario, tabella voci, ripartizione imposte, totali e istruzioni di pagamento. Da usare quando il brief menziona 'invoice', 'bill', 'billing statement' o '发票'.
Kami Landing
Produce un documento monopage di qualità tipografica — sfondo pergamena caldo, accento blu inchiostro, serif a un peso, senza corsivo, senza grigi freddi. Il risultato si presenta come un white paper professionale o un one-pager da studio, non come una UI di app. Multilingue per design (EN · zh-CN · ja). Un singolo file HTML autonomo, zero dipendenze.
Documento pergamena Kami
Tela pergamena calda (#f5f4ed), accento monocromatico blu inchiostro (#1B365D), una famiglia serif e tipografia di livello editoriale.
Bacheca Kanban
Bacheca kanban / attività con colonne (To do / In progress / In review / Done), schede trascinabili, avatar degli assegnatari, swimlanes e barra filtro superiore. Da usare quando il brief menziona 'kanban', 'task board', 'sprint board', 'trello' o '看板'.
prototipo Leggi il prompt completo → Ultimi 30 giorni
Ricerca sulle tendenze della comunità e sui social degli ultimi 30 giorni. Da utilizzare per conoscere le opinioni attuali, il sentiment recente, le reazioni della comunità, la prova sociale, la reazione al lancio, la scansione delle tendenze o il contesto degli ultimi 30 giorni.
Liquid Iridescence
A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.
Metallo liquido
Crea uno shader di metallo liquido a schermo intero — increspature di cromo fuso con un riflesso speculare che scorre su una palette iridescente a film sottile — renderizzato a 60fps come un unico index.html autonomo.
Articolo di rivista
Layout per articolo di rivista ispirato a Huashu / huashu-md-html per trasformare Markdown o note in un articolo HTML lungo e raffinato.
Poster Rivista
Poster editoriale in stile giornale con carta da giornale, data, titolo serif oversize con parola barrata e corsivo, corpo di testo a 2 colonne e 6 sezioni numerate con citazioni annotate. Ideale per poster rivista, layout editoriali, stile giornale o manifesti.
Poster Marketing
Poster verticale o immagine da condividere in stile Stories con forte impatto visivo.
Verbale di riunione
Pagina verbale di riunione — barra del titolo con partecipanti, checklist agenda, blocco decisioni, tabella azioni con responsabili e date, e piè di pagina per la prossima riunione. Da usare per 'verbale di riunione', 'minutes', 'note 1:1', 'riepilogo all-hands' o '会议纪要'.
App mobile
Una schermata di app mobile renderizzata all'interno di una cornice iPhone 15 Pro pixel-perfect sulla pagina. Creata copiando il file seed assets/template.html e incollando un archetipo di schermata da references/layouts.md. Da utilizzare quando il brief richiede 'app mobile', 'app iOS', 'app Android', 'schermo del telefono' o 'UI dell'app'.
Onboarding mobile
Flusso di onboarding mobile multi-schermo rappresentato con tre frame di telefono affiancati — splash, value-prop, sign-in. Barra di stato, punti di swipe, CTA principale. Da usare quando si menziona 'onboarding mobile', 'onboarding iOS', 'registrazione da telefono' o '移动端引导'.
CV Moderno
CV moderno e minimalista, singola pagina A4, pronto per la stampa o l'esportazione PDF.
Motion Frames
Composizione motion design a fotogramma singolo con animazioni CSS in loop — anello di testo rotante, globo animato, timer, etichette parallax. Renderizza come poster video hero per HyperFrames o qualsiasi exporter basato su keyframe. Ideale per motion design, hero animati, loop, poster video e title card.
Griglia al neon
Crea una scena synthwave con griglia al neon — una griglia di pavimento in prospettiva che scorre verso un sole retro a bande, sotto un campo stellato al neon — renderizzata a 60fps come un unico index.html autonomo.
prototipo Leggi il prompt completo → Homepage Open Design
A pixel-faithful mirror of the live open-design.ai homepage — an interactive WebGL/Three.js (React Three Fiber) hero built on Next.js. Features a real-time 3D "Open Design" wordmark (Draco-compressed geometry), a scattered sticker collage, custom variable fonts, cursor-reactive parallax, and scroll-driven motion. This is a first-party showcase of the visual ceiling Open Design targets for interactive marketing surfaces on the web — with all assets bundled locally (only the Draco decoder loads from a CDN, like the other WebGL examples), rendering in the sandboxed preview. Use as a reference for high-craft 3D landing pages, agent-native product sites, and motion-rich hero sections.
Landing Page Open Design
Produce una landing page editoriale a pagina singola nel linguaggio visivo Atelier Zero (collage editoriale Monocle / Apartamento / Études). Compila inputs.json da un brief del brand, genera opzionalmente 16 asset collage tramite gpt-image-2 ed emette un file HTML autonomo con animazioni di scroll e navigazione fissa.
Orbit Generale
Attivato automaticamente da Orbit quando sono collegati due o più connettori. Raccoglie le attività delle ultime 24 ore da tutti i connettori autenticati (GitHub, Linear, Notion, Slack, 飞书, Calendario, Gmail, Drive, Sentry, Vercel, ecc.) e genera una dashboard adattiva a griglia bento nella parte superiore di "我的设计". Eseguito automaticamente dal programmatore di digest giornaliero di Orbit.
Orbit Github
Skill Orbit per generare automaticamente riepiloghi giornalieri basati su connessioni GitHub. Recupera PR, richieste di revisione, issue, esecuzioni CI e merge delle ultime 24 ore e li visualizza nello stile delle notifiche native di GitHub. Invocato automaticamente dallo scheduler di riepilogo giornaliero di Orbit.
Orbit Gmail
Estrae l'attività della posta in arrivo delle ultime 24 ore e genera un riepilogo giornaliero quando Gmail è l'unico servizio connesso o esplicitamente selezionato. Attivato automaticamente dallo scheduler di Orbit, non deve essere eseguito manualmente.
Orbit Linear
Attivato automaticamente dalla pipeline Orbit quando Linear è l'unico connettore collegato dell'utente o quando l'utente limita esplicitamente il digest giornaliero a Linear. Estrae le ultime 24 ore di movimenti delle issue, cambiamenti di stato, assegnazioni e progressi del ciclo, rendendoli nel linguaggio visivo nativo della inbox di Linear.
Orbit Notion
Competenza di briefing Open Orbit — selezionata dalla pipeline Orbit quando Notion è l'unico connettore collegato dell'utente o quando l'utente limita esplicitamente il suo digest quotidiano a Notion. Estrae le modifiche ai documenti, i commenti, le menzioni e le modifiche alle righe del database delle ultime 24 ore dalla connessione Notion autenticata dell'utente e renderizza il digest come pagina Notion nativa (elementi callout/toggle/tabella database). Questa competenza non deve essere attivata manualmente — viene invocata dallo scheduler del digest quotidiano di Orbit sui dati Notion in tempo reale.
Galassia di particelle
Crea una galassia di particelle vorticosa — decine di migliaia di punti GPU in fusione additiva che spiraleggiano attorno a un nucleo luminoso, con le orbite risolte nel vertex shader — renderizzata dal vivo a 60fps come un unico index.html autonomo.
Pixel Reveal Gallery
A scroll-reactive masonry gallery (Three.js + GSAP) where each image develops from a pixel/grid dissolve on viewport entry, with a split-text heading and click-to-fullscreen Flip.
Specifica prodotto
Specifica prodotto/PRD su singola pagina — problema, metriche di successo, ambito, user story, note di design, piano di rilascio, domande aperte. Per specifiche prodotto e brief funzionali.
Pagina dei prezzi
Una pagina dei prezzi autonoma — intestazione, livelli di piani, tabella di confronto delle funzionalità e FAQ. Da usare quando il brief richiede una pagina per 'prezzi', 'piani', 'livelli di abbonamento' o 'confronta piani'.
Hero in raymarching
Crea un hero 3D in raymarching — metaball che si trasformano con ombre morbide e una luce di contorno fresnel, orbitando lentamente e tracciate a sfere pixel per pixel in un fragment shader — renderizzato a schermo intero a 60fps come un unico index.html autonomo.
Card post Reddit
Card post Reddit realistico con barra voti e conteggio commenti, adatto per overlay video o condivisione di storie.
Landing SaaS
Landing page SaaS a pagina singola con hero, funzionalità, social proof, prezzi e CTA. Rispetta i token attivi di colore/tipografia/layout del DESIGN.md. Parole chiave trigger: "saas landing", "marketing page", "product landing".
Carosello Social
Un carosello social a tre schede in formato 1080×1080 – tre pannelli cinematografici in linea con il brand con titoli che si collegano attraverso la serie ('avanti.' → 'al prossimo.' → 'guardando avanti.'). Ogni scheda include marchio del brand, numero/totale, didascalia e affordance di 'loop'. Da usare per richieste di 'post carosello', 'carosello social', 'carosello Instagram', 'serie LinkedIn', 'schede thread X' o '三连发'.
Dashboard social media
Dashboard di analisi social media per creator in un singolo file HTML. Con selettore di piattaforma (X / LinkedIn / YouTube / Instagram), schede KPI (follower, tasso di engagement, like, repost), grafico di crescita follower, anteprima del post top della settimana e pannello laterale dei topic di tendenza/commenti principali.
Card Spotify In Riproduzione
Card in stile Spotify con copertina album, barra di avanzamento e controlli di riproduzione, adatto per overlay video o homepage personali.
Animazione Sprite
Slide esplicativa animata in stile pixel art con sfondo crema, anno in grassetto, mascotte in pixel art (carta Hanafuda, fungo o console 8-bit), tipografia giapponese cinetica e nastro timeline. Animazione CSS pura, pronta per la registrazione in video verticale.
OKR del team
Pagina di tracciamento OKR con banner trimestrale, tre obiettivi con i relativi risultati chiave come barre di avanzamento, avatar dei responsabili, pill di stato e barra laterale 'panoramica del trimestre'. Utilizzare quando vengono menzionati OKR, risultati chiave, obiettivi o 目标.
Tweaks
Aggiunge un pannello di controlli in tempo reale a qualsiasi elemento HTML per regolare colore principale, scala tipografica, densità, movimento e tema. Le modifiche vengono applicate istantaneamente alle proprietà personalizzate CSS e salvate in localStorage.
Card di condivisione Twitter
Card con citazione o dati di Twitter progettata per accompagnare un post.
Velar. — Immobili di lusso
Landing page immobiliare di lusso a pagina singola dall'estetica cinematografica: un preloader a macchina da scrivere che si solleva e scompare, un'immagine dell'edificio guidata dallo scroll che sale dal basso e si ingrandisce mentre si aggancia a una sezione scura di dichiarazione, una fascia di statistiche scura sticky con numeri che salgono in count-up e una galleria video che si espande al passaggio del mouse e scorre sopra la sezione scura.
Voronoi Cells
A self-contained WebGL2 hero: a living Voronoi network with drifting feature points, palette-keyed cells and glowing boundaries; move the cursor to push the cells.
Pagina lista d'attesa
Landing page minimalista pre-lancio con acquisizione email, logo del brand e livello decorativo opzionale. Legge colori, tipografia e regole di layout da DESIGN.md. Perfetta per lanci di prodotti, iscrizioni beta, programmi di accesso anticipato e progetti indipendenti.
prototipo Leggi il prompt completo → Web effect extractor
Extract visual effects, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design artifact.
Prototipo Web
Prototipo web desktop generico. File HTML autonomo creato copiando `assets/template.html` e incollando layout da `references/layouts.md`. Opzione predefinita per landing page, marketing, documentazione o pagine SaaS.
Web Prototype Taste Brutalist
Prototipo web stampa industriale svizzera. Canvas carta da giornale, grottesco nero monolitico, numeri che sanguinano dal viewport, divisori griglia sottilissimi, accento rosso pericolo, decorazione sintassi ASCII. Estratto da Leonxlnx/taste-skill `brutalist-skill` (modalità stampa industriale svizzera).
Web Prototype Taste Editorial
Prototipo web editoriale-minimalista. Tela monocromatica calda, titoli serif + corpo grottesco, bordi 1px, chip pastello tenue, ampi spazi bianchi, micro-movimento ambientale.
Web Prototype Taste Soft
Prototipo web soft di livello Apple. Canvas argento/crema, card con doppio bordo, CTA con pulsanti annidati, ampi raggi squircle, animazione fluida e mesh ambientale. Basato su soft-skill di Leonxlnx/taste-skill e sezioni 4–8.
Esperienza WebGL
Crea un'esperienza WebGL/WebGL2 a schermo intero in tempo reale — shader animati, scene 3D, visual generativi, campi di particelle — eseguita dal vivo sulla GPU. Si attiva per richieste WebGL, shader, 3D, generative, GPU o visual in tempo reale.
prototipo Leggi il prompt completo → Website Clone
Clone or visually recreate a website using source-first reconnaissance, route crawling, interaction probes, asset capture, and post-clone audit notes.
Wireframe Annotato
Un wireframe lo-fi annotato/redline di una landing page desktop — blocchi greybox dentro una cornice browser, pin di annotazione numerati (①–⑤) e un pannello specifiche a destra che mappa ogni pin a una breve nota di ingegneria/UX. Ideale per richieste di wireframe annotato, redline, specifica di wireframe, landing lo-fi o bassa fedeltà.
Wireframe Greybox
Un wireframe greybox / blueprint lo-fi nitido di una dashboard SaaS desktop — blocchi grigi neutri, segnaposto immagine con una croce diagonale, testo a barre lorem, un pannello grafico schematico e annotazioni redline monospace su una griglia a 12 colonne. Ideale per richieste di greybox, wireframe blueprint, dashboard lo-fi o bassa fedeltà.
Wireframe Flusso Mobile
Wireframe lo-fi del flusso di un'app mobile — da tre a quattro cornici di telefono in fila (onboarding → feed home → dettaglio → conferma), contenuto greybox in ogni dispositivo, frecce di connessione tratteggiate con etichette di passo numerate e annotazioni su post-it. Ideale per richieste di wireframe mobile, app flow, user flow o lo-fi mobile.
Wireframe Sketch
Wireframe disegnato a mano con sfondo a quadretti, tono pennarello/matita, schede multiple, annotazioni su post-it e segnaposto per grafici. Ideale per richieste di wireframe, sketch, lo-fi o lavagna.
Visualizzatore Worker
Crea un visualizzatore in tempo reale il cui calcolo pesante gira in un Web Worker — sistemi di particelle, fisica, frattali, visualizzazione dati/audio — condividendo opzionalmente la memoria via SharedArrayBuffer, renderizzato su canvas a 60fps. Si attiva per richieste di web worker, simulazione, particelle, fisica, frattale, calcolo fuori dal thread principale o visualizzatore in tempo reale.
Card post X / Twitter
Card post X realistico con metriche di engagement (like, repost, visualizzazioni), adatto per overlay video o card immagine condivisibili.
prototipo Leggi il prompt completo → X Research
Ricerca sul sentiment pubblico di X/Twitter riguardo mercati, aziende, prodotti o comunità. Da usare per analizzare l'opinione pubblica, i post di esperti o le reazioni social su azioni, settori, aziende, prodotti o eventi di mercato.
Scheda Xiaohongshu
Schede informative in stile Xiaohongshu, disposte in un carosello scorrevole multi-scheda.