◆ Vibe EngineeringSMIT · AI Agentic Engineering English
Hands-on Lab 1 · ~35 min

Aik prompt, aik app

Sirf seedhi English mein describe karke aik chhoti, chalti app banayein — koi setup nahi, koi code editor nahi, koi account gymnastics nahi. Phir wahi prompt dobara chalayein aur dekhein dono nataij alag ho jaate hain. Wohi hairani sabaq hai.

🎯 Maqsad: chalti app + non-determinism ka ehsaas⏱ ~35 min💸 Sirf free tiers
Shuru se pehle

Yahan sab aapke browser mein chalta hai. Kuch install nahi. Agar aik tool slow ho ya zyada maange, agle par jump karein — is lab ke liye yeh interchangeable hain.

01Aik muft browser tool kholain · 3 min

Aik chunein. Sab browser mein chalte hain:

Google AI Studio

aistudio.google.com

Instant preview aur kam friction ke sath prompt-to-app. Behtareen pehli choice.

bolt.new

bolt.new

App idea type karein aur live editor + preview mein bante dekhein.

Claude.ai (Artifacts)

claude.ai

App describe karein; woh chalti single-page version banata hai jise aap inline run aur tweak kar sakte hain.

Replit

replit.com

Agar login pehle se hai to aik tab mein prompt-to-deployed-app.

02Starter prompt paste karein · 5 min

Ise exactly jaisa likha hai copy karke chalayein:

starter prompt
Build a small web app: a daily habit tracker. I can add a habit,
check it off for today, and see a simple streak count for each one.
Make it a single page with a clean, modern look and a friendly empty
state. Start it with two example habits so it isn’t blank.

Agent kya karta hai dekhein: woh plan karta, files likhta, aur chalti preview dikhata hai. Aapne aik bhi line code nahi likhi.

Kuch playful pasand hai?

Class 2 wala demo prompt use karein: “Please build a website for a 3D first-person shooter game in an arena against one computer opponent, controlled by arrow keys and space bar to shoot.” Is lab ke liye dono theek hain.

03Ise apna banayein · 15 min

Ab baat-cheet se behtar karein. Kam az kam do follow-up messages bhejein. Try karein:

Design

“Make the design more colorful and add a dark-mode toggle.”

Feature

“Add a button to clear all entries, with a confirmation.”

Bug fix

“The Save button doesn’t clear the text box after saving — fix that.”

Menu se apna idea chunein, ya khud invent karein. Goal yeh ehsaas hai ke app tab badalti hai jab aap sirf describe karte hain ke kya chahiye.

04Twist: do baar chalayein · 7 min

Yahi asal sabaq hai

Aik fresh chat / naya project kholain aur apna asli prompt dobara paste karein — unchanged. Dono nataij side by side compare karein.

  • Layout badla? Colors? Buttons ki wording?
  • Kya aik version mein koi feature tha jo doosre mein miss tha?
  • Kya aik perfect chala aur doosra toot gaya?

Yeh farq non-determinism hai — wahi input har baar alag output de sakta hai. Yeh bug nahi; models kaise kaam karte hain uski property hai, aur iske around design karna hi context engineering hai.

05Sochain · 5 min

Jawab likh lein — context engineering ki baat par inhein dobara use karenge:

? Teen sawal

  • Pehli koshish par agent ne kya zabardast sahi kiya?
  • Kahan confused hua ya galat assumption ki?
  • Kaun si aik instruction, shuru mein add karne se, woh galti rok sakti thi?

06Agar kuch galat ho jaye

SymptomKya karein
Tool rate-limited ya slow haiStep 1 se doosra tool chunein aur prompt dobara paste karein.
App nahi chaltiAgent ko exactly bataein kya toota hai (“buttons click par kuch nahi karte”) aur khud theek karne dein.
Output jo maanga us jaisa nahiExpected aur faidemand — reflection ke liye note karein. Yeh data hai, failure nahi.
Ghar le jayein (optional, koi grade nahi)

Ghar par original prompt aik baar aur chalayein aur teen jumle likhein ke runs mein kya badla. Saath le aayein — context engineering ka perfect on-ramp hai.