OD / 2026 · Vol. 01 / Nº 26 Classé dans Design · Intelligence Apache-2.0 · Fait sur Terre Live · v0.8.0
FR
Open Design
TéléchargerStar · 53.4K
Modèles · Prototype

59 Prototype.

Interactive product mockups — dashboards, apps, landing pages, internal tools. Anything you’d hand a stakeholder and click through.

Type d’artefact
Scène
  1. 001 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'. prototype marketing
  2. 002 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. prototype Santé
  3. 003 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. prototype Connaissance
  4. 004 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. prototype design
  5. 005 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'. prototype operations
  6. 006 Rapport de Visualisation de Données Transforme les données CSV, Excel ou JSON en une page de rapport visuel soigné. prototype finance
  7. 007 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 personnel
  8. 008 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. prototype design
  9. 009 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. prototype produit
  10. 010 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 « 电子指南 ». prototype marketing
  11. 011 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'. prototype Ingénierie
  12. 012 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. prototype marketing
  13. 013 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 运维手册. prototype Ingénierie
  14. 014 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 '财报'. prototype finance
  15. 015 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. prototype operations
  16. 016 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. prototype personnel
  17. 017 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. prototype Opération
  18. 018 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 '入职'. prototype RH
  19. 019 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). prototype design
  20. 020 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`. prototype design
  21. 021 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 '发票'. prototype finance
  22. 022 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. prototype marketing
  23. 023 Document parchemin Kami Toile parchemin chaleureuse (#f5f4ed), accent bleu encre monochrome (#1B365D), une famille de police serif et typographie de qualité éditoriale. prototype personnel
  24. 024 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 operations
  25. 025 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. prototype design
  26. 026 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é. prototype marketing
  27. 027 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. prototype marketing
  28. 028 Affiche Marketing Affiche verticale ou image de partage style Stories avec un fort impact visuel. prototype marketing
  29. 029 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 '会议纪要'. prototype operations
  30. 030 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'. prototype design
  31. 031 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 '移动端引导'. prototype design
  32. 032 CV Moderne CV moderne et minimaliste, format A4 une page, prêt pour l'impression ou l'export PDF. prototype personnel
  33. 033 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. prototype marketing
  34. 034 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. prototype marketing
  35. 035 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. prototype Orbit
  36. 036 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. prototype Orbit
  37. 037 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. prototype Orbit
  38. 038 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. prototype Orbit
  39. 039 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. prototype Orbit
  40. 040 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. prototype produit
  41. 041 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'. prototype Ventes
  42. 042 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. prototype marketing
  43. 043 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". prototype marketing
  44. 044 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 '三连发'. prototype marketing
  45. 045 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. prototype Créateur
  46. 046 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. prototype personnel
  47. 047 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. prototype marketing
  48. 048 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 目标. prototype produit
  49. 049 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. prototype design
  50. 050 Carte de partage Twitter Carte de citation ou de données Twitter conçue pour accompagner une publication. prototype marketing
  51. 051 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 marketing
  52. 052 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. prototype design
  53. 053 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). prototype design
  54. 054 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. prototype design
  55. 055 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. prototype design
  56. 056 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. prototype design
  57. 057 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 marketing
  58. 058 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é. prototype design
  59. 059 Carte Xiaohongshu Cartes de connaissances au style Xiaohongshu, organisées en carrousel multi-cartes défilable. prototype marketing