GPT-5.4 के साथ परिष्कृत फ्रंटएंड डिज़ाइन बनाना

 (developers.openai.com)
53 पॉइंट द्वारा GN⁺ 2026-03-21 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • OpenAI ने GPT-5.4 की फ्रंटएंड डेवलपमेंट क्षमता को बेहतर बनाने के लिए व्यावहारिक prompting तकनीकें और डिज़ाइन गाइड जारी किए
  • image understanding, functional completeness, और Computer Use क्षमता इसके मुख्य सुधार क्षेत्र हैं, जिनकी बदौलत पिछले मॉडलों की तुलना में अधिक विज़ुअली परिष्कृत और महत्वाकांक्षी परिणाम बनाए जा सकते हैं
  • यह बताया गया कि अगर prompt अस्पष्ट हो, तो मॉडल training data के high-frequency patterns पर लौटकर generic design पर अटक सकता है, और इसे पार करने के लिए ठोस तकनीकें सुझाई गईं
  • design system की परिभाषा, visual references देना, narrative को संरचित करना, और low reasoning level सेट करना — इन 4 प्रमुख व्यावहारिक टिप्स पर ज़ोर
  • अलग से frontend-skill prompt package को open source के रूप में जारी किया गया, ताकि Codex जैसे coding agents में इसे तुरंत इस्तेमाल किया जा सके

मॉडल में सुधार

  • GPT-5.4 फ्रंटएंड कार्यों में तीन व्यावहारिक सुधारों पर केंद्रित है:
    • image understanding को मजबूत करना
    • अधिक पूर्ण और बेहतर apps/websites बनाना
    • अपने काम की जाँच, test और verification के लिए tools इस्तेमाल करने की क्षमता बढ़ाना

  • image understanding और tool usage

    • इसे image search और image generation tools को native रूप से इस्तेमाल करने के लिए train किया गया है, ताकि डिज़ाइन प्रक्रिया में यह सीधे visual reasoning कर सके
    • सर्वोत्तम परिणामों के लिए final assets चुनने से पहले मॉडल से moodboard या कई visual options पहले बनवाने की सिफारिश की गई
    • image में किन गुणों को कैप्चर करना है — जैसे style, color palette, composition, mood — इन्हें स्पष्ट रूप से लिखकर मजबूत visual references तैयार किए जा सकते हैं
    • prompt में ऐसा pattern सुझाया गया है जिसमें default रूप से uploaded/pre-generated images को प्राथमिकता दी जाए, और उनके न होने पर image generation tool से नए visuals बनवाए जाएँ

  • functional completeness में सुधार

    • इसे अधिक पूर्ण और functional रूप से sound apps विकसित करने के लिए train किया गया है
    • लंबे समय वाले tasks में यह अधिक stable है, और पहले जो असंभव था, वैसी games या complex user experiences भी 1~2 turns में implement किए जा सकते हैं

  • Computer Use और verification

    • GPT-5.4 Computer Use के लिए train किया गया पहला mainline model है, इसलिए यह interface को native रूप से navigate कर सकता है
    • Playwright के साथ मिलाकर यह rendered pages inspect कर सकता है, कई viewports test कर सकता है, app flows explore कर सकता है, और state/navigation समस्याएँ पकड़ सकता है
    • अगर Playwright tools/skills दिए जाएँ, तो GPT-5.4 के polished और functionally complete interfaces बनाने की संभावना काफी बढ़ जाती है
    • बेहतर image understanding की वजह से यह output को विज़ुअली verify भी कर सकता है और देख सकता है कि वह दिए गए reference UI से मेल खाता है या नहीं

व्यावहारिक टिप्स क्विकस्टार्ट

  • अगर अपनाने के लिए कुछ ही practices हों, तो इन 4 से शुरुआत करें:
    • low reasoning level से शुरुआत करें
    • typography, color palette, layout जैसी design system और constraints को पहले से परिभाषित करें
    • screenshot attachments जैसी visual references या moodboards देकर visual guardrails सेट करें
    • narrative या content strategy पहले से तय करें ताकि मॉडल को content generation की दिशा मिले
  • शुरुआती prompt
    • When doing frontend design tasks, avoid generic, overbuilt layouts.
    • फ्रंटएंड डिज़ाइन कार्य करते समय generic और overbuilt layouts से बचें
    • Use these hard rules:
    • इन hard rules को लागू करें:
      • One composition: The first viewport must read as one composition, not a dashboard (unless it's a dashboard).
      • पहला viewport dashboard न होने पर एक ही composition की तरह पढ़ा जाना चाहिए
      • Brand first: On branded pages, the brand or product name must be a hero-level signal, not just nav text or an eyebrow. No headline should overpower the brand.
      • branded pages पर brand/product name hero-level signal होना चाहिए; यह सिर्फ nav text या eyebrow बनकर न रह जाए। कोई headline brand पर हावी नहीं होनी चाहिए
      • Brand test: If the first viewport could belong to another brand after removing the nav, the branding is too weak.
      • अगर nav हटाने के बाद पहला viewport किसी और brand का भी लग सकता है, तो branding बहुत कमजोर है
      • Typography: Use expressive, purposeful fonts and avoid default stacks (Inter, Roboto, Arial, system).
      • expressive और उद्देश्यपूर्ण fonts इस्तेमाल करें, और default font stacks (Inter, Roboto, Arial, system) से बचें
      • Background: Don't rely on flat, single-color backgrounds; use gradients, images, or subtle patterns to build atmosphere.
      • flat single-color backgrounds पर निर्भर न रहें; माहौल बनाने के लिए gradients, images, या subtle patterns का इस्तेमाल करें
      • Full-bleed hero only: On landing pages and promotional surfaces, the hero image should be a dominant edge-to-edge visual plane or background by default. Do not use inset hero images, side-panel hero images, rounded media cards, tiled collages, or floating image blocks unless the existing design system clearly requires it.
      • landing pages और promotional surfaces पर hero image default रूप से full-bleed (edge-to-edge) visual plane या background होनी चाहिए। inset hero images, side-panel hero images, rounded media cards, tiled collages, या floating image blocks का उपयोग न करें, जब तक मौजूदा design system इसकी स्पष्ट माँग न करे
      • Hero budget: The first viewport should usually contain only the brand, one headline, one short supporting sentence, one CTA group, and one dominant image. Do not place stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, or secondary marketing content in the first viewport.
      • पहले viewport में आमतौर पर सिर्फ brand, एक headline, एक छोटी supporting sentence, एक CTA group, और एक dominant image होनी चाहिए। stats, schedules, event listings, address blocks, promos, "this week" callouts, metadata rows, या secondary marketing content पहले viewport में न रखें
      • No hero overlays: Do not place detached labels, floating badges, promo stickers, info chips, or callout boxes on top of hero media.
      • hero media के ऊपर detached labels, floating badges, promo stickers, info chips, या callout boxes न रखें
      • Cards: Default: no cards. Never use cards in the hero. Cards are allowed only when they are the container for a user interaction. If removing a border, shadow, background, or radius does not hurt interaction or understanding, it should not be a card.
      • default रूप से cards न हों। hero में cards कभी न इस्तेमाल करें। cards तभी स्वीकार्य हैं जब वे user interaction के container हों। अगर border, shadow, background, या radius हटाने पर interaction या समझ पर असर नहीं पड़ता, तो वह card नहीं होना चाहिए
      • One job per section: Each section should have one purpose, one headline, and usually one short supporting sentence.
      • हर section का एक उद्देश्य, एक headline, और सामान्यतः एक छोटी supporting sentence होनी चाहिए
      • Real visual anchor: Imagery should show the product, place, atmosphere, or context. Decorative gradients and abstract backgrounds do not count as the main visual idea.
      • imagery में product, place, atmosphere, या context दिखना चाहिए। decorative gradients और abstract backgrounds मुख्य visual idea नहीं माने जाएँगे
      • Reduce clutter: Avoid pill clusters, stat strips, icon rows, boxed promos, schedule snippets, and multiple competing text blocks.
      • pill clusters, stat strips, icon rows, boxed promos, schedule snippets, और कई competing text blocks से बचें
      • Use motion to create presence and hierarchy, not noise. Ship at least 2-3 intentional motions for visually led work.
      • motion का उपयोग presence और hierarchy बनाने के लिए करें, noise के लिए नहीं। visually led work में कम से कम 2-3 intentional motions शामिल करें
      • Color & Look: Choose a clear visual direction; define CSS variables; avoid purple-on-white defaults. No purple bias or dark mode bias.
      • स्पष्ट visual direction चुनें, CSS variables परिभाषित करें, purple-on-white defaults से बचें। purple bias या dark mode bias न हो
      • Ensure the page loads properly on both desktop and mobile.
      • सुनिश्चित करें कि page desktop और mobile दोनों पर सही तरह load हो
      • For React code, prefer modern patterns including useEffectEvent, startTransition, and useDeferredValue when appropriate if used by the team. Do not add useMemo/useCallback by default unless already used; follow the repo's React Compiler guidance.
      • React code में, जहाँ उपयुक्त हो और team इन्हें इस्तेमाल करती हो, useEffectEvent, startTransition, और useDeferredValue जैसे modern patterns को प्राथमिकता दें। useMemo/useCallback को default रूप से न जोड़ें जब तक वे पहले से इस्तेमाल न हो रहे हों; repo की React Compiler guidance का पालन करें
      • Exception: If working within an existing website or design system, preserve the established patterns, structure, and visual language.
      • अपवाद: अगर काम किसी मौजूदा website या design system के भीतर हो रहा है, तो स्थापित patterns, structure, और visual language को बनाए रखें

बेहतर डिज़ाइन के लिए तकनीकें

  • design principles से शुरुआत

    • constraints तय करें, जैसे एक H1 headline, अधिकतम 6 sections, अधिकतम 2 typefaces, एक accent color, और fold के ऊपर एक primary CTA

  • visual references दें

    • reference screenshots या moodboards layout rhythm, typography scale, spacing system, और image treatment को infer करने में मदद करते हैं
    • इसमें GPT-5.4 द्वारा user review के लिए अपना moodboard generate करने का उदाहरण भी शामिल है (NYC coffee culture और Y2K aesthetics से प्रेरित)

  • page को narrative के रूप में संरचित करें

    • सामान्य marketing page संरचना:
      • Hero — identity और promise सेट करना
      • Supporting imagery — context या environment दिखाना
      • Product detail — offering की व्याख्या
      • Social proof — credibility बनाना
      • Final CTA — interest को action में बदलना

  • design system के पालन का निर्देश दें

    • build की शुरुआत में स्पष्ट design system स्थापित करने को प्रोत्साहित करें
    • मुख्य design tokens परिभाषित करें: background, surface, primary text, muted text, accent
    • typography roles परिभाषित करें: display, headline, body, caption
    • अधिकांश web projects के लिए React और Tailwind stack से शुरुआत करना प्रभावी है, और GPT-5.4 इन tools के साथ विशेष रूप से मजबूत प्रदर्शन करता है
    • animations, overlays, और decorative layers पर काम करते समय यह guide शामिल करने की सिफारिश की गई है कि fixed/floating UI elements, text और buttons जैसे मुख्य content के साथ overlap न करें

  • reasoning level कम रखें

    • सरल websites में अधिक reasoning हमेशा बेहतर नहीं होती
    • low और medium reasoning levels अक्सर बेहतर फ्रंटएंड परिणाम देते हैं
    • इससे मॉडल तेज़, अधिक focused, और overthinking से कुछ हद तक मुक्त रहता है, जबकि अधिक महत्वाकांक्षी डिज़ाइन के लिए गुंजाइश बची रहती है

  • वास्तविक content से डिज़ाइन की नींव मजबूत करें

    • वास्तविक copy, product context, और स्पष्ट project goals देना फ्रंटएंड परिणाम सुधारने के सबसे सरल तरीकों में से एक है
    • यह context सही site structure चुनने, section-wise narrative को अधिक स्पष्ट बनाने, और generic placeholders की जगह convincing messaging लिखने में मदद करता है

Frontend Skill prompt package

  • GPT-5.4 के सामान्य फ्रंटएंड tasks में मदद के लिए समर्पित [frontend-skill](https://github.com/openai/skills/…) GitHub पर जारी किया गया
  • यह structure, taste, और interaction patterns पर मजबूत guidance देता है, ताकि default रूप से अधिक polished, intentional, और आनंददायक डिज़ाइन तैयार हो सकें
  • Codex app के भीतर $skill-installer frontend-skill कमांड से इसे install किया जा सकता है

  • Frontend Skill की मुख्य संरचना

    • Working Model: build से पहले तीन चीज़ें लिखें — visual thesis (mood, material, energy), content plan (hero, support, detail, final CTA), और interaction thesis (2~3 motion ideas)
    • Beautiful Defaults: components से नहीं, composition से शुरुआत। full-bleed hero को प्राथमिकता, brand/product name को सबसे बड़ा text, copy कुछ ही seconds में scan हो सके, और card-less layout default
    • Landing Pages default sequence: Hero → Support → Detail → Final CTA
      • hero rules: एक composition, full-bleed image, brand first, और hero में cards, stat strips, या logo cloud नहीं
      • viewport budget: अगर fixed header हो, तो hero के साथ मिलाकर इसे initial viewport के भीतर समाना चाहिए
    • Apps: default रूप से Linear-style restraint — शांत surface hierarchy, मजबूत typography और spacing, कम colors, और cards केवल interaction के लिए
    • Imagery: images को narrative भूमिका निभानी चाहिए, और abstract gradients या fake 3D objects की तुलना में grounded photography को प्राथमिकता दी जाए। पहले viewport में वास्तविक visual anchor होना ज़रूरी है
    • Copy: product language में लिखें, design commentary की तरह नहीं। headline से अर्थ स्पष्ट होना चाहिए, और अगर copy का 30% हटाने से page बेहतर हो जाता है, तो हटाते रहें
    • Utility Copy: dashboards, apps, और admin tools में marketing copy की जगह utility copy default हो — direction, state, और action पहले
    • Motion: motion presence और hierarchy के लिए हो, noise के लिए नहीं। hero entry sequence, scroll-linked effects, hover/reveal transitions जैसे कम से कम 2~3 intentional motions शामिल करें। Framer Motion को प्राथमिकता
    • Hard Rules: default रूप से cards नहीं, हर section में एक dominant idea, 2 से अधिक typefaces नहीं, 1 से अधिक accent color नहीं, और filler copy नहीं
    • Litmus Checks: क्या पहली screen पर brand स्पष्ट है, क्या strong visual anchor है, क्या सिर्फ headline से page समझ आता है, क्या हर section सिर्फ एक ही भूमिका निभाता है, क्या cards वाकई ज़रूरी हैं, और क्या motion hierarchy को बेहतर बनाता है — यह जाँचें

उदाहरण output

  • Frontend Skill से बने उदाहरणों को landing pages, games, dashboards — इन तीन श्रेणियों में दिखाया गया है (हर एक के लिए कई video demos सहित)

मुख्य बिंदु

  • GPT-5.4 तब high-quality फ्रंटएंड interfaces बना सकता है जब prompt में स्पष्ट design constraints, visual references, structured narrative, और defined design system दिए गए हों
  • Codex जैसे coding agents के साथ केवल GPT-5.4 से पूरी तरह बने projects को OpenAI gallery में submit करके showcase किया जा सकता है

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.