Docs/विज़ुअल डिज़ाइनर

विज़ुअल डिज़ाइनर

FreePro: AI Designer + React/Vue/Svelte

2D कैनवास, स्मार्ट स्नैप, संरेखण और वितरण, गुण / लेयर / थीम पैनल, मल्टी-पेज समर्थन और सादे HTML/CSS और framework कोड (React, Vue, Svelte) उत्पन्न करने वाला निर्यात पाइपलाइन के साथ Figma-शैली HTML/CSS विज़ुअल बिल्डर। एक Pro AI डिज़ाइनर फ़्लो शामिल है जो प्राकृतिक-भाषा ब्रीफ़ को संपादन योग्य project में बदलता है जो लागू करने से पहले समीक्षायोग्य होता है।

2D कैनवास

चुनने के लिए टैप करें फिर हिलाने के लिए खींचें, आकार बदलें, ग्रिड और अन्य घटकों पर स्नैप, 0.1× – 4× ज़ूम, दूरी लेबल के साथ स्मार्ट गाइड।

14 अंतर्निहित घटक

Text, Heading, Button, Link, Badge, Chip, Icon, HR Divider, Text Field, Text Area, Checkbox, Toggle, Option, Select.

Properties · Layers · Theme

रंग tokens को स्टाइल करने, क्रम में रखने और प्रबंधित करने के लिए तीन साइड पैनल।

मल्टी-पेज

पूर्वावलोकन में टैब; जोड़ें / नाम बदलें / डुप्लिकेट / हटाएँ बिना सीमा के।

5 अंतर्निहित टेम्पलेट

Landing, Login, Dashboard, Portfolio, E-Commerce + Marketplace.

द्विदिशीय Marketplace

टेम्पलेट और डाउनलोड किए गए घटक आयात करें; अपने डिज़ाइन प्रकाशित करें।

विज़ुअल कैनवास

गतिशील आर्टबोर्ड, कॉन्फ़िगर करने योग्य पृष्ठभूमि, विज़ुअल ग्रिड, स्मार्ट गाइड और दो कर्सर मोड (चयन और पैन) के साथ प्रत्यक्ष हेरफेर के साथ शुद्ध नेटिव कैनवास (कोई WebView नहीं)।

इंटरैक्शन	तंत्र
टैप	उंगली के नीचे सबसे भीतरी घटक का चयन करता है; खाली जगह पर टैप करने से चयन हटता है
चयनित को खींचें	इसे हिलाता है; स्मार्ट स्नैप पड़ोसी किनारों/केंद्रों का सुझाव देता है
अचयनित को खींचें	कैनवास को पैन/स्क्रॉल करता है (घटक को नहीं हिलाता)
पिंच (2 उंगलियाँ)	ज़ूम 0.1× – 4×, कर्सर के सापेक्ष
Resize	घोस्ट पूर्वावलोकन के साथ 4 कोनों + 4 साइड पर हैंडल
ग्रिड पर स्नैप	कॉन्फ़िगर करने योग्य ग्रिड आकार (डिफ़ॉल्ट 16 px); ऑन/ऑफ़ टॉगल
मल्टी-सेलेक्ट	किसी चयनित सदस्य को खींचने से पूरा समूह हिलता है
संरेखण	Left/Center-H/Right · Top/Center-V/Bottom
वितरण	क्षैतिज और ऊर्ध्वाधर
पैरेंट-चाइल्ड	कंटेनर घटक flex ऑटो-लेआउट (row/column/grid, gap, padding, wrap) के साथ नेस्टेड चाइल्ड स्वीकार करते हैं
लॉक	ड्रैग और आकार बदलने को लॉक करता है
दृश्यता	दिखाएँ/छिपाएँ टॉगल
Z-index	लेयर्स पैनल में विज़ुअल क्रम

Responsive Preview

अंतर्निहित दस्तावेज़ को छुए बिना पूर्व-निर्धारित चौड़ाई पर कैनवास का पूर्वावलोकन करें।

मूल

—

Mobile S

320 px

Mobile

375 px

Mobile L

428 px

Tablet

768 px

Desktop

1280 px

Desktop L+

1440 px+

Pro

ऑटो-स्टैक रीफ़्लो

कैनवास पूर्वावलोकन और HTML जनरेटर द्वारा साझा एक एकल शुद्ध फ़ंक्शन। संकीर्ण चौड़ाई पर यह रूट्स को पंक्तियों में क्लस्टर करता है और या तो छोटे आइटम (नेवबार, chips) को फ़्लो-रैप करता है या ब्लॉक को पूर्ण-चौड़ाई में स्टैक करता है — केवल-प्रदर्शन, दस्तावेज़ कभी नहीं बदलता।

प्रति-ब्रेकपॉइंट ओवरराइड

प्रत्येक तत्व प्रति ब्रेकपॉइंट स्थिति / आकार / दृश्यता ओवरराइड संग्रहीत कर सकता है (mobile ≤ 480 px, tablet ≤ 900 px)। स्टाइल पैनल के Responsive टैब से संपादित, ये ऑटो-स्टैक पर प्राथमिकता पाते हैं और वास्तविक @media queries के रूप में निर्यात होते हैं।

कैनवास चौड़ाई से परे, फ़ुल-स्क्रीन WebView पूर्वावलोकन उत्पन्न HTML को वास्तविक डिवाइस फ़्रेम के भीतर रेंडर करता है — Mobile 375 · Tablet 768 · Desktop 1280 · Full — डिवाइस की वास्तविक CSS चौड़ाई पर, ताकि निर्यात की गई @media queries वास्तव में सक्रिय हों।

घटक पैलेट

Basic

Text · Heading · Button · Link · Badge · Chip · Icon · HR Divider

Input

Text Field · Text Area · Checkbox · Toggle · Option · Select

Layout

Box · Card · Column · Row · Navbar

Container

बच्चों को नेस्ट कर सकने वाले घटक

Navigation

Navbar · Link

Feedback

Badge · Chip

Downloaded टैब Marketplace से डाउनलोड किए गए घटक दिखाता है, जो एक टैप से कैनवास में सम्मिलित किए जा सकते हैं।

गुण पैनल

चयनित घटक पर स्टिकी टैब: Design, Style, Spacing, Layout, FX और Responsive।

Position & Size

Content

Background

Typography

Padding

Margin

Border

Shadow

Layout (flex)

Animations / transitions

Custom CSS

Responsive overrides (per-breakpoint)

Color picker (HSV + hex + alpha)

अंतर्निहित टेम्पलेट

Landing Page

हीरो और विशेषताओं ग्रिड के साथ आधुनिक लैंडिंग

ईमेल/पासवर्ड प्रमाणीकरण फ़ॉर्म

Dashboard

स्टैट्स कार्ड और सेटिंग्स के साथ एडमिन पैनल

Portfolio

About, projects, contact के साथ व्यक्तिगत पोर्टफ़ोलियो

E-Commerce

विवरण दृश्य के साथ उत्पाद कैटलॉग

Free सीमा: टेम्पलेट से 3 डिज़ाइन

चौथे टेम्पलेट-आधारित डिज़ाइन से आगे, असीमित-टेम्पलेट gate ट्रिगर होता है।

निर्यात प्रारूप

प्रारूप	Plan	साझा करते समय MIME
HTML	Free	text/html
CSS	Free	text/css
SVG	Free	image/svg+xml
React (JSX + CSS)	Pro	text/plain
Vue (SFC)	Pro	text/plain
Svelte	Pro	text/plain

निर्यात किया गया CSS प्रति घटक वास्तविक @media queries उत्सर्जित करता है, ऑटो-स्टैक (साफ़ मोबाइल/टैबलेट कॉलम) को उपयोगकर्ता के ओवरराइड (जो प्राथमिकता पाते हैं) के साथ जोड़ता है। सभी 3 framework प्रारूप (React, Vue, Svelte) Premium द्वारा गेट किए गए हैं और वही @media विरासत में पाते हैं; Copy HTML, Copy CSS और View Code हमेशा Free हैं।

AI Designer

100 % Pro

Pro-विशिष्ट क्षमता। एक प्राकृतिक-भाषा ब्रीफ़ को एक संपादन योग्य डिज़ाइन project में बदलता है, कैनवास पर परिवर्तन लागू करने से पहले अनिवार्य समीक्षा-पहले के साथ 5-चरण पाइपलाइन से गुज़रता है।

Pipeline

Phase 1

Brief & Discovery

Page type, style, palette, discovery form

Phase 2

उत्पादन

योजना स्ट्रीम + LLM कॉल

Phase 3

Review

क्रिटीक स्कोर + क्रिया सूची

Phase 4

Apply

Undo/redo प्रबंधक के माध्यम से क्रियाएँ

Phase 5

Live Preview

WebView, Save/Export/Regenerate

20 page types

Landing · Dashboard · Blog · E-commerce · Portfolio · Admin · SaaS · Marketing · Form · Auth · Onboarding · Settings · Pricing · Data Viz · Docs · Social · Gallery · Email · Wireframe · Presentation

10 visual styles

Minimal · Bold · Dark · Editorial · Playful · Corporate · Technical · Glassmorphism · Brutalist · Soft & Warm

8 पैलेट

Blues · Purples · Greens · Reds · Warm · Mono · Teals · Pinks · + कस्टम 3 रंग

खोज फ़ॉर्म (वैकल्पिक)

AudienceProduct teams · Founders · Operators · Consumers · B2B · Students

FidelityLo-fi · Wireframe · Polished · Prototype · Production-ready

Brandचयनित प्रणाली · मुफ़्त · संदर्भ-आधारित · तटस्थ

Variations1 · 2 · 3 प्रस्ताव

ToneProfessional · Friendly · Bold · Technical · Premium · Playful

DensityMinimal · Balanced · Dense

DeviceMobile-first · Desktop-first · Responsive · Tablet

Success criteriaमुफ़्त टेक्स्ट

Self-critique scores (0-10)

Hierarchy

स्पष्ट दृश्य पदानुक्रम?

Execution

साफ़ लेआउट?

Specificity

ब्रीफ़-विशिष्ट विवरण?

Restraint

अनावश्यक जटिलता से बचता है?

रंग-कोडित औसत: हरा ≥ 7, पीला ≥ 4, लाल < 4।

फ़्लो गारंटी

•केवल सुरक्षित डिज़ाइन क्रियाएँ स्वीकार की जाती हैं (कैटलॉग सत्यापन)
•लागू करने से पहले AI परिवर्तन समीक्षा स्क्रीन में अनिवार्य विज़ुअल अंतर
•Undo/Redo बरकरार रहता है — हर क्रिया कैनवास इतिहास के माध्यम से जाती है
•निर्यात मैनुअल फ़्लो के HTML/CSS जनरेटर का पुन: उपयोग करते हैं

AI सहायक उपकरण (Pro)

AI Align — चयनित घटकों को लेता है और उन्हें स्वचालित रूप से रीफ़्लो करता है।
AI Component — एक संक्षिप्त ब्रीफ़ से एक अनुभाग या घटक उत्पन्न करता है और इसे कैनवास में सम्मिलित करता है।

Free vs Pro प्लान

विशेषता	Plan
कैनवास एडिटर (सभी अंतर्निहित घटक)	Free
स्नैप, ग्रिड, रूलर, संरेखण, वितरण	Free
मल्टी-पेज	Free
रंग tokens, थीम, कस्टम CSS	Free
Undo/Redo, ऑटो-सेव	Free
अंतर्निहित टेम्पलेट (3 डिज़ाइन तक)	Free
चौथे डिज़ाइन से आगे के टेम्पलेट	Pro
रिस्पॉन्सिव पूर्वावलोकन (Desktop 1280 तक)	Free
रिस्पॉन्सिव Desktop L + कस्टम ब्रेकपॉइंट	Pro
Export HTML / CSS / SVG	Free
Export React / Vue / Svelte	Pro
Copy HTML, Copy CSS, View Code	Free
Marketplace पर डिज़ाइन / घटक प्रकाशित करें	Free
पूर्ण AI डिज़ाइनर (ब्रीफ़ → समीक्षा → लागू करें → लाइव पूर्वावलोकन)	Pro
AI Align, AI Component	Pro

मॉड्यूल आँकड़े

अंतर्निहित घटक

अंतर्निहित टेम्पलेट

निर्यात प्रारूप

स्टाइल पैनल टैब

रिस्पॉन्सिव मोड

ओवरराइड ब्रेकपॉइंट

AI page types

10+

AI visual styles

AI palettes

अगला

Marketplace