Paper: नया AI डिज़ाइन ऐप जिसकी हर तरफ चर्चा हो रही है
원제 · Paper: The new AI design app everyone's talking about
핵심 요약
पेपर AI-संचालित डिज़ाइन और कोडिंग के बीच के अंतर को समाप्त करता है, जिससे डेवलपर्स केवल प्रॉम्प्ट के माध्यम से उच्च-गुणवत्ता वाले UI डिज़ाइन बना सकते हैं और उन्हें तुरंत कार्यात्मक कोड में बदल सकते हैं।
하이라이트
पेपर एक नया AI डिज़ाइन टूल है जो फिग्मा के समान है लेकिन इसे क्लॉड कोड या कर्सर के माध्यम से नियंत्रित किया जा सकता है।
उपयोगकर्ता MCP सर्वर का उपयोग करके पेपर को अपने स्थानीय विकास परिवेश से जोड़ सकते हैं और सीधे टर्मिनल से डिज़ाइन बना सकते हैं।
यह टूल प्रॉम्प्ट के आधार पर पेशेवर डिज़ाइन सिस्टम, लैंडिंग पेज और डैशबोर्ड तेज़ी से उत्पन्न करने में सक्षम है।
डिज़ाइन किए गए घटकों को 'Copy as Tailwind' या 'Copy as React CSS' विकल्पों के साथ सीधे कोड बेस में पेस्ट किया जा सकता है।
पेपर में 'नैनो बनाना प्रो' जैसे मॉडल का उपयोग करके AI इमेज जेनरेशन और विशिष्ट विज़ुअल इफेक्ट्स बनाने की सुविधा भी है।
इसमें एक 'यूनिफ़ॉर्म कलर पिकर' है जो फिग्मा और वास्तविक वेबसाइट के बीच रंगों की विसंगति को दूर करता है।
타임라인
पेपर AI का परिचय और सेटअप
वीडियो की शुरुआत पेपर के परिचय से होती है, जिसे फिग्मा के विकल्प के रूप में प्रस्तुत किया गया है जो विशेष रूप से क्लॉड कोड और कर्सर जैसे AI कोड एडिटर के लिए बनाया गया है। वक्ता बताते हैं कि वर्सेल और ज़ेड जैसी बड़ी कंपनियाँ पहले से ही इसका उपयोग कर रही हैं, जो इसकी विश्वसनीयता को दर्शाता है। सेटअप प्रक्रिया के दौरान, उपयोगकर्ता को paper.design/downloads से ऐप डाउनलोड करना होता है और फिर एक MCP सर्वर इंस्टॉल करना होता है। यह सर्वर स्थानीय रूप से चलता है और पेपर डेस्कटॉप ऐप को AI टूल्स के साथ जोड़ता है। यह शुरुआती चरण यह सुनिश्चित करने के लिए महत्वपूर्ण है कि AI आपके कंप्यूटर पर डिज़ाइन प्रोजेक्ट्स को एक्सेस और संशोधित कर सके।
मल्टी-विंडो डेमो और प्रॉम्प्टिंग
इस खंड में, वक्ता Tmux और घोस्टी टर्मिनल का उपयोग करके एक साथ कई डिज़ाइन टास्क चलाने का प्रदर्शन करते हैं। वे एक ही समय में एक्सपेंस ट्रैकिंग ऐप, लैंडिंग पेज, फाइनेंस डैशबोर्ड और ट्विटर जैसे सोशल ऐप के लिए डिज़ाइन सिस्टम बनाने के निर्देश देते हैं। क्लॉड कोड इन प्रॉम्प्ट्स को प्रोसेस करता है और पेपर ऐप के भीतर 'वेलकम टू पेपर' प्रोजेक्ट में ऑटोमैटिक रूप से घटक जोड़ना शुरू कर देता है। यह समानांतर कार्यप्रणाली दिखाती है कि यह टूल कितना शक्तिशाली और समय बचाने वाला हो सकता है। वक्ता यह भी दिखाते हैं कि कैसे AI डिज़ाइन ब्रीफ और कलर पैलेट के बारे में सोचता है और उन्हें व्यवस्थित करता है।
डिज़ाइन का संपादन और अनुकूलन
यहाँ जेनरेट किए गए डिज़ाइनों की गुणवत्ता का विश्लेषण किया गया है, जहाँ एक्सपेंस ट्रैकिंग ऐप और लैंडिंग पेज काफी पेशेवर दिखते हैं। वक्ता बताते हैं कि पेपर का इंटरफ़ेस फिग्मा से बहुत मिलता-जुलता है, जिससे फिग्मा उपयोगकर्ताओं के लिए इसे अपनाना आसान हो जाता है। आप मैन्युअल रूप से घटकों को बदल सकते हैं, जैसे कि किसी सेक्शन को हटाना या टेक्स्ट को अपडेट करना, और AI बैकग्राउंड में इन बदलावों को प्रोसेस करता रहता है। सोशल ऐप के लिए बनाया गया डिज़ाइन सिस्टम इतना सटीक है कि वक्ता का मानना है कि इसके लिए किसी पेशेवर डिज़ाइनर को हज़ारों डॉलर देने पड़ते। यह सेक्शन यह स्पष्ट करता है कि AI द्वारा बनाया गया डिज़ाइन पूरी तरह से संपादन योग्य (editable) और लचीला है।
डिज़ाइन को कोड में बदलना (Tailwind और React)
यह वीडियो का सबसे महत्वपूर्ण हिस्सा है जहाँ डिज़ाइन को वास्तविक कोड में बदलने की प्रक्रिया दिखाई गई है। उपयोगकर्ता पेपर से किसी भी कंपोनेंट पर राइट-क्लिक करके उसे 'Tailwind' या 'React CSS' के रूप में कॉपी कर सकते हैं और सीधे कर्सर एडिटर में पेस्ट कर सकते हैं। वक्ता दिखाते हैं कि कैसे एक डिज़ाइन किया गया पेज localhost पर चलने वाले वास्तविक ऐप में बदल जाता है। हालांकि कुछ रिस्पॉन्सिवनेस संबंधी चुनौतियाँ आती हैं, लेकिन मूल संरचना और स्टाइलिंग आश्चर्यजनक रूप से सटीक रहती है। यह फीचर डेवलपर्स को मैन्युअल CSS लिखने की थकाऊ प्रक्रिया से बचाता है। अंत में, यह दिखाया गया है कि कैसे HTML वर्ज़न भी प्रॉम्प्ट के माध्यम से उत्पन्न किया जा सकता है।
AI इमेज जेनरेशन और विज़ुअल इफेक्ट्स
डिज़ाइन के अलावा, पेपर 'नैनो बनाना प्रो' जैसे विभिन्न मॉडलों का उपयोग करके सीधे ऐप के भीतर इमेज जनरेट करने की सुविधा देता है। वक्ता एक AI ईमेल असिस्टेंट 'इनबॉक्स ज़ीरो' के लिए विज्ञापन बनाने का प्रॉम्प्ट देते हैं, और टूल तुरंत चार अलग-अलग विकल्प तैयार करता है। उत्पन्न छवियों में टेक्स्ट और लोगो का समावेश काफी प्रभावशाली है, जो अक्सर AI इमेज जनरेटर्स के लिए एक कठिन कार्य होता है। इसके अलावा, 'S' की दबाकर इमेज पर वाटर इफेक्ट या लिक्विड मेटल जैसे डायनामिक इफेक्ट्स जोड़ने का प्रदर्शन किया गया है। ये विज़ुअल टूल्स लैंडिंग पेज को अधिक आकर्षक और आधुनिक बनाने में मदद करते हैं।
कलर पिकर और कोडबेस विश्लेषण
अंतिम भाग में, पेपर के 'यूनिफ़ॉर्म कलर पिकर' के बारे में बताया गया है, जो डिज़ाइन और वेब ब्राउज़र के बीच रंग के अंतर की पुरानी समस्या को हल करता है। यह सुनिश्चित करता है कि जो रंग आप डिज़ाइन में देखते हैं, वही आपकी वेबसाइट पर दिखाई दे। वक्ता अपने मौजूदा कोडबेस से डिज़ाइन सिस्टम बनाने की कोशिश करते हैं, लेकिन साप्ताहिक MCP टूल लिमिट समाप्त होने के कारण इसे पूरा नहीं कर पाते। फिर भी, वे समझाते हैं कि यह फीचर मौजूदा प्रोजेक्ट्स को पेपर में लाने और वहां से एडिट करके वापस कोड में ले जाने के लिए उत्कृष्ट है। वीडियो का समापन उपयोगकर्ताओं को इस टूल को आज़माने और भविष्य के अपडेट के लिए सब्सक्राइब करने के सुझाव के साथ होता है।
설명
Inbox Zero: https://getinboxzero.com Inbox Zero Repo: https://github.com/elie222/inbox-zero Paper: https://paper.design In this video I test Paper, a new design tool that feels like Figma for Claude Code and Cursor. I show how to connect the Paper MCP server, generate multiple app UIs in parallel, edit the results visually, and then turn those designs into real code with React, Tailwind, or plain HTML/CSS. I also try Paper’s image generation, visual effects, color workflow, and its ability to create a design system from an existing codebase. What’s covered: 0:00 - Using Paper with Claude Code 1:14 - Generating landing pages, dashboards, and design systems 1:43 - Editing AI-generated UI like Figma 3:01 - Copying components as React + Tailwind or CSS 4:24 - Turning designs into real working pages 8:24 - Testing image generation and built-in effects 10:24 - Importing an existing codebase into Paper If you’re building with AI tools like Claude Code or Cursor, Paper looks like one of the most interesting design-to-code workflows I’ve seen so far. --- Inbox Zero organizes your inbox, drafts replies in your voice, and helps you reach inbox zero fast. Never miss an important email again. https://getinboxzero.com GitHub: https://github.com/elie222/inbox-zero ⭐ --- Follow me on X: https://x.com/elie2222 Join the Newsletter: https://aiopensource.substack.com/ #figma #paperdesign #paper #ai #claudecode #cursor #design