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

 (github.com/VoltAgent)
118 पॉइंट द्वारा xguru 26 일 전 | अभी कोई टिप्पणी नहीं है. | 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

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

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.