Visual Designer: बिना कोड लिखे UI बनाना

Visual Designer: खींचकर और छोड़कर इंटरफ़ेस बनाएँ

Visual Designer PocketCode की सबसे शक्तिशाली सुविधाओं में से एक है। यह आपको उपयोगकर्ता इंटरफ़ेस दृश्य रूप से बनाने देता है और अपने आप साफ़-सुथरा, प्रोडक्शन-के-लिए-तैयार कोड जनरेट करता है।

एक visual designer क्यों?

फ़ोन स्क्रीन पर UI डिज़ाइन करना चुनौतीपूर्ण हो सकता है। छोटी स्क्रीन पर layout कोड हाथ से लिखना धीमा और ग़लतियों से भरा होता है। visual designer इसे एक सहज drag & drop इंटरफ़ेस के साथ हल करता है।

फ़ायदे

• गति: मिनटों में डिज़ाइन करें, घंटों में नहीं
• दृश्य: परिणाम को रीयल-टाइम में देखें
• साफ़ कोड: सर्वोत्तम तरीक़ों का पालन करते हुए कोड जनरेट करता है
• मल्टी-टारगेट: React, Vue, Svelte, HTML/CSS और SVG

शुरू करना

designer खोलें

1. किसी भी प्रोजेक्ट में, टैब बार में Design आइकन पर टैप करें
2. एक्सपोर्ट टारगेट चुनें (React, Vue, Svelte, HTML/CSS)
3. एक खाली canvas से शुरू करें या एक template चुनें

बुनियादी इंटरफ़ेस

designer इसमें बँटा है:

• Components पैनल (बाएँ) — खींचे जा सकने वाले तत्व
• Canvas (केंद्र) — आपका डिज़ाइन क्षेत्र
• Properties (दाएँ) — चुने गए तत्वों को अनुकूलित करें

उपलब्ध components

palette में 35 component प्रकार शामिल हैं। एक चयन:

Layout

Component	विवरण
Container	लचीला container
Row	क्षैतिज तत्व
Column	ऊर्ध्वाधर तत्व
Grid	CSS Grid layout
Scroll	स्क्रॉल होने वाला क्षेत्र

Input

Component	विवरण
Button	variants वाला बटन
TextInput	टेक्स्ट फ़ील्ड
Toggle	On/Off स्विच
Slider	value सिलेक्टर
Dropdown	ड्रॉपडाउन मेन्यू
Checkbox	चेकबॉक्स
RadioGroup	Radio विकल्प

Display

Component	विवरण
Text	शैलियों वाला टेक्स्ट
Image	चित्र/आइकन
Card	जानकारी कार्ड
List	गतिशील सूची
Badge	सूचना बैज
Divider	दृश्य विभाजक

Navigation

Component	विवरण
NavBar	शीर्ष नेविगेशन बार
TabBar	टैब नेविगेशन
BottomNav	निचला नेविगेशन
Breadcrumb	पदानुक्रमित नेविगेशन

व्यावहारिक ट्यूटोरियल: Login स्क्रीन

आइए चरण-दर-चरण एक पूरी login स्क्रीन बनाएँ:

चरण 1: बुनियादी संरचना

canvas पर एक Column खींचें और कॉन्फ़िगर करें:

• Alignment: center
• Padding: 24px
• Background: #0a0a0a

चरण 2: logo जोड़ें

column के अंदर, एक Image खींचें:

• Size: 120x120
• Border-radius: full (वृत्त)
• Margin-bottom: 32px

चरण 3: टेक्स्ट फ़ील्ड

दो TextInput components जोड़ें:

Email:

• Placeholder: "Email"
• Type: email
• Icon: mail
• Width: 100%

Password:

• Placeholder: "Password"
• Type: password
• Icon: lock
• Width: 100%

चरण 4: Login बटन

एक Button खींचें:

• Text: "Log In"
• Variant: primary
• Width: 100%
• Border-radius: 12px

चरण 5: अतिरिक्त लिंक

इनके लिए Text components जोड़ें:

• "Forgot your password?" (link शैली)
• "Don't have an account? Sign up" (धुँधला टेक्स्ट + link)

जनरेट किया गया कोड

designer अपने आप साफ़-सुथरा कोड बनाता है:

// React आउटपुट
export function LoginScreen() {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");

	return (
		<div className="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
			<img src="/logo.png" alt="Logo" className="w-30 h-30 rounded-full mb-8" />

			<input
				type="email"
				placeholder="Email"
				value={email}
				onChange={(e) => setEmail(e.target.value)}
				className="w-full p-3 mb-4 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<input
				type="password"
				placeholder="Password"
				value={password}
				onChange={(e) => setPassword(e.target.value)}
				className="w-full p-3 mb-6 bg-neutral-900 rounded-xl
                   border border-neutral-800 text-white"
			/>

			<button
				className="w-full p-3 bg-blue-600 rounded-xl
                          text-white font-semibold hover:bg-blue-700"
			>
				Log In
			</button>

			<p className="mt-4 text-neutral-500 text-sm">
				Don't have an account? <span className="text-blue-400">Sign up</span>
			</p>
		</div>
	);
}

<!-- Vue आउटपुट -->
<script setup>
import { ref } from "vue";
const email = ref("");
const password = ref("");
</script>

<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-neutral-950 p-6">
    <img src="/logo.png" alt="Logo" class="w-30 h-30 rounded-full mb-8" />
    <input
      v-model="email"
      type="email"
      placeholder="Email"
      class="w-full p-3 mb-4 bg-neutral-900 rounded-xl border border-neutral-800 text-white"
    />
    <input
      v-model="password"
      type="password"
      placeholder="Password"
      class="w-full p-3 mb-6 bg-neutral-900 rounded-xl border border-neutral-800 text-white"
    />
    <button
      class="w-full p-3 bg-blue-600 rounded-xl text-white font-semibold hover:bg-blue-700"
    >
      Log In
    </button>
    <p class="mt-4 text-neutral-500 text-sm">
      Don't have an account? <span class="text-blue-400">Sign up</span>
    </p>
  </div>
</template>

उन्नत सुविधाएँ

Responsive डिज़ाइन

designer अपने आप responsiveness संभालता है:

• Auto-layout: तत्व स्क्रीन के आकार के अनुसार समायोजित होते हैं
• Breakpoints: मोबाइल/टैबलेट के लिए अलग-अलग व्यवस्थाएँ परिभाषित करें
• सापेक्ष इकाइयाँ: निश्चित pixels के बजाय %, rem और flex का उपयोग करता है

Interaction states (इंटरैक्शन अवस्थाएँ)

designer दृश्य अवस्थाएँ कैप्चर करता है, व्यवहार नहीं — यह स्टैटिक HTML/CSS उत्सर्जित करता है, इसलिए कोई event वायरिंग या navigation नहीं होती। हर component के लिए आप क्या सेट कर सकते हैं:

1. एक component चुनें (जैसे, एक Button)
2. इसकी hover, active, focus और disabled अवस्थाओं को अलग-अलग स्टाइल करें
3. लिंक के लिए, href टारगेट सेट करें

असल व्यवहार (click handlers, routing, data) बाद में कोड में जोड़ा जाता है, उस HTML/CSS/React/Vue/Svelte पर जिसे designer एक्सपोर्ट करता है।

दोबारा इस्तेमाल होने वाले templates

अपने डिज़ाइनों को templates के रूप में सेव करें:

• Custom components: संयोजनों को एकल components के रूप में सेव करें
• Design system: रंग, टाइपोग्राफ़ी और spacing परिभाषित करें
• Screen templates: पूरे layouts टीम के साथ साझा करें

Gesture सपोर्ट

designer टच इंटरैक्शन के लिए बनाया गया है:

• canvas पर Pinch to zoom
• nested तत्वों को चुनने के लिए Double-tap
• संदर्भ मेन्यू के लिए Long-press
• पैनलों के बीच जाने के लिए Swipe

एक्सपोर्ट टारगेट

designer असली, संपादन-योग्य कोड जनरेट करता है — सब वेब-आधारित:

टारगेट	आउटपुट
React / JSX	hooks वाले components
Vue	Single-file components
Svelte	.svelte components
HTML + CSS	साफ़, फ़्रेमवर्क-रहित markup
SVG	canvas का vector एक्सपोर्ट

सुझाव और सर्वोत्तम तरीक़े

1. संरचना से शुरू करें: सामग्री से पहले containers रखें
2. Auto-layout का उपयोग करें: जब भी संभव हो निश्चित आकारों से बचें
3. अपने components को नाम दें: अधिक पठनीय कोड जनरेट करता है
4. बार-बार preview करें: अलग-अलग स्क्रीन आकारों पर जाँचें
5. इंक्रीमेंटली एक्सपोर्ट करें: कोड जाँचने के लिए अंत तक इंतज़ार न करें

---

visual designer आपको एक ही डिवाइस से डिज़ाइन और प्रोग्राम, दोनों करने देता है — एक स्क्रीन का ख़ाका बनाएँ, साफ़-सुथरा React, Vue, Svelte या HTML/CSS एक्सपोर्ट करें, और वहीं बनाते रहें। आज ही आज़माएँ और अपने डेवलपमेंट को तेज़ करें!