48K Star Repository: 66 designových systémů k zastavení AI psaní frontends
Vyřešit problém AI psaní frontend UI ošklivé: eyesome-design-md
Al, co je s tím předním koncem?UI je ošklivá.Nevím. Rozhraní předního konce generované AI agentem často postrádá smysl pro design, barevný mix je zmatený a rozložení není koordinováno.
Tento skladJe konec.Ostatní organizátor 66 DESIGN.md soubory, aby vaše AI Agent přímo generovalpixel- level precision UINevím.
Co je DESSIGN.MD?
DESIGN.md Nový koncept společnosti Google Stitch:
- Čistý textový design: Specifikace návrhu souboru Markdown
- LLM je nejjednodušší pochopit.: Markdown je nejlepší formát pro LLM
- Není třeba, Figmo.: Žádný vývoz designových souborů, žádná potřeba schématu JSON
- Vložit: Dejte to do kořenového adresáře, AI agent okamžitě pochopit
Srovnání:
| Dokumentace | Kdo to bude číst? | Definovat co? |
|---|---|---|
| AGENTS.md | Oddíl | Jak vytvořit projekt |
| DESIGN.md | Designové akty | Způsob prezentace projektu |
66 konstrukční systémy
Je k dispozici-design- md66 snadno dostupných souborů DESIGN.mdVe všech oblastech:
AI Corporation
- Claude, OpenAI, Cohere, Jedenáct Labs, Mistral AI, XAI, atd.
- Google Gemini, Společně AI, VoltAgent, atd.
Nástroj pro vývojáře
- Vercel, Cursor, Raycast, Warp, Loveable, Expo
- Supabese, Stanley, Linear, PostHog, Sanity, atd.
Finanční technologie
- Stripe, Coinbase, Binance, Revolut, Wise
- Kraken, Airtable, atd.
Webové stránky značky
- Apple, Tesla, Nike, BMW, Ferrari, Lamborghini
- Spotify, Airbnb, Pinterst, Uber, The Verge, atd.
Designový nástroj
- Figma, Framer, Miro, Webflow, Notion, atd.
Použití metod
Tři kroky.:
# 1. 复制 DESIGN.md 到项目根目录 # 比如：复制 vercel/DESIGN.md 到你的项目 # 2. 告诉 AI Agent 使用这个设计 "用 DESIGN.md 的设计规范，帮我生成一个首页" # 3. AI Agent 生成像素级精确的 UI
To je ono! AI agent bude automaticky:
- Čtěte DessiGN.md barevný návod
- Použít správná písma a znaky
- Použijte správný rozchod a rozvržení
- Generovat komponenty, které vyhovují konstrukčnímu systému
Co obsahuje DESSIGN.md?
Každý DESIGN.md obsahuje9 kompletní kapitola designového kódu:
| Kapitola | Obsah |
|---|---|
| Vizuální témata | Atmosféra, hustota, filozofie designu. |
| 2. Barevné normy | Semantické jméno + hex + funkce |
| 3. Pravidla písma | Rodina písma, kompletní hierarchie |
| 4. Styly komponent | Knoflíky, karty, vstupní rámy, navigace atd. |
| 5. Zásada rozložení | Proměnný poměr, mřížka, prázdná filozofie |
| 6. Hloubka | Stínový systém, hladina povrchu |
| 7. Normativní pokyny | Konstrukční sloupce a reverzní režim |
| Odpověď | Breakpointy, dotykové cíle, skládací strategie |
| Agent Tint | Rychlý odkaz na barvu, připraven náznak |
Všechny stránky obsahují
- DESIGN.mdDesignový systémový dokument (AI Agent read)
- Omlouvám se.Vizuální náhled (barva, písmo, komponenty)
- Nevím.: Náhled v tmavém režimu
Příklad Design System
Několik klasických příkladů:
Vercel.
- Black & White Precision, Geist Font
- Extrémní jednoduchost, priorita kódu
Jablko.
- Velký počet bílých písem SF Pro
- Filmové obrázky, pokročilé smysly.
Stripe.
- Signický fialový gradient
- Váha -300.
Tesla.
- Extrémně snížený design
- Film- level full- screen photography, Universal Sans
Shrnutí
Nevím, co říct. Změnit úplně způsob, jakým AI píše frontend:
- 66 snadno dostupných souborů DESIGN.md
- Pokrytí společností AI, nástrojů vývojářů, financí, značek atd.
- Pure Markdown formát, LLM nejlepší pochopit
- Tři kroky stačí: Kopírovat zoom na projekt zoom AI generovat perfektní UI
- Google Stitch koncept, oficiálně podporován
Od té doby, AI napsal přední konec už není ošklivý.
GitHub:Viz poznámka pod čarou1.
Google Stitch:Viz poznámka pod čarou č.1.