Melayu

← Kembali ke senarai

Repositori Bintang '%1' 48K: 66 sistem desain untuk menghentikan frontend penulisan AI

itadol5j

Arsitektur desain-md buatan buatan

🎨 Selesaikan masalah penulisan AI frontend UI jelek: eyesome-design-md

AI, apa masalahnya dengan bagian depan?UI jelek.Aku tidak tahu. Antarmuka depan-ujung depan yang dihasilkan oleh AI Agent sering tidak memiliki rasa desain, campuran warna bingung dan tata letak tidak terkoordinasi.

gudang iniIni sudah berakhir.Penyusun: Berkas 66 DESIGN.md, membuat Agen AI Anda langsung dihasilkanUI presisi tingkat pikselAku tidak tahu.

Ada apa?

DESIGN.md Konsep baru yang diperkenalkan oleh Google Stitch:

  • Sistem Perancangan Teks Murni Cobek: Spesifikasi desain UI definisi berkas Markdown
  • LLM adalah yang paling mudah dipahami.Markdown adalah format terbaik untuk LLM
  • Tak perlu, Figma.Tidak ada ekspor berkas desain, tidak perlu skema JSON
  • MasukkanMasukkan ke dalam root directory, AI Agen segera mengerti

Perbandingan:

Dokumentasi Dokumentasi Dokumentasi Dokumentasi Siapa yang akan membacanya? Tentukan apa?
AGENTS.md Pembagian Membina Projek
DESIGN.md Rancangan Rancangan Buku Bagaimana proyek harus disajikan

Sistem desain 66

Ini ada-desain-mdBerkas-berkas DESIGN.md yang tersedia sebanyak 66 kaliDi semua daerah:

AI Corporation

  • Claude, OpenAI, Cohere, Eleven Labs, Mistral AI, XAI, dll.
  • Dari Google Gemini, Bersama AI, VoltAgent, dll.

Alat pengembang

  • Vercel, Cursor, Raycast, Warp, Loveable, Expo
  • Kesuabese, Stanley, Linear, PostHog, Sanity, dll.

Teknologi Keuangan

  • Jalur, Koinbase, Binance, Revolut, Wise
  • Kraken, Airtable, dll.

Situs web Brand

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

Alat reka bentuk

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

Metode penggunaan

Tiga langkah.KANTOR:

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

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

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

Itu dia! Agen AI akan otomatis:

  • instruksi warna DESSIGN.md Baca PESESGN
  • Terapkan fon dan karakter yang benar
  • Use the right space and layout
  • Hasilkan komponen yang sesuai dengan sistem desain

Apa yang dimaksud dengan DESSIGN.md?

Setiap DESIGN.md berisi\"9 bab kode desain lengkap\"KANTOR:

Chapter Kandungan
Tema-tema visual Atmosfer, kepadatan, filosofi desain.
2. Norma Warna Nama Blog
Aturan font. Keluarga font, hierarki lengkap
Gaya Komponen 4. Button, kartu, bingkai masukan, navigasi, dll.
Prinsip tata letak 5. Rasio Ruangguru, kisi, filsafat kosong
Tingkat kedalaman 6. Sistem Bayangan, permukaan
Bimbingan moral Desain kolom dan mode terbalik
Sambutan Breakpoint, target sentuh, strategi lipatan
Petunjuk Agen Referensi warna cepat, petunjuk siap

📁 Setiap situs memuat

  • DESIGN.mdDokumen sistem desain (AAI Agen baca)
  • Maafkan aku.Prapapar visual (warna, font, komponen)
  • Aku tidak tahu.Pratilik Mode Gelap

Sistem Desain Contoh senam

Beberapa contoh klasik:

Vercel.

  • Presisi Hitam & Putih, Geist Font
  • Kesederhanaan ekstrim, prioritas kode

Apple (dalam bahasa Inggris).

  • Sejumlah besar fon putih, SF Pro
  • Gambar-gambar tingkat-film, indra maju.

Jalur.

  • Gradien ungu signik
  • Berat 300.

Tesla.

  • Desain yang dikurangi secara ekstrem
  • Fotografi layar penuh, Universal Sans

Ringkasan

Aku tak tahu harus berkata apa. Perubahan AI sama sekali cara AI menulis frontendKANTOR:

  • Berkas-berkas DESIGN.md yang tersedia sebanyak 66 kali
  • Keliputan perusahaan AI, instrumen pengembang, keuangan, merek, dll.
  • Format Pure Markdown, LLM terbaik dipahami
  • Sudah cukup tiga langkah: Salin Zoom Ke Proyek Zoom AI Hasilkan UI Sempurna
  • Konsep Google Stitch, didukung secara resmi

Sejak saat itu, AI menulis ujung depan tidak lagi jelek.

GitHubKANTOR:https://github.com/VoltAgent/awa-didesain-md

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