Awesome Design.MD - Menerapkan sistem desain situs web terkenal ke situs saya

 (github.com/VoltAgent)
118 poin oleh xguru 2026-04-06 | 5 komentar | Bagikan ke WhatsApp
  • DESIGN.md adalah konsep yang diperkenalkan oleh Google Stitch, yaitu dokumen desain berbasis teks agar agen AI dapat membacanya dan menghasilkan UI yang konsisten
  • Tanpa Figma, skema JSON, atau tooling terpisah, cukup salin satu file Markdown ke root proyek, maka agen coding AI langsung mengenali gaya UI
  • Berpasangan dengan AGENTS.md yang sudah ada, DESIGN.md mendefinisikan tampilan visual dan nuansanya
  • Setiap file terdiri dari 9 bagian standar seperti palet warna, tipografi, styling komponen, layout, perilaku responsif, dan lainnya
  • Untuk setiap situs disediakan paket 3 file: DESIGN.md + preview.html + preview-dark.html
  • Memuat sistem desain dari lebih dari 60 layanan di kategori AI, alat pengembang, fintech, dan enterprise seperti Claude, Vercel, Stripe, Notion, Figma, Cursor, dan lainnya
    • Salin DESIGN.md dari situs yang diinginkan ke root proyek, lalu instruksikan agen AI untuk membangun UI dengan merujuk pada file tersebut
    • Cukup dengan satu kalimat, "Tolong buat halaman yang terlihat seperti ini", UI yang sesuai dengan situs aslinya bisa dihasilkan
  • Lisensi MIT

Struktur tiap file DESIGN.md

  • Mengikuti format Stitch DESIGN.md dan diperluas menjadi 9 bagian berikut

    Iklan
    # Bagian Isi yang dicakup
    1 Visual Theme & Atmosphere Mood, kepadatan, filosofi desain
    2 Color Palette & Roles Nama warna + HEX + peran fungsional
    3 Typography Rules Font family, tabel hierarki keseluruhan
    4 Component Stylings Tombol, kartu, input, navigasi, dan status
    5 Layout Principles Skala jarak, grid, filosofi whitespace
    6 Depth & Elevation Sistem bayangan, hierarki surface
    7 Do's and Don'ts Panduan desain dan antipola
    8 Responsive Behavior Breakpoint, target sentuh, strategi penyusutan
    9 Agent Prompt Guide Referensi cepat warna, prompt siap pakai

Koleksi yang disertakan

  • AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
  • Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
  • Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
  • Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
  • Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
  • Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber

Bacaan terkait

5 komentar

 
hidarite 2026-04-06

Konsepnya bagus dan tampaknya bermanfaat, tetapi... Desain web juga tentu punya hak cipta, jadi saya penasaran apakah menyalin dan menerapkannya secara utuh seperti ini tidak menimbulkan masalah hak cipta, atau setidaknya masalah etika profesional.
 
tsboard 2026-04-12

Saya juga langsung terpikir hal yang sama. Akhir-akhir ini rasanya layanan atau agen AI begitu saja diasumsikan berada dalam kondisi memiliki semacam kewenangan ekstra-legal. Apa tidak apa-apa berjalan seperti ini dengan keadaan setengah menutup mata? ...
 
kaydash 2026-04-07

Bagus. Orang-orang yang mengerjakan frontend dan desain biasanya memang menyiapkan hal seperti ini terlebih dahulu sebelum mulai.
 
m00nlygreat 2026-04-06

Tapi biasanya design system ada di dalam framework frontend dalam bentuk potongan kode, jadi bukankah ini seharusnya digunakan secara bersama-sama..?

Mengikuti DESIGN.md terdengar seperti berarti warna dan instruksi terkait akan dibuat secara arbitrer setiap kali ...
 
hmmhmmhm 2026-04-06

Menurut saya, akan bagus jika ini digunakan bukan sekadar untuk menyalin, melainkan untuk menciptakan sistem desain baru berdasarkan berbagai sistem desain.