मुख्य सामग्री पर जाएं
PocketCode
होम
Docs/Visual Designer

Visual Designer

Visual Designer नेटिव कैनवास पर HTML और CSS स्क्रीन बनाता है। कंपोनेंट खींचकर लाएँ, लेआउट और स्टाइल सेट करें, हर ब्रेकपॉइंट पर एडिट करें, states, interactions और animations जोड़ें, फिर HTML, CSS या SVG एक्सपोर्ट करें; Pro के साथ React, Vue और Svelte भी। यह आपकी अपनी AI provider key से लिखे हुए brief के आधार पर स्क्रीन भी डिज़ाइन कर सकता है। यह पेज मॉड्यूल की हर स्क्रीन के बारे में बताता है: वहाँ आप क्या कर सकते हैं, क्या नहीं कर सकते, और उसकी वजह क्या है।

यह क्या है और इसे कैसे खोलें

Designer एक फ़ुल-स्क्रीन मॉड्यूल है, pager के पाँच पेजों में से कोई एक नहीं। यह स्टार्ट स्क्रीन पर खुलता है, और कोई डिज़ाइन एडिटर में खुलता है। सब कुछ आपके डिवाइस पर सेव होता है।

खोलने के तरीके

कहाँ सेकैसे
ToolsBottom bar या rail → Tools → Designer।
Command paletteDesigner कमांड चलाएँ (Build interfaces visually)।
HomeQuick action Designer। Recent designs विजेट भी Designer खोलता है, पर आपके टैप किए डिज़ाइन पर नहीं, उसकी स्टार्ट स्क्रीन पर।
AI Chatकिसी जवाब के artifact viewer में, ⋮ More actions → Open in Designer। यह HTML और SVG artifacts के लिए मिलता है और Layout may change चेतावनी देता है, क्योंकि importer HTML का सिर्फ़ एक subset रखता है।
सिर्फ़ ToolboxHome का quick action Media बाकी Designer के बिना सिर्फ़ Toolbox खोलता है।
Designer एडिटर या file explorer से .html फ़ाइलें नहीं खोलता। मौजूदा HTML लाने के लिए My Designs में Import from HTML का उपयोग करें, या AI Chat से कोई HTML artifact भेजें।

आपके डिज़ाइन कहाँ रहते हैं

  • हर डिज़ाइन ऐप के private storage में एक .pcd फ़ाइल है। हर सेव पिछली कॉपी को उसके बगल में .pcd.bak के रूप में रखता है।
  • आपके आख़िरी बदलाव के करीब 3 सेकंड बाद डिज़ाइन autosave होता है, और बंद करते समय एक बार और। टॉप बार का Save तुरंत सेव करता है।
  • नामित versions और automatic checkpoints हर डिज़ाइन के साथ रखे जाते हैं (एडिटर में Versions और Compare देखें)।
  • आपकी प्राथमिकताएँ हर अकाउंट के हिसाब से रखी जाती हैं: floating selection bar चालू या बंद, हर पैनल की ऊँचाई, फ़ोन की bottom bar का क्रम, left-handed mode, आपने कौन से first-time tips देखे हैं, और आपके recent व favorite कंपोनेंट।

आप नहीं कर सकते, और क्यों

  • एडिटर या file explorer से .html फ़ाइल सीधे Designer में खोलना। HTML लाने के सिर्फ़ दो तरीके हैं: Import from HTML और AI Chat artifact से Open in Designer।जानबूझकर

स्क्रीन मैप

हर स्क्रीन और sub-screen के लिए एक पंक्ति। नीचे के सेक्शन हर एक का वर्णन करते हैं।

स्क्रीनवहाँ कैसे पहुँचेंआप क्या कर सकते हैं
स्टार्ट स्क्रीनDesigner खोलेंMy Designs पर जाएँ, Manual Design बनाएँ, AI Design (Pro) शुरू करें या Toolbox खोलें।
My Designsस्टार्ट स्क्रीन → My Designsडिज़ाइन खोलें, duplicate या delete करें; खाली डिज़ाइन या template से नया बनाएँ; .pcd, Figma JSON या HTML import करें; खराब हुआ डिज़ाइन recover करें।
Manual Designस्टार्ट स्क्रीन → Manual Designखाली डिज़ाइन को नाम दें और उसका साइज़, orientation और layout mode चुनें।
Create with AIस्टार्ट स्क्रीन → AI Design (Pro), या एडिटर में ✨ Improve with AIbrief लिखें, page type, style और design system चुनें, और generate करें।
Review AI Proposalसिर्फ़ तब, जब generate हुए proposal में validation की blocking findings होंSelf-critique और बदलावों की सूची पढ़ें, फिर Apply to Canvas या Discard करें।
टैबलेट पर एडिटरडिज़ाइन खोलें या बनाएँकैनवास और पाँच icon टैब वाला एक docked पैनल: Components, Properties, Layers, Theme और Tools।
फ़ोन पर एडिटरडिज़ाइन खोलें या बनाएँकैनवास और एक bottom bar: Pages, Components, Style, Layers और Tools। पैनल bottom sheets के रूप में खुलते हैं।
Componentsपैनल टैब या bottom barकंपोनेंट और blocks जोड़ें, डाउनलोड किए हुए Marketplace कंपोनेंट और अपने reusable कंपोनेंट डालें।
Properties (फ़ोन पर Style)कोई कंपोनेंट चुनेंचुने हुए कंपोनेंट की सेटिंग के ग्यारह टैब, साथ में comments।
Layersपैनल टैब या bottom bartree देखें, खोजें, नाम बदलें, क्रम बदलें, nest करें, hide करें, lock करें और layers repair करें।
Themeटैबलेट: Theme टैब। फ़ोन: Tools → Edit Themelight और dark themes, tokens, text styles और effect styles एडिट करें।
ToolsTools टैब या bottom barExport, copy, view विकल्प, preview widths, Health, History, Versions, Shortcuts और Gestures।
Responsive previewTools → View → कोई width चुनेंडिज़ाइन बदले बिना कैनवास को 320 से 1440 px पर देखें; Responsive टैब में breakpoint overrides एडिट करें।
HistoryTools → Historyअपने edits देखें, और उनमें से किसी भी तक आगे या पीछे जाएँ।
Versions और Compare versionsTools → Versionsversions सेव, restore, delete और compare करें।
Design System HealthTools → Design System Healthनौ तरह की समस्याएँ देखें और कुछ को एक टैप में ठीक करें।
Recoveryखराब हुआ डिज़ाइन खोलना, या My Designs में उसकी पंक्ति पर Recoverautomatic backup या कोई सेव किया हुआ version वापस लाएँ।
Previewटॉप बार में 🌐375, 768, 1280 या Full width पर फ़ुल-स्क्रीन WebView; PNG capture करके शेयर करें।
Shortcuts और GesturesTools → Shortcuts या Gestures; फ़िज़िकल कीबोर्ड पर Ctrl+/कीबोर्ड शॉर्टकट और टच जेस्चर पढ़ें; first-time introduction दोबारा चलाएँ।
Toolboxस्टार्ट स्क्रीन → Toolbox, या Home का quick action Mediaग्यारह छोटे डिज़ाइन utilities: रंग, CSS builders, typography और converters।

स्टार्ट स्क्रीन और My Designs

Designer खोलने पर उसकी स्टार्ट स्क्रीन दिखती है: शीर्षक Visual Designer, ऊपर My Designs और उसके नीचे बनाने के लिए तीन tiles।

My Designs

आपके डिज़ाइनों की सूची खोलता है (Open or manage projects)।

Manual Design

एक खाली डिज़ाइन बनाता है जिसे आप हाथ से बनाते हैं (Drag-and-drop builder with full control)।

AI Design

AI से brief के आधार पर स्क्रीन डिज़ाइन करता है (Describe your design in plain English)। Free पर इस tile पर PRO बैज होता है और यह इसके बदले Pro wall खोलता है।

Toolbox

ग्यारह डिज़ाइन utilities खोलता है।

Visual Designer start screen with My Designs on top and Manual Design, AI Design and Toolbox below
टैबलेट पर Designer की स्टार्ट स्क्रीन: My Designs, फिर Manual Design, AI Design और Toolbox।

My Designs

हर कार्ड डिज़ाइन का नाम, साइज़, पेजों की संख्या और कंपोनेंट की संख्या दिखाता है।

आप कर सकते हैं

  • डिज़ाइन को एडिटर में खोलने के लिए कार्ड पर टैप करें।
  • कार्ड का ⋮ मेनू खोलकर उसे Duplicate करें (कॉपी में नाम के साथ “(copy)” जुड़ता है) या Delete करें। Delete पुष्टि माँगता है और डिज़ाइन, उसका backup और उसके सारे versions हमेशा के लिए हटा देता है।
  • नया डिज़ाइन बनाने के लिए New Design पर टैप करें: नाम और साइज़ वाला खाली डिज़ाइन, या From Template।
  • हेडर में तीन import बटन इस्तेमाल करें: Import design (.pcd), Import from Figma (JSON) और Import from HTML।
  • जितने चाहें उतने खाली डिज़ाइन बनाएँ। Free पर, जब आपके पास template से बने तीन डिज़ाइन हो जाएँ तो Manual Design और New Design पर PRO बैज दिखता है, पर वह template की सीमा के लिए है, खाली डिज़ाइनों के लिए कभी नहीं।
  • अगर कोई डिज़ाइन फ़ाइल पढ़ी नहीं जा सकती, तो उसकी पंक्ति में This design is damaged दिखता है; Recover पर टैप करें (एडिटर में Recovery देखें)।

आप नहीं कर सकते, और क्यों

  • डिज़ाइन का नाम बदलना। नाम बनाते समय तय होता है; ऐप में पूरे डिज़ाइन के लिए rename की कोई कार्रवाई नहीं है (पेजों के नाम बदले जा सकते हैं)।अभी नहीं

डिज़ाइन बनाएँ

डिज़ाइन शुरू करने के तीन तरीके हैं: खाली, template से, या फ़ाइल import करके। तीनों एडिटर में पहुँचते हैं।

खाली डिज़ाइन

स्टार्ट स्क्रीन पर Manual Design नया-डिज़ाइन फ़ॉर्म खोलता है।

आप कर सकते हैं

  • डिज़ाइन को नाम दें और portrait या landscape चुनें।
  • साइज़ चुनें: Mobile (360×640), Tablet (768×1024), Desktop (1280×800) या Custom, हर तरफ़ 64 से 8192 px।
  • लेआउट चुनें: Page flow (डिफ़ॉल्ट: blocks क्रम से जमते हैं और असली, responsive HTML एक्सपोर्ट होता है) या Free canvas (कंपोनेंट absolute positions पर रहते हैं)।
  • बाद में कैनवास के zoom मेनू में Page flow से दोनों के बीच बदलें।
  • My Designs से, New Design एक छोटा डायलॉग खोलता है: नाम और साइज़, या From Template।

आप नहीं कर सकते, और क्यों

  • template या import से Page flow डिज़ाइन पाना: templates से बने और import किए गए डिज़ाइन free canvas में शुरू होते हैं।जानबूझकर

Templates

From Template (Choose a Template) पाँच built-in templates देता है। सभी 360×640 हैं और free canvas में शुरू होते हैं। ऐप की भाषा कोई भी हो, उनके नाम और विवरण अंग्रेज़ी में ही रहते हैं।

Templateपेजयह क्या है
Landing Page2: Hero, FeaturesModern landing page with hero section and feature cards. 2 pages.
Login Form1: LoginClean login screen with email/password fields and social options.
Dashboard2: Overview, SettingsAdmin dashboard with stats cards, activity feed, and settings page.
Portfolio3: About, Projects, ContactPersonal portfolio with about, projects, and contact pages.
E-Commerce2: Products, Product DetailOnline store with product grid and detail views.

आप कर सकते हैं

  • किसी भी template से डिज़ाइन बनाएँ और उसे किसी भी दूसरे डिज़ाइन की तरह एडिट करें।
  • Free पर, एक समय में template से बने अधिकतम तीन डिज़ाइन रखें। एक हटाने से एक स्लॉट खाली होता है (Free और Pro देखें)। template से बने डिज़ाइन की duplicate कॉपी, या उसकी .pcd को दोबारा import करने पर बना डिज़ाइन भी गिना जाता है।

आप नहीं कर सकते, और क्यों

  • यहाँ Marketplace template चुनना: चुनने वाली सूची में सिर्फ़ पाँच built-in templates हैं। Marketplace project templates कोड प्रोजेक्ट बनाते हैं, डिज़ाइन नहीं।जानबूझकर
  • Free पर template से चौथा डिज़ाइन बनाना: यह असीमित templates के लिए Pro wall खोलता है।Pro

Import

My Designs के तीन import बटन Android फ़ाइल पिकर खोलते हैं। import किए गए डिज़ाइनों को नया id मिलता है। Figma और HTML import कभी template की सीमा में नहीं गिने जाते; template से बने डिज़ाइन की .pcd अपनी template origin साथ रखती है और गिनी जाती है।

Importयह क्या पढ़ता है
Import design (.pcd)Designer से बनी .pcd फ़ाइल, जैसे वह जो आपने किसी दूसरे डिवाइस पर सेव की हो। 20 MB से बड़ी फ़ाइल को अस्वीकार कर दिया जाता है।
Import from Figma (JSON)एक JSON फ़ाइल: Figma की REST API का response या आपका हाथ से सेव किया हुआ export। यह कभी Figma अकाउंट से कनेक्ट नहीं होता। सीमाएँ: 10 MB, 5,000 nodes और 50 की depth।
Import from HTMLएक HTML फ़ाइल। सिर्फ़ div, section, h1 से h6, p, a, button, img और input कंपोनेंट बनते हैं; बाकी tags के अंदर चला जाता है; <script> हटा दिया जाता है। स्टाइल inline style attributes और सरल <style> selectors (tag, class, id) से आती है। सीमाएँ: 10 MB और 5,000 nodes।

आप कर सकते हैं

  • .pcd, Figma JSON या HTML फ़ाइल import करें; ऐप Design imported, Design imported from Figma या Design imported from HTML कहता है।
  • Open in Designer से AI Chat का HTML या SVG artifact खोलें।

आप नहीं कर सकते, और क्यों

  • Figma अकाउंट या लिंक से import करना: सिर्फ़ JSON फ़ाइल काम करती है।जानबूझकर
  • HTML फ़ाइल की हर चीज़ बचाए रखना: scripts, @media rules, pseudo-classes, compound selectors और जटिल layouts साथ नहीं आते।जानबूझकर
  • 20 MB से बड़ी .pcd import करना: ऐप उसे “That file isn't a valid PocketCode design” कहकर अस्वीकार कर देता है।डिवाइस

एडिटर

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

लेआउट और टॉप बार

टैबलेट पर या landscape में एडिटर कैनवास के बगल में पाँच icon टैब वाला पैनल dock करता है: Components, Properties, Layers, Theme और Tools। फ़ोन पर इसके बजाय bottom bar दिखती है: Pages, Components, Style, Layers और Tools। पैनल bottom sheets के रूप में खुलते हैं जिनके बीच आप स्वाइप कर सकते हैं, और उन्हें लॉन्ग-प्रेस करके खींचकर उनका क्रम बदल सकते हैं।

आप कर सकते हैं

  • टॉप बार से Undo और redo करें, 200 steps तक।
  • खुले डिज़ाइन को बेहतर बनाने के लिए ✨ Improve with AI पर टैप करें (AI से डिज़ाइन करें देखें)।
  • अभी सेव करने के लिए Save और डिज़ाइन का preview देखने के लिए 🌐 Preview पर टैप करें।
  • page selector से पेज संभालें: पेज बदलें, Add page, Rename, Duplicate page और Delete (पुष्टि के साथ)। पेजों की कोई सीमा नहीं है, पर आख़िरी पेज delete नहीं हो सकता।
  • interactions वाले कंपोनेंटों के बीच तीर खींचने के लिए Prototype chip चालू करें। टैबलेट पर Compare भी है, जो दो कैनवास अगल-बगल दिखाता है।
  • किनारे के टैब से docked पैनल को समेटें, और Tools में floating selection bar बंद या चालू करें या left-handed mode चालू करें, जो उस bar को खिसका देता है। हर पैनल की ऊँचाई याद रखी जाती है।

आप नहीं कर सकते, और क्यों

  • फ़ोन पर Compare इस्तेमाल करना: यह chip सिर्फ़ चौड़े लेआउट (टैबलेट या landscape) में होता है।डिवाइस
  • undo history को सत्रों के बीच बचाकर रखना: डिज़ाइन बंद करने पर वह खाली हो जाती है और उसमें अधिकतम 200 steps रहते हैं।जानबूझकर
Designer editor on a phone with the canvas, the three tools, the zoom pill, the Prototype chip and the bottom bar Pages, Components, Style, Layers and Tools
फ़ोन पर एडिटर: तीन टूल वाला कैनवास, zoom pill, Prototype chip और नीचे की बार में Pages, Components, Style, Layers और Tools।

कैनवास

कैनवास नेटिव है, WebView नहीं। artboard का साइज़ वही है जो आपने चुना, और उसका background theme का background color है। नीचे बाईं ओर तीन टूल हैं, और नीचे दाईं ओर एक pill zoom और कंपोनेंटों की संख्या दिखाती है, जैसे 100% · 28 comp।

आप कर सकते हैं

  • Select tool, Pan tool और Area select tool के बीच बदलें। Area tool को चालू रखने के लिए उस पर डबल-टैप करें।
  • zoom pill खोलकर Zoom in, Zoom out, सटीक प्रतिशत (10 से 400), 50%, 100% और 200%, Fit to screen, Zoom to selection, 100% on selection, Minimap (डिफ़ॉल्ट रूप से बंद), Show Rulers, Page flow और Reset view पाएँ।
  • दो उँगलियों से पिंच करके 0.1× से 4× तक zoom करें, जो आपकी उँगलियों के नीचे के बिंदु पर टिका रहता है, और दो उँगलियों से खींचकर pan करें।
  • सबसे भीतरी कंपोनेंट चुनने के लिए टैप करें, एक स्तर ऊपर जाने के लिए उसी पर फिर टैप करें, चयन हटाने के लिए खाली जगह पर टैप करें, और बिना चुने कंपोनेंट को चयन में जोड़ने के लिए उस पर लॉन्ग-प्रेस करें।
  • चुने हुए कंपोनेंट को हिलाने के लिए खींचें। उसे किसी container पर छोड़ने से वह nest हो जाता है; एक insertion line दिखाती है कि वह कहाँ गिरेगा। बिना चुने कंपोनेंट या खाली जगह को खींचने से कैनवास pan होता है।
  • चार कोनों और चार किनारों के handles से आकार बदलें (live preview चौड़ाई × ऊँचाई दिखाता है) और गोल handle से घुमाएँ, जो हर 15° पर snap होता है।
  • Edit text खोलने के लिए टेक्स्ट पर डबल-टैप करें। किसी container को अलग करने के लिए उस पर डबल-टैप करें; बंद करने वाले बटन (Exit isolation) के साथ एक breadcrumb आपको बाहर निकलने देता है।
  • 16 px ग्रिड पर और पड़ोसी कंपोनेंटों के किनारों व केंद्रों पर snap करें, दूरी के लेबल के साथ, और rulers से guides खींचकर निकालें।
  • चयन के ऊपर की floating bar इस्तेमाल करें: duplicate, delete, Edit text या Lock aspect ratio, Change color, Center in parent, एक स्तर आगे लाना, एक स्तर पीछे भेजना, और More, जो Properties खोलता है।
  • चुने हुए कंपोनेंट का context menu पाने के लिए उस पर लॉन्ग-प्रेस करें: Duplicate, Copy selection, Paste, Bring to front, Send to back, Lock या Unlock, Hide या Show, Remove from container, Convert to component, Export as HTML (वह कंपोनेंट फ़ाइल के रूप में) और Delete।
  • दो या अधिक कंपोनेंट चुनने पर alignment bar देती है Align left, Align center horizontally, Align right, Align top, Align center vertically, Align bottom, Distribute horizontally, Distribute vertically, Group और Ungroup।

आप नहीं कर सकते, और क्यों

  • ग्रिड का साइज़ बदलना। ग्रिड तय 16 px का है: आप उसे सिर्फ़ दिखा या छिपा सकते हैं और Snap चालू या बंद कर सकते हैं।जानबूझकर
  • Area select tool से container के बच्चों को चुनना: यह सिर्फ़ उन शीर्ष-स्तर के कंपोनेंटों को चुनता है जिन्हें आयत छूता है।जानबूझकर
  • locked कंपोनेंट को हिलाना, उसका आकार बदलना या उसे घुमाना।जानबूझकर
  • कैनवास पर ही टाइप करना: डबल-टैप Edit text डायलॉग खोलता है।जानबूझकर

Spacing handles और layout guides

जब auto-layout वाला container चुना होता है, तो उसके ऊपर के handles से आप उसका padding और gap सीधे कैनवास पर खींच सकते हैं।

आप कर सकते हैं

  • container की spacing बदलने के लिए padding या gap handle खींचें; मान पूरे pixels में round होते हैं।
  • padding bands और हर container का नाम व gap वाला लेबल दिखाने के लिए Show layout guides चालू करें (Tools → View)। बंद होने पर guides सिर्फ़ चुने हुए container पर दिखते हैं।
  • rulers (Show Rulers) से guides खींचकर निकालें। Guides डिज़ाइन के साथ सेव होते हैं और कंपोनेंट उन पर snap होते हैं।

आप नहीं कर सकते, और क्यों

  • spacing को theme की spacing scale पर snap करना: handles पूरे pixels में round करते हैं और tokens पर snap नहीं होते। Design System Health scale से बाहर के मान चिह्नित कर सकता है और उनका विकल्प सुझा सकता है।जानबूझकर

Components palette

Components टैब में चार sub-tabs हैं: Components, Blocks, Downloaded और My components। palette में आठ सेक्शन में 49 कंपोनेंट हैं। ऐप के भीतर कंपोनेंट के नाम सिर्फ़ अंग्रेज़ी में हैं।

सेक्शनकंपोनेंट
Basics (6)Button, Link, Icon, Icon Button, Divider, Avatar
Text (6)Text, Heading, Quote, Code, Code Embed, Keyboard
Forms (8)Text Field, Text Area, Checkbox, Switch, Slider, Radio, Dropdown, Form
Containers (14)Row, Column, Card, Box, Spacer, Grid, Section, Header, Footer, Main, Scroll View, List, Accordion, Link List
Navigation (4)Navbar, Bottom Nav, Tab Bar, Breadcrumb
Media (3)Image, Video, Carousel
Feedback (7)Dialog, Snackbar, Progress Bar, Spinner, Badge, Chip, Rating
Data (1)Table

आप कर सकते हैं

  • कंपोनेंट जोड़ने के लिए कार्ड पर टैप करें, या ठीक जगह रखने के लिए कार्ड पर लॉन्ग-प्रेस करके खींचें; container पर छोड़ने से वह nest हो जाता है।
  • Search components… से कंपोनेंट खोजें, सेक्शन से फ़िल्टर करें, Recent (आख़िरी 8) दोबारा इस्तेमाल करें और तारे से Favorites चिह्नित करें।
  • Blocks में पाँच तैयार blocks में से एक डालें: Hero, Feature strip, Pricing card, Contact form और Footer।
  • Downloaded में वे कंपोनेंट डालें जो आपने Marketplace से डाउनलोड किए हैं। Apply as kit (tokens, styles, symbols) किसी डाउनलोड किए डिज़ाइन के tokens, styles और reusable कंपोनेंट आपके डिज़ाइन में कॉपी करता है।
  • My components में अपने reusable कंपोनेंट डालें।
  • Icon और Icon Button के लिए 176 Material icons के एक सेट में से icon चुनें; icons vectors के रूप में एक्सपोर्ट होते हैं।
  • Code Embed (Custom HTML / CSS / JS) से custom HTML, CSS और JS जोड़ें। यह एक्सपोर्ट में जस का तस, बिना escape किए आता है, इसलिए ऐसा कोड न चिपकाएँ जिस पर आपको भरोसा न हो।

आप नहीं कर सकते, और क्यों

  • हर कंपोनेंट का live thumbnail देखना: कार्ड में एक icon और कंपोनेंट का अंग्रेज़ी नाम दिखता है, और सर्च हर भाषा में इन्हीं अंग्रेज़ी नामों से मेल खाती है।जानबूझकर
  • यहाँ Marketplace templates डालना: Downloaded सिर्फ़ डाउनलोड किए हुए कंपोनेंट दिखाता है।जानबूझकर
Designer editor on a tablet with the Components tab open: sub-tabs, search, Recent, section filters and component cards next to a landing page on the canvas
टैबलेट पर Components टैब खुला हुआ एडिटर: sub-tabs, सर्च, Recent, सेक्शन फ़िल्टर और कंपोनेंट कार्ड। टूल बटन और zoom pill कैनवास के ऊपर हैं, और docked पैनल के पाँच टैब ऊपर दाईं ओर हैं।

Properties

कोई कंपोनेंट चुनें और Properties खोलें (फ़ोन की bottom bar में Style)। हेडर कंपोनेंट का नाम दिखाता है, साथ में rename और delete बटन, Convert to component और Comments। Search a property… उस टैब पर ले जाता है जिसमें वह property है। कुल 11 टैब हैं (जो कंपोनेंट container नहीं हैं उनके लिए 10)।

टैबयह क्या सेट करता है
DesignParent, position और size (X, Y, W, H) Fixed, Hug या Fill और min/max के साथ, aspect ratio lock, केंद्र से resize, constraints और rotation।
Contentउस प्रकार के कंपोनेंट के विकल्प: उसका टेक्स्ट, image, icon, link, input options वगैरह।
StyleBackground (रंग, image या gradient), padding, margin, border और radius, एक के ऊपर एक shadows, Effect styles, Copy style और Paste style। किसी फ़ील्ड के पास की बिंदी बताती है कि उसका मान unset है, कंपोनेंट पर सेट है या किसी token से जुड़ा है।
TextTypography, 50 web fonts के catalog से font families के साथ।
Layoutसिर्फ़ containers के लिए: flex direction, gap, wrap और alignment, या 1fr, 200px और auto जैसे tracks और spans वाला grid; कोई child flow से बाहर निकलकर खुली जगह पर रखा जा सकता है।
FXTransition, effects, filters, transform और custom CSS।
Responsive, States, Interactions, Animationहर एक का नीचे अपना सेक्शन है।
Codeयह कंपोनेंट जो HTML और CSS एक्सपोर्ट करेगा, live (Code inspector देखें)।

आप कर सकते हैं

  • एक साथ कई चुने हुए कंपोनेंट एडिट करें: फ़ील्ड साझा मान या mixed स्थिति दिखाता है और सब पर लागू होता है। Design टैब disabled हो जाता है और Select a single component to edit this कहता है।
  • कंपोनेंट से जुड़े Comments जोड़ें, उन्हें resolve करें और delete करें। Comments डिज़ाइन के साथ चलते हैं और ZIP एक्सपोर्ट में comments.txt में लिखे जाते हैं।
  • कंपोनेंट को reusable बनाएँ, उसके सभी instances अपडेट करें या किसी एक को detach करें (Reusable components देखें)।

आप नहीं कर सकते, और क्यों

  • कैनवास पर web fonts देखना: एक्सपोर्ट किया HTML Google Fonts से font जोड़ता है, पर कैनवास सबसे नज़दीकी system font बनाता है।जानबूझकर
  • property search से सीधे सही फ़ील्ड पर पहुँचना: यह सही टैब खोलता है, कंट्रोल नहीं।जानबूझकर
Designer Properties tab with nothing selected, asking to select a component
कुछ भी चुना हुआ न होने पर Properties टैब: यह आपसे एक कंपोनेंट चुनने को कहता है।
Style tab of a selected button with Effect styles, Copy style, a background linked to var(--color-primary), padding, margin and border
चुने हुए बटन का Style टैब: Effect styles, Copy style और Paste style, token से जुड़ा background, padding, margin और border। floating bar और गुलाबी layout guides कैनवास के ऊपर हैं।

Layers

Layers पेज का असली tree दिखाता है। हर पंक्ति में नाम, उसका z order (z: 3) और, containers के लिए, बच्चों की संख्या ([4]) होती है।

आप कर सकते हैं

  • Search layers से नाम या type के आधार पर layers खोजें।
  • किसी layer पर डबल-टैप करके नाम बदलें, तीरों से उसे ऊपर या नीचे ले जाएँ, Move into से nest करें, Remove from container से बाहर निकालें, आँख से hide करें और ताले से lock करें। ⋮ मेनू में Rename, Duplicate और Delete हैं।
  • एक साथ कई layers पर काम करने के लिए Selection mode चालू करें: hide या show, lock, duplicate या delete, copy और paste।
  • बिना वैध parent वाले कंपोनेंट खोजें: पैनल बताता है कि कितने हैं और Repair उन्हें वापस root में ले जाता है।

आप नहीं कर सकते, और क्यों

—

Layers tab listing Footer, Pricing, Features and Hero with their z order, child count, move, hide, lock and menu buttons
Layers टैब: हर layer अपने z order और बच्चों की संख्या के साथ, एक सर्च बॉक्स, और move, hide, lock और ⋮ बटन।

Theme, tokens और styles

Theme (टैबलेट पर एक टैब, फ़ोन पर Tools → Edit Theme) में डिज़ाइन के CSS variables रहते हैं: Edit CSS variables for exported code।

आप कर सकते हैं

  • Light theme एडिट करें और Create dark theme के बाद Dark theme भी। Remove dark theme उसे हटा देता है।
  • Exported page default के नीचे चुनें कि एक्सपोर्ट किया पेज System का पालन करे, Light हो या Dark।
  • आठ प्रकार के Tokens बनाएँ: color, spacing, typography, shadow, border radius, opacity, font size और line height। हर token दिखाता है कि वह कितनी बार इस्तेमाल हुआ है, और token का नाम बदलने से उसके सारे references फिर से लिखे जाते हैं।
  • Text styles और Effect styles सेव करें और एक टैप में लागू करें।
  • अगर आपने Marketplace का कोई design kit लगाया है तो Kits देखें।

आप नहीं कर सकते, और क्यों

  • token बदलावों को undo करना: tokens, text styles और effect styles को बनाना, उनका नाम बदलना या उन्हें हटाना undo history का हिस्सा नहीं है। कंपोनेंटों पर कोई style लागू करना है।जानबूझकर
  • कैनवास का background अलग से सेट करना: artboard का रंग theme का background color ही है।जानबूझकर

Reusable components

कोई भी चयन symbol की तरह reusable कंपोनेंट बन सकता है।

आप कर सकते हैं

  • कंपोनेंट चुनकर Convert to component चुनें (या Ctrl+Alt+K)। वह My components में दिखता है।
  • उसे My components से डालें; हर उपयोग एक instance है (Instance of …)।
  • मूल कंपोनेंट एडिट करें और बदलाव बाकी instances तक पहुँचाने के लिए Update all instances चुनें। किसी instance पर आपने हाथ से जो फ़ील्ड बदले हैं वे बने रहते हैं।
  • किसी instance को फिर से सामान्य कंपोनेंटों में बदलने के लिए Detach चुनें।

आप नहीं कर सकते, और क्यों

  • instances का मूल के साथ अपने आप बदलना: instances स्थिर कॉपियाँ हैं, और जब तक आप Update all instances नहीं चुनते, कुछ नहीं बदलता।जानबूझकर

States

States टैब तय करता है कि hover, press, focus या disabled होने पर कंपोनेंट कैसा दिखे।

आप कर सकते हैं

  • Hover, Active, Focus या Disabled चुनें और उस state की styles बदलें। वे :hover, :active, :focus और :disabled rules के रूप में एक्सपोर्ट होती हैं।
  • कैनवास पर चुने हुए कंपोनेंट को किसी state में देखने के लिए View as इस्तेमाल करें; preview सिर्फ़ उसी कंपोनेंट पर लागू होता है। काम पूरा होने पर किसी state के overrides reset करें।

आप नहीं कर सकते, और क्यों

—

Responsive

Responsive के दो हिस्से हैं: widths का preview, और किसी breakpoint के overrides एडिट करना।

आप कर सकते हैं

  • Tools → View से कैनवास को सात widths पर देखें: Original Size, Mobile S (320), Mobile (375), Mobile L (428), Tablet (768), Desktop (1280) और Desktop L (1440)। एक हरा बैनर (जैसे Responsive: Mobile S (320px)) बताता है कि आप कहाँ हैं, साथ में Exit। दस्तावेज़ बदलता नहीं।
  • किसी breakpoint के overrides एडिट करने के लिए Responsive टैब खोलें। डिफ़ॉल्ट Tablet (900 px तक) और Mobile (480 px तक) हैं; आप 100 से 2000 px के बीच breakpoints जोड़, एडिट और हटा सकते हैं, और Desktop आधार है।
  • हर breakpoint और कंपोनेंट के लिए position, size, visibility (Hide on this breakpoint), layout समेत styles, grid columns बदलें, और free canvas के root कंपोनेंटों के लिए एक stacking mode चुनें: Stack, Flow, Keep या Hide। Overrides असली @media rules के रूप में एक्सपोर्ट होते हैं।
  • free canvas में, root कंपोनेंट संकरी widths पर अपने आप फिर से जमते हैं (पंक्तियों में समूहित, wrap या stack), कैनवास और एक्सपोर्ट दोनों में; आपके overrides उस पर भारी पड़ते हैं। Page flow में reflow ब्राउज़र करता है।

आप नहीं कर सकते, और क्यों

  • Free पर Mobile S, Mobile L और Desktop L का preview देखना: इन तीनों previews के लिए Pro चाहिए (ये React, Vue और Svelte एक्सपोर्ट वाले gate को साझा करते हैं)। Original, Mobile, Tablet और Desktop मुफ़्त हैं, और breakpoints एडिट करना भी।Pro
Tools tab on View with a green banner Responsive: Mobile S (320px) and the list Hide Grid, Snap ON, Show Rulers, selection bar, left-handed mode and the seven preview widths
Tools, View: हरा बैनर बताता है कि Mobile S (320px) का preview चल रहा है, साथ में Exit; सूची में Hide Grid, Snap, Show Rulers, selection bar, left-handed mode और सात preview widths हैं।

Interactions और prototype

Interactions टैब बताता है कि trigger होने पर कंपोनेंट क्या करे। Interactions एक्सपोर्ट किए HTML में असली व्यवहार बन जाते हैं।

आप कर सकते हैं

  • Add interaction पर टैप करें और एक Trigger चुनें: Tap, Hover, Scroll into view, Page load, After a delay (Delay (ms) के साथ) या Form submit।
  • एक Action चुनें: Navigate to page, Open overlay, Close overlay, Toggle visibility, Scroll to, Set state या Open URL। पेज बदलने के लिए एक Transition चुनें: None (instant), Fade या Slide।
  • interaction वाले हर कंपोनेंट से उसके target कंपोनेंट तक नीले तीर खींचने के लिए Prototype chip चालू करें।
  • Preview में या ब्राउज़र में खोले गए एक्सपोर्ट किए HTML में prototype चलाएँ: पेज navigate होते हैं, dialogs खुलते और बंद होते हैं, और Form submit ब्राउज़र की अपनी form validation इस्तेमाल करता है।

आप नहीं कर सकते, और क्यों

  • पेजों की ओर prototype तीर देखना: तीर सिर्फ़ target कंपोनेंटों की ओर खींचे जाते हैं, पेजों की ओर नहीं।जानबूझकर
  • prototype को लिंक से शेयर करना: Designer फ़ाइलें (HTML, ZIP) और PNG capture बनाता है, उसमें hosting नहीं है।जानबूझकर

Animation

Animation टैब कंपोनेंट में एक keyframe animation जोड़ता है।

आप कर सकते हैं

  • एक preset चुनें (fade in, fade out, बाएँ, दाएँ, ऊपर या नीचे से slide in, bounce, pulse या shake) या Custom, और Add stop से उसके stops एडिट करें।
  • Duration (ms), Delay (ms), Easing, Repeats (0 = loop), Direction और After finishing सेट करें, और चुनें कि वह कब Starts: On page load या When it appears on screen।
  • कैनवास पर preview के लिए Play दबाएँ। यह असली @keyframes rule के रूप में एक्सपोर्ट होती है।

आप नहीं कर सकते, और क्यों

  • एक कंपोनेंट को एक से ज़्यादा animation देना: अधिकतम एक ही होती है।जानबूझकर

History

Tools → History आपके edits को समय के क्रम में सूचीबद्ध करता है, मौजूदा वाले पर Here का निशान होता है।

आप कर सकते हैं

  • किसी प्रविष्टि पर टैप करें और उस बिंदु तक undo या redo करें।
  • 200 steps तक पीछे जाएँ।

आप नहीं कर सकते, और क्यों

  • history की प्रविष्टियाँ अपनी भाषा में पढ़ना: ऐप की भाषा कोई भी हो, वे स्पेनिश में लिखी होती हैं, जैसे “Mover Botón 2”।जानबूझकर

Versions और Compare

Tools → Versions डिज़ाइन की पूरी कॉपियाँ रखता है जिन पर आप लौट सकते हैं।

आप कर सकते हैं

  • Save version पर टैप करें और उसे नाम दें। नामित versions कभी purge नहीं होते।
  • किसी version को Restore करें: पहले मौजूदा स्थिति automatic checkpoint के रूप में सेव होती है, ताकि आप वापस आ सकें। Delete version एक version हटाता है।
  • Compare versions: दो versions चुनें और देखें कि कौन से कंपोनेंट Added, Removed, Moved हुए या उनकी Style बदली, साथ में New comments और Resolved comments, और दोनों का Side-by-side preview।
  • Automatic checkpoints (बैज Automatic) डिज़ाइन खुला रहने पर हर 10 मिनट में, AI proposal लागू होने से पहले और restore से पहले बनते हैं। सबसे हाल के 10 automatic checkpoints रखे जाते हैं।

आप नहीं कर सकते, और क्यों

  • automatic checkpoints के नाम अपनी भाषा में पढ़ना: वे स्पेनिश के तय नाम हैं, जैसे “Automático”, “Antes de aplicar IA” और “Antes de restaurar”।जानबूझकर

Design System Health

Tools → Design System Health पूरे डिज़ाइन का audit करता है। यह कभी कुछ रोकता नहीं: सिर्फ़ चेतावनी देता है।

आप कर सकते हैं

  • नौ तरह की समस्याएँ देखें: palette से बाहर के रंग, scale से बाहर की spacing, बिना text style की typography, कम contrast (WCAG AA से नीचे, 4.5:1), छोड़े गए heading levels, बिना alt text की images, ऐसे fonts जिन्हें एक्सपोर्ट link नहीं करेगा, artboard के बाहर के कंपोनेंट और मोबाइल पर बाहर बहता टेक्स्ट।
  • किसी पंक्ति पर Go to component पर टैप करें और, रंगों व spacing के लिए, उसे ठीक करने को Replace with … पर।
  • यही जाँच एक्सपोर्ट से पहले चलती है और Export with open issues? दिखाती है (एक्सपोर्ट और शेयर देखें)।

आप नहीं कर सकते, और क्यों

  • issue संदेश अपनी भाषा में पढ़ना: ऐप की भाषा कोई भी हो, वे स्पेनिश में लिखे होते हैं।जानबूझकर

Code inspector और View Code

डिज़ाइन का कोड एक्सपोर्ट किए बिना पढ़ने के दो तरीके।

आप कर सकते हैं

  • चुने हुए कंपोनेंट का Code टैब खोलकर वह HTML और CSS live देखें जो वह एक्सपोर्ट करेगा। वह पंक्ति कॉपी करने के लिए किसी property पर टैप करें, या Copy all।
  • Tools → Copy के नीचे पूरे डिज़ाइन के लिए Copy HTML और Copy CSS इस्तेमाल करें, और HTML / CSS डायलॉग खोलने के लिए View Code।
  • एक बार के preview या एक्सपोर्ट को override करने के लिए View Code में HTML एडिट करें।

आप नहीं कर सकते, और क्यों

  • हाथ से एडिट किया HTML बनाए रखना: कैनवास या theme में आपके अगले बदलाव पर वह साफ़ हो जाता है, इसलिए उसे एक बार का override समझें।जानबूझकर

Recovery

अगर डिज़ाइन फ़ाइल पढ़ी नहीं जा सकती, तो एडिटर उसे recover करने का विकल्प देता है। यह तब शुरू होता है जब आप डिज़ाइन खोलते हैं, या My Designs में खराब हुई पंक्ति पर Recover से।

आप कर सकते हैं

  • Automatic backup चुनें, यानी आपके पिछले सेव से रखी .bak कॉपी, या Or a saved version: कोई भी version या checkpoint, सिर्फ़ सबसे नया नहीं।

आप नहीं कर सकते, और क्यों

—

Preview

टॉप बार का 🌐 बटन डिज़ाइन का फ़ुल-स्क्रीन WebView खोलता है; एक से ज़्यादा पेज होने पर हर पेज का एक टैब होता है।

आप कर सकते हैं

  • 375, 768, 1280 या Full width चुनें, और 375 व 768 के लिए Portrait या Landscape।
  • preview का PNG कैप्चर करने (375 और 768 पर डिवाइस फ़्रेम के साथ) और share sheet खोलने के लिए Capture and share पर टैप करें।

आप नहीं कर सकते, और क्यों

  • preview से दूसरी साइटों पर जाना या लोकल फ़ाइलें खोलना: यह navigate नहीं करता, और file:// व content:// ब्लॉक हैं।Google Play
  • preview में बाहरी scripts चलाना, fetch या WebSockets बुलाना, iframes इस्तेमाल करना या forms submit करना। Inline scripts, images, video और https पर Google Fonts लोड होते हैं।Google Play
Full-screen Preview with the 375, 768, 1280 and Full width chips and the share and close buttons
Preview: फ़ुल-स्क्रीन WebView, जिसमें 375, 768, 1280 और Full chips तथा share और close बटन हैं।

AI से डिज़ाइन करें

Designer आपके अपने AI provider से लिखे हुए brief के आधार पर डिज़ाइन generate कर सकता है: key आप लाते हैं (AI providers देखें) और PocketCode कोई मॉडल नहीं देता। इसके दो प्रवेश-बिंदु हैं। स्टार्ट स्क्रीन पर AI Design (Pro) नया डिज़ाइन बनाता है, और एडिटर में ✨ Improve with AI आपके खुले डिज़ाइन पर काम करता है। दोनों एक ही स्क्रीन इस्तेमाल करते हैं, Create with AI।

डिज़ाइन generate करें

  1. 1स्टार्ट स्क्रीन पर AI Design पर टैप करें। इस स्क्रीन का शीर्षक Create with AI है।
  2. 2नीचे brief लिखें, या सुझावों में से किसी एक पर टैप करें।
  3. 3एक Page type, एक Visual style और एक Design system चुनें, और चाहें तो controls को ट्यून करें।
  4. 4ऊपर दाईं ओर provider और model chip देखें। यह आपके पसंदीदा provider और उसके सबसे अच्छे design model पर शुरू होता है। उस पर टैप करके provider की सूची खोलें; जिस provider की कोई key नहीं है उस पर Not configured दिखता है।
  5. 5Generate Design पर टैप करें (सुधारते समय Improve Design)। एक progress कार्ड चरणों का पीछा करता है और Cancel उसे रोक देता है।
  6. 6अगर आपने उस provider को अब तक स्वीकार नहीं किया है (यहाँ या AI Chat में), तो एक डायलॉग Send to …? पूछता है। Send पर टैप करें और generation दोबारा शुरू हो जाता है।

आप क्या चुन सकते हैं

विकल्पयह क्या करता है
Page type20 प्रकार: Landing Page, Dashboard, Blog, E-commerce, Portfolio, Admin Panel, SaaS App, Marketing, Form, Auth Screen, Onboarding, Settings, Pricing, Data Viz, Docs, Social Feed, Gallery, Email, Wireframe और Presentation, या आपका खुद टाइप किया हुआ कोई custom प्रकार।
Visual style10 styles: Minimal, Bold, Dark, Editorial, Playful, Corporate, Technical, Glassmorphism, Brutalist और Soft & Warm, या तीन color pickers (Primary, Secondary और Background) वाला custom style।
Design systemDesign system शीट खोलता है: Quick style, Built-in systems के नीचे 14 built-in systems (PocketCode, Material 3 Dark, Tech Utility, Warm Editorial, Material 3 Light, iOS / Apple HIG, Fluent Design, Glassmorphism, Ant Design, Nordic, Cyberpunk, Notion, Tailwind SaaS और Retro Terminal), My systems जिन्हें आप बनाते, एडिट करते और हटाते हैं, और Import DESIGN.md, जहाँ आप कम से कम 40 अक्षरों का spec चिपकाते हैं।
ControlsTypography (Sans, Serif, Mono, Display), Motion (None, Subtle, Expressive), Shape (Sharp, Rounded, Pill), density और सात presets या आपके अपने में से एक Accent रंग।
CustomizeRefine your brief खोलता है: यह किसके लिए है, finish का स्तर, brand style, tone और personality, content density, target device (mobile, desktop, responsive या tablet), requirements और constraints, और आप कैसे जानेंगे कि यह पूरा हुआ।
Attachmentsअधिकतम 8 चीज़ें: Files from device, App project (canvas) या AI design। नीचे की सीमाएँ देखें: सिर्फ़ उनके नाम brief तक पहुँचते हैं।
Provider और modelऊपर दाईं ओर का chip। आप Settings में, Design generation के नीचे, इस काम का डिफ़ॉल्ट मॉडल भी बदल सकते हैं।

generate करने पर क्या होता है

generation आपके provider पर इसी क्रम में चलता है:

  1. 1PocketCode आपके brief, page type, style, design system और, अगर डिज़ाइन खाली नहीं है, उसके कंपोनेंटों की एक संक्षिप्त सूची (अधिकतम 80) से prompt बनाता है।
  2. 2आपके provider को एक call proposal लौटाती है: design actions की सूची (नए कंपोनेंट और, सुधारते समय, मौजूदा कंपोनेंटों के edits)।
  3. 3मॉडल अपने काम को पाँच आयामों पर score करता है: philosophy, hierarchy, execution, specificity और restraint। जब तक उसने पहले से कमज़ोर score न बताया हो, नए context वाली दूसरी call उसे स्वतंत्र रूप से score करती है, और कमतर score गिना जाता है।
  4. 4अगर कोई score कम है, तो एक refinement pass चलता है। उसका नतीजा तभी रखा जाता है जब वह कम से कम उतना ही अच्छा score करे।
  5. 5proposal को validate किया जाता है: अधिकतम 120 actions, लागू करने के बाद 600 कंपोनेंट और custom CSS के 24,000 अक्षर।

पूरा होने पर

  • अगर proposal validation पास कर लेता है तो वह आपके लिए लागू हो जाता है, बिना किसी review step के। AI Design free canvas में एक नया 1440×900 डिज़ाइन बनाता है, जिसका नाम आपके brief के पहले 50 अक्षरों पर रखा जाता है। Improve with AI उसे automatic checkpoint (Antes de aplicar IA) के बाद खुले डिज़ाइन पर लागू करता है, और पूरा proposal एक ही undo step है।
  • अगर validation को blocking समस्याएँ मिलती हैं, तो इसके बजाय Review AI Proposal खुलता है: Self-critique (10 में औसत और पाँच बार: Philosophy, Hierarchy, Execution, Specificity और Restraint), Validation issues, और बदलावों की सूची टेक्स्ट में। Apply to Canvas वैध हिस्से को लागू करता है और बताता है कि कितने अवैध actions छोड़े गए; Discard पुष्टि के बाद उसे हटा देता है।
  • AI बदलाव के बाद वापस जाने के लिए एक बार undo करें या Versions से automatic checkpoint restore करें।

Improve with AI

एडिटर की टॉप बार का ✨ बटन आपके खुले डिज़ाइन पर creator खोलता है। मुख्य बटन Improve Design कहता है।

आप कर सकते हैं

  • बताएँ कि क्या बदलना है। generator को डिज़ाइन के कंपोनेंटों की संक्षिप्त सूची (id, type, नाम, position, size और parent) मिलती है और वह कंपोनेंट जोड़ सकता है या मौजूदा कंपोनेंट एडिट कर सकता है: हटाना, restyle करना, हिलाना, आकार बदलना या नाम बदलना।
  • इसे Free पर इस्तेमाल करें: बटन पर अपना कोई plan gate नहीं है, और इसके लिए आपकी अपनी provider key चाहिए।

आप नहीं कर सकते, और क्यों

—

Build with AI Office

Tools → Build with AI Office खुला डिज़ाइन AI Office को सौंप देता है ताकि agents की एक टीम उसे असली प्रोजेक्ट में बदल सके।

आप कर सकते हैं

  • AI Office को उसकी lobby पहले से भरी हुई खोलें: डिज़ाइन का नाम brief के रूप में, और डिज़ाइन का HTML, CSS और JS तथा उसके theme variables context के रूप में।

आप नहीं कर सकते, और क्यों

  • इसे Free पर इस्तेमाल करना: AI Office Pro है, इसलिए आपको इसके बदले paywall दिखता है।Pro

आप नहीं कर सकते, और क्यों

  • Free पर स्टार्ट स्क्रीन से AI Design इस्तेमाल करना: वह tile Pro wall खोलता है। ऐप की भाषा कोई भी हो, उसका शीर्षक स्पेनिश (Diseñador con IA) में दिखता है।Pro
  • इंटरनेट के बिना, key वाले provider के बिना, या उस provider का consent डायलॉग स्वीकार करने से पहले generate करना।नेटवर्क ज़रूरी
  • proposal के लागू होने से पहले उसे visually review करना: कोई visual diff नहीं है, और blocking findings के बिना कोई review screen है ही नहीं। review screen बदलावों को टेक्स्ट में सूचीबद्ध करती है।जानबूझकर
  • कई proposals पाना: How many proposals? (1, 2 या 3) सिर्फ़ prompt में एक पंक्ति जोड़ता है, और एक ही proposal generate होता है।अभी नहीं
  • B2B professionals, Students / learners, Lo-fi sketch या Production-ready से नतीजे को दिशा देना: Refine your brief के ये चार विकल्प prompt नहीं बदलते।अभी नहीं
  • AI से संलग्न फ़ाइलें, projects या designs पढ़वाना: सिर्फ़ उनके नाम brief में जुड़ते हैं।अभी नहीं
  • validation सीमाओं से आगे जाना: 120 actions, लागू करने के बाद 600 कंपोनेंट और custom CSS के 24,000 अक्षर।जानबूझकर

एक्सपोर्ट और शेयर

सब कुछ Tools → Export और Copy के नीचे है। हर एक्सपोर्ट एक डायलॉग खोलता है जिसमें फ़ाइल का नाम और दो बटन होते हैं: Save, जो Android फ़ाइल पिकर से फ़ाइल लिखता है, और Share, जो share sheet खोलता है।

फ़ॉर्मेट

फ़ॉर्मेटकैसे और आपको क्या मिलता हैPlan
HTMLExport HTML (design.html)।Free
CSSExport CSS (styles.css)।Free
SVGExport SVG (design.svg)।Free
ZIPExport ZIP (with assets): index.html, डिज़ाइन में होने पर styles.css और script.js, लोकल images वाला assets/ फ़ोल्डर, और comments होने पर comments.txt।Free
.pcdShare design (.pcd): Designer की अपनी फ़ाइल, जिसे आप फिर import कर सकते हैं।Free
ReactExport React (Component.jsx)।Pro
VueExport Vue (Component.vue)।Pro
SvelteExport Svelte (Component.svelte)।Pro
एक कंपोनेंटContext menu → Export as HTML: वह कंपोनेंट और उसके बच्चे, HTML फ़ाइल के रूप में।Free
ClipboardCopy → Copy HTML या Copy CSS, पूरे डिज़ाइन के लिए।Free
Code projectPocketCode Project: खुले डिज़ाइन से आपके projects में एक असली कोड प्रोजेक्ट बनाता है।Pro

एक्सपोर्ट से पहले की जाँचें

  • HTML, CSS, React, Vue, Svelte, ZIP या PocketCode Project एक्सपोर्ट करने से पहले, Designer Health check चलाता है। अगर उसे समस्याएँ मिलती हैं तो वह Export with open issues? पूछता है, साथ में Export anyway या Review issues। जैसा है वैसा एक्सपोर्ट करने पर कुछ नहीं बिगड़ता।
  • अगर डिज़ाइन free canvas में है तो वह Export in free-canvas mode? भी पूछता है: Convert to flow first या Export as-is।
  • SVG और .pcd दोनों जाँचें छोड़ देते हैं।

Save या share करें

  • Save हर फ़ॉर्मेट के लिए काम करता है।
  • Share टेक्स्ट फ़ॉर्मेट (HTML, CSS, SVG, React, Vue, Svelte और किसी कंपोनेंट का HTML) को सादे टेक्स्ट के रूप में भेजता है: कोड खुद, फ़ाइल नहीं।
  • ZIP या .pcd फ़ाइल के रूप में शेयर होता है: Share उसे app के cache में लिखता है और फ़ाइल जुड़ी हुई Android share sheet खोलता है। Save हर format के लिए भी काम करता है।

एक्सपोर्ट किए कोड में क्या होता है

  • Semantic HTML, जिसमें आपके breakpoints के असली @media rules, states के लिए :hover, :active, :focus और :disabled rules, animations के लिए @keyframes, और पेज navigation, dialogs, form validation और on-scroll triggers के लिए एक छोटा script होता है।
  • आपकी light और dark themes के variables। एक्सपोर्ट किया पेज आपके चुने Exported page default का पालन करता है: System, Light या Dark।
  • आपके इस्तेमाल किए हर web font के लिए Google Fonts का एक लिंक, इसलिए उन्हें दिखाने के लिए पेज को नेटवर्क चाहिए।

आप कर सकते हैं

  • Free पर पूरा डिज़ाइन HTML, CSS, SVG, ZIP या .pcd के रूप में एक्सपोर्ट करें, और Pro के साथ React, Vue या Svelte के रूप में।
  • Share से ZIP या .pcd को फ़ाइल के रूप में शेयर करें (text formats plain text की तरह जाते हैं)।
  • एक कंपोनेंट एक्सपोर्ट करें, HTML या CSS कॉपी करें, या डिज़ाइन को कोड प्रोजेक्ट के रूप में सेव करें (Pro)।

आप नहीं कर सकते, और क्यों

  • HTML, CSS, SVG या कोड को typed फ़ाइल के रूप में शेयर करना: टेक्स्ट फ़ॉर्मेट सादे टेक्स्ट के रूप में भेजे जाते हैं, कभी text/html या image/svg+xml के रूप में नहीं।जानबूझकर
  • Free पर React, Vue, Svelte या PocketCode Project एक्सपोर्ट करना: वे Pro wall खोलते हैं।Pro
  • नेटवर्क के बिना एक्सपोर्ट किए HTML के web fonts देखना: वह उन्हें Google Fonts से जोड़ता है। catalog में 50 families हैं।नेटवर्क ज़रूरी

Toolbox

Toolbox डिज़ाइन के काम के लिए ग्यारह छोटी utilities का सेट है। इसे स्टार्ट स्क्रीन (Toolbox) से या Home के quick action Media से खोलें। यह अपने आप में चलता है: आपको खुला डिज़ाइन नहीं चाहिए।

समूहटूलयह क्या करता है
ColorsColor PickerHEX · RGB · HSL converter।
ColorsGradient Builderlinear, radial और conic CSS gradients बनाता है।
ColorsPalette Generatorरंग harmonies: complementary, analogous, triadic, split complementary और monochromatic।
ColorsContrast Checkerदो रंगों का WCAG contrast ratio, AA और AAA के लिए, सामान्य और बड़े टेक्स्ट के लिए।
GeneratorsLorem Ipsumशब्दों, वाक्यों या अनुच्छेदों के रूप में placeholder टेक्स्ट।
GeneratorsIcon SizesAndroid, iOS, Web और macOS के लिए 28 icon sizes का संदर्भ।
CSS ToolsBox ShadowCSS shadow builder।
CSS ToolsBorder RadiusCSS radius builder।
TypographyFont Explorer25 fonts का preview और तुलना।
TypographyType Scalebase size से एक modular scale, Minor Second (1.067) से Golden Ratio (1.618) तक आठ ratios के साथ।
ConvertersUnit Converterpx, dp, sp, rem, em और pt के बीच बदलता है।

आप कर सकते हैं

  • नाम से टूल खोजें और ग्यारह में से कोई भी खोलें।
  • Toolbox को Free पर इस्तेमाल करें: उस पर कोई plan gate नहीं है।

आप नहीं कर सकते, और क्यों

  • images एडिट करना: Toolbox images को crop, filter या एक्सपोर्ट नहीं करता, और यह image editor नहीं है।जानबूझकर

जेस्चर और शॉर्टकट

काम करने का मुख्य तरीका touch gestures हैं। कीबोर्ड शॉर्टकट फ़िज़िकल कीबोर्ड के साथ काम करते हैं। दोनों ऐप में Tools → Gestures और Shortcuts (Ctrl+/) के नीचे सूचीबद्ध हैं। एडिटर पहली बार खोलने पर पाँच चरणों का परिचय दिखता है, और Gestures के नीचे Replay introduction उसे फिर दिखाता है।

Touch gestures

जेस्चरयह क्या करता है
टैपसबसे भीतरी कंपोनेंट चुनें। एक स्तर ऊपर जाने के लिए उसी पर फिर टैप करें, और चयन हटाने के लिए खाली जगह पर टैप करें।
बिना चुने कंपोनेंट पर लॉन्ग-प्रेसउसे चयन में जोड़ें।
चुने हुए कंपोनेंट पर लॉन्ग-प्रेसउसका context menu खोलें।
टेक्स्ट पर डबल-टैपEdit text खोलें।
container पर डबल-टैपउसे अलग (isolate) करें।
palette कार्ड पर लॉन्ग-प्रेस, फिर खींचेंकंपोनेंट को ठीक वहाँ रखें जहाँ आप छोड़ते हैं।
चुने हुए कंपोनेंट को खींचेंउसे हिलाएँ। उसे container पर छोड़ने से वह nest हो जाता है।
खाली जगह या बिना चुने कंपोनेंट को खींचेंकैनवास pan करें।
Area tool से खींचेंआयत जिन भी शीर्ष-स्तर के कंपोनेंटों को छूता है उन सबको चुनें।
दो उँगलियों से खींचना या पिंचउँगलियों के नीचे के बिंदु पर टिकाकर pan और zoom करें।
ruler से खींचेंएक guide बनाएँ।
कोने के handle को खींचेंदोनों axes का आकार बदलें।
किनारे के handle को खींचेंएक axis का आकार बदलें।
rotation handle को खींचेंघुमाएँ; यह हर 15° पर snap होता है।
padding या gap handle को खींचेंcontainer की spacing एडिट करें।

कीबोर्ड शॉर्टकट

नीचे के शॉर्टकट वे हैं जिन्हें Designer संभालता है। जिस कीबोर्ड में Cmd है उस पर Ctrl की जगह Cmd है।

Keysक्रिया
↑ ↓ ← →चयन को 1 px खिसकाएँ; Shift के साथ 10 px।
Ctrl+A · Escसब चुनें · चयन हटाएँ।
Delete या Backspaceचयन delete करें।
Ctrl+Z · Ctrl+Shift+Z या Ctrl+YUndo · Redo।
Ctrl+C · Ctrl+X · Ctrl+VCopy · Cut · Paste।
Ctrl+DDuplicate।
Ctrl+Eटेक्स्ट एडिट करें।
Ctrl+G · Ctrl+Shift+GGroup · Ungroup।
Ctrl+] · Ctrl+[एक स्तर आगे लाएँ · एक स्तर पीछे भेजें; सबसे आगे लाने या सबसे पीछे भेजने के लिए Shift जोड़ें।
Ctrl+Shift+H · Ctrl+Shift+LHide या show · Lock या unlock।
Ctrl+Alt+Kreusable कंपोनेंट बनाएँ।
+ · -Zoom in · Zoom out।
0 · 1 · 2Fit to screen · 100% · Zoom to selection।
Ctrl+/shortcuts डायलॉग खोलें।

Accessibility और एक हाथ से इस्तेमाल

  • TalkBack के साथ, custom actions चुने हुए कंपोनेंट को 8 dp के steps में हिलाते हैं और उसकी चौड़ाई या ऊँचाई बदलते हैं।
  • Left-handed mode (Tools → Enable left-handed mode) floating selection bar को खिसका देता है, और उस bar को Disable selection bar से बंद किया जा सकता है।
  • हर पैनल की ऊँचाई याद रखी जाती है, इसलिए पैनल वैसे ही खुलता है जैसा आपने उसे छोड़ा था।

आप नहीं कर सकते, और क्यों

  • शॉर्टकट को on-screen कीबोर्ड के साथ इस्तेमाल करना: उन्हें फ़िज़िकल कीबोर्ड चाहिए। Right-click, mouse wheel, Shift+click, Alt+drag, Space+drag और टूल के अक्षर समर्थित नहीं हैं।डिवाइस
  • उन्हें remap करना: Designer के शॉर्टकट तय हैं और ऐप की keybinding settings का हिस्सा नहीं हैं।जानबूझकर

Free और Pro

Designer लगभग पूरी तरह मुफ़्त है। Pro कुछ ख़ास चीज़ें खोलता है, और Free पर एक ही सीमा है: templates से बने तीन डिज़ाइन।

सुविधाFreePro
Canvas, 49 कंपोनेंट, 5 blocks, layout, tokens, themes, reusable कंपोनेंट, states, interactions और animationशामिलशामिल
Pages, autosave, undo (200 steps), history, versions, recovery और Healthशामिलशामिल
खाली डिज़ाइन और Figma या HTML importsplan की कोई सीमा नहींplan की कोई सीमा नहीं
Templates से बने डिज़ाइन (उनके duplicates और दोबारा import की गई .pcd कॉपी भी गिनी जाती हैं)एक समय में 3कोई सीमा नहीं
HTML, CSS, SVG, ZIP और .pcd एक्सपोर्ट; Copy HTML और CSS; View Codeशामिलशामिल
React, Vue और Svelte एक्सपोर्टउपलब्ध नहींशामिल
Responsive preview: Original, Mobile (375), Tablet (768) और Desktop (1280)शामिलशामिल
Responsive preview: Mobile S (320), Mobile L (428) और Desktop L (1440)उपलब्ध नहींशामिल
PocketCode Project (डिज़ाइन को कोड प्रोजेक्ट के रूप में सेव करें)उपलब्ध नहींशामिल
AI Design (brief से नया डिज़ाइन)उपलब्ध नहींशामिल, आपकी अपनी provider key के साथ
✨ Improve with AI (खुले डिज़ाइन पर)कोई plan gate नहीं; आपकी अपनी provider key चाहिएशामिल, आपकी अपनी provider key के साथ
Build with AI Officeउपलब्ध नहीं (AI Office Pro है)शामिल
Toolboxशामिलशामिल
ये पंक्तियाँ ऐप के UserPlan और PlanFeature का पालन करती हैं: maxDesignTemplates, UNLIMITED_TEMPLATES, EXPORT_FRAMEWORKS, AI_DESIGNER और AI_OFFICE। कीमतें और पूरी Free व Pro तालिका Plans पेज पर हैं।

प्राइवेसी

  • Designer खुद आपके डिज़ाइन अपलोड नहीं करता: वे तब तक ऐप के private storage में रहते हैं जब तक आप उन्हें एक्सपोर्ट, शेयर या AI Office को नहीं भेजते।
  • AI generation आपके चुने provider को आपका brief, आपके चुने page type, style, controls और design system, और जब डिज़ाइन खाली न हो तब उसके कंपोनेंटों की संक्षिप्त सूची (id, type, नाम, position, size और parent) भेजता है। संलग्न चीज़ें सिर्फ़ अपने नाम जोड़ती हैं।
  • जब तक आप किसी provider को स्वीकार नहीं करते, ऐप Send to …? पूछता है और समझाता है कि आपका संदेश और जो आप संलग्न करते हैं वह इंटरनेट के ज़रिए किसी third-party AI provider को जाता है। यह चुनाव हर provider और हर अकाउंट के हिसाब से याद रखा जाता है। brief में secrets या निजी डेटा डालने से बचें।
  • provider key आपकी अपनी है और Settings में सेट की जाती है। AI providers देखें।
  • एक्सपोर्ट किया HTML आपके इस्तेमाल किए web fonts के लिए Google Fonts से जुड़ता है, इसलिए जो भी उसे खोलता है वह वे fonts Google से लेता है। Images और videos अपने ही https पतों से लोड होते हैं।
  • ऐप के भीतर का preview आपके डिज़ाइन को एक लॉक किए हुए WebView में चलाता है: दूसरी साइटों पर navigation नहीं, लोकल फ़ाइलें नहीं, बाहरी scripts नहीं, scripts से network calls नहीं और form submission नहीं।
  • एक्सपोर्ट करने पर, ऐप अपने internal event bus पर एक्सपोर्ट की घोषणा करता है (डिज़ाइन का id, नाम और फ़ॉर्मेट, कभी सामग्री नहीं), और एक Workflow उसे trigger के रूप में इस्तेमाल कर सकता है।

सीमाएँ

सबसे अहम सीमाएँ एक जगह। हर एक को उसी सेक्शन में समझाया गया है जहाँ वह लागू होती है।

  • एडिटर या file explorer से .html फ़ाइल सीधे Designer में खोलना।जानबूझकर
  • बनाने के बाद डिज़ाइन का नाम बदलना।अभी नहीं
  • ग्रिड का साइज़ बदलना: वह तय 16 px है।जानबूझकर
  • सत्रों के बीच undo बचाकर रखना: डिज़ाइन बंद करने पर history खाली हो जाती है और उसमें 200 steps रहते हैं।जानबूझकर
  • फ़ोन पर Compare और on-screen कीबोर्ड के साथ फ़िज़िकल-कीबोर्ड शॉर्टकट इस्तेमाल करना।डिवाइस
  • palette में कंपोनेंट के thumbnails देखना, या अपनी भाषा के नाम से उसे खोजना: नाम अंग्रेज़ी में हैं।जानबूझकर
  • कैनवास पर web fonts देखना: वह सबसे नज़दीकी system font बनाता है, और सिर्फ़ एक्सपोर्ट किया HTML font जोड़ता है।जानबूझकर
  • reusable कंपोनेंट के instances का मूल के साथ अपने आप बदलना।जानबूझकर
  • View Code से हाथ से एडिट किया HTML बनाए रखना: कैनवास या theme में आपके अगले बदलाव पर वह साफ़ हो जाता है।जानबूझकर
  • prototype को लिंक से शेयर करना।जानबूझकर
  • preview में navigate करना, बाहरी scripts चलाना, network बुलाना या forms submit करना।Google Play
  • Free पर Mobile S, Mobile L और Desktop L का preview देखना, React, Vue और Svelte एक्सपोर्ट करना, PocketCode Project सेव करना, AI Design या Build with AI Office इस्तेमाल करना।Pro
  • Free पर template से चौथा डिज़ाइन बनाना।Pro
  • इंटरनेट, provider key या उस provider की सहमति के बिना AI से generate करना।नेटवर्क ज़रूरी
  • कई AI proposals पाना, या Refine your brief के उन चार विकल्पों से AI को दिशा देना जो कुछ नहीं करते।अभी नहीं
  • Figma अकाउंट से import करना, या HTML फ़ाइल से scripts और जटिल CSS बचाए रखना।जानबूझकर
  • 20 MB से बड़ी .pcd import करना: ऐप उसे अस्वीकार कर देता है।डिवाइस
  • history की प्रविष्टियाँ, Health संदेश और automatic checkpoint के नाम अपनी भाषा में पढ़ना: वे स्पेनिश में तय हैं।जानबूझकर

समस्या निवारण

This design is damaged

फ़ाइल पढ़ी नहीं जा सकी। उसकी पंक्ति पर Recover पर टैप करें, या उसे खोलें, और Automatic backup (आपके पिछले सेव से रखी कॉपी) या Or a saved version चुनें।

Couldn't recover this design

न automatic backup और न कोई सेव किया हुआ version restore हो सका। अगर आपने पहले कोई .pcd एक्सपोर्ट किया था, तो उसे Import design (.pcd) से import करें।

That file isn't a valid PocketCode design

Import design (.pcd) से आपने जो फ़ाइल चुनी है वह Designer से बना डिज़ाइन नहीं है, खराब है, या 20 MB से बड़ी है। Figma फ़ाइल Import from Figma (JSON) में जाती है (वरना ऐप कहता है “That file isn't valid Figma JSON”), और HTML फ़ाइल Import from HTML में (“That file couldn't be read as HTML”)।

Export with open issues?

Health check को समस्याएँ मिलीं। जैसा है वैसा एक्सपोर्ट करने पर कुछ नहीं बिगड़ता: Export anyway पर टैप करें, या Design System Health खोलने के लिए Review issues पर।

Export in free-canvas mode?

free-canvas डिज़ाइन absolute positions एक्सपोर्ट करता है। Convert to flow first blocks को stack कर देता है ताकि HTML responsive हो; Export as-is positions को वैसा ही रखता है।

Not configured

Create with AI के provider chip से खुलने वाली provider सूची में, जिस provider की कोई key नहीं होती उस पर यह badge दिखता है। Settings में key जोड़ें (AI providers देखें), फिर provider को दोबारा चुनें।

The AI did not return any design actions.

मॉडल ने design actions की उपयोगी सूची के बिना जवाब दिया। फिर कोशिश करें, brief को और ठोस बनाएँ, या chip में कोई दूसरा मॉडल चुनें।

AI changes partially applied (N invalid actions skipped)

proposal का एक हिस्सा किसी सीमा (120 actions, 600 कंपोनेंट, custom CSS के 24,000 अक्षर) या किसी नियम को तोड़ता था, जैसे ऐसे कंपोनेंट की ओर इशारा करना जो मौजूद नहीं है, इसलिए सिर्फ़ वैध हिस्सा लागू हुआ। एक undo सब कुछ पलट देता है।

Send to …?

आपका brief किसी ऐसे third-party provider को भेजने से पहले ऐप पूछता है जिसे आपने अभी तक स्वीकार नहीं किया। जारी रखने के लिए Send पर टैप करें; generation फिर दोबारा शुरू होता है।

एक्सपोर्ट किए HTML में font अलग दिखता है

एक्सपोर्ट Google Fonts से सिर्फ़ catalog की 50 families जोड़ता है। Design System Health बाकी किसी भी को Fonts that would not link on export के रूप में चिह्नित करता है, और जिन्हें वह जोड़ता है उन्हें लोड करने के लिए पेज को नेटवर्क चाहिए।

कोई preview width मुझसे Pro लेने को कहती है

Mobile S (320), Mobile L (428) और Desktop L (1440) Pro हैं। Original, Mobile, Tablet और Desktop मुफ़्त हैं, और आप किसी भी breakpoint को फिर भी एडिट कर सकते हैं।

अगले कदम

कोड एडिटरआपके एक्सपोर्ट किए HTML, CSS और framework कोड को एडिट करेंAI Chatचैट में artifacts, जहाँ से Open in Designer शुरू होता हैProjectsProjects, जिनमें वह भी है जो PocketCode Project बनाता हैप्लान और मूल्यPro पूरे ऐप में क्या जोड़ता है