59 Prototype.
Interactive product mockups — dashboards, apps, landing pages, internal tools. Anything you’d hand a stakeholder and click through.
Tipo di artefatto
Scena
- 001
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'. - 002
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. - 003
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. - 004
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. - 005
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'. - 006
Report di Visualizzazione Dati Trasforma dati CSV, Excel o JSON in una pagina di report visivo raffinato. - 007
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. - 008
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. - 009
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. - 010
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 '电子指南'. - 011
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'. - 012
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. - 013
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 运维手册. - 014
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 '财报'. - 015
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. - 016
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. - 017
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. - 018
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 '入职'. - 019
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). - 020
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`. - 021
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 '发票'. - 022
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. - 023
Documento pergamena Kami Tela pergamena calda (#f5f4ed), accento monocromatico blu inchiostro (#1B365D), una famiglia serif e tipografia di livello editoriale. - 024
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 '看板'. - 025
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. - 026
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. - 027
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. - 028
Poster Marketing Poster verticale o immagine da condividere in stile Stories con forte impatto visivo. - 029
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 '会议纪要'. - 030
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'. - 031
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 '移动端引导'. - 032
CV Moderno CV moderno e minimalista, singola pagina A4, pronto per la stampa o l'esportazione PDF. - 033
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. - 034
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. - 035
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. - 036
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. - 037
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. - 038
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. - 039
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. - 040
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. - 041
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'. - 042
Card post Reddit Card post Reddit realistico con barra voti e conteggio commenti, adatto per overlay video o condivisione di storie. - 043
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". - 044
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 '三连发'. - 045
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. - 046
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. - 047
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. - 048
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 目标. - 049
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. - 050
Card di condivisione Twitter Card con citazione o dati di Twitter progettata per accompagnare un post. - 051
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. - 052
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. - 053
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). - 054
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. - 055
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. - 056
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. - 057
Card post X / Twitter Card post X realistico con metriche di engagement (like, repost, visualizzazioni), adatto per overlay video o card immagine condivisibili. - 058
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. - 059
Scheda Xiaohongshu Schede informative in stile Xiaohongshu, disposte in un carosello scorrevole multi-scheda.