Nederlands

← Terug naar overzicht

48K Star Repository: 66 ontwerp systemen om te stoppen met AI schrijven frontends

itadol5j

Arise-design-md architectuur

Los het probleem van AI schrijven frontend UI lelijk: eyesoome-design-md

Al, wat is het probleem met de voorkant?UI is lelijk.Ik weet het niet. De front-end interface gegenereerd door AI Agent mist vaak een gevoel van ontwerp, kleur mix is verward en lay-out is niet gecoördineerd.

Dit magazijnHet is voorbij.Andere organisator 66 DESIGN.md-bestanden, maak je AI agent direct gegenereerdprecisie pixelniveau-UIIk weet het niet.

Wat is DESSIGN.Md?

ONTWERP.md Het nieuwe concept geïntroduceerd door Google Stitch:

  • Pure tekstontwerpsysteem: Markdown bestand definitie UI ontwerp specificaties
  • LLM is het makkelijkst te begrijpen.: Markdown is het beste formaat voor LLM
  • Niet nodig, Figma.: Geen export van ontwerpbestanden, geen JSON schema nodig
  • Invoegen: Zet het in de root directory, AI Agent onmiddellijk begrijpen

Vergelijking:

Documentatie Wie zal het lezen? Wat definiëren?
AGENTES.md Secties Project bouwen
ONTWERP.md Ontwerpbesluiten Hoe het project moet worden gepresenteerd

66 ontwerpsystemen

Het is beschikbaar-design-md66 direct beschikbare DESIGN.md bestandenOp alle gebieden:

AI Corporation

  • Claude, OpenAI, Cohere, Elf Labs, Mistral AI, XAI, enz.
  • Google Gemini, samen AI, VoltAgent, enz.

Ontwikkelhulpmiddel

  • Vercel, Cursor, Raycast, Warp, Liefdevol, Expo
  • Supabese, Stanley, Linear, PostHog, Sanity, enz.

Financiële technologie

  • Stripe, Coinbase, Binance, Revolut, Wise
  • Kraken, Airtable, enz.

Merk website

  • Apple, Tesla, Nike, BMW, Ferrari, Lamborghini
  • Spotify, Airbnb, Pinterst, Uber, The Verge, etc.

Ontwerpgereedschap

  • Figma, Framer, Miro, Webflow, Notion, enz.

Gebruiksmethoden

Drie stappen.:

# 1. 复制 DESIGN.md 到项目根目录
# 比如：复制 vercel/DESIGN.md 到你的项目

# 2. 告诉 AI Agent 使用这个设计
"用 DESIGN.md 的设计规范，帮我生成一个首页"

# 3. AI Agent 生成像素级精确的 UI

Dat is het! AI Agent zal automatisch:

  • Lees DESSIGN.md kleur instructie
  • Juiste lettertypen en tekens toepassen
  • Gebruik de juiste afstand en indeling
  • Genereer onderdelen die passen bij het ontwerpsysteem

Wat bevat DESSIGN.md?

Elk Design.md bevat9 complete ontwerpcode hoofdstukken:

Hoofdstuk Inhoud
Visuele thema's De atmosfeer, dichtheid, ontwerpfilosofie.
2. Kleurnormen Semantische naam + Hex + functierol
3. Lettertyperegels Lettertypefamilie, volledige hiërarchie
4. Componentstijlen Knoppen, kaarten, invoerframes, navigatie, enz.
5. Indelingsprincipe Spatiëringsverhouding, raster, lege filosofie
6. Diepteniveau Schaduwsysteem, oppervlakteniveau
7. Normatieve begeleiding Ontwerp kolommen en omgekeerde modus
Respons Breekpunten, touch targets, vouwstrategieën
Agent Hint Snel kleurreferentie, klaar hint

Elke site bevat

  • ONTWERP.mdOntwerpsysteemdocument (AI-agent gelezen)
  • Het spijt me.Visueel voorbeeld (kleur, lettertype, componenten)
  • Ik weet het niet.: Dark Mode Preview

Voorbeeld ontwerpsysteem

Verschillende klassieke voorbeelden:

Vercel.

  • Zwart-witprecisie, geist-lettertype
  • Extreme eenvoud, codeprioriteit

Appel.

  • Een groot aantal witte, SF Pro lettertypen
  • Foto's op filmniveau, geavanceerde zintuigen.

Stripe.

  • Signic paars kleurverloop
  • Gewicht-300.

Tesla.

  • Extreem gereduceerd ontwerp
  • Film-level full-screen fotografie, Universal Sans

Samenvatting

Ik weet niet wat ik moet zeggen. Verander volledig zoals AI de frontend schrijft:

  • 66 direct beschikbare DESIGN.md bestanden
  • Dekking van AI bedrijven, ontwikkelaars ' instrumenten, financiën, merken, enz.
  • Pure Markdown formaat, LLM best begrepen
  • Drie stappen is genoeg: Kopieer Zoom naar Project Zoom AI Genereren Perfecte UI
  • Google Stitch concept, officieel ondersteund

Sindsdien schreef AI de voorkant niet meer lelijk.

GitHub:https://github.com/VoltAgent/awasome-design-md

Google Stitch:https://stitch.withgoogle.com/docs/design-md/overview/