Stylepack
मुफ़्त: रोज़ 3 पैक, मुफ़्त अकाउंट के साथ 10

किसी भी वेबसाइट को डिज़ाइन पैक में बदलें, जिससे आपका AI बनाए

URL पेस्ट करें। Stylepack पेज को वैसे ही मापता है जैसे वह रेंडर होता है (रंग, टाइपोग्राफ़ी, spacing, radius, shadows, कंपोनेंट) और यह भी कि वह कैसे व्यवहार करता है: hover और focus, मेन्यू और tooltip, दूसरी थीम और चार स्क्रीन चौड़ाइयाँ। आपको एक zip में मिलते हैं DESIGN.md, BEHAVIOR.md, tokens, Tailwind थीम, SKILL.md और स्क्रीनशॉट।

अंदाज़े से नहीं, माप से

हर मान लाइव पेज से लिया जाता है और उसे इस आधार पर तौला जाता है कि स्क्रीन पर असल में क्या है। स्क्रीनशॉट से अंदाज़ा नहीं, और कोई मॉडल अपनी तरफ़ से hex कोड नहीं गढ़ता।

सिर्फ़ रंग नहीं, व्यवहार भी

Hover और focus states, tooltip की जगह और fade का समय, मेन्यू, scroll reveal, sticky chrome, टेबल, फ़ॉर्म, टेक्स्ट wrapping, डार्क मोड और हर breakpoint।

एजेंट के लिए तैयार फ़ॉर्मैट

Google का DESIGN.md, SKILL.md, W3C tokens, CSS variables और Tailwind v4 थीम। फ़ोल्डर प्रोजेक्ट में डालें और अपने एजेंट से उसे पढ़ने को कहें।

किसी भी वेबसाइट से design system निकालें

  1. URL पेस्ट करें

    कोई भी सार्वजनिक वेबसाइट, जैसे stripe.com। docs.stripe.com जैसे सबडोमेन अलग साइट गिने जाते हैं।

  2. साइट को मापने दें

    पेज एक असली ब्राउज़र में खुलता है, चार स्क्रीन चौड़ाइयों पर और दोनों थीम में। एक मिनट से कम में पैक तैयार हो जाता है।

  3. अपने AI को सौंपें

    zip डाउनलोड करें, फ़ोल्डर अपने प्रोजेक्ट में रखें और एजेंट से कहें कि कोई भी कोड लिखने से पहले DESIGN.md और BEHAVIOR.md पढ़े।

पैक में क्या है

एक फ़ोल्डर, किसी भी AI कोडिंग एजेंट या चैट ऐप के लिए तैयार।

DESIGN.md
Google के DESIGN.md format में design system: रंग, टाइपोग्राफ़ी, spacing, radius, shadows और कंपोनेंट।
BEHAVIOR.md
Hover, focus, tooltip, मेन्यू, मोशन, स्क्रॉलिंग, टेबल, फ़ॉर्म, टेक्स्ट wrapping, रेस्पॉन्सिव नियम और डार्क मोड।
SKILL.md
Claude Code और Cursor के लिए एक skill, जो एजेंट को पैक सही क्रम में पढ़ने का रास्ता दिखाती है।
tokens.json
Style Dictionary और Figma token plugins के लिए W3C design tokens (DTCG)।
tokens.css
हर मान CSS custom properties के रूप में।
tailwind.css
वही मान Tailwind v4 @theme ब्लॉक के रूप में।
screenshots/
साइट 1440, 1024, 768 और 390 पिक्सेल चौड़ाई पर, और दूसरी थीम भी, अगर हो।
README.md, PROMPT.md
हर AI टूल को पैक कैसे सौंपें, और पेस्ट करने वाला prompt।

आप जो AI टूल पहले से इस्तेमाल करते हैं, उनके साथ काम करता है

हर एक के लिए चरण दर चरण गाइड:

उदाहरण डिज़ाइन पैक

पूरी गैलरी देखें
linear.app का होम पेज
linear.app
Inter Variable + Berkeley Mono
SaaS और प्रोडक्टिविटीडार्क + लाइट
resend.com का होम पेज
resend.com
domaine + aBCFavorit
डेवलपर टूल्सडार्क + लाइट
supabase.com का होम पेज
supabase.com
Manrope + Inter
डेवलपर टूल्सलाइट + डार्क
figma.com का होम पेज
figma.com
figmaSans + figmaMono
डिज़ाइन टूल्सलाइट
framer.com का होम पेज
framer.com
GT Walsheim Medium + Inter Variable
डिज़ाइन टूल्सडार्क
apple.com का होम पेज
apple.com
SF Pro Text + SF Pro Display
कंज़्यूमर टेकडार्क + लाइट
arc.net का होम पेज
arc.net
Marlin Soft SQ + -apple-system
कंज़्यूमर टेकलाइट

सवाल

Stylepack क्या है?

Stylepack (stylepack.ai) एक मुफ़्त वेब टूल है, जो किसी भी सार्वजनिक वेबसाइट को AI कोडिंग एजेंट के लिए डिज़ाइन पैक में बदल देता है: DESIGN.md, BEHAVIOR.md, SKILL.md, design tokens, Tailwind थीम और स्क्रीनशॉट, सब एक zip में।

किसी वेबसाइट का डिज़ाइन Cursor या Claude Code में कैसे कॉपी करूँ?

साइट का पता Stylepack में पेस्ट करें और पैक डाउनलोड करें। फ़ोल्डर अपने प्रोजेक्ट में रखें, फिर एजेंट से कहें कि कुछ भी बनाने से पहले DESIGN.md और BEHAVIOR.md पढ़े और स्क्रीनशॉट देखे। हर पैक के पेज पर सटीक चरण और कॉपी करने के लिए prompt दिया गया है।

DESIGN.md क्या है?

DESIGN.md Google का ओपन format है, जिसमें कोडिंग एजेंट को किसी विज़ुअल पहचान के बारे में एक ही Markdown फ़ाइल में बताया जाता है: रंग, टाइपोग्राफ़ी, spacing, radius, shadows और कंपोनेंट। Stylepack किसी भी सार्वजनिक वेबसाइट के लिए ऐसी फ़ाइल बनाता है।

किसी वेबसाइट से design tokens कैसे निकालूँ?

उसका पता Stylepack में पेस्ट करें। पैक में W3C design tokens format (DTCG) में tokens.json मिलती है, वही मान CSS custom properties के रूप में tokens.css में, और tailwind.css में Tailwind v4 थीम।

BEHAVIOR.md में क्या-क्या है?

साइट कैसे व्यवहार करती है, सिर्फ़ यह नहीं कि वह कैसी दिखती है: hover और focus states, tooltip, मेन्यू, मोशन, स्क्रॉलिंग, टेबल, फ़ॉर्म, टेक्स्ट wrapping, 1440, 1024, 768 और 390 पिक्सेल चौड़ाई पर लेआउट, और डार्क मोड।

क्या यह मुफ़्त है?

हाँ। बिना अकाउंट के रोज़ 3 पैक मिलते हैं और मुफ़्त अकाउंट के साथ रोज़ 10। जो पैक पहले से गैलरी में हैं, वे गिनती में नहीं आते।

यह किन AI टूल के साथ काम करता है?

Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini CLI, ChatGPT, Claude, Gemini, v0, Lovable और Bolt के साथ, या किसी भी और टूल के साथ जो Markdown और CSS पढ़ सकता है।

क्या Stylepack का गैलरी की साइटों से कोई संबंध है?

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