48K Star Repozytorium: 66 systemów projektowania, aby zatrzymać AI pisanie frontends
Rozwiąż problem z AI pisanie frontend UI brzydki: eyesome- design- md
Al, jaki jest problem z przednim końcem?Interfejs jest brzydki.Nie wiem. Interfejs typu front-end generowany przez AI Agent często nie ma poczucia projektowania, mieszanka kolorów jest mylona i układ nie jest skoordynowany.
Ten magazynTo koniec.Inny organizator 66 plików DESIGN.md, aby twój agent AI bezpośrednio wygenerowałPrecyzja poziomu pikseliNie wiem.
Co to jest DESSIGN.MD?
DESIGN.md Nowa koncepcja wprowadzona przez Google Stitch:
- Czysty system projektowania tekstu: Specyfikacja projektowania UI w pliku Markdown
- LLM jest najprostsze do zrozumienia.: Markdown jest najlepszym formatem dla LLM
- Nie ma potrzeby, Figma.: Brak eksportu plików projektowych, brak potrzeby schematu JSON
- Wstaw: Umieść go w katalogu głównym, AI Agent natychmiast zrozumieć
Porównanie:
| Dokumentacja | Kto to przeczyta? | Zdefiniować co? |
|---|---|---|
| AGENTS.md | Sekcje | Jak budować projekt |
| DESIGN.md | Akty projektowe | Sposób przedstawienia projektu |
66 systemów projektowych
Jest dostępny - design- md66 łatwo dostępnych plików DESIGN.mdWe wszystkich obszarach:
AI Corporation
- Claude, OpenAI, Cohere, Eleven Labs, Mistral AI, XAI, itp.
- Google Gemini, Together AI, VoltAgent itp.
Narzędzie programistyczne
- Vercel, Cursor, Raycast, Warp, Loveable, Expo
- Supabese, Stanley, Linear, PostHog, Sanity, itp.
Technologia finansowa
- Stripe, Coinbase, Binance, Revolut, Wise
- Kraken, Airtable itp.
Strona internetowa marki
- Jabłko, Tesla, Nike, BMW, Ferrari, Lamborghini
- Spotify, Airbnb, Pinterst, Uber, Verge, itp.
Narzędzie projektowe
- Figma, Framer, Miro, Webflow, Notion, itp.
Metody stosowania
Trzy kroki.:
# 1. 复制 DESIGN.md 到项目根目录 # 比如：复制 vercel/DESIGN.md 到你的项目 # 2. 告诉 AI Agent 使用这个设计 "用 DESIGN.md 的设计规范，帮我生成一个首页" # 3. AI Agent 生成像素级精确的 UI
To jest to! Agent AI automatycznie:
- Przeczytaj instrukcję koloru DESSIGN.md
- Zastosuj prawidłowe czcionki i znaki
- Użyj odpowiedniego odstępu i układu
- Generowanie elementów pasujących do systemu projektowego
Co zawiera lek DESSIGN.md?
Każdy DESIGN.md zawiera9 pełnych rozdziałów kodu projektu:
| Rozdział | Spis treści |
|---|---|
| Tematy wizualne | Atmosfera, gęstość, filozofia projektowania. |
| 2. Normy kolorów | Nazwa semantyczna + Hex + Rola funkcji |
| 3. Zasady czcionek | Rodzina czcionek, pełna hierarchia |
| 4. Style elementów | Przyciski, karty, ramki wejściowe, nawigacja itp. |
| 5. Zasada układu | Stosunek odstępów, siatka, czysta filozofia |
| 6. Poziom głębokości | Układ cieni, poziom powierzchni |
| 7. Wytyczne normatywne | Kolumny projektowe i tryb wsteczny |
| Odpowiedź | Punkty graniczne, cele dotykowe, strategie składania |
| Agent Hint | Szybkie odniesienie do koloru, gotowe podpowiedź |
Adresaci Każda strona zawiera
- DESIGN.mdDesign system document (AI Agent read)
- Przepraszam.Podgląd wizualny (kolor, czcionka, komponenty)
- Nie wiem.: Podgląd trybu ciemnego
Przykładowy system projektowania
Kilka klasycznych przykładów:
Vercel.
- Czarny i biały Precyzja, Czcionka Geist
- Ekstremalna prostota, priorytet kodu
Jabłko.
- Duża liczba białych, czcionki SF Pro
- Zdjęcia na poziomie filmowym, zaawansowane zmysły.
Stripe.
- Gradient sygnału fioletowego
- Waga - 300.
Tesla.
- Wyjątkowo zmniejszona konstrukcja
- Film- poziom fotografii pełnoekranowej, Universal Sans
Streszczenie
Nie wiem, co powiedzieć. Zmień całkowicie sposób AI pisze frontend:
- 66 łatwo dostępnych plików DESIGN.md
- Zakres działalności firm zajmujących się sztuczną inteligencją, instrumentów deweloperskich, finansów, marek itp.
- Pure Markdown format, LLM najlepiej zrozumiane
- Wystarczy trzy kroki: Skopiuj Zoom do projektu Zoom AI Generuj Perfect Interfejs
- Koncepcja Google Stitch, oficjalnie obsługiwana
Od tego czasu, Al napisał przedni koniec już nie brzydki.
GitHub:https: / / github.com / VoltAgent / awasome- design- md
Google Stitch:https: / / stitch.withgoogle.com / docs / design- md / view /