Awesome Design.MD - appliquer à votre site les systèmes de design de sites web connus

• DESIGN.md est un concept introduit par Google Stitch, un document de design textuel destiné à permettre aux agents IA de lire et de générer une UI cohérente
• Sans Figma, sans schéma JSON et sans outillage séparé, il suffit de copier un unique fichier Markdown à la racine du projet pour qu’un agent de code IA reconnaisse immédiatement le style de l’UI
• Il fonctionne en paire avec AGENTS.md existant, et DESIGN.md définit l’apparence visuelle et le ressenti
• Chaque fichier se compose de 9 sections standard couvrant la palette de couleurs, la typographie, le style des composants, la mise en page, le comportement responsive, etc.
• Pour chaque site, un lot de 3 fichiers est fourni : DESIGN.md + preview.html + preview-dark.html
• Les systèmes de design de plus de 60 services dans les domaines de l’IA, des outils de développement, de la fintech et de l’entreprise sont inclus, notamment Claude, Vercel, Stripe, Notion, Figma et Cursor
  • Copiez le DESIGN.md du site souhaité à la racine du projet, puis demandez à l’agent IA de construire l’UI en se référant à ce fichier
  • Une simple instruction comme "Crée-moi une page qui ressemble à ça" permet de générer une UI conforme au site d’origine
• Licence MIT

Structure de chaque fichier DESIGN.md

• Suit le format Stitch DESIGN.md et l’étend avec les 9 sections ci-dessous

  #	Section	Contenu capturé
  1	Visual Theme & Atmosphere	ambiance, densité, philosophie de design
  2	Color Palette & Roles	nom des couleurs + HEX + rôle fonctionnel
  3	Typography Rules	famille de polices, tableau complet de hiérarchie
  4	Component Stylings	boutons, cartes, champs de saisie, navigation et états
  5	Layout Principles	échelle d’espacement, grille, philosophie des marges
  6	Depth & Elevation	système d’ombres, hiérarchie des surfaces
  7	Do's and Don'ts	guide de design et anti-patterns
  8	Responsive Behavior	breakpoints, cibles tactiles, stratégie de réduction
  9	Agent Prompt Guide	référence rapide des couleurs, prompts immédiatement utilisables

Collections incluses

• AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
• Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
• Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
• Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
• Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
• Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

[hidarite]

Le concept est intéressant et semble utile... Mais le webdesign est aussi protégé par le droit d’auteur, et je me demande s’il n’y a pas un problème de droits d’auteur, ou même d’éthique professionnelle, à copier et appliquer l’ensemble de cette manière.

[tsboard]

C’est exactement ce qui m’est venu à l’esprit aussi. En ce moment, on dirait qu’on part simplement du principe que les services ou agents IA disposent d’une sorte de pouvoir extralégal. Est-ce qu’on peut vraiment avancer ainsi, à moitié les yeux bandés ? ...

[kaydash]

C’est bien. Les personnes qui font du front-end et du design commencent souvent en préparant ce genre de choses à l’avance.

[m00nlygreat]

Mais en général, le design system est intégré au framework front-end sous forme de fragments de code, donc il ne faudrait pas l’utiliser de manière commune..?

Suivre DESIGN.md, ça donne plutôt l’impression qu’on va générer à chaque fois, de façon arbitraire, ces couleurs et ces consignes...

[hmmhmmhm]

J’aimerais que cela serve non pas à simplement copier, mais à créer un nouveau design system à partir de plusieurs design systems.