Filipino

← Bumalik sa listahan

48K Star Repository: 66 sistema ng disenyo upang ihinto ang AI na sumusulat ng mga frontend

itadol5j

Itaas-design-md arkitektura

EXOLELENDE ang problema ng AI na sumusulat ng frontend UI pangit: eyesome-design-md

AI, ano ang problema sa pangharap na dulo?Ang UI ay pangit.Hindi ko alam. Ang front-end interface na nilikha ng AI Agent ay kadalasang kulang ng isang pandama ng disenyo, ang color mix ay nalilito at ang pagkakaayos ay hindi magkakaugnay.

Ang bodegang itoTapos na ito.Iba Pang Organiser 66 DESGN.md files, Gawin mong tuwirang likha ang iyong AI Agent"fixel-level present " UIHindi ko alam.

Ano ang DESSGN.md?

DESIGN.md Ang bagong konsepto na ipinakilala ng Google Stitch:

  • Dalisay na Sistema ng Disenyo ng Teksto: Direksyon ng talaksang quation UI
  • ANGLM ang pinakamadaling maunawaan.: Ang Markdown ang pinakamagandang format para sa LLM
  • Hindi na kailangan, Figma.: Walang pagluluwas ng mga talaksan ng disenyo, walang pangangailangan ng JSON schema
  • Insert: Ilagay ito sa root directory, Agad na naunawaan ng AI Agent

Paghahambing:

Dokumento Sino ang babasa nito? Ano ang ibig sabihin nito?
MGA AGENTE.md Mga Bahagi Kung Paano Magtatayo ng Proyekto
DESIGN.md Kumilos ang Disenyo Kung paano dapat iharap ang proyekto

66 sistema ng pagdidisenyo

Ito ay magagamit-design-md66 na madaling makuhang DESGN.md filesSa lahat ng dako:

AI Corporation

  • Claude, OpenAI, Cohere, Labing-isang Lab, Mistral AI, XAI, atbp.
  • Google Gemini, Together AI, VoltAgent, atbp.

Mas mahusay na kasangkapan

  • Vercel, Cursor, Raycast, Warp, Maiibigan, Expo
  • Supibese, Stanley, Linear, PostHog, Sanidad, atbp.

Teknolohiya sa Pananalapi

  • Stripe, Barangay, Butil, Revolut, Matalino
  • Kraken, Airtable, atbp.

Brand website

  • Apple, Tesla, Nike, BMW, Ferrari, Lamborghini
  • Spotwify, Airbnb, Pinterst, Uber, The Verge, atbp.

Design tool

  • Figma, Framer, Miro, Webflow, Nottion, atbp.

Gumamit ng mga paraan

Tatlong hakbang.:

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

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

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

Iyon ang sagot! Ang AI Agent ay kusang:

  • Basahin ang DESSGN.md na instruksiyon sa kulay
  • Pahiran ng tamang font at character
  • Gamitin ang tamang agwat at pagkakaayos
  • Iuri ang mga sangkap na angkop sa sistema ng disenyo

Ano ang nilalaman ng DESGN.md?

Ang bawat DESGN.md ay naglalaman ng9 kumpletong disenyo ng mga code kabanata:

Kabanata Mga Nilalaman
Nakikitang mga tema Ang atmospera, densidad, pilosopiya ng disenyo.
2. Mga pamantayan ng Colour Pangalang Semantiko + Hex + Papel ng Fuction
3. Magtakda ng mga tuntunin Pamilyang Font, ganap na herarkiya
4. Buttons, card, input frames, nabigasyon, atbp.
5. Simulain sa paglalatag Magandang ratio, grid, maikling pilosopiya
6.Pantay na antas ng hamog Sistema ng Anino, antas ng ibabaw ng lupa
7. Nahuhubog na patnubay Disenyo ng mga haligi at baligtad na mode
Pagtugon Mga Breakpoint, touch targets, tiklop na mga estratehiya
Babala Mabilis na pagtukoy sa kulay, handang pahiwatig

📁 Bawat site ay naglalaman ng

  • DESIGN.mdDesign system document (basahin ng Agent)
  • Ikinalulungkot ko.Nakikitang larawan (kulay, font, mga sangkap)
  • Hindi ko alam.: Ang Dark Mode Preview

Halimbawang Sistema ng Disenyo

Ilang klasikong halimbawa:

Vercel.

  • Black & White Precision, Geist Font
  • Napakasimple, inuuna ang kodigo

Mansanas.

  • Maraming puti, SF Pro fonts
  • Pelikula-level na mga larawan, makabagong mga diwa.

Stripe.

  • Pahilis na kulay - ube
  • Timbang-300.

Tesla.

  • Lubhang nabawasang disenyo
  • Film-level full-screen photography, Universal Sans

Sumaryo

Hindi ko alam kung ano ang sasabihin ko. Lubusang baguhin ang paraan ng pagsulat ng AI sa harap:

  • 66 na madaling makuhang DESGN.md files
  • Pabalat ng mga kompanya ng AI, mga instrumento ng mga developer, pananalapi, brands, atbp.
  • Dalisay na Markdown format, LLM na mas naiintindihan
  • Ang tatlong hakbang ay sapat na: Kopya Zoom To Project Zoom AI Generate Perfect UI
  • Google Stitch konsepto, opisyal na suportado

Mula noon, isinulat ng AI ang pangharap na dulo na hindi na pangit.

GitHub:Mga http://gothub.com/VoltAgent/awasome-design-md

Tumugtog ang Google:Mga http://stitch.withgoogle.com/docs/design-md/overview/