اے آئی پرامپٹس کے ساتھ ویب سائٹ یوزر انٹرفیس کو تیزی سے کیسے بنایا جائے۔

ایک ویب سائٹ یوزر انٹرفیس (UI) جو HTML، CSS، اور جزو کوڈ خود لکھنے میں گھنٹے لیتا ہے۔ اب آپ اپنے صفحہ کو سادہ الفاظ میں بیان کر سکتے ہیں اور AI کوڈنگ ٹول کو پہلا ورژن لکھنے دیں۔

تاہم، نتائج آپ کے اشارے پر منحصر ہوں گے۔ مختصر، مبہم اشارے آپ کو بے ترتیب رنگوں اور بار بار کوڈ کے ساتھ ایک عام صفحہ فراہم کرتے ہیں۔ ڈھیروں، فائلوں اور قواعد کے لیے واضح اشارے قابل استعمال کوڈ فراہم کرتے ہیں۔

اس ٹیوٹوریل میں آپ سیکھیں گے کہ اس قسم کا پرامپٹ کیسے لکھنا ہے۔ Next.js، Tailwind CSS اور shadcn/ui اجزاء کا استعمال کرتے ہوئے ایک فکسڈ اینیمیٹڈ نیویگیشن بار کے ساتھ فل سکرین ہیرو سیکشن بنانے کے لیے استعمال کیا جاتا ہے۔

آخر میں، آپ کو معلوم ہو جائے گا کہ کیسے:

UI پرامپٹس لکھیں جو لے آؤٹ، اجزاء، رنگ، وقفہ کاری، اور جوابی رویے کا احاطہ کرتے ہیں۔
پرامپٹ پر UI بنائیں اور ٹول کے تیار کردہ کوڈ کا معائنہ کریں۔
دہرائے جانے والے AI تحریری کوڈ کے بجائے دوبارہ قابل استعمال shadcn/ui اجزاء اور آف دی شیلف بلاکس کا استعمال کریں۔
چھوٹے فالو اپ پیغامات کے ساتھ اپنے نتائج کو بہتر بنائیں۔
آخری صفحہ کو چلائیں، جانچیں اور حسب ضرورت بنائیں۔

انڈیکس

شرطیں

شروع کرنے سے پہلے، درج ذیل کو چیک کریں:

آپ کے پاس Node.js کا موجودہ LTS ورژن انسٹال ہے۔
کوڈ ایڈیٹر
AI کوڈنگ ٹولز والے اکاؤنٹس جیسے کرسر، کلاڈ، v0، وغیرہ۔
React اور TypeScript کا بنیادی علم
Tailwind CSS کلاس کے ناموں کا بنیادی علم

آپ کو موشن کو جاننے کی ضرورت نہیں ہے، جو اس ٹیوٹوریل میں استعمال ہونے والی اینیمیشن لائبریری ہے۔ جب آپ جاتے ہیں تو آپ کو پتہ چل جائے گا کہ یہ کیسے کام کرتا ہے۔

shadcn/ui کیوں؟

Shadcon UI Tailwind قابل رسائی React اجزاء کا مجموعہ ہے جسے CSS کے ساتھ اسٹائل کیا گیا ہے۔ یہ ایک باقاعدہ جزو لائبریری سے مختلف طریقے سے کام کرتا ہے۔ پیکیج کے طور پر انسٹال نہ کریں۔ اس کے بجائے، اپنے پروجیکٹ میں اجزاء کے ماخذ فائلوں کو کاپی کرنے کے لیے CLI کا استعمال کریں۔

AI ٹولز کے ساتھ کام کرتے وقت یہ ضروری ہے۔ کوڈ آپ کا اپنا ہے۔ components/ui یہ ایک فولڈر میں محفوظ ہے اور اسے ٹول کے ذریعے پڑھا جا سکتا ہے اور صارف بھی پڑھ سکتا ہے۔ جب آپ کوئی ٹول مانگتے ہیں تو یہ کہتا ہے "براہ کرم ڈراپ ڈاؤن مینو استعمال کریں۔” ایک نیا جزو بنانے کے بجائے، آپ اپنے پروجیکٹ میں عین مطابق جز کی پیروی کر سکتے ہیں۔

کچھ اہم فوائد:

ڈیفالٹ کے ذریعے قابل رسائیمینو اور بٹن کی بورڈ کے استعمال اور فوکس کو سنبھالتے ہیں۔
Tailwind CSS کے ساتھ بنایا گیا۔لہذا کوئی اضافی اسٹائل فائلیں نہیں ہیں۔
مشترکہ تھیم متغیراترنگ تمام اجزاء میں ایک جیسے رہتے ہیں۔
کوئی تالا نہیںکیونکہ کوڈ پروجیکٹ میں ہے اور اس میں ترمیم کی جاسکتی ہے۔

ShadcnSpace کیا ہے؟

ShadcnSpace 1000+ خوبصورتی سے ڈیزائن کردہ، قابل رسائی، قابل ترتیب فری اور پرو کا مجموعہ ہے۔ Shadcn UI بلاکاجزاء اور React/Next.js ایپس کے لیے ٹیمپلیٹس۔ یہ Tailwind CSS اسٹائل کے ساتھ مقامی UI اور Radix UI دونوں کو سپورٹ کرتا ہے، لہذا آپ Shadcn CLI کے ذریعے کاپی اور پیسٹ یا انسٹال کر سکتے ہیں۔

ایک بلاک UI کا ایک بڑا حصہ ہے، جیسے ہیرو سیکشن، نیویگیشن بار، یا مجموعی طور پر صفحہ لے آؤٹ۔ shadcn/ui جزو.

ہر بلاک کا صفحہ لائیو پیش نظارہ دکھاتا ہے۔ آپ مفت یا پرو بلاکس دیکھ سکتے ہیں اور اشارے کاپی کر سکتے ہیں۔ اس کے بعد آپ اس پرامپٹ کو اپنے AI ٹول میں پیسٹ کر سکتے ہیں اور ٹول آپ کے پروجیکٹ میں ایک فائل بنائے گا۔

یہ ٹیوٹوریل ہیرو بلاکس کو بطور مثال استعمال کرتا ہے۔ آپ بالکل دیکھ سکتے ہیں کہ مکمل پرامپٹ کیسا لگتا ہے اور یہ کیوں کام کرتا ہے۔

کیا تعمیر کرنا ہے

مندرجہ ذیل حصوں کے ساتھ اپنا ہیرو صفحہ بنائیں:

ہیرو سیکشن

لوپنگ بیک گراؤنڈ ویڈیو کے ساتھ فل سکرین سیکشن
متن کو پڑھنے کے قابل رکھنے کے لیے گہرا اوورلے
متن کی ایک مختصر لائن کے آگے آئیکن کو گھمائیں۔
بڑی سرخی جو اسکرین میں داخل ہوتے ہی مدھم ہوجاتی ہے۔

نوبار

بائیں طرف لوگو کے ساتھ فکسڈ ہیڈر اور دائیں طرف گول مینو بٹن
پس منظر جو 80px سکرول کرنے کے بعد بھر جاتا ہے۔
ڈراپ ڈاؤن مینو جس میں پانچ لنکس، گہرے اور دھندلے اوورلے اور رابطے کی تفصیلات ہیں۔

نیویگیشن لنکس

آپ کے پروجیکٹ کو درج ذیل اسٹیک کی ضرورت ہے:

اگر آپ کے پاس ابھی تک کوئی پروجیکٹ نہیں ہے تو ایک بنائیں اور shadcn/ui سیٹ اپ کریں۔

npx create-next-app@latest hero-demo --typescript --tailwind --eslint --app
cd hero-demo
npx shadcn@latest init

موجودہ ورژن create-next-app React 19 اور Tailwind CSS 4 کے ساتھ آتا ہے۔

مرحلہ 1: مؤثر UI پرامپٹس کیسے لکھیں۔

ایک اچھا پرامپٹ مختصر تفصیلات کی طرح کام کرتا ہے۔ یہ ٹول کو بتاتا ہے کہ کیا بنانا ہے، کن پرزوں کو استعمال کرنا ہے، اور کن اصولوں پر عمل کرنا ہے۔

ہم مندرجہ ذیل پانچ نکات کا احاطہ کریں گے:

یہاں ایک محنتی فہرست ہے: بتاؤ کہاں جا رہے ہو؟ مثال کے طور پر، "سب سے اوپر ایک چسپاں نیویگیشن بار اور نیچے بائیں طرف ایک سرخی ہے۔”
اجزاء: اپنے مطلوبہ حصے کا نام دیں، جیسے کہ موبائل نیویگیشن کے لیے ڈراپ ڈاؤن مینو۔
رنگ: مرکزی رنگ کی وضاحت کریں اور یہ کہاں ظاہر ہوتا ہے۔ اس طرح تھیم ٹوکن کی درخواست کریں: text-foreground جہاں آپ کر سکتے ہیں.
وقفہ: درج ذیل اصولوں کے ساتھ آئیں: "مواد کو زیادہ سے زیادہ 7xl کی چوڑائی میں رکھنے کے لیے افقی پیڈنگ کا استعمال کریں۔”
جوابی کارروائی: مجھے بتائیں کہ آپ کے فون میں کیا تبدیلی آئی ہے؟

آپ کے صفحہ کے بارے میں پیغامات وصول کرنے کے دو طریقے ہیں:

آپشن 1: AI ٹول کا استعمال کرتے ہوئے ایک پرامپٹ بنائیں

اپنے صفحہ کو اپنے الفاظ میں بیان کریں اور اوپر دیے گئے پانچ نکات پر عمل کریں۔ مثالوں میں شامل ہیں:

Create a full-screen hero section for a Next.js project with
TypeScript and Tailwind CSS.

Layout:
- A sticky navbar with a logo on the left and a round menu button on the right.
- The menu button opens a dropdown with five links.
- A looping background video with a dark overlay so the text stays readable.
- A large headline and a short line of text at the bottom left.

Rules:
- Use the shadcn/ui DropdownMenu for the menu.
- Use Motion for a fade-in on the headline and the navbar.
- Keep content inside max-w-7xl with horizontal padding.
- On small screens, reduce the headline size and stack the content in one column.

Split the code into small files: page, navbar, nav link, hero, and index.

نوٹ کریں کہ اس پرامپٹ سے کیا خارج کیا گیا ہے۔ یہ نہیں کہتا کہ "اسے جدید بنائیں” یا "اسے خوبصورت بنائیں۔” یہ الفاظ ٹول کے لیے کچھ نہیں کرتے۔

آپشن 2: بلاک پیج سے پرامپٹ کاپی کریں۔

دوسرا طریقہ تیز تر ہے اگر بلاکس پہلے سے ہی آپ کی ضرورت کے قریب ہوں۔ ShadcnSpace ویب سائٹ کھولیں اور مفت یا پرو بلاکس کو منتخب کریں۔ شادسن لائبریری بلاک کریں۔ بلاک سے پرامپٹ کو کاپی کریں اور اسے اپنے AI ٹول میں چسپاں کریں۔

اس پرامپٹ میں پہلے سے ہی پروجیکٹ کی ضروریات، فائل کے تمام راستے اور مکمل کوڈ شامل ہیں۔ اگلا مرحلہ ظاہر کرتا ہے کہ یہ کیسا لگتا ہے۔

مرحلہ 2: اپنا پہلا UI کیسے بنائیں

یہ ٹیوٹوریل آپشن 2 کا استعمال کرتا ہے تاکہ آپ پورا پرامپٹ سیکھ سکیں۔ مندرجہ ذیل پرامپٹ کو اپنے AI ٹول میں چسپاں کریں اور اپنا پروجیکٹ فولڈر کھولیں تاکہ ٹول فائلیں تیار کر سکے۔

Create a Shadcn block in the codebase.
The codebase should support following:
- Shadcn project structure
- React ^19
- Tailwind CSS ^4
- TypeScript ^5

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind CSS v4 or Typescript.

Here are the files for the block:

File path: app/hero-03/page.tsx
(code for this file)

File path: components/shadcn-space/blocks/hero-03/hero.tsx
(code for this file)

File path: components/shadcn-space/blocks/hero-03/navbar.tsx
(code for this file)

File path: components/shadcn-space/blocks/hero-03/navlink.tsx
(code for this file)

File path: components/shadcn-space/blocks/hero-03/index.tsx
(code for this file)

## Implementation Steps
1. Inspect components.json. Determine the correct aliased paths for components, utils, ui, lib, and hooks. Update all import statements and file paths in the code above to match before creating any files.
2. Install dependencies. Using the project's package manager (npm / yarn / pnpm / bun), install any dependencies and devDependencies listed in the block files.
3. Install shadcn/ui components. Using the appropriate shadcn CLI runner for the project (npx / pnpm dlx / bunx --bun), add any required shadcn/ui components.
4. Add global styles. Append only the CSS variables and custom styles referenced by this block to globals.css. Do not add unrelated styles.
5. Create block files. Write each file to the exact target path shown above. Do not rename or restructure files.
6. Verify imports. Ensure every import resolves correctly against the project's alias configuration. Fix any broken paths before finishing.

The component must be fully functional and visually match the provided code. Once all steps are complete, the block is ready to use in the project.

اصل پرامپٹ میں، ہر فائل کا مکمل کوڈ اس کے فائل پاتھ کے نیچے ہوتا ہے۔ تمام پانچ فائلیں نیچے دکھائے گئے ہیں۔

یہ اشارہ چار وجوہات کی بناء پر کام کرتا ہے:

آپ عین اسٹیک کی وضاحت کرتے ہیں، لہذا ٹول ورژن کا اندازہ نہیں لگاتا ہے۔
درست فائل کے راستے درج ہیں لہذا ٹول پروجیکٹ کو دوبارہ نہیں بناتا ہے۔
ترتیب شدہ اقدامات فراہم کرکے، ٹول آپ کی مدد کرے گا۔ components.json فائل لکھنے سے پہلے۔
یہ آخری لائن میں "Done” کی وضاحت کرتا ہے تاکہ ٹول کو معلوم ہو کہ کب رکنا ہے۔

آپ اس پیٹرن کو اپنے اشارے میں دوبارہ استعمال کر سکتے ہیں۔

تیار کردہ فائل

ٹول مکمل ہونے پر، یہ پانچ فائلیں تیار کرے گا۔ براہ کرم صفحہ چلانے سے پہلے ہر بیان کو پڑھیں۔

app/hero-03/page.tsx

import HeroPage from "@/components/shadcn-space/blocks/hero-03/index";

const Page = () => {
  return (
    
  );
};

export default Page;

یہ فائل ہے۔ /hero-03 روٹ اور رینڈر بلاکس۔

components/shadcn-space/blocks/hero-03/hero.tsx

"use client";

import { useRef } from "react";
import { ArrowUpRight } from "lucide-react";
import { motion, useInView } from "motion/react";

const HeroSection: React.FC = () => {
  const sectionRef = useRef(null);
  const isInView = useInView(sectionRef, { once: true, amount: 0.1 });

  return (
    
      {/* Background Video */}
      

      {/* Overlay to improve text readability */}
      

      {/* Content */}
      
        
          
            
            
              We create high-performing{" "}
              digital designs that elevate brands and enhance conversions.
            
          
          
            
            
          
        
      
    
  );
};

export default HeroSection;

ہیرو کیسے کام کرتے ہیں:

1. ویڈیو کا پس منظر: کہ video عنصر کا مقصد loop, autoPlay, mutedاور playsInline. براؤزر ویڈیوز کو صرف اس وقت آٹو پلے کی اجازت دیتے ہیں جب وہ خاموش ہوں۔ playsInline اپنے آئی فون پر ویڈیوز کو فل سکرین پر کھلنے سے روکیں۔ کہ object-cover کلاس ویڈیو کو بغیر کھینچے ایک حصے کو بھرتی ہے۔

2. اوورلے: کہ bg-black/50 پرت ویڈیو کے اوپر بیٹھی ہے۔ یہ ویڈیو کے ہر فریم میں سفید متن کو پڑھنے کے قابل بناتا ہے۔

3. منظر میں سکرول کرتے وقت حرکت پذیری: کہ useInView ہک واپسی true جب 10% حصہ نظر آتا ہے (amount: 0.1)۔ اختیارات once: true اگر آپ اسے صرف ایک بار چلنے کی اجازت دیتے ہیں، تو ہر بار جب آپ پیچھے اسکرول کرتے ہیں تو سرخی دوبارہ ختم نہیں ہوگی۔

4. جوابی سرخی: بریک پوائنٹ کے ذریعے سرخی کا سائز بڑھتا ہے۔ text-4xl آپ کے فون پر xl:text-9xl بڑی اسکرین پر۔ چھوٹی اسکرینوں پر، عنوان اور تیر ایک کالم میں ظاہر ہوتے ہیں (flex-col)، اور sm اوپر کی طرف ایک قطار میں بیٹھتے ہیں۔

5. کیوں "use client" آپ کو ضرورت ہو گی: فائل میں ایک ہک ہے (useRef, useInView) اور موشن دونوں کو براؤزر کی ضرورت ہوتی ہے۔ Next.js ایپ روٹر کی ضرورت ہے: "use client" سب سے اوپر ہدایات ہیں.

components/shadcn-space/blocks/hero-03/navbar.tsx

"클라이언트 사용"; import { useEffect, useState, useRef } 에서 "반응하다"; NavLink 가져오기 "@/구성 요소/shadcn-space/blocks/hero-03/navlink"; 에서 가져오기 { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } "@/컴포넌트/ui/드롭다운 메뉴"; 에서 { 같음, X } 가져오기 "자각반응"; 다음에서 {CN } 가져오기 "@/lib/유틸"; 에서 { 모션, useInView, AnimatePresence } 가져오기 "모션/반응"; navData = { 제목: 문자열; href: 문자열; }; NavbarProps 유형 = { NavigationData: navData[]; }; const 헤더 = ({ NavigationData }: NavbarProps) => { const [menuOpen, setMenuOpen] = useState(false); const [sticky, setSticky] = useState(false); const headerRef = useRef(널); const isInView = useInView(headerRef, { 한 번: true, 금액: 0.1 }); const handlerScroll = () => { setSticky(window.scrollY >= 80); }; useEffect(() => { window.addEventListener("스크롤"핸들스크롤); return () => { window.removeEventListener("스크롤"핸들스크롤); }; }, []); 반품 (
    
      
        
          
        
        
          
            {menuOpen && (
               setMenuOpen(false)}
                className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm"
              />
            )}
          
            
              {/* Trigger */}
              
                
              
              {/* Content */}
              
                
                  {/* Header */}
                  
                    Menu
                    
                  
                  
                  {/* Navigation */}
                  
                    {navigationData.map((menuItem, index) => (
                      
                    ))}
                  
                  {/* Contact */}
                  
                
              
            
        
      
    
  );
};

export default Header;

نیویگیشن بار کیسے کام کرتا ہے:

1. بڑھتے ہوئے پس منظر کے ساتھ فکسڈ ہیڈر: ہیڈر استعمال کرتا ہے: sticky top-0. کوئی راستہ نہیں before: چھدم عناصر شروع ہوتے ہیں: before:h-0 اور بڑھو before:h-full جب sticky یہ سچ ہے۔ اس سے ٹیل کا پس منظر فوری طور پر سوئچ کرنے کے بجائے نیچے پھسل جائے گا۔

2. صفائی کے ذریعے اسکرول کا پتہ لگانا: کہ handleScroll فیچر سیٹ sticky کو true 80px سکرول کرنے کے بعد۔ کہ useEffect ایک سننے والا شامل کریں اور اسے کلین اپ فنکشن میں ہٹا دیں۔ کلین اپ کے بغیر، سننے والا جزو کے ان ماؤنٹ ہونے کے بعد بھی متحرک رہے گا۔

3. کنٹرول شدہ ڈراپ ڈاؤن: کہ open اور onOpenChange پرپس مینو ہیں۔ menuOpen صورت حال لہذا، آپ کلوز بٹن اور اوورلے کا استعمال کرتے ہوئے مینو کو باہر سے بند کر سکتے ہیں۔

4. اینیمیشن اوورلے: AnimatePresence صفحہ چھوڑنے سے پہلے سیاہ اوورلے کو ختم کر دیں۔ بصورت دیگر، اوورلے بغیر ایگزٹ اینیمیشن کے غائب ہو جائے گا۔

5. مینو میں تھیم ٹوکن: مینو استعمال کرتا ہے: bg-background, text-foreground, text-muted-foregroundاور border-border. یہ آپ کی طرف سے ہیں shadcn/ui چونکہ ایک تھیم ہے، اس لیے مینو ہلکے اور گہرے رنگوں کی پیروی کرتا ہے۔

components/shadcn-space/blocks/hero-03/navlink.tsx

다음에서 {CN } 가져오기 "@/lib/유틸"; 내보내기 유형 NavLinkItem = { 제목: 문자열; href: 문자열; isActive?: 부울; }; 내보내기 인터페이스 NavLinkProps { 항목: NavLinkItem; onClick?: () => 무효; } const NavLink: React.FC = ({ 항목, }) => { const { 제목, href, isActive } = 항목; 반품 (
    
      
        
      
      
        {title}
      
    
  );
};

export default NavLink;

نیویگیشن لنکس کیسے کام کرتے ہیں:

1. گروپ ہوور: کہ group کلاس li آئیکن ریپر کو ریسپانسیو بنائیں جب آپ یہ استعمال کرتے ہوئے پوری آئٹم پر ہوور کریں: group-hover: کلاس

2. لے آؤٹ جمپ کے بغیر اشاعت: آئیکن ریپر اس سے شروع ہوتا ہے: max-w-0 کو max-w-6اور gap میں بڑھنا gap-0 کو gap-3. کہ overflow-hidden کلاس اس وقت تک آئیکن کو چھپا دیتی ہے جب تک کہ جگہ دستیاب نہ ہو جائے۔ فعال لنکس ہمیشہ ایک آئیکن دکھاتے ہیں۔

3. درج کردہ اشیاء: کہ NavLinkItem قسمیں برآمد کی جاتی ہیں تاکہ والدین ان کو اپنا ڈیٹا داخل کرنے کے لیے استعمال کر سکیں۔

components/shadcn-space/blocks/hero-03/index.tsx

import Navbar from "@/components/shadcn-space/blocks/hero-03/navbar";
import { NavLinkItem } from "@/components/shadcn-space/blocks/hero-03/navlink";
import HeroSection from "@/components/shadcn-space/blocks/hero-03/hero";

const HeroPage = () => {
  const navigationData: NavLinkItem[] = [
    { title: "Home", href: "#", isActive: true },
    { title: "Properties", href: "#", isActive: false },
    { title: "Blog", href: "#", isActive: false },
    { title: "Contact", href: "#", isActive: false },
    { title: "Docs", href: "#", isActive: false },
  ];
  return (
    <>
      
      
        
      
    >
  );
};

export default HeroPage;

انڈیکس فائلیں کیسے کام کرتی ہیں:

1. ڈیٹا ایک جگہ پر رکھا جاتا ہے۔ کہ navigationData صفوں میں روابط ہوتے ہیں۔ نیویگیشن بار صرف وہی دکھاتا ہے جو آپ کو موصول ہوا ہے، لہذا آپ نیویگیشن بار کو چھوئے بغیر لنکس کو تبدیل کر سکتے ہیں۔

2. منفی مارجن ہیرو کو نیویگیشن بار کے نیچے گھسیٹتے ہیں۔ نویوا ہے۔ h-20 (80px)۔ کہ -mt-20 کلاس میں main ہیرو کو اسی مقدار سے اوپر لے جائیں تاکہ ویڈیو فکسڈ ہیڈر کے پیچھے پوری اسکرین کو بھر دے۔

دوڑنے سے پہلے چیک کرنے کی چیزیں

صفحہ کھولنے سے پہلے، کوڈ کو پڑھیں اور درج ذیل کو چیک کریں:

درآمد کریں: ہر درآمدی راستہ ہے۔ components.json عرف۔
انحصار: آپ کے پاس ٹول انسٹال ہونا ضروری ہے۔ motion اور lucide-react.
shadcn/ui اجزاء: کہ dropdown-menu جزو موجود ہونا چاہیے۔ components/ui. اگر نہیں تو چلائیں: npx shadcn@latest add dropdown-menu.
کلاس کا نام: Tailwind ان کلاسوں کو نظر انداز کرتا ہے جو اسے نہیں جانتے ہیں، لہذا آپ کو غلطیوں کے بغیر ٹائپنگ کی غلطیاں ملیں گی۔ میں navbar.tsx, nav عنصر میں item-centerصحیح کلاس ہے: items-center. اس مسئلے کو مرحلہ 4 میں حل کیا گیا ہے۔

اسے چیک کرنے کے لیے صرف چند منٹ لینے سے بعد میں آپ کا کافی وقت بچ جائے گا۔

مرحلہ 3: دوبارہ قابل استعمال shadcn/ui اجزاء کا استعمال کرتے ہوئے کیسے بنایا جائے۔

AI ٹولز اکثر ایک ہی مارک اپ کو دہراتے ہیں۔ مینو، بٹن، اور کارڈ ہر ایک کا اپنا ہینڈ رائٹنگ اسٹائل ہوتا ہے اور وہ ایک جیسے نہیں لگتے۔ مشترکہ اجزاء اس مسئلے کو حل کرتے ہیں۔

یہ بلاک تین عادات دکھاتا ہے جنہیں آپ کاپی کر سکتے ہیں۔

ہر کام کے لیے ایک جزو استعمال کریں۔

مینو shadcn/ui استعمال کرتا ہے۔ DropdownMenu ہاتھ سے تیار کرنے والے مینو کے بجائے، آپ کو ایک ٹیسٹ شدہ جزو سے کی بورڈ سپورٹ، فوکس ہینڈلنگ، اور درست قابل رسائی خصوصیات ملتی ہیں۔ اگر آپ کسی دوسرے صفحہ پر دوسرا ڈراپ ڈاؤن شامل کرتے ہیں، تو یہ ایک جیسا نظر آئے گا اور برتاؤ کرے گا۔

استعمال کریں `cn()` مشروط کلاسز کے لیے

نیویگیشن بار اور نیویگیشن لنکس دونوں استعمال کرتے ہیں: cn() سے @/lib/utils. کلاس کے ناموں کو ضم کریں اور حالات کو سنبھالیں جیسے: sticky && "before:h-full". یہ متضاد ٹیل ونڈ کلاسز کو بھی ہٹاتا ہے، جو کہ ریگولر ٹیمپلیٹ سٹرنگز کے ساتھ نہیں کیا جاتا ہے۔

ڈیٹا کو مارک اپ سے الگ رکھیں

لنک یہاں موجود ہے: navigationData صف اور NavLink جزو رینڈر کرتا ہے۔ صفحہ شامل کرنے کے لیے، صف میں ایک آبجیکٹ شامل کریں۔ نیا JSX نہ لکھیں۔

بلاک سے کب شروع کرنا ہے۔

ہیرو اور نیویگیشن بار صرف شروعات ہیں۔ اصل پروڈکٹ کو سائڈبارز، ٹیبلز اور چارٹس کی بھی ضرورت ہوتی ہے۔ ان تمام کاموں کو پرامپٹ سے لکھنے میں وقت لگتا ہے، اور آؤٹ پٹ اکثر صفحہ بہ صفحہ مختلف نظر آتا ہے۔

بلاکس ایک آزمائشی نقطہ آغاز فراہم کرتے ہیں، اور تبدیلیوں کو سنبھالنے کا اشارہ کرتے ہیں۔ انتظامی علاقے کی تعمیر کرتے وقت shadcn ڈیش بورڈ بلاک سائڈبارز، ہیڈرز اور مواد کے علاقوں کے لیے ترتیب فراہم کرتا ہے۔

اس ٹیوٹوریل کا مرکزی کردار دھندلاہٹ، آئیکنز کو گھومنے اور اسکرول پر مبنی ڈسپلے کے لیے حرکت کا استعمال کرتا ہے۔ اگر آپ کے صفحہ کو مزید حرکت کی ضرورت ہے۔ shadcn اینیمیشن بلاک مجموعہ دکھاتا ہے کہ کس طرح متحرک تصاویر اس طرح کے بلاکس سے بنتی ہیں۔

کسی بلاک کو استعمال کرنے سے پہلے، اس کا کوڈ پڑھیں اور اس کا لائسنس چیک کریں، بالکل اسی طرح جیسے آپ کسی پیکج کو دیکھیں گے۔

مرحلہ 4: فالو اپ پرامٹس کے ساتھ نتائج کو کیسے بہتر بنایا جائے۔

ڈرافٹ کے طور پر پہلے نتیجہ پر کارروائی کریں۔ فی پرامپٹ صرف ایک تبدیلی کریں اور آپ دیکھ سکتے ہیں کہ ہر پرامپٹ نے کیا کیا۔ اگر آپ کی تبدیلیاں مسائل کا باعث بنتی ہیں، تو Git کے ساتھ کالعدم کریں اور اگلے پرامپٹ کو تنگ کریں۔

ٹائپنگ کی غلطی کو ٹھیک کریں

مرحلہ 2 سے کلاس کے نام سے شروع کریں۔

In components/shadcn-space/blocks/hero-03/navbar.tsx, change the class "item-center" to "items-center" on the motion.nav element.
Do not change anything else.

رنگوں کو مستقل رکھیں

بلاکس اینکرنگ کا استعمال کرتے ہیں۔ teal-400 کئی جگہوں پر کلاسز کا انعقاد کیا جاتا ہے۔ تھیم ٹوکن کو بعد میں تبدیل کرنا آسان ہے۔

Replace every teal-400 class in the hero-03 block files with the primary theme token. If needed, add the color to the CSS variables in globals.css. Do not change anything else.

یہ تبدیلیاں کرنے کے بعد، آپ ایک سی ایس ایس متغیر میں ترمیم کرکے پورے بلاک کا انداز تبدیل کر سکتے ہیں۔

بہتر رد عمل والا سلوک

In hero.tsx, make the headline wrap on screens narrower than 640px and keep the arrow button below the headline. Keep desktop styles unchanged.

سست ویڈیو پروسیسنگ

ویڈیوز کو ریموٹ یو آر ایل سے لوڈ کیا جاتا ہے۔ صارفین اس کے لوڈ ہونے تک سیکشن کا پس منظر دیکھیں گے۔ واضح متبادل کے لیے پوچھیں۔

In hero.tsx, add a poster attribute to the video element. Keep the
bg-black background on the section so the text stays readable while the video loads or if it fails.

نیویگیشن بار کا نقشہ ختم ہو گیا ہے۔ navigationData. اگر صف خالی ہے تو، مینو لنکس کے بغیر کھلتا ہے۔ اپنے کیس کو سنبھالنے کے لیے ٹول سے پوچھیں۔

In navbar.tsx, if navigationData is empty, do not render the menu button.

ٹول کو اس طرح کے چیک کے ساتھ ڈراپ ڈاؤن کو لپیٹنا چاہئے:

{navigationData.length > 0 && (
  
    {/* trigger and content stay the same */}
  
)}

طے شدہ مواد کو سہارا دینے کے لیے منتقل کریں۔

نیویگیشن بار میں فون نمبرز اور ای میل ایڈریس ہوتے ہیں جو جزو کے اندر لکھے ہوتے ہیں۔ پرپس آپ کو اپنے نیویگیشن بار کو دوبارہ استعمال کرنے کی اجازت دیتے ہیں۔

In navbar.tsx, add two props: phone and email. Use them in place of the hard-coded phone number and email address. Update index.tsx to pass the values. Keep all styles unchanged.

ہر پرامپٹ کے بعد، یہ تبدیل شدہ فائلوں کا جائزہ لیتا ہے، صفحہ چلاتا ہے، اور اگر یہ کام کرتا ہے تو کمٹ کرتا ہے۔

مرحلہ 5: حتمی UI کو کیسے لانچ اور کسٹمائز کریں۔

ڈویلپمنٹ سرور شروع کریں۔

npm run dev

کھلا http://localhost:3000/hero-03 آپ کے براؤزر میں۔ یہ راستہ ہے۔ app/hero-03/page.tsx بنائیں۔

درج ذیل ٹیسٹ چلائیں۔

ونڈو کا سائز تقریباً 375px چوڑا کر دیں۔: سرخیاں چھوٹی ہونی چاہئیں اور مواد اسکرین پر رہنا چاہیے۔
مینو کھولیں: کلوز بٹن، اوورلے، یا Escape کلید کا استعمال کرتے ہوئے بند کریں۔
کی بورڈ کا استعمال کرتے ہوئے: Tab کلید کو دبائیں اور یقینی بنائیں کہ مینو بٹن ایک فوکس اسٹیٹ دکھاتا ہے۔
نیچے سکرول کریں: نیویگیشن بار سب سے اوپر ہونا چاہیے اور ٹیل بیک گراؤنڈ 80px کے بعد سلائیڈ ہونا چاہیے۔
لنک پر ہوور کریں: اس کے آگے ایک گھومنے والا آئیکن ظاہر ہونا چاہیے۔
براہ کرم غلطیوں کی جانچ کریں۔ درج ذیل دو کمانڈز چلائیں:

npx tsc --noEmit
npm run lint

اپنے صفحہ کو حسب ضرورت بنائیں

آپ نیویگیشن، مواد، اثاثے، رابطے کی تفصیلات اور تھیم کے انداز کو اپ ڈیٹ کر کے اپنے صفحہ کو حسب ضرورت بنا سکتے ہیں۔

کھلا index.tsx ترمیم کریں اور navigationData یہ ایک صف ہے جو مینو لیبل اور URL کو تبدیل کرتی ہے۔

const navigationData = [
  { title: "Home", href: "/" },
  { title: "Features", href: "/features" },
  { title: "Pricing", href: "/pricing" },
  { title: "Contact", href: "/contact" },
];

یقینی بنائیں کہ ہر لنک آپ کی درخواست کے درست راستے کی طرف اشارہ کرتا ہے۔

2. عنوان اور متن تبدیل کریں۔

کھلا hero.tsx موجودہ عنوانات، تفصیل، اور بٹن لیبلز کو اپنے مواد سے تبدیل کریں۔


Explore reusable UI components for your next web application.

موجودہ ترتیب اور اجزاء کی ساخت کو محفوظ رکھتا ہے۔

3۔ تصاویر، ویڈیوز اور شبیہیں تبدیل کریں۔

آپ کے اثاثے public ڈائریکٹری میں ترمیم کریں اور متعلقہ اجزاء کے راستوں کو اپ ڈیٹ کریں۔

مثال کے طور پر، public/images/logo.svg آپ اس تک رسائی حاصل کر سکتے ہیں: /images/logo.svg.

4. اپنی رابطہ کی معلومات کو اپ ڈیٹ کریں۔

کھلا navbar.tsx اپنا موجودہ فون نمبر اور ای میل ایڈریس تبدیل کریں۔

+1 (555) 123-4567
hello@example.com

حقیقی رابطے کی تفصیلات استعمال کریں اور دوسرے اجزاء کو اپ ڈیٹ کریں جو ان تفصیلات کو ظاہر کرتے ہیں۔

5. تھیم کا رنگ تبدیل کریں۔

CSS متغیرات میں ترمیم کریں۔ globals.css اپنے صفحہ کے رنگوں کو اپ ڈیٹ کریں۔

:root {
  --primary: #2563eb;
  --background: #ffffff;
  --foreground: #111827;
}

اپنے پروجیکٹ میں پہلے سے بیان کردہ متغیر ناموں کا استعمال کریں، اور اگر آپ کی ایپلی کیشن ڈارک موڈ کو سپورٹ کرتی ہے تو ڈارک تھیم کے متغیرات کو اپ ڈیٹ کریں۔

کھلا components/ui/dropdown-menu.tsx متعلقہ Tailwind CSS کلاسز کو اپ ڈیٹ کریں۔

مثال کے طور پر، تبدیلی rounded-sm px-2 py-1.5 کو rounded-md px-3 py-2 ڈراپ ڈاؤن آئٹمز کے کونوں اور فاصلوں کو ایڈجسٹ کریں۔

اس مشترکہ جزو کو تبدیل کرنے سے وہ تمام ڈراپ ڈاؤن متاثر ہو سکتے ہیں جو اسے استعمال کرتے ہیں، لہذا اپنی درخواست کے دوران اپنے مینو کی جانچ کریں۔

7. تبدیلیاں لاگو کریں اور جانچیں۔

ڈویلپمنٹ سرور شروع کریں اور چیک کریں کہ آیا سب کچھ توقع کے مطابق کام کرتا ہے۔

npm run dev
npm run lint
npm run build

چیک کریں package.json لنٹ اور بلڈ کمانڈ چلانے سے پہلے دستیاب اسکرپٹس کو چیک کریں۔

اپنے AI سے تیار کردہ کوڈ کو بھیجنے سے پہلے ہمیشہ اس کی جانچ کریں۔ کوڈ جو درست معلوم ہوتا ہے وہ بنانے میں ناکام ہو سکتا ہے، اثاثوں کو غلط طریقے سے لوڈ کر سکتا ہے، یا براؤزر میں غیر متوقع طور پر برتاؤ کر سکتا ہے (ذیل میں مزید تفصیلات دیکھیں)۔

لائیو پیش نظارہ:

تعیناتی سے پہلے AI سے تیار کردہ کوڈ کی تصدیق کیسے کریں۔

AI کوڈنگ ایجنٹ متعدد فائلیں بنا یا ان میں ترمیم کر سکتا ہے، انحصار انسٹال کر سکتا ہے اور ٹرمینل کمانڈ چلا سکتا ہے۔ میں ایجنٹ کے آؤٹ پٹ کو ایک نقطہ آغاز سمجھتا ہوں، پروڈکشن کے لیے تیار کوڈ نہیں۔ اپنی تبدیلیوں کو تعینات کرنے سے پہلے ان کا جائزہ لیں اور یقینی بنائیں کہ آپ کی درخواست توقع کے مطابق کام کرتی ہے۔

آپ کے AI سے تیار کردہ کوڈ کو بھیجنے سے پہلے یہاں کچھ تجویز کردہ چیکس ہیں:

1. تبدیلیوں کا جائزہ لیں۔

چیک کریں کہ ایجنٹ نے کون سی فائلیں بنائی یا تبدیل کیں۔ یہ سمجھنے کے لیے اپنے کوڈ کا جائزہ لیں کہ کیا تبدیلی آئی ہے، آیا یہ آپ کے موجودہ پروجیکٹ کے ڈھانچے کی پیروی کرتا ہے، اور آیا اس میں غیر ضروری انحصار یا غیر متعلقہ ترمیمات متعارف کرائی گئی ہیں۔

Git میں، آپ اس کا استعمال کرتے ہوئے تبدیلیوں کا معائنہ کر سکتے ہیں:

git diff
git status

اگر آپ تبدیلی کو نہیں سمجھتے ہیں تو، کسی ایجنٹ سے تبدیلی کو قبول کرنے سے پہلے اس کے مقصد اور ممکنہ ضمنی اثرات کی وضاحت کرنے کو کہیں۔

2. ٹیسٹ ایپلیکیشن پر عمل درآمد اور کلیدی تعاملات

ڈویلپمنٹ سرور شروع کریں اور ایپلیکیشن کو براؤزر میں کھولیں۔ صرف یہ دیکھنے کے بجائے کہ صفحہ لوڈ ہوتا ہے یا نہیں، اس فعالیت کی جانچ کریں جسے آپ نے تبدیل کیا ہے۔

مثال کے طور پر، یقینی بنائیں کہ نیویگیشن لنکس کام کرتے ہیں، ڈراپ ڈاؤن کھلتے اور بند ہوتے ہیں، بٹن وہی کرتے ہیں جو وہ کرنا چاہتے ہیں، فارم ان پٹ کی توثیق کرتے ہیں، اور تصاویر یا ویڈیوز صحیح طریقے سے لوڈ ہوتے ہیں۔ نیز، دیکھیں کہ آپ کا صفحہ موبائل اور ڈیسک ٹاپ اسکرین کے سائز پر کیسا کام کرتا ہے۔

اپنے براؤزر کا ڈویلپر کنسول کھولیں اور جاوا اسکرپٹ کی خرابیاں، ناکام نیٹ ورک کی درخواستیں، اور گمشدہ اثاثے تلاش کریں۔

3. خودکار اسکین چلائیں۔

یہاں دستیاب اسکرپٹ کا استعمال کریں: package.json کوڈ کے معیار کی تصدیق کریں، ٹیسٹ چلائیں، اور پروڈکشن کی تعمیر کی تصدیق کریں۔

npm run lint
npm test
npm run build

یہ ایک عام مثال ہے، نہ کہ عالمگیر حکم۔ آپ کا منصوبہ ہے test یہ ایک اسکرپٹ ہے، اس لیے پہلے دستیاب اسکرپٹ کو چیک کریں۔ براہ کرم جاری رکھنے سے پہلے متعلقہ غلطیوں کو درست کریں۔

4. سیکیورٹی اور کنفیگریشن چیک کریں۔

نئی انحصار، API کالز، ماحولیاتی متغیرات، اور کسی بھی کوڈ کا جائزہ لیں جو صارف کے ان پٹ یا حساس ڈیٹا کو ہینڈل کرتا ہے۔ API کیز یا رازوں کو کلائنٹ سائڈ کوڈ میں بے نقاب نہ کریں، اور یہ سمجھے بغیر کہ AI ایجنٹ کیا کر رہا ہے غیر مانوس کمانڈز نہ چلائیں۔

ان ایپلیکیشنز کے لیے جو تصدیق، ادائیگیوں، یا صارف کے ڈیٹا کو ہینڈل کرتی ہیں، ہم ان کی فعالیت کے مطابق اضافی سیکیورٹی چیک کرتے ہیں۔

5. تعیناتی سے پہلے چیک کریں۔

جاری کرنے سے پہلے، اس بات کو یقینی بنائیں کہ پروڈکشن کی تعمیرات کامیاب ہیں، بنیادی صارف کا بہاؤ کام کرتا ہے، اور یہ کہ اہم فعالیت کو کم نہیں کیا گیا ہے۔ اپنی حتمی تبدیلیوں کا دوبارہ جائزہ لیں اور جب یہ دستیاب ہو جائیں تو پہلے انہیں سٹیجنگ ماحول میں تعینات کریں۔

میرے اصول سادہ ہیں۔ اگر آپ یہ نہیں بتا سکتے کہ تیار کردہ کوڈ کیا کرتا ہے، تو یہ بھیجنے کے لیے تیار نہیں ہے۔ AI ایجنٹس ترقی کو تیز کر سکتے ہیں، لیکن یہ اب بھی ڈویلپرز پر پڑتا ہے کہ وہ حتمی کوڈ کا جائزہ لیں، جانچ کریں اور ذمہ داری لیں۔

کلیدی تصورات کا خلاصہ

پرامپٹ ایک تصریح ہے۔

اچھے UI اشارے لے آؤٹ، اجزاء، رنگ، وقفہ کاری، اور جوابی رویے کی وضاحت کرتے ہیں۔ یہ اسٹیک کا نام بھی بتاتا ہے، فائل کے راستوں کی فہرست دیتا ہے، ترتیب شدہ اقدامات فراہم کرتا ہے، اور "ختم” کا مطلب بھی بتاتا ہے۔

اشارے وصول کرنے کے دو طریقے

آپ اپنا پرامپٹ بنانے کے لیے AI ٹول استعمال کر سکتے ہیں، یا فری یا پرو بلاکس پیج سے پرامپٹ کو کاپی کر کے AI ٹول میں چسپاں کر سکتے ہیں۔

چلانے سے پہلے پڑھیں

غلط درآمدات، گمشدہ انحصار، کلاس کے نام کی ٹائپوز، اور تبدیل شدہ اقدار کے لیے تیار کردہ کوڈ کو چیک کریں۔ Tailwind نامعلوم کلاسز کو نظر انداز کرتا ہے، اس لیے ٹائپ کی غلطیاں خود بخود ناکام ہو جائیں گی۔

اجزاء کا دوبارہ استعمال

مشترکہ shadcn/ui جزو مستقل رویہ اور انداز فراہم کریں۔ استعمال کریں cn() مشروط کلاسوں کے لیے، ہم ڈیٹا کو مارک اپ سے الگ ایک صف میں رکھتے ہیں۔

گروپ ہوور اور منطقی ترتیب

کہ group کلاس ایک بچے کو اپنے والدین کی ہوور حالت کا جواب دینے کی اجازت دیتی ہے۔ نیویگیشن لنکس اسے لے آؤٹ کو منتقل کیے بغیر شبیہیں ظاہر کرنے کے لیے استعمال کرتے ہیں۔

اسکرول پر مبنی حرکت پذیری۔

useInView کے ساتھ once: true جب عنصر اسکرین میں داخل ہوتا ہے تو ایک بار حرکت پذیری کو چلاتا ہے۔

`"use client"` Next.js میں

کوئی بھی فائل جو ہکس، براؤزر ایونٹس، یا حرکات کا استعمال کرتی ہے۔ "use client" سب سے اوپر ہدایات ہیں.

چھوٹا فالو اپ پرامپٹ

ہر ایک موقع پر ایک چیز کو تبدیل کریں، اختلافات کا جائزہ لیں، اور جب بھی آپ کو کوئی اچھا نتیجہ نظر آئے تو عہد کریں۔

نتیجہ

اس ٹیوٹوریل میں، آپ نے سیکھا کہ AI پرامپٹ کا استعمال کرتے ہوئے ویب سائٹ کا صارف انٹرفیس کیسے بنایا جائے۔ ترتیب، اجزاء، رنگ، وقفہ کاری، اور جوابی رویے کا احاطہ کرنے والے اشارے بنائے گئے۔ ہم نے تمام فائلوں کو اسکین کرنے کے بعد ایک اینیمیٹڈ نیویگیشن بار اور ایک چھوٹا فالو اپ پرامپٹ کے ساتھ ہیرو سیکشن بنا کر نتائج کو بہتر کیا۔

ہم نے یہ بھی دیکھا کہ مشترکہ اجزاء کیوں اہم ہیں۔ ڈراپ ڈاؤن مینو ہے۔ cn() مددگار اور ڈیٹا سے چلنے والے لنکس آپ کے کوڈ کو مستقل رکھتے ہیں، اور بلاکس بڑے صفحات کے لیے ایک طاقتور نقطہ آغاز فراہم کرتے ہیں۔

مندرجہ ذیل صفحات پر، آپ سب سے پہلے اپنی تفصیلات لکھیں گے، اپنے اسٹیک اور فائلوں کو نام دیں گے، اور آگے بڑھنے سے پہلے آؤٹ پٹ کو پڑھیں گے۔ یہ عادت کسی بھی AI کوڈنگ ٹول میں بہتر نتائج فراہم کرے گی۔