C✳CODEZ.WIN
🌐 हिन्दी

स्थानीयकृत पठन मार्गदर्शिका

frontend-designउद्देश्य, उपयोग और स्रोत

उच्च डिज़ाइन गुणवत्ता वाले विशिष्ट, उत्पादन-स्तरीय फ्रंटएंड इंटरफेस बनाएं। इस कौशल का उपयोग तब करें जब उपयोगकर्ता वेब कंपोनेंट, पेज, आर्टिफैक्ट, पोस्टर या एप्लिकेशन बनाने के लिए कहे (उदाहरणों में वेबसाइट, लैंडिंग पेज, डैशबोर्ड, रिएक्ट कंपोनेंट आदि शामिल हैं)।HTML/CSSलेआउट, या जबstyling/beautifyingकिसी भी वेब यूआई के लिए उपयुक्त कोड और यूआई डिज़ाइन तैयार करता है जो सामान्य एआई सौंदर्यशास्त्र से बचता है।

स्रोत प्राप्त किया गया:

स्रोत रिपॉज़िटरी
vercel-labs/open-agents
SKILL.md
.agents/skills/frontend-design/SKILL.md
रिपॉज़िटरी Star
5,871
रिपॉज़िटरी का अंतिम अपडेट
2026-08-29
क्षमता वर्गीकरण
डिज़ाइन
अंतिम संग्रह समय

लाइसेंस: MIT

वर्कफ़्लो के अंश केवल पढ़ने में सहायता के लिए हैं, कोडेज़ से निष्पादन योग्य निर्देश नहीं हैं। इस पृष्ठ को बनाने के लिए किसी तृतीय-पक्ष स्किल का उपयोग नहीं किया गया है।

नीचे दिए गए उद्देश्य और कार्यप्रणाली संबंधी अंश प्रारंभिक सामग्री हैं, जिन्हें पढ़ने के लिए व्यवस्थित और अनुवादित किया गया है। ये अलग से लेबल किए गए कोडेज़ संपादकीय विश्लेषण से भिन्न हैं।

यह कौशल क्या करता है

उच्च डिज़ाइन गुणवत्ता वाले विशिष्ट, उत्पादन-स्तरीय फ्रंटएंड इंटरफेस बनाएं। इस कौशल का उपयोग तब करें जब उपयोगकर्ता वेब कंपोनेंट, पेज, आर्टिफैक्ट, पोस्टर या एप्लिकेशन बनाने के लिए कहे (उदाहरणों में वेबसाइट, लैंडिंग पेज, डैशबोर्ड, रिएक्ट कंपोनेंट आदि शामिल हैं)।HTML/CSSलेआउट, या जबstyling/beautifyingकिसी भी वेब यूआई के लिए उपयुक्त कोड और यूआई डिज़ाइन तैयार करता है जो सामान्य एआई सौंदर्यशास्त्र से बचता है।

अपस्ट्रीम वर्कफ़्लो कैसे काम करता है

अवलोकन

यह कौशल विशिष्ट, उत्पादन-स्तरीय फ्रंटएंड इंटरफेस बनाने में मार्गदर्शन करता है जो सामान्य "एआई स्लोप" सौंदर्यशास्त्र से बचते हैं। सौंदर्य संबंधी बारीकियों और रचनात्मक विकल्पों पर असाधारण ध्यान देते हुए वास्तविक कार्यशील कोड लागू करें। उपयोगकर्ता फ्रंटएंड संबंधी आवश्यकताएं प्रदान करता है: एक घटक, पृष्ठ, एप्लिकेशन या इंटरफेस जिसे बनाना है। इसमें उद्देश्य, लक्षित समूह या तकनीकी बाधाओं के बारे में संदर्भ शामिल हो सकता है।

ऊपर की ओर मार्ग · L6 ↗

सोच को आकार दें

कोडिंग शुरू करने से पहले, संदर्भ को समझें और एक साहसिक सौंदर्यपरक दिशा तय करें: उद्देश्य: यह इंटरफ़ेस किस समस्या का समाधान करता है? इसका उपयोग कौन करता है?

ऊपर की ओर मार्ग · L10 ↗

फ्रंटएंड सौंदर्यशास्त्र दिशानिर्देश

टाइपोग्राफी: ऐसे फ़ॉन्ट चुनें जो सुंदर, अनोखे और दिलचस्प हों। एरियल और इंटर जैसे सामान्य फ़ॉन्ट से बचें; इसके बजाय ऐसे विशिष्ट फ़ॉन्ट चुनें जो फ्रंटएंड की सुंदरता को बढ़ाएं; अप्रत्याशित और विशिष्ट फ़ॉन्ट चुनें। एक विशिष्ट डिस्प्ले फ़ॉन्ट के साथ एक परिष्कृत बॉडी फ़ॉन्ट का संयोजन करें। रंग और थीम: एक सुसंगत सौंदर्यबोध अपनाएं। एकरूपता के लिए CSS वैरिएबल का उपयोग करें। तीखे लहजे वाले प्रमुख रंग, हल्के और समान रूप से वितरित रंगों की तुलना में बेहतर प्रदर्शन करते हैं।

ऊपर की ओर मार्ग · L26 ↗

आवश्यकताएँ और सेटअप

इस फ़ाइल से कोई संक्षिप्त आवश्यकताएँ नहीं चुनी गईं। इसका मतलब यह नहीं है कि स्किल की कोई निर्भरता नहीं है। रिपॉजिटरी सेटअप निर्देशों और संदर्भित फ़ाइलों की जाँच करें।

सीमाएं और गुणवत्ता जांच

इस फ़ाइल से कोई अलग सीमा अंश नहीं चुना गया है। इसका मतलब यह नहीं है कि यह स्किल हर इनपुट या वातावरण के लिए सुरक्षित है। संपूर्ण स्रोत की समीक्षा करें और अपने परिणाम की पुष्टि करें।

सुरक्षित परीक्षण से शुरुआत करें

  1. समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
  2. एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
  3. डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
  4. स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।

कौशल प्रारूप और निर्देशिका विनिर्देश ↗

मूल लेख में आगे पढ़ें

अनुवाद और दायरा

यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।

यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।

पिन किया गया स्रोत
मूल लेख पढ़ें ↗
स्रोत प्राप्त किया गया
स्रोत कमिट
cf865e94de7729751c747171785b6ce57e7b178c
स्रोत SHA-256
1bb3263d490c2585bf64a4e399ab28650a5034d7705abdbbe82a5a9dce1e6873
संपूर्ण कौशल सूची पर वापस जाएँ