Suomi

← Takaisin luetteloon

48K Star Repository: 66 suunnittelujärjestelmät lopettaa tekoälyn kirjoittaminen etusivut

itadol5j

Nouse-design-md-arkkitehtuuri

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

Mikä etupäässä on vikana?UI on ruma.En tiedä. Tekoälyagentin luomasta etu-päärajapinnasta puuttuu usein suunnittelutajua, värien sekoittaminen on sekavaa ja ulkoasua ei koordinoida.

Tämä varastoSe on ohi.Muu järjestäjä 66 DESIGN.md-tiedostot, tee tekoälyagentti suoraan luotupikselitason tarkkuus UIEn tiedä.

Mikä se on?

SUUNNITTELU.md Google Stitchin uusi konsepti:

  • Puhdas tekstisuunnittelujärjestelmä: Markdown tiedoston määrittely käyttöliittymän suunnittelueritelmät
  • LLM on helpoin ymmärtää.: Markdown on paras muoto LLM
  • Ei tarvitse, Figma.: Ei vienti suunnittelutiedostoja, ei tarvetta JSON skeema
  • Lisää: Laita se juurihakemistoon, tekoälyagentti välittömästi ymmärtää

Vertailu:

Asiakirjat Kuka lukee sen? - Minkä?
AGENTIT.md Pääluokkat Miten rakentaa projektia
SUUNNITTELU.md Suunnittelusäädökset Hankkeen esittelytapa

66 suunnittelujärjestelmät

Se on saatavilla-design-md66 helposti saatavilla olevaa DESIGN.md-tiedostoaKaikilla alueilla:

AI Corporation

  • Claude, OpenAI, Cohere, Eleven Labs, Mistral Al, XAI jne.
  • Google Gemini, yhdessä tekoäly, VoltAgent jne.

Kehittäjätyökalu

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

Rahoitusteknologia

  • Stripe, Coinbase, Binance, Revolut, Viisas
  • Kraken, Airtable jne.

Merkkisivusto

  • Omena, Tesla, Nike, BMW, Ferrari, Lamborghini
  • Spotify, Airbnb, Pinterst, Uber, Verge jne.

Suunnittelutyökalu

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

Käyttömenetelmät

Kolme askelta.:

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

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

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

Nyt riitti! Tekoälyagentti automaattisesti:

  • Lue DESSIGN.md väriopetus
  • Käytä oikeita kirjasimia ja merkkejä
  • Käytä oikeaa väliä ja asettelua
  • Luo suunnittelujärjestelmään sopivat komponentit

Mitä DESSIGN.md sisältää?

Jokainen DESIGN.md sisältää9 täydelliset suunnittelukoodiluvut:

Luku Sisällys
Visuaaliset teemat Ilmakehä, tiheys, suunnittelufilosofia.
2. Värinormit Semanttinen nimi + Hex + tehtävärooli
3. Kirjasinsäännöt Kirjasinperhe, täydellinen hierarkia
4. Komponenttityylit Napit, kortit, syöttökehykset, navigointi jne.
5. Asetteluperiaate Välisuhde, ruudukko, tyhjä filosofia
6. Syvyystaso Varjojärjestelmä, pintataso
7. Säännöllinen ohjaus Suunnittelu sarakkeet ja peruutustila
Vaste Keskeytyspisteet, kosketuskohteet, taittostrategiat
Agentti Vintti Nopea väriviittaus, valmis vihje

Jokainen sivusto sisältää

  • SUUNNITTELU.mdSuunnittelujärjestelmäasiakirja (AI Agent read)
  • Olen pahoillani.Visuaalinen esikatselu (väri, kirjasin, osat)
  • En tiedä.: Pimeän tilan esikatselu

Esimerkkisuunnittelujärjestelmä

Useita klassisia esimerkkejä:

Vercel.

  • Musta ja valkoinen tarkkuus, Geist- kirjasin
  • Äärimmäinen yksinkertaisuus, koodin tärkeys

Omena.

  • Suuri määrä valkoisia, SF Pro -fontteja
  • Elokuvatasoisia kuvia, kehittyneitä aisteja.

Strippaa.

  • Merkillinen violetti kaltevuus
  • Paino 300.

Tesla.

  • Erittäin rajoitettu rakenne
  • Film-tason koko näytön valokuvaus, Universal Sans

Yhteenveto

En tiedä, mitä sanoa. Muuta täysin tekoälyn kirjoitustapa:

  • 66 helposti saatavilla olevaa DESIGN.md-tiedostoa
  • Tekoälyyritysten, kehittäjien välineiden, rahoituksen, tuotemerkkien jne. kattavuus
  • Puhdas Markdown-muoto, LLM parhaiten ymmärretty
  • Kolme vaihetta riittää: Kopioi Suurenna projektiin Zoom AI Luo täydellinen käyttöliittymä
  • Google Stitch -konsepti, virallisesti tuettu

Sen jälkeen tekoäly ei enää kirjoittanut päätään rumaksi.

GitHub:https://github.com/VoltAgent/awasome-design-md

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