Voile aurore
A self-contained WebGL2 hero: layered aurora light curtains warped over a night sky scattered with stars; move the cursor to sway the veil.
Prototype.
Maquettes interactives de produits — tableaux de bord, applications, landing pages, outils internes. Tout ce que vous présenteriez à une partie prenante et parcouriez.
Type d’artefact
Scène
Article de blog
Article long format / billet de blog — en-tête, espace réservé pour image principale, corps d'article avec figures et citations, signature d'auteur, articles connexes. À utiliser lorsque le brief mentionne 'blog', 'article', 'post', 'essai' ou 'étude de cas'.
Bassin de caustiques
A self-contained WebGL2 hero: animated water caustics woven from domain-warped ripples; click the water to drop a ripple. No meshes, no textures.
Rapport de cas clinique
Présentation structurée de cas médical pour les visites, conférences et documentation. Génère des rapports au format SOAP ou narratif avec des paramètres vitaux physiologiquement précis, analyses et plans basés sur les preuves.
Carte de capacités interactive Codex
Transformez un article long, un fil de discussion, un mémo ou une description de produit en carte de capacités interactive style Codex avec boucle de workflow, matrice de cas d'usage et panneau de détails responsive.
Critique
Effectue une revue de design experte en 5 dimensions sur tout artefact HTML du projet — Philosophie/Hiérarchie visuelle/Détails/Fonctionnalité/Innovation, chacune notée de 0 à 10. Génère un rapport HTML autonome avec graphique radar, scores justifiés et trois listes : Conserver/Corriger/Gains rapides.
Tableau de bord
Tableau de bord administrateur/analytique dans un seul fichier HTML. Barre latérale gauche fixe, barre supérieure avec utilisateur/recherche, grille principale de cartes KPI et graphiques. À utiliser pour un écran de 'tableau de bord', 'admin', 'analytique' ou 'panneau de contrôle'.
Rapport de Visualisation de Données
Transforme les données CSV, Excel ou JSON en une page de rapport visuel soigné.
Dating Web
Tableau de bord de rencontres/matchmaking grand public avec navigation latérale gauche, barre de signaux communautaires, KPI principaux, graphique en barres des matchs mutuels sur 30 jours et bloc de tendance du taux de match. Typographie éditoriale et accent sobre. Idéal pour sites de rencontres, matchmaking, tableaux de bord communautaires ou réseaux sociaux.
prototype Lire le prompt complet → Valorisation DCF
Valorisation par flux de trésorerie actualisés et analyse de valeur intrinsèque pour les sociétés cotées. Pour DCF, juste valeur, valeur intrinsèque, prix cible et analyses de sur/sous-évaluation.
Galerie en profondeur
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.
Vitrine 3D d'appareils
Vitrine 3D statique d'iPhone et MacBook avec intégration HTML réelle sur les écrans, réfraction de lentille en verre et composition rotative à 360 degrés.
Guide numérique
Aperçu d'un guide numérique à deux pages — page 1 : couverture (titre, auteur, statistiques 'Ce qui est inclus', aperçu de la table des matières) ; page 2 : double page (corps de leçon avec citation et liste d'étapes). Ton lifestyle / marque créateur. À utiliser pour les demandes d'« e-guide », « guide numérique », « lookbook », « lead magnet », « guide créateur », « playbook », « guide PDF » ou « 电子指南 ».
Distorsion & grain
A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.
Page de documentation
Une page de documentation avec navigation latérale, contenu déroulant et table des matières. À utiliser lorsque le brief mentionne 'documentation', 'guide', 'référence API' ou 'tutoriel'.
Marketing par e-mail
Modèle d'e-mail de lancement produit avec en-tête, image hero, titre en italique, texte principal, CTA principal et grille de spécifications en mise en page HTML centrée sur une colonne.
Runbook d'ingénierie
Un runbook d'ingénierie — vue d'ensemble du service, tableau d'alertes, liens vers les tableaux de bord, procédures courantes avec commandes copiables, rotation d'astreinte et checklist de réponse aux incidents. À utiliser pour les runbooks, docs ops, guides d'astreinte, docs SRE ou 运维手册.
Rapport financier
Rapport financier trimestriel/mensuel avec en-tête KPI, graphiques de revenus et de dépenses, tableau récapitulatif P&L, points clés et paragraphe de perspectives. Utiliser quand le brief mentionne 'rapport financier', 'rapport Q3', 'revue MRR', 'P&L' ou '财报'.
Modèle de tableau de bord en direct Flowai
Tableau de bord de gestion d'équipe dans l'esthétique FlowAI avec trois onglets (Membres de l'équipe, Détails de l'équipe, Journal d'activité), ligne de statistiques KPI, tableau des membres, graphique à barres de répartition des rôles, sparklines de présence en ligne et d'activité, et panneau des principaux contributeurs. Supporte les thèmes clair/sombre, info-bulles, zoom et export CSV.
Application gamifiée
Prototype d'application mobile gamifiée en trois écrans : écran de couverture, quêtes du jour avec rubans XP et barre de niveau, détails de quête. Idéal pour les applications gamifiées, suivi d'habitudes, applications de vie RPG, applications de montée de niveau, quêtes quotidiennes et applications XP/streak.
Tableau de bord GitHub
Tableau de bord d'analyse de dépôt GitHub — étoiles, forks, contributeurs, issues, pull requests, activité récente et principaux contributeurs. À utiliser pour un tableau de bord de dépôt GitHub, un rapport de croissance open source, une page de santé de dépôt ou une vue analytique GitHub.
Dérive en trame
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.
Feuille holographique
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.
Galerie parallaxe horizontale
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.
Intégration RH
Plan d'intégration des nouveaux employés sur une seule page – planning de la première semaine, présentation du binôme + manager, parcours d'apprentissage, liste du matériel et objectifs 'vous êtes prêt quand…'. À utiliser lorsque le brief mentionne 'intégration', 'nouvel employé', 'plan première semaine' ou '入职'.
Html Ppt Taste Brutalist
Présentation HTML 16:9 dans le style tactical-telemetry / terminal CRT. Diapositives charbon CRT désactivé, monospace phosphore blanc, accent rouge danger, superposition scanline, syntaxe ASCII, densité avant décoration. Extrait de Leonxlnx/taste-skill `brutalist-skill` (mode Tactical Telemetry).
Html Ppt Taste Editorial
Présentation HTML 16:9 au style éditorial minimaliste. Diapositives crème chaleureuses, titres serif + corps grotesque, filets fins, métadonnées monospace, espaces blancs généreux, un accent. Distillé de Leonxlnx/taste-skill `minimalist-skill`.
Facture
Page de facture imprimable — bloc expéditeur + destinataire, tableau des articles, ventilation des taxes, totaux et instructions de paiement. À utiliser lorsque le brief mentionne 'invoice', 'bill', 'billing statement' ou '发票'.
Kami Landing
Produit un document papier d'une page de qualité imprimée — toile parchemin chaleureuse, accent bleu encre, serif à un seul poids, sans italique, sans gris froids. Le résultat ressemble à un livre blanc professionnel ou à une fiche studio, pas à une UI d'application. Multilingue de conception (EN · zh-CN · ja). Un seul fichier HTML autonome, zéro dépendance.
Document parchemin Kami
Toile parchemin chaleureuse (#f5f4ed), accent bleu encre monochrome (#1B365D), une famille de police serif et typographie de qualité éditoriale.
Tableau Kanban
Tableau kanban / tâches avec colonnes (To do / In progress / In review / Done), cartes déplaçables, avatars des assignés, swimlanes et barre de filtre supérieure. À utiliser lorsque 'kanban', 'task board', 'sprint board', 'trello' ou '看板' sont mentionnés.
prototype Lire le prompt complet → 30 derniers jours
Recherche sur les tendances communautaires et sociales des 30 derniers jours. À utiliser pour connaître l'opinion actuelle, le sentiment récent, les réactions de la communauté, la preuve sociale, la réaction au lancement, l'analyse des tendances ou le contexte des 30 derniers jours.
Iridescence liquide
A self-contained WebGL2 hero: a living oil-on-water field brightened into iridescent caustic filaments; move the cursor to bend the flow.
Métal liquide
Créez un shader de métal liquide plein écran — des ondulations de chrome en fusion avec un reflet spéculaire balayant une palette de couches minces iridescentes — rendu à 60fps sous forme d'un unique index.html autonome.
Article de magazine
Mise en page d'article de magazine inspirée de Huashu / huashu-md-html pour transformer vos notes ou Markdown en essai HTML long format soigné.
Affiche Magazine
Affiche éditoriale de style journal avec papier journal, ligne de date, titre sérif surdimensionné avec mot barré et accent italique, bloc de texte sur 2 colonnes et 6 sections numérotées avec citations annotées. Idéal pour affiches magazine, mises en page éditoriales, style journal ou manifestes.
Affiche Marketing
Affiche verticale ou image de partage style Stories avec un fort impact visuel.
Notes de réunion
Page de notes de réunion — barre de titre avec participants, checklist d'ordre du jour, bloc de décisions, tableau d'actions avec responsables et dates, et pied de page pour la prochaine réunion. À utiliser pour les termes 'notes de réunion', 'procès-verbal', 'notes 1:1', 'récapitulatif all-hands' ou '会议纪要'.
Application mobile
Un écran d'application mobile rendu dans un cadre iPhone 15 Pro pixel-perfect sur la page. Créé en copiant le fichier de départ assets/template.html et en collant un archétype d'écran depuis references/layouts.md. À utiliser lorsque le brief demande une 'application mobile', 'application iOS', 'application Android', 'écran de téléphone' ou 'UI d'application'.
Onboarding mobile
Flux d'onboarding mobile multi-écran présenté sous forme de trois cadres de téléphone côte à côte — splash, proposition de valeur, connexion. Barre d'état, points de swipe, CTA principal. À utiliser pour 'mobile onboarding', 'onboarding iOS', 'inscription téléphone' ou '移动端引导'.
CV Moderne
CV moderne et minimaliste, format A4 une page, prêt pour l'impression ou l'export PDF.
Motion Frames
Composition de motion design en une seule image avec animations CSS en boucle – anneau de texte rotatif, globe animé, minuteur, labels parallaxe. Génère un poster vidéo hero utilisable directement dans HyperFrames ou tout exportateur à base de keyframes. Idéal pour le motion design, hero animé, boucle, poster vidéo et cartons de titre.
Grille néon
Créez une scène de grille néon synthwave — une grille de sol en perspective défilant vers un soleil rétro strié, sous un champ d'étoiles néon — rendue à 60fps sous forme d'un unique index.html autonome.
prototype Lire le prompt complet → Page d'accueil 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.
Page d'accueil Open Design
Produit une page de destination éditoriale unique dans le langage visuel Atelier Zero (collage éditorial Monocle / Apartamento / Études). Remplit inputs.json à partir d'un brief de marque, génère jusqu'à 16 assets de collage via gpt-image-2, et compose un fichier HTML autonome avec animations de défilement et navigation fixe.
Orbit Général
Déclenché automatiquement par Orbit lorsque deux connecteurs ou plus sont connectés. Récupère les activités des dernières 24 heures de tous les connecteurs authentifiés (GitHub, Linear, Notion, Slack, 飞书, Agenda, Gmail, Drive, Sentry, Vercel, etc.) et génère un tableau de bord adaptatif en grille bento en haut de "我的设计". Exécuté automatiquement par le planificateur de digest quotidien d'Orbit.
Orbit Github
Compétence Orbit pour générer automatiquement des résumés quotidiens basés sur les connexions GitHub. Récupère les PR, demandes de révision, issues, exécutions CI et fusions des dernières 24 heures et les affiche dans un style de notification natif GitHub. Invoqué automatiquement par le planificateur de résumé quotidien Orbit.
Orbit Gmail
Extrait l'activité de la boîte de réception des dernières 24 heures et génère un résumé quotidien lorsque Gmail est le seul service connecté ou explicitement sélectionné. Déclenché automatiquement par le planificateur Orbit, ne doit pas être exécuté manuellement.
Orbit Linear
Déclenché automatiquement par le pipeline Orbit lorsque Linear est le seul connecteur lié de l'utilisateur ou lorsque l'utilisateur limite explicitement son digest quotidien à Linear. Récupère les 24 dernières heures de mouvements de tickets, changements de statut, affectations et progression de cycle, et les affiche dans le langage visuel natif de la boîte de réception Linear.
Orbit Notion
Compétence de briefing Open Orbit — sélectionnée par le pipeline Orbit lorsque Notion est le seul connecteur connecté de l'utilisateur ou lorsque l'utilisateur limite explicitement son digest quotidien à Notion. Récupère les modifications de documents, commentaires, mentions et lignes de base de données des dernières 24 heures depuis la connexion Notion authentifiée de l'utilisateur et affiche le digest sous forme de page Notion native (éléments callout/toggle/tableau de base de données). Cette compétence ne doit pas être déclenchée manuellement — elle est invoquée par le planificateur de digest quotidien d'Orbit sur les données Notion en direct.
Galaxie de particules
Créez une galaxie de particules tourbillonnante — des dizaines de milliers de points GPU en fusion additive spiralant autour d'un cœur lumineux, leurs orbites résolues dans le vertex shader — rendue en direct à 60fps sous forme d'un unique index.html autonome.
Galerie à révélation pixel
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.
Spécification produit
Spécification produit/PRD sur une page — problème, métriques de succès, périmètre, user stories, notes de design, plan de déploiement, questions ouvertes. Pour les specs produit et briefs fonctionnels.
Page de tarification
Une page de tarification autonome — en-tête, niveaux de forfaits, tableau comparatif des fonctionnalités et FAQ. À utiliser lorsque le brief demande une page 'tarifs', 'forfaits', 'niveaux d'abonnement' ou 'comparer les forfaits'.
Hero en raymarching
Créez un hero 3D en raymarching — des métaballes morphantes aux ombres douces avec une lumière de contour fresnel, orbitant lentement et sphere-tracées par pixel dans un fragment shader — rendu en plein écran à 60fps sous forme d'un unique index.html autonome.
Carte de publication Reddit
Carte de publication Reddit réaliste avec barre de vote et nombre de commentaires, adaptée aux overlays vidéo ou au partage de stories.
Page SaaS
Page d'accueil SaaS mono-page avec hero, fonctionnalités, preuve sociale, tarifs et CTA. Respecte les tokens de couleur/typographie/mise en page du DESIGN.md actif. Mots-clés déclencheurs : "saas landing", "marketing page", "product landing".
Carrousel Social
Un carrousel de trois cartes pour les réseaux sociaux au format 1080×1080 – trois panneaux cinématographiques alignés sur la marque avec des titres qui se connectent à travers la série ('en avant.' → 'vers le suivant.' → 'regard vers l'avenir.'). Chaque carte comprend un logo de marque, un numéro/total, une légende et une affordance de 'boucle'. À utiliser pour les demandes de 'post carrousel', 'carrousel social', 'carrousel Instagram', 'série LinkedIn', 'cartes de thread X' ou '三连发'.
Tableau de bord réseaux sociaux
Tableau de bord d'analyse des réseaux sociaux pour créateurs dans un seul fichier HTML. Avec sélecteur de plateforme (X / LinkedIn / YouTube / Instagram), cartes KPI (abonnés, taux d'engagement, likes, reposts), graphique de croissance des abonnés, aperçu du post le plus populaire de la semaine et panneau latéral des sujets tendance/commentaires principaux.
Carte Spotify En Lecture
Carte de lecture Spotify avec pochette d'album, barre de progression et contrôles de lecture, adaptée aux overlays vidéo ou pages d'accueil personnelles.
Animation Sprite
Diapositive animée explicative en style pixel art avec fond crème, année en caractères gras, mascotte en pixel art (carte Hanafuda, champignon ou console 8-bit), typographie japonaise cinétique et ruban chronologique. Animation CSS pure, prête à être enregistrée en vidéo verticale.
OKR d'équipe
Page de suivi OKR avec bannière trimestrielle, trois objectifs avec leurs résultats clés sous forme de barres de progression, avatars des responsables, pastilles de statut et barre latérale 'aperçu du trimestre'. À utiliser lorsque le brief mentionne OKR, résultats clés, objectifs ou 目标.
Tweaks
Ajoute un panneau de contrôle en direct à tout élément HTML pour ajuster la couleur d'accent, l'échelle typographique, la densité, le mouvement et le thème. Les modifications sont appliquées instantanément aux propriétés CSS personnalisées et sauvegardées dans localStorage.
Carte de partage Twitter
Carte de citation ou de données Twitter conçue pour accompagner une publication.
Velar. — Immobilier de luxe
Landing page immobilière de luxe d'une seule page au rendu cinématographique : un préchargeur en machine à écrire qui s'efface vers le haut, une image de bâtiment pilotée par le scroll qui surgit du bas et s'agrandit tout en s'épinglant à une section sombre de déclaration, un bandeau de statistiques sombre en sticky avec des chiffres qui s'incrémentent, et une galerie vidéo qui se déploie au survol et glisse par-dessus la section sombre.
Cellules de Voronoï
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.
Page de liste d'attente
Page de destination minimaliste avant lancement avec capture d'e-mails, logo de marque et couche décorative optionnelle. Lit les couleurs, la typographie et les règles de mise en page depuis DESIGN.md. Idéal pour les lancements de produits, inscriptions bêta, programmes d'accès anticipé et projets indépendants.
prototype Lire le prompt complet → 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.
Prototype Web
Prototype web de bureau polyvalent. Fichier HTML autonome créé en copiant `assets/template.html` et en collant les mises en page de `references/layouts.md`. Option par défaut pour les pages de destination, marketing, documentation ou SaaS.
Web Prototype Taste Brutalist
Prototype web d'imprimerie industrielle suisse. Toile papier journal, grotesque noire monolithique, chiffres débordant du viewport, séparateurs de grille ultrafins, accent rouge danger, décoration syntaxe ASCII. Extrait de Leonxlnx/taste-skill `brutalist-skill` (mode imprimerie industrielle suisse).
Web Prototype Taste Editorial
Prototype web éditorial-minimaliste. Toile monochrome chaleureuse, titre serif + corps grotesque, bordures 1px, pastels atténués, espaces blancs généreux, micro-mouvements ambiants.
Web Prototype Taste Soft
Prototype web doux de niveau Apple. Canevas argent/crème, cartes à double cadre, CTA en boutons imbriqués, grands rayons squircle, animation fluide et maillage ambiant. Basé sur soft-skill de Leonxlnx/taste-skill et sections 4–8.
Expérience WebGL
Créez une expérience WebGL/WebGL2 plein écran en temps réel — shaders animés, scènes 3D, visuels génératifs, champs de particules — exécutée en direct sur le GPU. Déclenché pour toute demande WebGL, shader, 3D, générative, GPU ou visuel temps réel.
prototype Lire le prompt complet → Website Clone
Clone or visually recreate a website using source-first reconnaissance, route crawling, interaction probes, asset capture, and post-clone audit notes.
Wireframe Annoté
Un wireframe lo-fi annoté/redline d'une page de destination desktop — blocs greybox dans un cadre de navigateur, pins d'annotation numérotés (①–⑤) et un panneau de spécifications à droite reliant chaque pin à une courte note ingénierie/UX. Idéal pour les demandes de wireframe annoté, redline, spec de wireframe, landing lo-fi ou basse fidélité.
Wireframe Greybox
Un wireframe greybox / blueprint lo-fi épuré d'un tableau de bord SaaS desktop — blocs gris neutres, espaces réservés d'image avec une croix diagonale, texte en barres lorem, panneau de graphique schématique et annotations redline monospace sur une grille à 12 colonnes. Idéal pour les demandes de greybox, wireframe blueprint, dashboard lo-fi ou basse fidélité.
Wireframe de Flux Mobile
Wireframe lo-fi d'un flux d'application mobile — trois à quatre cadres de téléphone alignés (onboarding → fil d'accueil → détail → confirmation), contenu en greybox dans chaque appareil, flèches de connexion en pointillés avec étiquettes d'étape numérotées et annotations en post-it. Idéal pour les demandes de wireframe mobile, app flow, user flow ou lo-fi mobile.
Wireframe Esquisse
Wireframe dessiné à la main avec fond papier millimétré, tons marqueur/crayon, onglets multiples, annotations post-it et graphiques esquissés. Idéal pour les demandes de wireframe, croquis, lo-fi ou tableau blanc.
Visualiseur Worker
Créez un visualiseur temps réel dont le calcul lourd s'exécute dans un Web Worker — systèmes de particules, physique, fractales, visualisation de données/audio — partageant éventuellement la mémoire via SharedArrayBuffer, rendu sur canvas à 60fps. Déclenché pour toute demande de web worker, simulation, particules, physique, fractale, calcul hors thread principal ou visualiseur temps réel.
Carte de publication X / Twitter
Carte de publication X réaliste avec métriques d'engagement (likes, reposts, vues), adaptée aux superpositions vidéo ou cartes d'image partageables.
prototype Lire le prompt complet → X Research
Analyse du sentiment public X/Twitter sur les marchés, entreprises, produits ou communautés. À utiliser pour connaître l'opinion publique, les posts d'experts ou les réactions sociales concernant une action, un secteur, une entreprise, un produit ou un événement de marché.
Carte Xiaohongshu
Cartes de connaissances au style Xiaohongshu, organisées en carrousel multi-cartes défilable.