मुख्य कंटेंट तक स्किप करें

Claude के साथ तेज़ी से एक सुंदर, अत्याधुनिक साइट लॉन्च करें

मध्यम

आप एक ही बैठक में एक-पंक्ति के विचार से लेकर एक डिप्लॉय की गई, सचमुच अच्छी दिखने वाली साइट तक पहुँच सकते हैं। तरकीब ज़्यादा प्रॉम्प्ट देना नहीं है — यह सही प्रॉम्प्ट ढाँचे के साथ एक तेज़ स्टैक और एक कसी हुई पॉलिश लूप है। यह पेज वही रेसिपी है।

What you'll learn
  • सही सरफ़ेस चुनें: तत्काल ऐप्स के लिए Artifacts बनाम एक वास्तविक, डिप्लॉय-योग्य repo के लिए Claude Code
  • Anthropic के frontend-aesthetics सिस्टम प्रॉम्प्ट से 'AI slop' डिफ़ॉल्ट को हराएँ
  • नीचे दिए Steps के साथ विचार-से-डिप्लॉय तक का एक workflow चलाएँ
  • ऐसे copy-paste build और refine प्रॉम्प्ट चुराएँ जो ऐसे पढ़े जाएँ मानो किसी सीनियर product designer ने उन्हें ब्रीफ़ किया हो
  • typography, motion और responsiveness को पॉलिश करें — फिर Vercel, Netlify या GitHub Pages पर डिप्लॉय करें

पहले अपना सरफ़ेस चुनें​

आप अंत में क्या चाहते हैं, उसके आधार पर दो बहुत अलग तेज़ रास्ते:

  • Claude Artifacts — एक ऐप का वर्णन करें और Claude चैट के अंदर एक लाइव, स्व-निहित React/HTML artifact रेंडर करता है। शून्य सेटअप, शेयर-योग्य लिंक, prototypes, internal tools, calculators और landing-page mockups के लिए एकदम सही। डिफ़ॉल्ट रूप से एक artifact स्व-निहित logic चलाता है; यह MCP के ज़रिए बाहरी सेवाओं तक पहुँच सकता है, लेकिन यह आपके स्वामित्व वाला repo नहीं है।
  • Claude Code + एक फ़्रेमवर्क — Claude आपकी मशीन पर, समानांतर में, एक वास्तविक codebase (Next.js / Astro / Tailwind / shadcn/ui) को scaffold और संपादित करता है, जिसे आप commit और डिप्लॉय करते हैं। यह वह रास्ता है जब आप चीज़ का स्वामित्व रखना, उसे विस्तारित करना और शिप करना चाहते हैं।
Pro tip
  • 60 सेकंड में किसी Artifact में लुक का prototype बनाएँ, फिर Claude Code से कहें कि इसे एक वास्तविक Next.js + Tailwind repo के रूप में फिर से बनाए। आपको तत्काल feedback भी मिलता है और एक डिप्लॉय-योग्य codebase भी।
  • Claude Design (Anthropic Labs, research preview) एक visual canvas और एक स्थायी design system जोड़ता है, साथ ही Claude Code में handoff भी — यदि आप किसी design tool में रहते हैं तो उपयोगी।

वह एक चीज़ जो शानदार को सामान्य से अलग करती है​

अपने डिफ़ॉल्ट पर छोड़ दिया जाए तो Claude उस ओर अभिसरित हो जाता है जिसे समुदाय "AI slop" कहता है: Inter फ़ॉन्ट, सफ़ेद पर बैंगनी gradient, तीन समान रूप से गोल किए हुए cards। Anthropic की अपनी frontend-aesthetics cookbook इसके कारण के बारे में बिल्कुल स्पष्ट है — और इसका हल यह है कि आप जिन आयामों की परवाह करते हैं और जिन डिफ़ॉल्ट से बचना है, उन्हें स्पष्ट रूप से नाम दें।

Anti-slop चीटशीट
Term shown.
1 / 4

सबसे ज़्यादा असरदार कदम यह है कि किसी build की शुरुआत में Anthropic का <frontend_aesthetics> ब्लॉक (या अपना DESIGN.md) पेस्ट करें ताकि मॉडल को CSS की एक पंक्ति लिखने से पहले पता हो कि किससे बचना है।

Anti-slop सिस्टम ब्लॉक (किसी भी UI build से पहले पेस्ट करें)

<frontend_aesthetics>
You converge toward generic, "on-distribution" output — the "AI slop" aesthetic. Avoid it.
Typography: choose a distinctive, beautiful font (NOT Inter/Roboto/Arial). Use it decisively.
Color & theme: commit to ONE cohesive aesthetic via CSS variables; dominant colors + sharp accents, not a timid even palette. No purple-gradient-on-white.
Motion: prioritize one orchestrated page-load with staggered reveals over scattered micro-interactions. CSS-only for HTML; Motion for React.
Backgrounds: build atmosphere/depth with layered gradients or patterns — never a flat solid.
Make unexpected, context-specific choices. Think outside the box.
</frontend_aesthetics>

विचार से लेकर डिप्लॉय की गई साइट तक​

Guided walkthrough1 of 6
  1. एक ही संदेश में Claude को दें: साइट क्या है, सेक्शन कौन-कौन से हैं, दर्शक कौन हैं, और एक नामित aesthetic दिशा (उदा. 'warm editorial, जैसे Notion और किसी print magazine का मिलन')। अस्पष्ट ब्रीफ़ अस्पष्ट साइटें पैदा करते हैं।

ऐसे build प्रॉम्प्ट जो ऐसे पढ़े जाएँ मानो किसी सीनियर designer ने उन्हें ब्रीफ़ किया हो​

किसी विशिष्ट पेशेवर भूमिका के साथ शुरुआत करना मापने योग्य रूप से output की गुणवत्ता बढ़ाता है और भिन्नता घटाता है। aesthetic, स्टैक और states के बारे में ठोस रहें।

One-shot build: एक वास्तविक Next.js + Tailwind + shadcn साइट

You are a senior product designer + frontend engineer.
Build a Next.js (App Router) + Tailwind + shadcn/ui marketing site for <PRODUCT>.
Aesthetic: <ONE named direction, e.g. "editorial minimalism, Linear/Stripe energy">.
Typography: one distinctive display face + one mono/sans for body — NOT Inter.
Sections: hero, social proof, 3 feature blocks, pricing, FAQ, footer.
Requirements: fully responsive (mobile-first), dark mode, one orchestrated
page-load animation with staggered reveals, accessible (WCAG AA contrast).
Write DESIGN.md first with the color/type/spacing tokens, then build.
Scaffold files in parallel; show me the tree, then implement.

तत्काल Artifact prototype (chat, बिना सेटअप)

Create an interactive Artifact: a single-page landing for <IDEA>.
Make it genuinely beautiful, not generic AI slop — distinctive font (not Inter),
a committed color theme via CSS variables, layered gradient background,
and a staggered fade-in on load. Mobile-responsive. Self-contained HTML/React.

Refine: सामान्य अहसास को खत्म करें

Critique this UI as a senior product designer and list the 5 "AI default"
fingerprints it still has (font, spacing, color, layout cliché, motion).
Then redesign it around ONE bold aesthetic choice. Increase type contrast
(weight + size extremes), commit to a dominant color with a sharp accent,
and replace scattered hover effects with one orchestrated entrance.

वह पॉलिश जो इसे महँगा दिखाती है​

Pro tip
  • Typography सबसे सस्ता अपग्रेड है: एक विशिष्ट Google Font + display और body के बीच 3x+ size का उछाल तुरंत 'designed' पढ़ा जाता है।
  • Motion: दस छोटे-छोटे hovers के बजाय एक शानदार पल (animation-delay के साथ एक संयोजित load) में निवेश करें।
  • Responsiveness: Claude से स्पष्ट रूप से कहें कि वह mobile, लंबा टेक्स्ट, empty, loading और error states को संभाले — यह इन्हें डिफ़ॉल्ट रूप से छोड़ देता है।
  • गहराई: परतदार CSS gradients या एक सूक्ष्म grain/pattern हर बार एक सपाट background से बेहतर होते हैं।
  • याद रखें कि Claude अपना ही output नहीं देख सकता — एक screenshot पेस्ट करें या बताएँ कि क्या गलत है ताकि refine लूप अभिसरित हो।
Watch out
  • अकेले 'इसे सुंदर बनाओ' कम प्रदर्शन करता है — यह प्रॉम्प्ट के स्तर पर डिफ़ॉल्ट के बराबर है। इसके बजाय aesthetic, फ़ॉन्ट नीति, और जिन डिफ़ॉल्ट से बचना है उन्हें नाम दें।
  • किसी वास्तविक साइट के लिए एक विशाल प्रॉम्प्ट को एक ही बार में सब कुछ न बनाने दें; DESIGN.md के साथ सेक्शन-दर-सेक्शन ज़्यादा नियंत्रणीय है और tokens का बेहतर उपयोग करता है।
  • AI-जनित marketing दावों, आँकड़ों और stock copy को draft की तरह समझें — प्रकाशित करने से पहले सत्यापित करें।

मिनटों में डिप्लॉय करें​

  • Vercel — Next.js के लिए सबसे उपयुक्त। GitHub repo कनेक्ट करें; हर push प्रति branch preview URLs के साथ अपने आप build और डिप्लॉय हो जाता है।
  • Netlify — फ़्रेमवर्क-अज्ञेय, वही git-push-to-deploy प्रवाह, उदार static hosting।
  • GitHub Pages — सीधे repo से मुफ़्त static hosting; इसे एक static export (Next.js output: "export", या एक Astro build) के साथ जोड़ें ताकि शून्य-लागत वाली लाइव साइट मिल सके। (यह वही साइट इसी तरह प्रकाशित की गई है।)

डिप्लॉयमेंट सेट करें

Set up this repo for deployment:
1. Add a sensible .gitignore and a README with run/build/deploy steps.
2. Configure a production build (static export if targeting GitHub Pages).
3. Give me the exact steps to connect Vercel (or Netlify) for auto-deploy on push,
 and a GitHub Actions workflow as a fallback. Don't commit any secrets.

खुद को परखें​

खुद को परखें

0/4
  1. आप शून्य सेटअप के साथ 60 सेकंड में एक लाइव, शेयर-योग्य prototype चाहते हैं। कौन-सा सरफ़ेस?
  2. Anthropic के frontend-aesthetics मार्गदर्शन के अनुसार, कौन-सा एक स्पष्ट 'AI slop' डिफ़ॉल्ट है जिससे बचना चाहिए?
  3. कई प्रॉम्प्ट/सत्रों में किसी साइट के लुक को संगत बनाए रखने का अनुशंसित तरीका क्या है?
  4. अधिकतम आनंद के लिए Anthropic आपके motion बजट को कहाँ खर्च करने का सुझाव देता है?
Key takeaways
  • सरफ़ेस चुनें: तत्काल prototypes के लिए Artifacts, एक स्वामित्व वाली, डिप्लॉय-योग्य साइट के लिए Claude Code + फ़्रेमवर्क।
  • aesthetic, फ़ॉन्ट नीति, और जिन डिफ़ॉल्ट से बचना है उन्हें नाम देकर 'AI slop' को हराएँ — Anthropic का frontend_aesthetics ब्लॉक पेस्ट करें।
  • एक DESIGN.md स्थायी रखें ताकि लुक सत्रों के बीच संगत रहे, ठीक वैसे ही जैसे CLAUDE.md कोड के लिए करता है।
  • एक सीनियर designer के रूप में role-prompt करें, सेक्शन-दर-सेक्शन बनाएँ, और छोड़ी गई states (mobile, loading, empty, error) की माँग करें।
  • motion बजट को एक संयोजित load पर खर्च करें; git-push के ज़रिए Vercel/Netlify पर या GitHub Pages पर एक static export के रूप में डिप्लॉय करें।

स्रोत और आगे पढ़ने के लिए​