Română

← Înapoi la listă

Depozitul stelar 48K: 66 de sisteme de proiectare pentru a opri scrierea frontendurilor AI

itadol5j

Arhitectura de proiectare-md

🎨 Solve the problem of AI writing frontend UI ugly: eyesome-design-md

Al, care e problema cu partea din faţă?Ul este urât.Nu ştiu. Interfața față-end generată de agentul AI îi lipsește adesea un sentiment de proiectare, amestecul de culori este confuz și aspectul nu este coordonat.

Acest depozitS-a terminat.Alt organizator 66 Fișiere design.md, face agentul AI generat directUI de precizie la nivel de pixelNu ştiu.

Ce este DESSIGN.md?

Design.md Noul concept introdus de Google Stitch:

  • Sistem de proiectare a textului pur: Marcare definitie fisier UI specificatii de proiectare
  • LLM este cel mai uşor de înţeles.: Markdown este cel mai bun format pentru LLM
  • Nu e nevoie, Figma.: Nici un export de fișiere de proiectare, nici o nevoie de schema JSON
  • Inserează: Pune-l în directorul rădăcină, AI agentul înțelege imediat

Comparație:

Documentație Cine o va citi? Defineşte ce?
Agents.md Secţiuni Cum se construiește proiectul
Design.md Acte de proiectare Cum ar trebui prezentat proiectul

66 sisteme de proiectare

Este disponibil-design-md66 fișiere Design.md disponibileÎn toate domeniile:

Al Corporation

  • Claude, OpenAI, Cohere, Eleven Labs, Mistral AI, XAI, etc.
  • Google Gemeni, Împreună AI, VoltAgent etc.

Instrumentul dezvoltatorului

  • Vercel, Cursor, Raycast, Warp, Loveable, Expo
  • Supabese, Stanley, Linear, PostHog, Sanity, etc.

Tehnologia financiară

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

Site-ul web al mărcii

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

Unealtă de proiectare

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

Metode de utilizare

Trei paşi.:

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

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

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

Asta e! Agent AI va automat:

  • Citiţi instrucţiunile de culoare DESSIG.md
  • Aplică fonturi și caractere corecte
  • Utilizați distanța corectă și dispunerea
  • Generează componente care se potrivesc sistemului de proiectare

Ce conține DESSsign.md?

Fiecare Design.md conține9 capitole complete de cod de proiectare:

Capitolul Cuprins
Teme vizuale Atmosfera, densitatea, filozofia de design.
2. Norme de culoare Denumire semantică + Hex + rol funcție
3. Reguli de font Familie de fonturi, ierarhie completă
4. Stiluri componente Butoni, carduri, cadre de intrare, navigare etc.
5. Principiul de aranjament Raportul de spaţiere, grilă, filosofie în alb
6. Nivelul adâncimii Sistem de umbră, nivel de suprafață
7. Ghiduri normative Coloane de proiectare și mod invers
Răspuns Puncte de oprire, obiective tactile, strategii de pliere
Agent Sugestie Referinţă rapidă la culoare, indiciu gata

Fiecare site conţine

  • Design.mdDocument de sistem de proiectare (Citește agentul AI)
  • Îmi pare rău.Previzualizare vizuală (color, font, componente)
  • Nu ştiu.: Previzualizare în modul închis

Exemplu de sistem de proiectare

Câteva exemple clasice:

Vercel.

  • Black & White Precision, Geist Font
  • Simplitate extremă, prioritate cod

Măr.

  • Un număr mare de alb, fonturi SF Pro
  • Imagini la nivel de film, simţuri avansate.

Stripe.

  • Gradient purpuriu semnic
  • Greutate 300.

Tesla.

  • Design extrem de redus
  • Fotografie cu ecran complet, Universal Sans

Rezumat

Nu ştiu ce să spun. Schimbă complet modul în care AI scrie frontend:

  • 66 fișiere Design.md disponibile
  • Acoperirea întreprinderilor AI, instrumentele dezvoltatorilor, finanţele, mărcile etc.
  • Format Markdown pur, LLM cel mai bine înțeles
  • Trei pași este suficient: Copy Zoom To Project Zoom AI Generează UI perfectă
  • Conceptul Google Stitch, susținut oficial

De atunci, AI a scris partea din față nu mai urât.

GitHub:A se vedea, de asemenea, Decizia nr.

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