Awesome Design.MD - मशहूर वेबसाइटों के design system को अपनी साइट पर लागू करें

 (github.com/VoltAgent)
118 पॉइंट द्वारा xguru 2026-04-06 | 5 टिप्पणियां | WhatsApp पर शेयर करें
  • DESIGN.md Google Stitch द्वारा पेश किया गया एक कॉन्सेप्ट है, जो AI agents के पढ़ने और एकसमान UI बनाने के लिए text design document का काम करता है
  • Figma, JSON schema, या अलग tooling के बिना, सिर्फ एक Markdown file को project root में कॉपी करते ही AI coding agents तुरंत UI style पहचान लेते हैं
  • यह मौजूदा AGENTS.md के साथ एक जोड़ी बनाता है, और DESIGN.md visual look and feel को परिभाषित करता है
  • हर file में color palette, typography, component styling, layout, responsive behavior आदि के लिए 9 standard sections शामिल हैं
  • हर साइट के लिए DESIGN.md + preview.html + preview-dark.html का 3-file set दिया जाता है
  • Claude, Vercel, Stripe, Notion, Figma, Cursor आदि सहित AI·developer tools·fintech·enterprise की 60 से अधिक services के design systems शामिल हैं
    • जिस साइट का DESIGN.md चाहिए, उसे project root में कॉपी करें और AI agent को उस file को refer करके UI build करने को कहें
    • सिर्फ "ऐसा दिखने वाला पेज बना दो" कहने भर से मूल साइट से मेल खाता UI बनाया जा सकता है
  • MIT license

हर DESIGN.md file की संरचना

  • Stitch DESIGN.md format का पालन करते हुए, इसे नीचे दिए गए 9 sections तक विस्तारित किया गया है

    # सेक्शन शामिल सामग्री
    1 Visual Theme & Atmosphere mood, density, design philosophy
    2 Color Palette & Roles color name + HEX + functional role
    3 Typography Rules font family, full hierarchy table
    4 Component Stylings button, card, input, navigation और states
    5 Layout Principles spacing scale, grid, whitespace philosophy
    6 Depth & Elevation shadow system, surface hierarchy
    7 Do's and Don'ts design guidelines और anti-patterns
    8 Responsive Behavior breakpoint, touch target, shrink strategy
    9 Agent Prompt Guide color quick reference, तुरंत उपयोग योग्य prompts

शामिल collections

  • 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

संबंधित पढ़ाई

5 टिप्पणियां

 
hidarite 2026-04-06

कॉन्सेप्ट अच्छा है और उपयोगी भी लग सकता है, लेकिन...
वेब डिज़ाइन पर भी कॉपीराइट होता होगा,
तो इसे इस तरह पूरा का पूरा कॉपी करके लागू करने में क्या कॉपीराइट की समस्या नहीं होगी, या व्यावसायिक नैतिकता की समस्या नहीं होगी, यह जानने की जिज्ञासा है।
 
tsboard 2026-04-12

मुझे भी यही बात तुरंत दिमाग में आई। आजकल लगता है कि AI services या agents के पास जैसे कोई extra-legal authority है, इसे बस मानकर चला जा रहा है। क्या इस तरह आधी आंखें बंद करके आगे बढ़ना ठीक है? ऐसा लगता है...
 
kaydash 2026-04-07

अच्छा है। फ्रंटएंड और डिज़ाइन करने वाले लोग तो ऐसी चीज़ें पहले से बनाकर ही शुरू करते हैं।
 
m00nlygreat 2026-04-06

लेकिन आमतौर पर frontend framework के अंदर design system code snippets के रूप में होता है, तो क्या इसे common तौर पर इस्तेमाल नहीं करना चाहिए..?

DESIGN.md को फॉलो करने का मतलब कुछ ऐसा लगता है कि हर बार उन colors और guidelines को मनमाने ढंग से generate किया जाएगा ...
 
hmmhmmhm 2026-04-06

यह सिर्फ कॉपी करने के बजाय, कई design systems के आधार पर एक नया design system बनाने के काम में इस्तेमाल हो तो अच्छा लगेगा।