Design.md

Source: https://github.com/VoltAgent/awesome-design-md at f6961238d5cd
License: MIT
Read the English original

This edition is an AI-assisted translation.

Collection sécurisée d'analyse DESIGN.md par des sites Web ciblés par le développeur.

Sélection de DESIGN.md

Copiez un DESIGN.md dans votre projet, dites-moi à votre agent d’intelligence artificielle de me construire une page qui ressemble à ceci, et générer une interface utilisateur de haute qualité qui reste visuellement compatible avec le langage de conception.

Construit avec une profondeur de conception réelle — y compris des modèles analysés, des jetons et des règles — pour une génération d’interface utilisateur de haute qualité, et non des sorties de surface.

Qu’est-ce que DESIGN.md ?

DESIGN.md est un nouveau concept introduit par Google Stitch. Un document de système de conception en texte clair que les agents d’IA lisent pour générer une UI cohérente.

Ce n’est qu’un dossier. Pas d’exportation de Figma, pas de schéma JSON, pas d’outillage spécial. Déposez-le dans votre racine de projet et tout agent de codage d’IA ou Google Stitch comprend instantanément comment votre UI devrait regarder. Markdown est le format LLMs le mieux lu, donc il n’y a rien à analyser ou configurer.

Fichier	Qui le lit	Ce qu’il définit
AGENTS.md	Agents de codage	Comment construire le projet
DESIGN.md	Agents de conception	Comment le projet doit-il avoir l’air et se sentir

Cette repo fournit des fichiers prêts à utiliser DESIGN.mdextraits de sites Web réels.

Demander un fichier DESIGN.md

Vous pouvezdemander un DESIGN.md pour un site web spécifique, y compris les demandes privées qui vous sont transmises exclusivement.

Outils de conception et de développement avec l’IA

Vous expédiez des produits avec l’IA, mais chaque lancement meurt toujours tranquillement parce que personne ne poste à ce sujet.EveryFeed Branche votre assistante d’IA dans un espace de travail social qui traite, planifie et publie sur plus de 35 canaux — pas d’agence, pas de location de marketing.

👉 Présentez votre produit aux côtés des développeurs, designers et vibecodeurs qui créent des interfaces avec des agents de programmation IA et des outils web. Classé n ° 150 dans le monde sur GitHub. Une ressource communautaire utilisée par les développeurs, les concepteurs et les vibecoders.

Collection

Plateformes IA et LLM

• Claude - Assistante d’Anthropic. accent chaud en terre cuite, mise en page éditoriale propre
• Cohere - Plateforme d’intelligence artificielle de l’entreprise. dégradés dynamiques, esthétique du tableau de bord riche en données
• ElevenLabs - Plateforme vocale AI. UI cinématographique sombre, esthétique audio-onde
• Minimax - Fournisseur de modèles d’IA. Interface noire avec accents néon
• Mistral AI - Fournisseur de LLM à poids ouvert. minimalisme à la française, tons violets
• Ollama - Lancez des LLM localement. Terminal-first, simplicité monochrome
• OpenCode AI - Plateforme de codage AI. Thème sombre centré sur le développeur
• Replicate - Exécutez des modèles ML via API. Toile blanche propre, code avant
• Runway - Plateforme d’outils créatifs AI avec une esthétique éditoriale film-festival — héros sombres cinématographiques, groupes de lecture papier-blanc, sans propriétaire unique et pilules noires pures CTA.
• Together AI - Infrastructure d’IA en libre accès. Conception technique, style plan
• VoltAgent - Cadre des agents d’IA. Toile noire, accent émeraude, terminal-natif
• xAI - Le labo d’Elon Musk. Monochrome Stark, minimalisme futuriste

Outils de développement et IDE

• Cursor - IA-premier éditeur de code. Interface sombre, accents dégradés
• Expo - Réagissez à la plateforme Native. Thème sombre, épatant les lettres, centré sur le code
• Lovable - Constructeur de piles complètes d’IA. dégradés ludiques, esthétique dev amicale
• Raycast - Lanceur de productivité. Sleek chrome foncé, accents de dégradé vibrants
• Superhuman - Client e-mail rapide. UI noir Premium, premier clavier, lueur violette
• Vercel - Plateforme de déploiement Frontend. Précision noir et blanc, Police Geist
• Warp - Terminal moderne. Interface de type IDE sombre, interface de commande basée sur bloc

Backend, bases de données et DevOps

• ClickHouse - Base de données d’analyse rapide. Jaune, style documentation technique
• Composio - Plateforme d’intégration d’outils. Dark moderne avec des icônes d’intégration colorées
• HashiCorp - Automatisation des infrastructures. Entreprise propre, noir et blanc
• MongoDB - Base de données. Image de marque feuille verte, focalisation documentation développeur
• PostHog - Analyse des produits. hérisson ludique marque, développeur-friendly noir UI
• Sanity - Plateforme de contenu sans tête avec une surface de marketing éditoriale première sombre — 112px type d’affichage, IBM Plex Mono sourcils techniques, et un accent unique rouge corail réservé à la plus haute priorité CTA.
• Sentry - Surveillance des erreurs. Tableau de bord sombre, accent de couleur rose pourpre
• Supabase - Alternative de Firebase Open-source. Thème émeraude sombre, premier code

Productivité et SaaS

• Cal.com - Horaire libre. UI neutre propre, simplicité orientée développeur
• Intercom - Message du client. Palette bleue amicale, modèles conversationnels d’interface utilisateur
• Linear - Gestion de projet pour les ingénieurs. accent ultra-minimal, précis, violet
• Mintlify - Plateforme de documentation. Propre, parfumé au vert, optimisé pour la lecture
• Notion - Espace de travail tout-en-un. Minimalisme chaud, têtes de serif, surfaces douces
• Resend - API de messagerie pour les développeurs. Thème sombre minimal, accents monospace
• Zapier - Plateforme d’automatisation. Orange chaud, à l’image amicale

Outils de design et de création

• Airtable - Échelle-base de données hybride. Coloré, amical, esthétique des données structurées
• Clay - Agence créative. Formes organiques, dégradés mous, mise en page artistique
• Figma - Outil de conception collaborative. Vibrant multicolore, ludique mais professionnel
• Framer - Constructeur de site web. Bold noir et bleu, premier mouvement, design-avant
• Miro - Collaboration visuelle. accent jaune vif, toile infinie esthétique
• Webflow - Constructeur de sites Web visuels. Esthétique du site de commercialisation poli et parfumé bleu

Fintech et cryptomonnaies

• Binance - Échange de crypto. Bold Binance Yellow sur monochrome, urgence du plancher de négociation
• Coinbase - Échange de crypto. Une identité bleue propre, un sentiment institutionnel axé sur la confiance
• Kraken - Crypto plate-forme de négociation. UI foncé parfumé violet, tableaux de bord denses de données
• Mastercard - Réseau mondial de paiements. toile crème chaude, formes de pilule orbitale, chaleur éditoriale
• Revolut - Banque numérique. Interface sombre, cartes dégradées, précision fintech
• Stripe - Infrastructure de paiement. Design dégradés violet, poids-300 élégance
• Wise - Transfert international d’argent. accent vert vif, amical et clair

E-commerce et vente au détail

• Airbnb - Marché des voyages. accent corallien chaud, à l’aide de la photographie, UI arrondi
• Meta - Magasin de détail technique. Photographie-première, surfaces binaires lumière/obscurité, Meta Blue CTA
• Nike - Au détail sportif. UI monochrome, haute caisse massive Futura, photographie à sang complet
• Shopify - Plateforme de commerce électronique. Dark-first cinématique, accent vert néon, écran ultra-léger
• Starbucks - Porte-étendard du café. Système à quatre niveaux vert-terre, toile crème chaude, typographie exclusive SoDoSans

Médias et technologies grand public

• Apple - Électronique grand public. Espace blanc haut de gamme, SF Pro, imagerie cinématique
• HP - PC et imprimante. Pure toile blanche, HP Electric Blue signal CTA, géométrique Forma DJR Micro, décorations bleu chevron
• IBM - Technologie d’entreprise. Système de conception du carbone, palette bleue structurée
• NVIDIA - Calcul GPU. Énergie verte-noire, puissance technique esthétique
• Pinterest - Plateforme de découverte visuelle. accent rouge, grille de maçonnerie, image première
• PlayStation - Au détail de console de jeux. Aménagement des canaux à trois surfaces, interaction à l’échelle du globe cyan
• SpaceX - Technologie spatiale. Stark noir et blanc, imagerie saignée, futuriste
• Spotify - Musique en streaming. Vert vif sur noir, type bold, avec l’album
• The Verge - Technique éditoriale. Accents acides et ultraviolets, type d’affichage Manuka
• Uber - Plateforme de mobilité. Bold noir et blanc, type serré, énergie urbaine
• Vodafone - Marque mondiale des télécommunications. Afficheur monumental, bandes de chapitre Vodafone Rouge
• WIRED - Magazine technique. Densité papier-blanc, serif personnalisé, liens encre-bleu

Automobile

• BMW - Une automobile de luxe. Surfaces premium foncées, esthétique technique allemande précise
• BMW M - Automobile performante. Contraste inspiré par le sport automobile, accents couleur M, mise en page axée sur la précision
• Bugatti - Hypercar de luxe. Cinéma- toile noire, austérité monochrome, présentation monumentale
• Ferrari - Une automobile de luxe. Éditorial Chiaroscuro noir-blanc, Ferrari Rouge avec extrême éparpillement
• Lamborghini - Une automobile de luxe. Véritable cathédrale noire, accent or, LamboType Neo-Grotesk personnalisé
• Renault - Automobile française. dégradés d’aurora vivides, face de type exclusive NouvelR, boutons zéro rayonnement
• Tesla - Véhicules électriques. Soustraction radicale, photographie cinématographique complète du port, Universal Sans

Web rétro · nostalgie DESIGN.md

Une série du samedi — DESIGN.md fichiers extraits du web des années 1990. Faites-en un et dites à votre agent d’IA de construire une interface d’assurance-chômage vintage.

• Dell (1996) - Catalogue-ère web entreprise. Littérale noir page frame, couleur plate bloc “cartes deribbon”, chunky Helvetica-Black titres sur le corps de Times Roman, et des autocollants GIF coupés à la main (NOUVEAU! les éclats, les sceaux primés, les photos de produits biseautés).
• Nintendo.com (2001) - Toile Y2K “console chromée”. Brushed-périwinkle panneaux en métal biseauté, une demi-tonné de carbone nav brillant ambre, souligné Arial-Noir wordmarks de boîte-art sur les champs de héros de circuit-board, et un pixel Mario bulle de bienvenue.

Que contient chaque DESIGN.md ?

Chaque fichier suit laformat DESIGN.md de Stitch avec sections étendues:

#	Chapitre	Ce qu’il capture
1	Thème visuel & Atmosphère	Mood, densité, philosophie du design
2	Palette de couleur & Rôles	Nom sémantique + hex + rôle fonctionnel
3	Règles en matière de typographie	Familles de polices, tableau hiérarchique complet
4	Caractéristiques des composants	Boutons, cartes, entrées, navigation avec états
5	Principes directeurs	Échelle d’espacement, grille, philosophie de l’espace blanc
6	Profondeur et élévation	Système d’ombre, hiérarchie de surface
7	Faire et ne pas faire	Garde-corps et anti-patterns conçus
8	Comportement sensible	Points d’arrêt, cibles tactiles, stratégie d’effondrement
9	Guide de l’agent	Référence couleur rapide, invites prêtes à l’emploi

Chaque site comprend :

Fichier	Objet
DESIGN.md	Le système de conception (ce que les agents lisent)
preview.html	Catalogue visuel montrant des montres couleur, échelle de type, boutons, cartes
preview-dark.html	Même catalogue avec surfaces sombres

Mode d’emploi

1. Copier un siteDESIGN.mddans votre racine de projet
2. Dites à votre agent d’IA de l’utiliser.

Contribuer

VoirCONTRIBUTION.md des directives.

• Améliorer les fichiers existants: Correction de mauvaises couleurs, jetons manquants, descriptions faibles
• Questions relatives au rapport: Faites-nous savoir si quelque chose regarde

Avant d’ouvrir un PR, s’il vous plaîtouvrir un numéro d’abord pour discuter de votre idée et obtenir la rétroaction des responsables.

Licence

Licence MIT - voirLICENCE

Ce dépôt est une collection curée de documents système de conception extraits des sites Web publics. Tous les fichiers DESIGN.md sont fournis “tel quel” sans garantie. Les jetons de conception extraits représentent des valeurs CSS visibles par le public. Nous ne revendiquons la propriété de l’identité visuelle d’aucun site. Ces documents existent pour aider les agents d’IA à générer une UI cohérente.