बनाई हुई, generate की हुई नहीं: Website Design Crash Course

15 Concepts · आपका पहला Real Build

दाईं ओर का site एक interior designer का है। यह केवल फ़र्क दिखाने के लिए है। इस course में आगे हम जिस client के लिए build करेंगे, वह दूसरी व्यक्ति हैं: Lahore की accountant Ayesha Rehman।

AI से अपने लिए website बनाने को कहें। आपको website मिल जाएगी। वह load होगी, scroll होगी और अब तक बनी हर दूसरी AI website जैसी दिखेगी।

आपने ऐसी website कई बार देखी है। ऊपर एक बड़ी image, बीच में बड़ा वाक्य, एक row में तीन छोटे boxes, रंगीन button और "Revolutionize your workflow" जैसी headline।

ज़्यादातर AI websites ऐसी ही दिखती हैं। वे broken नहीं हैं। समस्या उससे भी बड़ी है: वे सभी एक जैसी हैं।

इस फ़र्क के लिए एक शब्द है और वही इस course का नाम है। कुछ websites बनाई जाती हैं। ज़्यादातर केवल generate होती हैं। जब कोई computer को दिशा नहीं देता, तब generated website मिलती है। बनाई हुई website में किसी ने वास्तविक choices की होती हैं।

यह course आपको बनाई हुई websites बनाना सिखाता है।

आपको designer बनने या हाथ से code लिखने की ज़रूरत नहीं है। आपको Agentic Coding Crash Course के tools और इस page के ideas चाहिए। अंत तक आप एक real website बना चुके होंगे: एक story, असली photos, फ़ोन पर काम करने वाला version और ऐसी web address जिसे दुनिया में कोई भी खोल सके।

यह एक idea बाकी course को समझना आसान बनाता है। पहले अच्छा design महँगे tools या प्रतिभाशाली लोगों के भीतर रहता था। अब ऐसा नहीं है। "बनाई हुई" और "generate की हुई" चीज़ में फ़र्क करने वाले rules एक file में लिखे जा सकते हैं। कोई भी AI उस file को पढ़कर rules follow कर सकती है।

इसलिए एक line में course का विषय यह है:

Visual taste अब एक file है।

Visual taste का अर्थ है यह जानना कि क्या अच्छा दिखता है। File आपके computer पर मौजूद एक document है। दोनों को जोड़ें तो पूरा idea मिलता है: क्या अच्छा दिखता है, उसका knowledge document में save किया जा सकता है और AI build करने से पहले उसे पढ़ती है।

पहले इसे पढ़ें

Claude Code और OpenCode: A Crash Course। उस course ने आपको tools सिखाए थे। यह course उनसे कुछ real build करता है। अगर skill, plan mode या rules file जैसे शब्द आपके लिए नए हैं, तो पहले वह course पढ़ें। इसके बाद यह course बहुत आसान लगेगा।

किताब की एक structure है और यह जानना उपयोगी है कि यह course उसमें कहाँ आता है। इससे पहले के courses ने tools सिखाए। इसके बाद के courses वे engineering disciplines सिखाते हैं जो बड़े scale पर आपके काम को reliable बनाते हैं। यह बीच का course है, जहाँ आप machine के बारे में सीखना रोककर उसे किसी real काम की ओर लगाते हैं।

यह क्रम सोच-समझकर रखा गया है। Website ship करने और काम के वास्तविक failure points देखने के बाद specs, loops और checkers कहीं बेहतर समझ आते हैं।

इस page पर मिलने वाले शब्द

इस course के लिए technology background ज़रूरी नहीं है। लेकिन कुछ शब्द बार-बार आते हैं, इसलिए उनके सरल अर्थ यहाँ दिए गए हैं। आप कभी भी इस box पर वापस आ सकते हैं।

शब्द	यहाँ इसका अर्थ
Model	AI खुद: जो शब्द और code लिखती है। Claude और Kimi K3 models हैं।
Tool (इसे harness भी कहते हैं)	वह program जो AI को आपके computer पर files खोलने, बदलने और commands run करने देता है। इस course में Claude Code और OpenCode दो tools हैं।
Skill	Instructions की file जिसे आप एक बार save करते हैं। AI उसे पढ़कर follow करती है, जैसे recipe card या employee handbook।
Prompt	जो आप AI को type करते हैं।
Context	वह सब कुछ जो AI अभी देख सकती है: आपके messages और खोली गई files। इसकी सीमा होती है, जैसे सीमित जगह वाली desk।
AI slop	ऐसा design जो बनाया हुआ नहीं, generate किया हुआ दिखता है। वह साधारण, औसत look जिसमें हर AI चली जाती है।
Code	वे instructions जिनमें website लिखी जाती है। आप उन्हें type नहीं करेंगे। AI लिखेगी और आप result check करेंगे।
Deploy	Website को internet पर रखना, ताकि दूसरे लोग उसे खोल सकें।
CLI	ऐसा program जिसे buttons click करने के बजाय command type करके run किया जाता है।
API	एक program का दूसरे program से अपने-आप बात करने का तरीका।
Check (या hook)	छोटा program जो आपके काम के बारे में हाँ या नहीं में जवाब देता है और जवाब नहीं होने पर रोक देता है।
Domain	किसी के स्वामित्व वाली web address, जैसे `ayesharehman.pk`।
DNS	वह system जो web address को उस जगह से जोड़ता है जहाँ website वास्तव में रहती है।
Sharing card (OG image)	WhatsApp या social app में link paste करने पर दिखने वाली image और title।
:::

Design करने से पहले मानने वाली तीन बातें

इस page की बाकी हर बात तीन ideas पर टिकी है। इन्हें सीख लें, बाकी सब समझ आएगा।

1. हर AI का एक पसंदीदा look होता है।

AI ने लाखों websites से सीखा है। इसलिए जब आप कहते हैं "इसे अच्छा दिखाएँ", तो वह देखा हुआ सबसे आम जवाब देती है: सबसे आम colors, layout और font।

AI आलसी नहीं है। वह औसत बन रही है, क्योंकि उसने औसत ही सीखा। Community इस result को AI slop कहती है।

इसकी सच्चाई का प्रमाण मौजूद है। Anthropic, Claude Code के लिए official frontend-design plugin publish करती है। वह file उन तीन looks को सूचीबद्ध करती है जिन्हें रोकने वाला कोई न हो तो Claude अपनाती है, और उनसे बचने को कहती है। AI बनाने वाली company ने अपनी AI की habits का विरोध करने के लिए file लिखी। अगर ऐसा करना पड़ा, तो habits real हैं।

(यह plugin है, इसलिए आप इसे Claude Code के plugin system से एक बार install करते हैं। इसके बाद Claude design के काम में इसे अपने-आप चुनती है।)

2. Design को देखकर check किया जाता है।

Agentic Coding Crash Course ने इस किताब का सबसे महत्वपूर्ण rule सिखाया: AI पर उतना ही भरोसा करें जितना आप उसका काम check कर सकते हैं।

Code check करना आसान है, क्योंकि test pass या fail हो सकता है। Design कठिन लगता है। "क्या यह अच्छा दिखता है?" ऐसा सवाल नहीं जिसे computer आसानी से जवाब दे सके।

इसलिए यह course देखने को checking में बदलता है। हम page की picture लेते हैं और AI को देखने देते हैं। उस पर जानी-पहचानी खराब habits की list run करते हैं। दूसरी AI से review कराते हैं। जब "क्या यह सही दिखता है?" सच में test किया जा सके, तब AI अपना काम वैसे ही ठीक कर सकती है जैसे code ठीक करती है।

3. Visual taste एक file के रूप में एक AI से दूसरी AI तक जाता है।

AI पहले से web page बनाना जानती है। वह आपका judgment नहीं जानती: कौन-से layouts उबाऊ हैं, कौन-से fonts साथ काम करते हैं और page कब पूरा है।

उस judgment को file में रखें और कोई भी AI उसे पढ़ सकती है। वही file आज Claude और Kimi K3 के साथ, और अगले साल आने वाली AI के साथ काम करेगी। AI बदलती है, आपकी file रहती है।

इसीलिए tools के नाम बदलने के बहुत बाद भी यह course उपयोगी रहेगा।

आपके काम आने वाले तीन tools

इनमें से दो को आप पहले से जानते हैं। तीसरा नया है:

	Claude Code	OpenCode	Kimi K3
यह क्या है	Anthropic का tool जो AI को आपके computer पर काम करने देता है	उसी तरह का open-source tool, जो किसी भी AI के साथ काम करता है	Moonshot AI नाम की company का AI model
यहाँ इसका काम	काम run करता है	ज़्यादा model choices के साथ काम run करता है	Design में विशेष रूप से अच्छी AI
हम इसे क्यों उपयोग करते हैं	Claude के साथ सबसे अच्छा काम करता है	दूसरी AI models उपयोग करने का सबसे सस्ता तरीका	अभी web pages design करने में सबसे अच्छी और किफ़ायती

इसे ऐसे समझें: Claude Code और OpenCode workshops हैं। Kimi K3 वह worker है जिसे किसी भी workshop में लाया जा सकता है। Workshop वही रहती है, worker बदला जा सकता है।

Design के लिए Kimi K3 क्यों? लोगों ने real developers को web pages दिखाकर कई AI models test किए, लेकिन यह नहीं बताया कि कौन-सा page किस AI ने बनाया था। Developers ने सबसे ज़्यादा Kimi K3 के pages चुने। इसके दो कारण हैं:

यह देख सकती है। Page build करने के बाद उसकी picture देखकर गलत दिखने वाली चीज़ें ठीक कर सकती है। ज़्यादातर AI models अपना काम कभी नहीं देखते, केवल code से अंदाज़ा लगाते हैं। देख पाना बड़ा लाभ है।
यह किफ़ायती है। इसकी लागत top American models के एक छोटे हिस्से जितनी है, इसलिए bill की चिंता किए बिना design के दस versions आज़मा सकते हैं।

इसे पसंद करने से पहले एक चेतावनी। "Best" AI हर कुछ महीनों में बदलती है। जल्द कोई दूसरा model Kimi K3 को पीछे छोड़ देगा। इसलिए नाम याद न करें। यह habit याद रखें: अभी कौन-सी AI design में सबसे अच्छी है, इसे check करें और design के काम में उसी को उपयोग करें। आज वह Kimi K3 है, इसलिए course इसका उपयोग करता है।

note

यह जानकारी जुलाई 2026 तक की है। Models, prices और arena rankings अक्सर बदलती हैं। Budget बनाने से पहले LMArena और providers के live pricing pages check करें।

इस page की हर command publish करने से पहले run की गई

यहाँ बताए गए install commands, CLI flags, file paths और folder structures clean machine पर execute किए गए, documentation से copy नहीं किए गए। जहाँ live tools अपनी marketing pages से अलग थे, course ने tools को माना। फिर भी version numbers और prices बदलते रहते हैं। अगर command यहाँ लिखी बात से अलग behave करे, तो terminal पर भरोसा करें और tool के current docs check करें।

अपना tool चुनें, page उसी के अनुसार चलेगा

Agentic Coding Crash Course की तरह, Claude Code और OpenCode में अलग sections के लिए switcher है। एक चुनें और page का हर switcher उसी choice को follow करेगा।

यह course क्या cover करता है

Part	विषय	आप क्या सीखेंगे
1	Foundations	AI websites एक जैसे क्यों दिखते हैं, four-piece stack, design model चुनना और connect करना
2	Skill के रूप में Visual Taste	Hallmark skill, पसंदीदा sites से सीखना और client की brand सही बनाना
3	Build	एक story, एक scroll, media pipeline (free से paid), mobile first, multi-page sites और routing
4	Design Verification	Design अच्छा है या नहीं check करना और second opinion लेना
5	Ship	Site online करना, clients के साथ काम करना और costs कम रखना
6	पूरा Worked Example	Ayesha की practice website को शुरुआत से live URL तक दोनों tools में बनाना

करके सीखना चाहते हैं? पहले Part 6 पर जाएँ, फिर वापस आएँ।

📚 Teaching Aid

पूरा Slideshow खोलें

पूरा Presentation देखें — Website Design Crash Course

Part 1: Foundations

1. सभी AI websites एक जैसी क्यों दिखती हैं

किसी भी AI में "मेरे लिए landing page बनाएँ" type करें और result देखें। ऊपर बड़ी picture, बीच में बड़ी headline जिसमें अक्सर एक शब्द आकर्षक color में होता है, एक row में छोटे icon वाले तीन boxes, खुश customer का quote, नीचे footer और कहीं purple या blue-green color।

यह बदसूरत नहीं है। यही उलझन वाली बात है। यह बस AI द्वारा देखे गए हर web page का औसत है, और औसत में personality नहीं होती।

ऐसा क्यों होता है? AI चुनती नहीं, predict करती है। जब आप "मेरे लिए अच्छी website बनाएँ" जैसा open सवाल पूछते हैं, तो वह सबसे संभावित answer देती है, यानी सीखी हुई चीज़ों में सबसे आम। हर बार और हर व्यक्ति के लिए यही होता है। इसलिए इतनी AI websites एक जैसी दिखती हैं। लाखों लोगों को वही औसत दिया जा रहा है।

Coding crash course में आपने यही behavior देखा था। AI को पाँच बार "इस transcript को clean करें" कहने पर पाँच थोड़े अलग methods मिलते हैं, इसलिए method तय करने के लिए skill file save की जाती है। Design भी ऐसे ही काम करता है। फ़र्क केवल यह है कि design की समस्या हर कोई देख सकता है।

प्रमाण: AI companies इसे स्वीकार करती हैं। Anthropic, Claude Code के लिए official design plugin publish करती है और उसकी file उन तीन looks को सूचीबद्ध करती है जिन्हें रोकने वाला कोई न हो तो AI design अपनाता है। वह cream का exact shade (#F4F1EA) तक बताती है:

हल्का cream background, बड़ी आकर्षक serif headline और orange-brown button
लगभग काला background, जिसके साथ चमकीला acid-green या red accent
Newspaper look: पतली lines, square corners और text के घने columns

Skill इन्हें "choices के बजाय defaults" कहती है और model को तब तक उपयोग न करने को कहती है जब तक brief ने सच में वही look न माँगा हो।

इसे फिर पढ़ें। AI बनाने वाली company ने अपनी AI से बहस करने के लिए file लिखी। वही file पूरे course का शुरुआती point है।

उसके exact शब्दों पर ध्यान दें। वह यह नहीं कहती कि Claude तीन looks में जाती है। वह कहती है कि आज का AI-generated design तीन looks में जाता है। ये habits किसी एक company की विचित्रता नहीं हैं। एक ही web से सीखी गई ये habits पूरे field की हैं।

इससे दो परिणाम निकलते हैं, जो आगे की हर चीज़ को shape करते हैं:

Habits AI models के बीच जाती हैं, इसलिए second opinion अपने-आप दूसरी नज़र नहीं बनती। Anthropic की file इन looks को सामान्य AI design का result बताती है, केवल अपने model का नहीं। अलग companies लगभग उसी web पर training करती हैं, इसलिए लगभग उसी औसत की ओर जाती हैं। बाद में जब दूसरी AI पहली का काम review करती है (Concept 12), उम्मीद होती है कि उसका blind spot अलग हो। दोनों जितनी अलग हों, संभावना उतनी बेहतर है। केवल rules file इस chain को भरोसेमंद तरीके से तोड़ती है।
Fix कभी "और कठिन prompt लिखना" नहीं है। "इसे unique बनाएँ" खुद बहुत आम request है, इसलिए आम answer मिलता है। Fix structural है: ऐसी taste file जो specific patterns ban करे, structural variety लागू करे और output लौटाने से पहले gates के विरुद्ध check करे। यही Part 2 है।

2. Four-piece stack

इस course की हर website चार pieces से बनती है। इन्हें सीख लें, फिर course की हर दूसरी चीज़ रखने की जगह मिल जाएगी:

Piece	यह क्या करता है	हम क्या उपयोग करते हैं
Model	Page बनाने वाला code लिखता है	Design के लिए Kimi K3, review के लिए Claude
Taste	AI को उबाऊ default look से रोकता है	Hallmark skill file और Anthropic का frontend-design plugin
Media	असली photos और video, क्योंकि boxes और text कोई brand नहीं हैं	Free photos से paid video तक चार lanes (Concept 9)
Host	Page को real web address पर internet में रखता है	Vercel, जिसे आपकी AI खुद control कर सकती है

ध्यान दें कि list में क्या नहीं है: website builder, template shop या drag-and-drop editor। आपका जाना हुआ tool यह सब करता है।

एक तुलना मदद कर सकती है। छोटी workshop सोचें। Model worker है। Taste file वह handbook है जो worker को दी जाती है। Media supply cupboard है। Host वह दरवाज़ा है जिससे finished work बाहर जाता है।

इन्हीं चार boxes से job का price भी तय होता है। Paying client के लिए build करते समय हर box को एक-एक करके देखकर quote बनाएँ। काम को कौन-सी AI चाहिए? Brand को कितना design study चाहिए? वे कितना photo या video budget चाहते हैं? Site कहाँ रहेगी?

चार boxes, invoice पर चार lines।

3. Design model चुनना

Coding crash course ने सरल rule दिया था: क्या करना है तय करने के लिए strong AI और उसे करने के लिए cheap AI उपयोग करें। Design उस table में तीसरी row जोड़ता है।

काम	क्या चुनें
Planning, architecture और किसी उलझन को debug करना	उपलब्ध सबसे capable model
Approved plan follow करना: routine edits, formatting, tests	सस्ता या free model
Visual design और frontend polish	इस quarter design arena का leader

Design को अपनी row क्यों चाहिए? क्योंकि design में अच्छा होना केवल general intelligence से नहीं आता। यह दो दूसरी चीज़ों से आता है:

Practice। कुछ AI companies अपने model को दूसरों की तुलना में अधिक web design work पर train करती हैं।
देख पाने की क्षमता। अपनी page की picture देख सकने वाली AI वही करती है जो human designer करता है: build, देखें, fix करें। केवल अपना code पढ़ने वाली AI अंधेरे में design करती है। Kimi K3 देख सकती है और यही मुख्य कारण है कि लोग उसके pages पसंद करते हैं।

तीन habits आपको hype के पीछे भागने से रोकेंगी:

Announcements पर नहीं, blind tests पर भरोसा करें। LMArena जैसी sites पर real लोग अलग AI models के बनाए pages की तुलना करते हैं, बिना यह जाने कि किसने कौन-सा बनाया, और फिर vote करते हैं। यह किसी company द्वारा अपने product की प्रशंसा से बेहतर evidence है। जुलाई 2026 में Kimi K3 web design में पहले स्थान पर थी, लेकिन overall ranking में Claude और GPT से नीचे। यही gap lesson है: design में best और overall best होना दो अलग competitions हैं।
एक AI को build और दूसरी को judge करने दें। Kimi K3 page बनाती है, Claude review करती है। Concept 12 इसका तरीका दिखाता है।
Leader के बदलने की उम्मीद रखें और देखें कि adaptation की लागत कितनी कम है। अगले quarter जो strong model lead करे, उसे वही taste file दें और लगभग उतना ही अच्छा काम मिलेगा। बनाई हुई और generated page के बीच ज़्यादातर फ़र्क अब model में नहीं, file में है। यही course का पूरा argument और आपकी insurance policy है। Leaderboard के ऊपर का नाम वह हिस्सा है जिससे आपका लगाव सबसे कम होना चाहिए।

Kimi K3 की दो वास्तविक कमियाँ। यह default रूप से बहुत सोचती है, इसलिए अपेक्षा से धीमी और अधिक verbose है। Design करते समय यह ठीक है, छोटे कामों में परेशान करता है। इसकी कम कीमत एक discount पर निर्भर है जो conversation व्यवस्थित रहने पर ही मिलता है, जैसा Concept 15 समझाता है।

4. आपके tool के अंदर कोई भी model

Coding crash course ने आपके tool के अंदर दूसरी AI run करना दिखाया था। Kimi K3 के लिए भी वही करें। यह उन कुछ जगहों में से एक है जहाँ Claude Code और OpenCode सच में अलग हैं, इसलिए अपना tab चुनें।

Setup से पहले समझें कि आप क्या कर रहे हैं। आपका tool सामान्यतः अपने सवाल एक company की AI को भेजता है। आप वह address बदल रहे हैं ताकि सवाल Kimi K3 को जाएँ। Tool में और कुछ नहीं बदलता।

Claude Code default रूप से Claude से बात करता है। Moonshot ने अपनी service को Claude Code के message format को स्वीकार करने लायक बनाया है, इसलिए Claude Code बिना extra software के Kimi K3 से बात कर सकता है।

आपको platform.kimi.ai से key चाहिए। Key password जैसी है, जो आपके computer को उनकी AI उपयोग करने देती है और आपके account से जुड़ी होती है। शुरू करने से पहले दो बातें जानें:

पहले account में थोड़ी राशि जोड़ें। Empty account पर key काम नहीं करती।
सबसे निचला paid level प्रति minute बहुत कम messages देता है, जिससे AI धीमी नहीं बल्कि broken लगती है। मूल्यांकन से पहले पहले level से आगे जाने जितनी राशि जोड़ें।

अब उस project folder की .claude/settings.json में इसे paste करें जहाँ Kimi K3 उपयोग करनी है। इसे सामान्य काम से अलग folder में रखें, ताकि दूसरे projects Claude ही उपयोग करें।

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.moonshot.ai/anthropic",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_MOONSHOT_API_KEY",
    "ANTHROPIC_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "kimi-k3[1m]",
    "ANTHROPIC_DEFAULT_FABLE_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_SUBAGENT_MODEL": "kimi-k3[1m]",
    "CLAUDE_CODE_AUTO_COMPACT_WINDOW": "1048576",
    "ENABLE_TOOL_SEARCH": "false"
  }
}

Block बड़ा दिखता है, लेकिन केवल तीन बातें कहता है: messages कहाँ भेजने हैं, कौन-सा password उपयोग करना है और कौन-सी AI उपयोग करनी है। कठिन अनुभव से सीखी गई पाँच warnings:

हर model line set करें, केवल पहली नहीं। Claude Code background के छोटे कामों के लिए चुपचाप अलग AI models उपयोग करता है। केवल main model बदलने पर वे jobs ऐसे Claude model माँगेंगी जो Moonshot के पास नहीं है, और confusing failures होंगे। इसीलिए हर ANTHROPIC_DEFAULT_* line मौजूद है, जिसमें अक्सर भूली जाने वाली Fable line भी शामिल है।
अगर पहले Claude Code उपयोग किया है, तो ANTHROPIC_API_KEY delete करें। पुरानी key ऊपर दिए ANTHROPIC_AUTH_TOKEN से टकराती है, लेकिन error message कारण नहीं बताएगा। Clean machine से शुरू न करने वालों के लिए setup fail होने का यह सबसे आम कारण है।
Setup को /status से check करें, /model से नहीं। /model menu केवल Claude के अपने models दिखाता है। Kimi वहाँ कभी नहीं आएगी और यह bug नहीं है। /status type करें। उसमें kimi-k3 और Moonshot address दिखना चाहिए।
आपकी key अब file में plain text के रूप में है। उस file को कभी public जगह upload न करें। .claude/settings.json को .gitignore में जोड़ें ताकि गलती से share न हो।
इस route पर web fetching काम करना बंद कर देती है। Moonshot का endpoint अभी यह सुविधा नहीं देता। बाकी सब काम करता है।

आख़िरी setting CLAUDE_CODE_AUTO_COMPACT_WINDOW को copy करने के बजाय समझना उपयोगी है। Conversation भरने के करीब आने पर Claude Code उसे अपने-आप व्यवस्थित करता है, लेकिन उसे "पूरा" size बताना होता है। 1048576, Kimi K3 की one-million-token window का पूरा number है। इसे छोड़ने पर सफ़ाई बहुत जल्दी होगी या बिल्कुल नहीं होगी।

एक साफ़ बात: Moonshot इस setup को support करती है, Anthropic नहीं। Anthropic ने कहा है कि वह Claude Code के messages दूसरी companies की AI models को भेजने की जाँच या support नहीं करती। Claude Code update के बाद setup टूटे तो किसी ने fix का वादा नहीं किया। आप AI चुनने की स्वतंत्रता के बदले official support छोड़ रहे हैं। इसे समझकर किया जाए तो यह उचित trade है।

OpenCode किसी भी AI के साथ काम करने के लिए बनाया गया था, इसलिए यह आसान route है। OpenRouter भी यहीं सबसे अधिक मदद करता है।

OpenRouter एक service है जो आपको लगभग हर AI model से जोड़ती है: Kimi K3, GPT, Gemini और कई free models। हर company में account बनाने के बजाय एक account और एक bill होता है। इसे कई दरवाज़े खोलने वाली एक key समझें।

Setup में लगभग एक minute लगता है:

openrouter.ai/keys पर key बनाएँ और थोड़ा prepaid balance जोड़ें
opencode run करें, /connect type करें, openrouter चुनें और key paste करें
/models type करके moonshotai/kimi-k3 चुनें (picker में दिया exact ID उपयोग करें; IDs बदलती हैं, menu पर भरोसा करें)

बस इतना ही। आपकी जानी हुई हर चीज़ काम करती रहेगी और Kimi K3 list में एक और choice बन जाएगी।

इस course के लिए अच्छा setup: design build करने के लिए Kimi K3, छोटे कामों के लिए cheap model और Concept 12 के review में second opinion के लिए Claude या GPT भी connected।

दो बातों पर ध्यान दें। OpenRouter सीधे Moonshot से थोड़ा अधिक charge करता है क्योंकि connection वह manage करता है। सीखते समय यह ठीक है। Kimi K3 लंबे answers लिखती है, इसलिए tool के usage number पर नज़र रखें। लंबे answers की लागत अधिक होती है।

Rented-crown rule

जो route चुनें, habits अपने tool और files के आसपास बनाएँ, किसी एक AI model के आसपास नहीं। Ranking के शीर्ष की AI ने किराए का ताज पहना है, जो किसी और को मिल जाएगा। आपकी files बनी रहेंगी।

Part 2: Skill के रूप में visual taste

5. Hallmark: असरदार visual taste file

Part 1 ने समस्या बताई। एक free file उसका ज़्यादातर हिस्सा ठीक करती है।

Hallmark, Hassan El Mghari की design skill है, जिसे Together AI brand के तहत publish किया गया है। यह free है, कोई भी उपयोग कर सकता है और 2026 की सबसे लोकप्रिय skill files में शामिल हुई। यह अपना काम एक line में बताती है: AI के बनाए pages को बनाया हुआ दिखाना, generated नहीं।

यह पूरी किताब में skill file की क्षमता का सबसे स्पष्ट example भी है। Coding crash course का promise याद करें: AI general knowledge लाती है और skill आपका specific judgment। Hallmark उसी promise को experts द्वारा बनाकर आपको free देती है।

किसी भी tool में इसे modern तरीके से install करें:

npx skills add Nutlope/hallmark

इससे interactive picker खुलता है: skill खोजता है, machine पर installed agents की list दिखाता है और पूछता है कि कहाँ install करना है। Claude Code, OpenCode और Codex आम तौर पर पहले से selected होते हैं, इसलिए ज़्यादातर readers Enter दबा सकते हैं। बिना prompts के दो flags उपयोगी हैं: -g global install करता है (user-level, हर project में उपलब्ध) और -y confirmations छोड़ता है। इसलिए npx skills add Nutlope/hallmark -g -a claude-code -y one-line version है। Update के लिए फिर run करें और installed skills देखने के लिए npx skills list उपयोग करें।

Files ~/.claude/skills/hallmark/ folder में आती हैं। OpenCode वही folder पढ़ता है, इसलिए एक install दोनों tools के लिए पर्याप्त है।

Folder को एक बार खोलकर देखें। उसका organization खुद एक lesson है। एक छोटी main file SKILL.md है और साथ में references folder, जिसमें बाकी सब है: 58 checks की list, fonts, color और spacing की files, 21 page shapes और themes।

इसे ऐसे बाँटने का कारण यह है कि AI extra files तभी पढ़ती है जब वास्तव में ज़रूरत हो। Main file छोटी रहती है, इसलिए loaded रखने की लागत लगभग नहीं होती। यह coding crash course का वही lesson है, जिसे किसी और ने आपके लिए बना दिया है।

Install खुद एक साफ़ lesson देती है: tool याद दिलाता है कि skills पूरे agent permissions के साथ run होती हैं और उपयोग से पहले review करनी चाहिए। इसे गंभीरता से लें, क्योंकि skill वे instructions हैं जिन्हें agent follow करेगा। इस course या कहीं और से install की गई हर चीज़ की SKILL.md पढ़ें।

File के भीतर क्या है। Hallmark सुंदर pictures का collection नहीं, बल्कि working parts का set है:

यह पहले page की shape चुनती है। Colors से पहले 21 अलग shapes की list से page की structure चुनती है। यही Hallmark को विशेष बनाता है। "इसे अलग बनाएँ" की ज़्यादातर कोशिशें केवल colors बदलती हैं। Hallmark skeleton बदलती है। दो अलग clients के pages में sections का वही क्रम नहीं होना चाहिए। उसी skeleton को नए color से paint करना वही समस्या है जिसे यह हल करती है।
बीस named themes और Custom। हर theme एक coherent identity है: palette, type pairing और spacing character (Specimen, Atelier, Brutal, Newsprint, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Riso, Sport, Bloom, Coral, Cobalt, Aurora, Editorial, Carnival, Lumen और Hum)। यह स्वतंत्र रूप से नहीं चुनती: brief के genre के भीतर rotation rule एक ही theme पर टिकने से रोकता है। अगर creative intent किसी catalog theme में fit न हो, तो Custom चुनकर scratch से custom palette और font pairing बनाती है, उन्हीं gates के साथ लेकिन बिना template। सामान्य briefs में यह branch दिखाई नहीं देती।
काम लौटाने से पहले लंबी checklist। Skill finished page को known bad habits की list से test करती है और कुछ दिखाने से पहले अपने काम की फिर आलोचना करती है। एक उपयोगी detail: project का front page 57 checks कहता है, जबकि installed checklist file का heading 58 है। Documentation के numbers drift करते हैं। Page और tool में मतभेद हो तो tool पर भरोसा करें। यह coding crash course का वही lesson है: एक बार save की गई demanding checklist, थकान में type की गई lazy request से बेहतर है।
Safety rule। Existing website पर Hallmark files delete या sections remove करने से पहले बताएगी और approval लेगी। Design skill किसी का site नष्ट करने की permission नहीं है।

चार modes। Hallmark चार अलग jobs कर सकती है। नया page माँगने पर पहला default behavior है; बाकी तीन को आप नाम से कहते हैं। सही समय पर सही mode चुनना skill सीखने का बड़ा हिस्सा है:

Command	यह क्या करता है	कब उपयोग करें
default	नया page build करता है: shape चुनता है, rules लागू करता है और 58 checks run करता है	कुछ नया शुरू करते समय
audit	Existing page देखकर problems की list देता है, कुछ बदलता नहीं	Honest review चाहिए (Concept 11)
redesign	पुरानी shape हटाकर words और brand रखता है, फिर अलग तरह से rebuild करता है	Page काम करता है पर generated दिखता है
study	पसंदीदा website देखकर उसके काम करने के कारण लिखता है	अच्छे site से सीखना हो (Concept 6)

इसकी विरासत: Anthropic की frontend-design skill

Hallmark अचानक नहीं आई। उसकी file ideas के sources बताती है, जिनमें Claude Code का Anthropic frontend-design plugin शामिल है।

दोनों files की तुलना उपयोगी है, क्योंकि वे एक समस्या को अलग तरीकों से हल करती हैं।

Anthropic की skill judgment सिखाती है। छोटे studio के designer की तरह काम करें। Page के ऊपर कुछ real कहें। Fonts को personality व्यक्त करने दें। एक जगह bold और बाकी जगह शांत रहें। काम को finished कहने से पहले उसकी picture देखें।

Hallmark machinery देती है: page shapes की lists, named themes, numbered checks और required self-review।

दोनों उपयोगी हैं और साथ काम करती हैं। Anthropic plugin install करने पर daily design work में अपने-आप मदद मिलती है। पूरा treatment चाहिए तो Hallmark को नाम से बुलाएँ। Warning: Kimi K3 जैसे non-Claude model skills को अपने-आप चुनने में कम reliable हैं, इसलिए उम्मीद करने के बजाय हर बार Hallmark का नाम type करें।

क्या skill AI से हर बार वही page बनवाती है? नहीं। AI में कुछ randomness रहती है और skill choices को सीमित करती है, हटाती नहीं। Hallmark वही थकी हुई shape चुनने से रोकती है, दो attempts को identical नहीं बनाती। जिन बातों को हर बार सही होना चाहिए, उनके लिए ऐसा rule चाहिए जिसे AI ignore न कर सके। Concept 11 इसे बनाना दिखाता है।

6. Study करें, clone नहीं

Design सुधारने का सबसे तेज़ तरीका पसंदीदा design दिखाकर कहना है, "इसे वैसा feel कराएँ।"

Reputation खराब करने का सबसे तेज़ तरीका उस site की exact copy बनाना है।

Hallmark का study command इस tension को अच्छी तरह संभालता है और उसका तरीका design के बारे में बहुत कुछ सिखाता है।

study को पसंदीदा website या उसकी screenshot दिखाएँ। वह site के काम करने के कारण लिखता है: page shape, साथ काम करने वाले fonts, main color और खाली space की मात्रा। यह सब design.md file में save होता है।

यह site को copy नहीं करेगा। यह ideas लेता है, pixels नहीं। दो sites वैसे ideas share कर सकती हैं जैसे दो students एक teacher share करते हैं: संबंध दिखाई देता है, लेकिन वे एक व्यक्ति नहीं हैं।

Copy करना गलत है और legal problems पैदा कर सकता है। तीन practical कारण भी उतने ही महत्वपूर्ण हैं:

File यात्रा करती है। design.md आपका लिखा हुआ visual taste है। इसे दूसरी AI, tool, teammate या approval के लिए client को दें; handover के बाद भी design direction बनी रहती है।
यह आपकी नज़र train करती है। पसंदीदा तीन sites की files पढ़ने पर आपको हर जगह structure और fonts दिखाई देने लगेंगे। Skill काम करते हुए सिखाती है।
यह beginners की सबसे कठिन समस्या हल करती है। ज़्यादातर लोग मनचाहा look बता नहीं सकते, लेकिन पसंदीदा site दिखा सकते हैं। study उस इशारे को instructions में बदलता है।

Follow करने लायक rule: हर project में दो या तीन sites study करें, केवल एक नहीं।

एक example copy करने की ओर खींचता है। तीन examples ideas मिलाने को मजबूर करते हैं: shape एक से, fonts दूसरे से और restraint तीसरे से। इन्हें मिलाने से original लगने वाला काम बनता है।

7. Brand extraction: client का DNA पहले से online है

Concept 6 पसंदीदा sites पर था। Client work उलटा है। जिस design का सम्मान करना है वह पहले से मौजूद है: client का brand, logo, colors, fonts और बोलने का तरीका। इन्हें गलत करने पर बाकी build का कोई महत्व नहीं रहेगा।

Main idea: specific चीज़ें माँगें, सब कुछ नहीं।

पूरे web page की ओर AI को भेजने पर code, scripts और cookie pop-ups की उलझन मिलती है। उसमें दबकर वह आत्मविश्वास से ऐसा color बना देगी जो मौजूद नहीं है। AI models uncertainty में confident guess देती हैं। आपका काम guessing को impossible बनाना है।

Route 1: AI से पूछें, लेकिन सटीक रूप से (free)। Client का site खुलवाकर proof के साथ exact चीज़ें माँगें:

इस page से सबसे अधिक उपयोग होने वाले तीन brand colors के exact color codes, fonts के नाम और logo file का address दें। हर item के लिए वह code line quote करें जहाँ वह मिला।

आख़िरी sentence महत्वपूर्ण है। अकेला color code एक guess है। Source line के साथ color code आप खुद check कर सकते हैं। हमेशा प्रमाण माँगें।

Route 2: इसी काम का tool उपयोग करें (paid, cleaner)। Firecrawl जैसी services messy web pages को AI के लिए clean और organized information में बदलती हैं। कुछ सीधे brand का logo, colors और fonts देती हैं। एक client के लिए route 1 ठीक है। हर हफ़्ते यह काम करने पर paid tool errors की पूरी category हटाकर अपनी लागत निकाल देता है। ध्यान दें: इस course के आधार videos को ऐसे tools promote करने के लिए payment मिला था। Idea सही है; current prices देखकर brand आप चुनें।

Route 3: client से सीधे पूछें। इसे कभी न छोड़ें। Real businesses के पास real files होती हैं: सही logo, official colors और कभी brand document। ऊपर की चीज़ें first draft के लिए हैं। Live करने से पहले real files माँगें। आँख से rebuild किया logo आखिर पहचान लिया जाएगा और स्थिति असहज होगी।

Answers किसी भी तरह मिलें, वे उसी design.md file में जाएँ। उन्हें स्पष्ट रूप से rules, suggestions नहीं mark करें।

यह वास्तविक फ़र्क है। Concept 6 की पसंदीदा sites direction देती हैं: उधार लेने वाले ideas। Client के brand colors rules हैं: कोई सुंदर alternative मिलने पर उन्हें बदल नहीं सकते। आपकी taste skill उन्हीं rules के भीतर design करती है।

Part 3: Build

8. एक story, एक scroll

अपनी जानी हुई best websites खोलें और उनकी common बात देखें। Page, stacked sections का ढेर नहीं है। वह एक story है, जो scroll के क्रम में सुनाई जाती है।

हर screen पर एक idea। हर screen अगली देखने की इच्छा पैदा करती है। Scroll से story आगे बढ़ती है।

Page को intentional feel कराने का यह course का सबसे strong idea है और इसे plan करना आसान है:

Build शुरू होने से पहले story लिखें। पाँच से आठ steps, हर एक की एक line। इन्हें film की तरह beats कहते हैं। Honey company के लिए: जंगली honeycomb, फिर गिरती drop, भरता jar, उसके अंदर क्या है, कौन बनाता है और अंत में खरीदना। आगे बनने वाली accountant के लिए: receipts का shoebox, sorting, अपने-आप balance होते accounts, साफ़ monthly picture, उसके पीछे की व्यक्ति और meeting book करना। Beats लिखें, उन पर debate करें, सहमत हों और कुछ build करने से पहले file में save करें।
हर screen पर एक idea। Screen दो points कहने की कोशिश करे तो कोई भी नहीं कह पाती। उसे दो screens में बाँटें।
Page का top असली चीज़ दिखाए, "Innovative solutions for modern business" जैसा slogan नहीं। Honey site गिरती honey से खुलता है। Accountant का site receipts के उस shoebox से खुलता है जिसे हर small business owner तुरंत पहचानता है।
एक moment bold रखें और बाकी सब शांत। ऐसी एक चीज़ जिसे visitor बाद में friend को बता सके: animation, scroll पर react करने वाली चीज़ या typography का striking उपयोग। एक जगह bold होना confidence दिखाता है। हर जगह bold होना mess लगता है।

Story spine आपका responsive contract और media shot-list भी है। इसे संभालें: Concept 9 हर beat के लिए imagery generate करता है और Concept 10 उसी spine को अलग screen shape के लिए फिर shoot करता है। एक artifact, तीन jobs; इसीलिए इसे दिमाग में रखने के बजाय लिखा जाता है।

आख़िरी beat को वास्तव में कुछ करना चाहिए। हर story एक action पर समाप्त होती है: book, buy, message या subscribe।

यह trap लगभग हर पहली website में आता है। Simple website केवल files होती है। पीछे message receive करने वाला system नहीं होता। इसलिए story के अंत का सुंदर button कुछ भी नहीं करता, जब तक आप उसका mechanism न चुनें। तीन साफ़ options, सबसे सस्ते से शुरू:

Option 1: WhatsApp link। इसे extra कुछ नहीं चाहिए और ज़्यादातर small businesses के लिए यही best answer है। ऐसा link:

https://wa.me/923001234567?text=Hello,%20I%20would%20like%20to%20book%20a%20consultation

पहले से typed message के साथ WhatsApp खोलता है। कोई system build नहीं करना, कोई form नहीं और कुछ check नहीं। सबसे अच्छी बात यह है कि message वहीं आता है जहाँ owner पूरे दिन customers को जवाब देता है। ज़्यादातर website templates ऐसा contact form देते हैं जिसे कोई check नहीं करता। WhatsApp button आसानी से बेहतर है।

Option 2: form service। Formspree जैसी companies page पर normal form लगाने देती हैं और submit हुई चीज़ें email करती हैं। उनके free plans small business के लिए पर्याप्त हैं। Client को सच में form चाहिए तो इसका उपयोग करें।

Option 3: server पर छोटा program। Vercel (Concept 13) website के साथ छोटे programs run कर सकता है, इसलिए project बड़ा होने पर AI proper system बना सकती है। पहले दो options यहाँ तक बढ़ सकते हैं; शुरुआत यहाँ से नहीं होती।

जो चुनें, planning के समय story में लिखें। "Beat 6: consultation book करें, +92 300... का WhatsApp link" ऐसी line है जिसके आसपास plan और बाद में check किया जा सकता है। Concept 11 दिखाता है कि finished live page में working link सुनिश्चित कैसे करें।

कुछ न करने वाले button पर समाप्त story website नहीं, poster है।

क्रम पर एक note। Single page पहले सीखें। Course की हर चीज़ एक page पर आसान है। लेकिन real client work आगे बढ़ता है, इसलिए Part 3 के अंत का multi-page section बताता है कि site को अधिक rooms चाहिए तो क्या बदलता है।

9. Media pipeline

हर ऐसी website का साफ़ secret जिसने आपको रुककर देखने पर मजबूर किया: pictures आधा काम कर रही हैं।

अच्छे fonts और structure आपको average से ऊपर उठाते हैं। लेकिन केवल colored boxes और text वाला page जगह नहीं, document लगता है। Real photographs और video page को ऐसी जगह बनाते हैं जहाँ आप पहुँचे हैं।

इसीलिए pictures course का required हिस्सा हैं, अंत की decoration नहीं।

यह वह हिस्सा भी है जहाँ पैसा क्षमता को सच में बदलता है। इसलिए इसे free से expensive तक चार lanes में सिखाया गया है। हर lane real और अच्छी website बना सकती है। हर project के लिए lane चुनें और जानें कि उससे क्या मिलता है।

Lane 1: real photographs (free, हमेशा)। Unsplash और Pexels में professional photos की बड़ी libraries हैं, जिन्हें paying clients के लिए भी free उपयोग कर सकते हैं। Rules page पढ़ें: photos उपयोग कर सकते हैं, खुद photos दोबारा बेच नहीं सकते।

दो habits free photos को free जैसा दिखने से रोकती हैं:

Light match करें। पूरे page में same light और mood वाली photos चुनें। Mixed lighting page को अजनबियों की pictures से जोड़ा हुआ दिखाती है।
जानबूझकर crop करें। Photo को मिली हुई shape में स्वीकार न करें। जो दिखाना है उसके अनुसार काटें।

लगभग सबके भूले option को याद रखें: local business के लिए अच्छी शाम की रोशनी में फ़ोन camera हमेशा generic stock photos से बेहतर है। Client की real office की real photo कोई AI नहीं बना सकती।

Lane 2: AI-made pictures, free (एक शर्त के साथ)। कभी ज़रूरी picture मौजूद नहीं होती: unusual illustration style या ऐसा product जिसकी photo नहीं ली गई। AI इसे बना सकती है।

पूरी lane की शर्त यह है: free में quality या convenience मिलती है, दोनों नहीं।

Best picture-making AI केवल तब free है जब click आप खुद करें। AI द्वारा automatically उपयोग होने वाली services कमज़ोर या कम reliable हैं। Project के अनुसार चुनें:

2a. हाथ से, best AI के साथ: ChatGPT का free plan। OpenAI की image AI अभी widely available सबसे strong options में है। यह instructions बारीकी से follow करती है, picture में readable text रख सकती है (ज़्यादातर नहीं रख सकतीं) और images के set में consistent style बनाए रखती है, इसलिए पूरे page की pictures साथ की लगती हैं।

यह chatgpt.com पर free है, रोज़ सीमित pictures के साथ। OpenAI fixed number publish नहीं करती और वह बदलता है, इसलिए अपने account में दिखी सीमा check करें। Free automatic version नहीं है, इसीलिए यह route हाथ से किया जाता है।

यह workflow manual काम को बोझ के बजाय लाभ बनाता है: आपकी AI instructions लिखती है और आप button दबाते हैं।

Storyboard में हर beat की description पहले से है। AI से उन्हें polish कराएँ, हर एक को chatgpt.com में paste करें, results को assets/ folder में 01-shoebox.png जैसे names से save करें और AI उन्हें page में रखेगी। दस minutes copy-paste करके best available image quality free मिलती है।

Daily limit मदद भी करती है। रोज़ कुछ pictures planned build की speed के आसपास हैं और चालीस pictures generate करके एक के काम करने की उम्मीद वाली bad habit रोकती हैं।

2b. Automatic, लेकिन कमज़ोर: free services जिन्हें AI खुद call कर सकती है। Rough drafts, placeholder images या classroom projects में आपके बिना काम चलना चाहिए तो तीन options हैं। Pollinations.ai वास्तव में free automatic pictures के सबसे करीब है और account भी नहीं चाहिए। Cloudflare Workers AI रोज़ real free allowance देता है। Google का free plan अलग समय पर free pictures देता रहा है।

आख़िरी option में lesson है। केवल 2026 में Google ने अपनी current image AI free है या नहीं, इसे एक से अधिक बार बदला। इसलिए company का नाम नहीं, यह advice याद रखें: free plans मौसम जैसे हैं। Build वाले दिन current page check करें और client से ऐसी free allowance का promise कभी न करें जो अगले महीने गायब हो सकती है।

दोनों को ऐसे उपयोग करें: चीज़ों की जगह तय करने के लिए 2b से rough drafts बनाएँ, फिर approved pictures को 2a से ठीक तरह दोबारा बनाएँ। Draft सस्ता, finish अच्छा।

Lane 3: हर picture के कुछ cents दें। Project में छोटा budget आते ही Lane 2 की शर्त समाप्त हो जाती है।

2a की वही excellent image AI automatically उपयोग की जा सकती है और payment हर picture पर है: low quality के लगभग आधा cent, medium के कुछ cents और high के करीब बीस cents। Prices बदलती हैं, इसलिए check करें।

इन prices पर quality और convenience दोनों मिलती हैं। AI storyboard की हर picture खुद top quality में बनाती है और पूरी website की pictures एक dollar से कम में बनती हैं। ज़्यादातर real client work यहीं होता है।

fal.ai और Replicate जैसी services एक account से कई companies की image AI के लिए वही करती हैं जो Concept 4 में OpenRouter ने text के लिए किया।

इसे सस्ता रखने वाली habit आप जानते हैं: drafts low quality में बनाएँ और picture पर सबकी सहमति के बाद ही high quality का payment करें।

Lane 4: credits से paid video (showstopper)। Scroll करते समय screen से गिरती honey drop इसी lane से आती है। इसमें real money लगता है और सही उपयोग पर यह लागत उचित है।

Higgsfield एक account से 30 से अधिक picture, video और sound AI models (Gemini Omni Flash, Seedance, Veo, Kling और दूसरे) का access देती है। हमारे लिए तीन बातें महत्वपूर्ण हैं:

आपकी AI इसे सीधे उपयोग कर सकती है। npm install -g @higgsfield/cli से एक बार install और higgsfield auth login से एक बार sign in करें। इसके बाद video बनाना normal session में file edit करने जैसा AI का काम बन जाता है। वह job भेजती है, इंतज़ार करती है और result लाती है।
Model चुनना ज़रूरी नहीं। मनचाहा shot बताएँ, जैसे "close up, glass पर गिरती honey, पीछे से warm light, फ़ोन के लिए tall shape, चार seconds", और service 30+ models में best चुनती है। एक चीज़ कम सीखनी पड़ती है।
खर्च करने से पहले price check कर सकते हैं। higgsfield generate cost command video बनाए बिना उसकी संभावित लागत बताती है। Shot को बनाने जैसी description दें। Real example ऐसा है:
```
higgsfield generate cost workflow draw_to_video --duration 8.2 --resolution 720p
```
यह पूरे media section की सबसे उपयोगी command है, क्योंकि "खर्च से पहले plan करें" को वास्तविक action बनाती है: storyboard के हर shot का price निकालें, total करें, decide करें और फिर create करें। AI को shoot करने से पहले quote करना सिखाएँ।

Higgsfield कई companies में एक है: fal.ai, Replicate और AI companies खुद भी ऐसा करती हैं। हम इसे दिखाते हैं क्योंकि अभी tools से सबसे आसान connect होती है और साफ़ रूप से कहें तो इस workflow को लोकप्रिय बनाने वाले कई videos का payment करती है। Idea सीखें: AI session के भीतर normal step के रूप में video बनाना। Company बदली जा सकती है।

कौन-सी video AI माँगें? Service चुन सकती है, लेकिन website work के लिए दो models लगभग सब cover करते हैं और अलग jobs करते हैं:

Google का Gemini Omni Flash, अभी preview model है और बिना notice बदल या move हो सकता है। यह shot खोजता है। इससे व्यक्ति की तरह बात कर सकते हैं: "same scene, slower pour, warmer light" शून्य से शुरू करने के बजाय पिछले video को सुधारता है और refinement के दौरान lighting व scene consistent रखता है। Shot तय करते समय उपयोग करें।
ByteDance का Seedance 2.0 (seedance_2_0 नाम से दिखेगा) shot lock करता है। इसे नौ तक reference pictures, जैसे brand images, approved photos और logo दे सकते हैं। Smooth motion में यह सबसे steady है। Scroll से जुड़े looping video को flicker या wobble नहीं करना चाहिए। Final version के लिए उपयोग करें।

एक habit दोनों पर लागू है: पहले से खोजें, दूसरे से lock करें। Quality level model के नाम का हिस्सा नहीं, separate --resolution setting है, जैसा ऊपर pricing command में। यही budget control है: shot का price 720p पर निकालें, client को 720p draft दिखाएँ और approval के बाद full quality का payment करें।

स्थायी warning: video AI course की किसी भी चीज़ से तेज़ बदलती है। ये जुलाई 2026 के best models हैं। Build वाले दिन best option check करें।

हर lane का एक rule: final layout build होने से पहले story से हर beat की एक picture बनाएँ और clear names के साथ assets/ folder में save करें।

खाली जगह भरने के लिए अंत में जोड़ी pictures हमेशा वैसी ही दिखती हैं।

Practical tip: कई photos में search करना हो तो helper AI को अलग conversation में भेजें और केवल best कुछ वापस लाने दें। Main conversation में चालीस photos load करने से वह भर जाएगी, जैसा coding crash course ने चेताया था।

Permission पर छोटा note, क्योंकि client का काम business use है।

Free photo sites के rules हैं और आप उन्हें पढ़ना जानते हैं। AI-made pictures के भी rules हैं। ज़्यादातर companies अभी created content का commercial use देती हैं, लेकिन rules companies और free-paid plans में अलग हैं तथा बदलते रहते हैं। कुछ free plans business use बिल्कुल नहीं देते, इसलिए उन्हें draft tools मानने का एक और कारण है।

लगभग हर जगह कुछ चीज़ें मना हैं: real लोगों के faces, दूसरी companies के logos और नामित जीवित artist की style copy करना।

चार simple habits आपको safe रखती हैं:

Final pictures की service के current rules पढ़ें
बनाए गए काम का record रखें: description, service और date। Storyboard में इसका ज़्यादातर हिस्सा पहले से है
Client work में पहचान योग्य real व्यक्ति या दूसरी company का logo कभी न रखें
Client को बताएँ कि कौन-सी pictures AI ने बनाई हैं। Handover note की एक sentence भविष्य की असहज बातचीत रोकती है

यह legal advice नहीं है। Regulated industry के client के लिए real lawyers होते हैं। लेकिन ये चार habits professional work का सामान्य standard हैं।

10. Mobile primary device है

आपके देखे हर AI website demo को wide computer screen पर record किया गया था। आपकी website पर आने वाले ज़्यादातर लोग एक हाथ में फ़ोन पकड़े होंगे।

इस किताब के लगभग हर reader के लिए फ़ोन दूसरी screen नहीं, मुख्य screen है। केवल laptop पर अच्छा दिखने वाला site उसी व्यक्ति को impress करता है जिसने उसे बनाया।

एक idea दोनों screens के लिए design सरल बनाता है:

वही story, अलग shape के लिए दोबारा film की गई।

फ़ोन version बनाते समय film director नई story नहीं लिखता। Scenes वही रहते हैं, framing बदलती है। Practice में इसका अर्थ है:

Story नहीं बदलती। Shoebox, sorting, balancing, clarity, व्यक्ति और meeting book करना, सभी छह हर device पर। Useful test: कोई beat फ़ोन से हट सकती है तो वह story नहीं, decoration थी। Computer version से भी हटाएँ।
Pictures फिर ली जाती हैं। Wide video को दबाने के बजाय उसी subject का tall video बनता है। Paid lanes में दोनों shapes बनाकर दोनों का payment करना होगा, इसलिए budget में रखें। Free lanes में शुरुआत से दोनों shapes चुनें।
Layout कहाँ बदलेगा, जानबूझकर तय करें। AI से साफ़ कहें: "768 pixels से narrow screens पर tall video उपयोग करें, हर section full width करें और balancing animation बहुत बड़ी रखें, क्योंकि फ़ोन पर वही पूरा show है।" फिर test करें: browser window को narrow और wide खींचकर switch का moment देखें। Smooth या ugly दिखाई देता है, इसलिए यह Concept 11 का काम है।
Thumbs mouse pointers नहीं हैं। Buttons thumb के लिए बड़े होने चाहिए। Important चीज़ hover पर निर्भर न हो, क्योंकि फ़ोन पर hover नहीं होता। Text pinch-to-zoom के बिना readable हो। इनमें failure style problem नहीं, ज़्यादातर visitors के लिए broken site है।

फ़ोन version कब बनाना है: computer version के तुरंत बाद उसी working session में, जब AI हर decision याद रखती है। दूसरे दिन या एक हफ़्ते बाद नहीं। दो sessions थोड़ी अलग websites बनाते हैं, जिसे client से पहले शायद आप न देखें।

पूरे build में इसकी जगह design settle होने के बाद और checking शुरू होने से पहले है:

computer version → phone version → screenshots at both widths → audit → second opinion → publish

क्रम सरल है: checking steps दोनों versions check करें। फ़ोन version review के बाद बनाने पर केवल आधी website review हुई।

एक page से कई तक: multi-page sites और routing

अब तक सब कुछ जानबूझकर एक page पर सिखाया गया। इन habits को एक page पर सीखना सबसे आसान है।

लेकिन real client work बढ़ता है। आगे Ayesha को services page, articles section और शायद हर specialization का page चाहिए होगा।

अच्छी बात: सीखी हुई चीज़ नहीं बदलती। Multi-page site कोई नई चीज़ नहीं। वही काम हर page पर एक बार, साथ में तीन नए rules।

Rule 1: हर page के अस्तित्व का अपना कारण और अपनी story हो।

Pages जोड़ने का गलत तरीका एक story को टुकड़ों में बाँटना है, जिससे "About" page पर दो अकेले paragraphs रह जाते हैं जो main scroll में होने चाहिए थे।

सही तरीका "हर screen पर एक idea" test को एक level ऊपर उपयोग करता है। नया page तब होता है जब visitor का अलग काम हो। Services की detail compare करना, articles पढ़ना और office खोजना तीन अलग jobs हैं, इसलिए तीन pages हो सकते हैं।

Test pass करने वाले हर page की अपनी story होती है, जो Concept 8 की तरह लिखी और agreed होती है तथा अपनी action पर समाप्त होती है।

पहले एक plan में सब लिखें: हर page, उसका job और beats। दूसरा page build करने से पहले plan approve करें।

Menu decoration की तरह invent होने के बजाय plan से सीधे आता है। इसे छोटा रखें, items के नाम visitors के काम पर रखें और हर page पर identical रखें।

एक और छोटी चीज़ careful work को careless से अलग करती है: "page not found" screen भी design करें। वह page है, इसलिए समान care चाहिए।

Rule 2: पूरे site में एक look।

यहाँ Hallmark का main idea उलटता है और लोगों को उलझाता है, इसलिए धीरे पढ़ें।

अलग clients के बीच, skill sameness से लड़ती है। दो clients की websites एक skeleton share न करें।

एक client के site के भीतर, sameness ही चाहिए। पाँच pages एक building के पाँच rooms जैसे लगें: same colors, fonts और spacing, सभी एक design.md से governed।

Bold moment special रहता है और home page पर रहता है। हर page पर full strength में दोहराने पर special नहीं, wallpaper बन जाता है।

Practice में look settle करने के लिए home page पहले build करें। फिर हर दूसरे page के लिए कहें: "same design file, same look, new story।"

दूसरी AI site review करे (Concept 12), तो specifically पूछें कि pages consistent लगते हैं या नहीं। Pages के छोटे differences builder काम के भीतर से नहीं देख सकती।

Rule 3: copying problem बनने तक web addresses केवल files हैं।

यह complicated सुनाई देता है, लेकिन है नहीं। Simple website में file ही address है:

index.html आपका home page है
services.html, /services.html पर है
articles/index.html, /articles पर है

Links इन्हें connect करते हैं और host folder को जैसा है वैसा online रखता है। कोई system सीखना नहीं। हमेशा यहाँ से शुरू करें।

एक छोटा tidiness setting: /services को /services.html से बेहतर मानते हैं तो pages के साथ vercel.json file में { "cleanUrls": true } रखें। Vercel addresses से .html हटाता है। Default में off है, इसलिए न छूने पर कुछ नहीं टूटता।

कई pages की real कठिनाई addresses नहीं, copying है। Menu और footer हर file में copies हैं। एक menu की पाँच copies, थोड़ा अलग होने के पाँच chances हैं और किसी दिन एक page पर पुराना link रह जाएगा।

Coding crash course से यह feeling जानते हैं: तीसरी बार वही चीज़ समझाने पर knowledge एक जगह रहना चाहता है।

दो answers, light से heavy:

Light answer: simple files रखें और automatic check जोड़ें जो menus identical न होने पर काम save न होने दे। अब drift केवल unlikely नहीं, impossible है।
Heavy answer: कुछ से अधिक pages या regular new articles होने पर ऐसे system पर जाएँ जो menu एक बार लिखकर reuse करे। Astro ऐसे site के लिए अच्छा है और AI एक instruction में setup करके existing pages move कर सकती है।

Judgment वही है जो coding crash course ने tools पर सिखाया: heavy system तब लें जब real problem ने उसे justify किया हो, पहले नहीं।

बाकी सब हर page पर एक बार repeat होता है: दोनों widths की screenshots, audit, फ़ोन version, sitemap entry, weight limit और cost estimate की line। अधिक pages का अर्थ अधिक surface है, अधिक ideas नहीं; इसीलिए एक से शुरू किया।

Part 4: Design verification

11. Visual verification loop

पूरी किताब का सबसे महत्वपूर्ण pattern एक loop है: try, check, fix, repeat। AI काम करती है, कुछ उसे check करता है और check fail होने पर failure message अगला instruction बनता है। AI किसी को बीच में रखे बिना check pass होने तक चलती है।

Coding crash course में checker एक test था। Design को इस तरह check करना impossible लगता था, क्योंकि "यह सही दिखता है" को computer pass या fail नहीं कर सकता।

यह concept इसे ठीक करता है। सबसे gentle से strict तक तीन checkers:

Checker 1: screenshot। AI को आँखें दें।

यह course की सबसे valuable habit है और simple है। हर build round के बाद AI finished page की picture लेकर उसे देखती है, code को नहीं।

यह इतना महत्वपूर्ण क्यों है? अपना code पढ़ती AI नहीं बता सकती कि text के दो pieces एक-दूसरे पर हैं, video load नहीं हुआ, button पीछे के background के same color का है या narrow screen पर layout टूटता है।

Picture पर एक नज़र चारों को तुरंत पकड़ती है।

इसीलिए Kimi K3 design comparisons जीतती है। Anthropic की design skill इसे उपयोगी line में समेटती है: "एक picture 1000 tokens के बराबर है।" AI किसी चीज़ को पढ़ने के लिए tokens देती है। इसलिए यह proverb नहीं; यह दावा है कि देखना code पढ़ने से बेहतर होने के साथ सस्ता भी है।

Rules file में रखकर इसे automatic बनाएँ:

हर significant change के बाद page की 1440 pixels और 390 pixels width पर picture लें और finished कहने से पहले दोनों देखें।

दोनों tools यह कर सकते हैं। अपने tool से Playwright नाम का program setup करने को कहें। लगभग बारह lines का code एक बार लिखा जाता है: browser खोलें, हर width पर page load करें, picture save करें, close करें।

दो details pictures को उपयोगी बनाती हैं। केवल पहले दिखने वाला भाग नहीं, पूरा page capture करें, क्योंकि scroll story नीचे रहती है। Site online होने के बाद (Concept 13), computer की copy नहीं, live page की pictures लें।

Checker 2: audit। Visual taste को list में बदलें।

Hallmark का audit command page पढ़कर specific problems की list देता है। कुछ बदलता नहीं, केवल बताता है।

Loop को list ही चाहिए, क्योंकि हर item अगला instruction है। Build, audit, list fix, फिर audit; list empty होने तक।

अभी का बदलाव देखें। "इसे कम generic बनाएँ" कभी fail न होने वाला instruction है, इसलिए कुछ drive नहीं कर सकता। "इन सात specific problems को fix करें" finish और check हो सकता है। पहले तरह की sentence को दूसरे में बदलना पूरी trick है।

Checker 3: automatic rule। जो हमेशा true होना चाहिए, उसे guarantee करें।

कुछ चीज़ें AI के judgment पर नहीं छोड़ी जा सकतीं। वे हर बार true होनी चाहिए। Coding crash course ने इन्हें पहचानना और automatically enforce करना सिखाया, ताकि AI चाहकर भी skip न कर सके।

Website के classic examples:

हर picture के साथ text description, ताकि screen reader उपयोग करने वाले जानें कि उसमें क्या है
कोई file size limit से बड़ी नहीं
कुछ save होने से पहले site बिना errors build होती है

Coding crash course की warning दोहराएँ: AI से लिखवाने के बजाय ये checks खुद लिखें। अपनी habits के विरुद्ध test बनाने को कही AI मददगार बनकर test आसान बना देगी।

यहाँ कई लोग खुद को धोखा देते हैं, इसलिए ध्यान से पढ़ें। Rules file में "हर picture की description हो" लिखना ऐसा instruction है जिसे AI सामान्यतः follow करेगी। यह ऐसे rule के समान नहीं जिसे वह तोड़ नहीं सकती। फ़र्क उस दिन दिखता है जब वह भूलती है।

Real check एक छोटा program है जो हाँ या नहीं में जवाब देता है। इसे project में check-site.mjs के रूप में save करें। यह Node.js है, जो npx और Vercel के कारण पहले से है, इसलिए Windows, macOS और Linux पर same run होता है:

import { readdirSync, statSync, readFileSync } from "fs";
import { join, extname } from "path";

const MAX = 500 * 1024; // 500KB
const MEDIA = [
  ".png",
  ".jpg",
  ".jpeg",
  ".webp",
  ".avif",
  ".svg",
  ".gif",
  ".mp4",
  ".webm",
];
const problems = [];

function walk(dir) {
  // look in every folder, not just this one
  let out = [];
  for (const name of readdirSync(dir)) {
    if (name === "node_modules" || name.startsWith(".")) continue;
    const full = join(dir, name);
    out = statSync(full).isDirectory()
      ? out.concat(walk(full))
      : out.concat(full);
  }
  return out;
}
const files = ["site", "assets"].flatMap(walk); // only what actually publishes

for (const f of files.filter((f) => extname(f) === ".html")) {
  const html = readFileSync(f, "utf8");
  for (const tag of html.match(/<img\b[\s\S]*?>/gi) || []) {
    // even across line breaks
    if (!/\balt\s*=/i.test(tag)) problems.push(`MISSING DESCRIPTION  ${f}`);
  }
}
for (const f of files.filter((f) => MEDIA.includes(extname(f).toLowerCase()))) {
  if (statSync(f).size > MAX)
    problems.push(`TOO BIG  ${f}  ${Math.round(statSync(f).size / 1024)}KB`);
}

if (problems.length) {
  console.error(problems.join("\n"));
  process.exit(1);
}
console.log("All checks passed.");

इसे node check-site.mjs से run करें। Problem होने पर file name print करके failure पर रुकता है। सब ठीक हो तो बताता है।

इसे दोनों तरह आज़माएँ, क्योंकि fail देखना point है। अच्छे page पर run करने से All checks passed कहता है। अब एक alt="..." delete करके फिर run करें:

MISSING DESCRIPTION  site/index.html

वही failure loop चलाता है। AI script run करती है, MISSING DESCRIPTION: services.html पढ़ती है, exact file fix करके फिर run करती है। किसी को notice या याद नहीं करना पड़ा।

Script की हर line समझना ज़रूरी नहीं। उसके दिखाए फ़र्क को समझें: rules file पूछती है, script निर्णय करती है।

काम की mistakes सीखने पर rules जोड़ें। Menu हर page पर identical हो। Page में real working contact link हो। Title अभी भी "Home" न हो। Download package के version में छह rules हैं और हर एक इसलिए है क्योंकि कोई चीज़ एक बार गलत हुई।

यह भी जानें कि यह क्या नहीं पकड़ सकता। Finished Ayesha project में beat 3 का ledger PKR 217,950 था, जबकि beat 4 पर PKR 217,930 दिखा। वह accountant की website थी। Audit, reviewing AI और screenshots में किसी ने नहीं पकड़ा, क्योंकि सभी देख रहे थे कि page सही दिखता है और वह दिखता था। तीन numbers जोड़ने वाले व्यक्ति ने पकड़ा।

इसलिए जो check हो सकता है उसे automate करें और बचा attention उस हिस्से पर दें जो कभी automate नहीं हो सकता। यह consolation prize नहीं, job है।

पहले build से रखने लायक rules के दो groups।

Group one: हर कोई site उपयोग कर सके। Text और background में readable contrast हो। Mouse के बजाय keyboard से navigate करने वाले अपनी position देख सकें। Device में reduced motion चुनने वाले visitors के लिए animations रुकें, क्योंकि motion कुछ लोगों को बीमार करता है। Anthropic की design skill इसे चुपचाप पूरा किया जाने वाला floor कहती है। सही attitude: यह minimum है, feature नहीं।

Group two: page load होने जितना light हो। दुनिया के ज़्यादातर हिस्सों और निश्चित रूप से Pakistan में बहुत visitors mid-range फ़ोन उपयोग करते हैं और data के megabyte का payment करते हैं। सुंदर 40 megabyte video उनके लिए impressive नहीं, छोड़ने का कारण है।

इसलिए limits set करके automatically enforce करें:

पहला screen किसी video से पहले लगभग 1 megabyte से कम में load हो
हर video के पीछे still picture हो, ताकि video load होने से पहले page अच्छा दिखे
नीचे की pictures visitor के scroll करने पर ही load हों
अपने-आप चलने वाला video silent हो, क्योंकि अचानक sound से लोग tab close करते हैं

Fast connection पर stunning और visitor के फ़ोन पर fail site ने ज़्यादातर audience को fail किया। Visual taste से अलग, इनमें हर चीज़ computer check कर सकता है।

आपकी जगह अब भी रहती है। Loop correct और non-generic पर converge करता है, इस client के लिए सही पर नहीं: page Ayesha जैसा लगता है या नहीं, bold moment काम करता है या story beats को space मिलता है। वह judgment कभी delegate नहीं हो सकता और ऊपर तीसरे belief ने कारण बताया: trust केवल checkable सीमा तक। Loop का gift यह है कि judgment केवल वहीं खर्च होता है जहाँ ज़रूरी है।

12. Cross-model design review

Coding crash course का rule: जिस AI ने कुछ बनाया, वही उसका सबसे खराब reviewer है।

Design इस rule को strong बनाता है और Concept 1 कारण बताता है: AI अपनी habits नहीं देख सकती। भीतर से favorite look habit नहीं, "websites ऐसी दिखती हैं" लगता है। अलग तरह सीखी दूसरी AI उन्हें तुरंत पहचानती है।

इसे ऐसे setup करें:

एक AI build करती है। Kimi K3 (या Claude) page बनाती है
दूसरी company की AI review करती है। वही AI दूसरी बार नहीं और same company की sibling नहीं, सच में अलग। Reviewer को original brief, design.md और screenshots दें। Screenshots ज़रूरी हैं, क्योंकि केवल code पढ़ने वाला design review theatre है। Demanding questions पूछें: page को brief से compare करें, AI-made लगने वाली तीन जगहें और कारण बताएँ, फ़ोन version में story check करें, colors और fonts design.md से exact match हों, findings file में लिखें और कुछ न बदलें
Builder findings पढ़कर fix करती है। दोनों AI models disagree करें तो आप decide करें

अलग company पर insist क्यों? Concept 1 के test में Kimi K3 pages ने दूसरी AI जैसी habits दिखाईं, संभवतः उससे सीखी हुई। अलग companies की AI models भी same blind spot share कर सकती हैं। Outside reviewer वह चीज़ पकड़ने का सबसे सस्ता तरीका है जिसे builder खुद में नहीं देखती।

Extra benefit: review file में save है, इसलिए client को दिखा सकते हैं। "Independent review ने ये पाँच issues पाए और पाँचों fix हैं" कहना बहुत उपयोगी है।

Part 5: Ship

13. Deploy: folder से URL तक

Computer के folder में रखी website rehearsal है। Real performance तब शुरू होती है जब दूसरे शहर का व्यक्ति उसे फ़ोन पर खोल सके।

पहले website online करना अपने-आप में पूरा course था: servers, addresses, security certificates। आज AI यह आपके लिए कर सकती है।

Vercel इस course की service है। Free plan learning projects और client को काम दिखाने के लिए पर्याप्त है तथा AI इसे सीधे control कर सकती है। एक बार account बनाएँ, फिर AI से कहें:

Connect to Vercel via the CLI and deploy this project.

AI ज़रूरी चीज़ install करती है, sign in के लिए एक बार browser खोलती है और site online करती है।

दो commands महत्वपूर्ण हैं और उनका फ़र्क rehearsal व performance जैसा है:

vercel preview बनाती है: temporary web address, client को "इसे देखें" के साथ भेजने के लिए सही
vercel --prod site को business की real address पर रखती है

हर changes पर fresh preview मिलती है। Client workflow एक comfortable rhythm बनता है: build, preview भेजें, feedback लें, फिर build और नई preview। Approval तक real site untouched रहती है।

तीन habits पर्याप्त हैं:

Previews changes के लिए हैं। Real address finished चीज़ों के लिए। Real address से work-in-progress न दिखाएँ और client को old preview पर न छोड़ें।
Final checks live page पर करें, computer पर नहीं। Online होने पर fonts, videos और links नए तरीकों से fail होते हैं। किसी human के देखने से पहले Concept 11 की pictures live preview address पर दोनों widths में लें।
दूसरी services भी वही काम करती हैं। Netlify, Cloudflare Pages और GitHub Pages इसी तरह काम करती हैं। Skill AI से publish करवाना है; company preference है।

अपनी web address real finish line है।

जिस site की address .vercel.app पर समाप्त हो, client उसे finished नहीं मानता और सही है। Address brand का हिस्सा है।

इसे पाना छोटा काम है:

किसी seller से address खरीदें। Pakistan में .pk address PKNIC और .com किसी international seller से मिलता है
इसे Vercel project settings में जोड़ें
Vercel दो या तीन values दिखाती है जिन्हें seller की settings page में copy करना है। AI screens में guide कर सकती है

काम शुरू होने में कुछ minutes से कुछ hours लगते हैं।

दो professional habits। Address client के नाम और उसके control वाले account में खरीदें। Client की web address own करने वाला freelancer अच्छे intention के साथ भी accidental hostage बना देता है। Site secure करने वाला padlock यहाँ automatic है; browser security warning दे तो address settings गलत हैं, site नहीं।

लोग इसे खोज सकें। जिसे कोई न खोजे वह site चुपचाप fail होती है। एक छोटा pass basics cover करता है और हमेशा लाभ देता है:

Real page title। "Ayesha Rehman, Chartered Accountant, Lahore", "Home" नहीं। Search results और browser tabs में यही दिखता है।
Page describe करने वाली एक sentence, search results की list scan करने वाले human के लिए
Sharing picture। ज़्यादातर tutorials इसे छोड़ते हैं और यहाँ यही महत्वपूर्ण है। WhatsApp पर link share होने पर picture और title का छोटा card दिखता है। सुंदर card वाला link खुलता है, bare grey link नहीं। Media pipeline का एक और job: page का top 1200 × 630 pixels में export करके og.png save करें
Search engines के लिए pages की list, जिसे AI seconds में generate करती है, और client के account से Google पर site register करना

Sharing card ईमानदारी से test करें: preview link WhatsApp chat में paste करके result देखें।

14. Client workflow

अब तक आप अपने लिए build कर रहे थे। Payment मिलते ही उसी काम को professional habits चाहिए।

यह concept Part 6 के project से उन habits को बताता है: Lahore की accountant Ayesha Rehman, अपनी practice की website launch कर रही हैं।

छह steps:

Build से पहले लिखित agreement। एक page पर्याप्त: site किसके लिए, visitor की one action, agreed story beats और "finished" में क्या शामिल है, जैसे pages की संख्या, फ़ोन version, publish location और photos कौन देगा। छह weeks बाद memories अलग हों तो यही page निर्णय करता है। Memory contract नहीं।
Brand खोजें, फिर confirm करें। Concept 7 और उसका rule: online मिली चीज़ draft, client की भेजी चीज़ final। Ayesha का old site colors देता है, लेकिन फ़ोन call बताती है कि logo बदल रहा है। उस call ने पूरा गलत first version बचाया।
Story बेचें, finished page की picture नहीं। Build से पहले छह beats, हर एक line भेजें। Story approve करने वाला client substance पर feedback देता है। Finished design पहले देखने वाला exact blue shade पर। चीज़ें दिखाने का क्रम underrated tool है।
उनके फ़ोन पर review कराएँ। Chat में pasted screenshots नहीं। Preview link भेजकर कहें "इसे अपने फ़ोन पर खोलें।" उनके customers वही device उपयोग करते हैं और यही moment फ़ोन-version work को बेचता है।
चार boxes से job price करें। Model: लगभग कुछ नहीं, invoice में cents लिखने के बजाय absorb करें। Taste: आपका time और main line। Media: साफ़ conversation, "stock photographs included हैं और इस example जैसा custom video X extra है।" Generate से पहले price check होने से X guess नहीं, confident number है। Hosting: अभी free, handover पर client account और web address में move।
Proper handover। सब दें: files, client-controlled account में published site, उनके नाम की web address, design.md और चाहें तो simple visitor statistics

एक और चीज़ जोड़ें: AI से site में छोटे changes माँगने का one-page explanation।

आख़िरी item इस era में नया है और clients याद रखते हैं। आप केवल website नहीं, उसकी देखभाल की ability दे रहे हैं।

Compounding move: पहले client के बाद पूरी process को skill file में save करें: agreement template, brand finding, story format, review questions, publishing steps और handover list। दूसरा client आधे effort में और पाँचवें तक file ज़्यादातर काम करेगी।

यह एक freelancer के scale पर इस किताब का central idea है: website नहीं, websites बनाने वाला system टिकता है।

15. Cost discipline

Coding crash course ने AI conversations सस्ती रखना सिखाया। Websites दो costs जोड़ती हैं: pictures per-picture priced हैं और दूसरी company की AI discounts बदलती है। तीन habits इसे संभालती हैं।

Pictures बनाने से पहले price निकालें।

Surprise: Kimi K3 build में पूरी website का सारा code एक cup of tea से कम का है। एक custom video बाकी सबके total से महँगा हो सकता है। Budget pictures हैं, AI नहीं।

खर्च से पहले prices check हो सकती हैं। higgsfield generate cost video बनाए बिना cost बताता है। Storyboard quote बनता है: छह beats, छह prices, एक total, खर्च से पहले तय।

भूलने से बचने के लिए rules file में रखें:

कोई picture या video बनाने से पहले हर planned shot की cost estimate करके total बताएँ।

हर जगह same discipline: कुछ बनने से पहले हर beat, lane और shape list करें, पूरा set review करें और फिर final quality का payment। Expensive mistake एक picture नहीं, बिना लिखे धीरे-धीरे चाहत समझते हुए तीस बनाना है। फ़ोन version list double करता है; quote में रखें, बाद की surprise में नहीं।

दूसरी company की AI conversation costs वापस लाती है। Kimi K3 पहले देखे text के लिए नए text से लगभग दस गुना कम charge करती है। यही discount इसे cheap बनाता है और conversation की शुरुआत unchanged रहने तक लागू है। Conversation restart या top के पास edit करने पर सबके full price पर लौटते हैं।

दो habits: Concept 4 की तरह CLAUDE_CODE_AUTO_COMPACT_WINDOW set करें ताकि automatic tidying model memory size जाने। पहले सीखा काम जारी रखें: usage number देखें, natural stops पर tidy करें और important facts पहले files में save करें, क्योंकि files tidying में नहीं जातीं।

एक project की real cost जानें।

पहली complete website के बाद real numbers लिखें: AI पर खर्च, pictures पर खर्च और काम के hours।

Part 6 में Ayesha site की AI time cost कुछ dollars है, साथ में picture budget zero, एक dollar से कम या पहले checked video price।

वह number सब बदलता है। "क्या मैं इसकी practice afford कर सकता हूँ?" का answer "हाँ, हर week" बनता है। Client website cost पूछे तो guess के बजाय number बताएँगे।

Part 6: पूरा worked example, दो बार

अब सब जोड़ें। Empty folder से live web address तक एक real website, Claude Code में एक बार और OpenCode में एक बार। Tools के differences mark किए गए हैं।

Finished project download करें

नीचे बताई हर चीज़ real files के रूप में मौजूद है: working website और designed 404 page, sharing card, दो photos, six-beat story spine, brand rules वाली design.md, rules file, Hallmark audit (पहले सात findings, फिर zero), दूसरी company की AI का independent review, cost record, checker, screenshot script और actual page से दोनों widths की full-page screenshots।

Ayesha project download करें · unzip करें, फिर npm run check। एक alt="..." delete करके दोबारा run करें और failure देखें।

पहले docs/defect-log.md पढ़ें। यह project में कभी मौजूद आठ defects और हर एक को पकड़ने वाली चीज़ list करती है। सबसे serious defect, accountant का न जुड़ने वाला ledger, किसी automatic check ने नहीं पकड़ा। Arithmetic करने वाले person ने पकड़ा। पूरा course इसी ratio की बात करता है।

Build

Client: Lahore की accountant Ayesha Rehman। वह AI tools से अपनी practice relaunch कर रही हैं और current website outdated logo वाला एक old page है।

वह चाहती हैं कि उनके शहर के small business owners scroll करते समय दो बातें feel करें: यह व्यक्ति मेरी उलझन समझती है और यह व्यक्ति इसे पहले हल कर चुकी है।

Agreed story spine (Concept 8, Ayesha के साथ drafted, छह beats):

Shoebox: receipts, सबका guilty secret, warm और human shot
Sorting: chaos से categories
अपने-आप reconcile होने वाला ledger: bold moment, scroll पर balance होती animated ledger line
Monthly clarity: एक clean statement, एक calm number
Person: Ayesha, office, credentials और Lahore की real light
Consultation book करना: एक action, एक button

आप क्या deliver करेंगे:

Same story से computer और फ़ोन versions
उनके exact brand colors और fonts
पहले से typed message वाले real WhatsApp link से connected beat 6
Findability basics: page title, description और WhatsApp link भेजने पर अच्छी sharing card
Approval के लिए preview link, फिर handover पर अपनी .pk web address

Pictures: beats 1, 2, 4 और 5 के लिए Lane 1 real photographs। Beats 1, 2, 4 free library से। Beat 5 उनकी real office में फ़ोन से ली दो photos। Beat 3 की balancing animation code में, video नहीं। Lane 4 का custom opening video optional extra के रूप में quote, price पहले checked और decision उनका। Concept 14 का lesson: picture budget client के साथ conversation है, अकेले decision नहीं।

आठ steps

Step 1: Web project की rules file

Claude Code में: /init run करें, फिर generated file को उन बातों तक छोटा करें जिन्हें model देखकर infer नहीं कर सकती:

# ayesha-practice-site

## Layout

- `site/`: the website source. Single HTML file with embedded CSS/JS until told otherwise.
- `assets/`: all media, named by story beat (e.g. `03-ledger-*`), optimized before use.
- `design.md`: brand constraints and design direction. Read before any design work.
- `docs/plans/story-spine.md`: the approved six-beat spine. The build implements this.

## Critical rules

- Brand constraints in design.md are a spec, not a mood. Never substitute colors or fonts.
- Every image ships with an alt attribute. No asset over 500KB.
- After significant changes, screenshot at 1440px and 390px and review both before reporting done.
- The story spine's beats may not be reordered or dropped without asking.

यह क्यों महत्वपूर्ण है: screenshot rule के कारण AI हर बार अपना काम check करती है, केवल आपके याद दिलाने पर नहीं। design.md rule के कारण AI brand colors को चुपचाप "improve" नहीं कर सकती।

OpenCode में: AGENTS.md में identical content।

Step 2: Taste layer install करें

दोनों tools में identical:

npx skills add Nutlope/hallmark

Claude Code में, plugin system से Anthropic का frontend-design plugin भी install करें। यह design work में automatically मदद करता है। Full treatment के लिए Hallmark को नाम से call करें। दोनों साथ काम करते हैं।

Kimi K3 उपयोग करते समय, Concept 5 की warning याद रखें: दूसरी companies के AI models skills अपने-आप चुनने में कम reliable हैं। इसलिए हर design step पर Hallmark का नाम कहें।

Step 3: Brand extract करें, direction study करें

पहले Concept 7: AI को Ayesha के old site पर भेजकर exact colors, fonts और logo के साथ हर एक की proof code line माँगें। Deep green, gold और serif font, हर एक प्रमाण के साथ मिलते हैं।

फिर कभी न छोड़ी जाने वाली फ़ोन call करें। Ayesha बताती हैं कि brand बदल रहा है: green रहेगा, gold warmer amber बनेगा और नया logo भेजती हैं।

फिर Concept 6: उनकी पसंदीदा दो websites पर Hallmark study run करें। उनके brand के साथ तीन references होती हैं, जो copy के बजाय combine कराती हैं।

सब design.md में जाता है, brand स्पष्ट रूप से rules mark होता है, suggestions नहीं।

दोनों tools में identical।

Step 4: Plan mode, spine से structure

Plan mode में जाएँ, जहाँ AI देख सकती है पर बदल नहीं सकती (Claude Code में दो बार Shift+Tab, OpenCode में Tab)। Job बताएँ: छह beats, design.md, फ़ोन सबसे महत्वपूर्ण और कौन-सा bold moment।

AI plan देती है और यहाँ mistake free में पकड़ते हैं। First plan normal page: ऊपर big picture, फिर ordinary sections में squeezed beats। यह आपकी story की costume पहना boring default skeleton है।

इसलिए reject करें:

Scroll ही story है। हर screen पर एक beat। Balancing animation को पूरी screen मिले। कहीं feature boxes की rows न हों।

Plan update होता है। अब approve करके file में save करें।

Step 5: Design model से build करें

Claude Code में: folder settings Concept 4 की Kimi K3 पर point करती हैं। /status से confirm करें, /model से नहीं। Plan mode छोड़कर build होने दें और Hallmark का नाम लेते रहें। Usage पर नज़र रखें: K3 लंबा लिखती है और यह build का सबसे लंबा step है।

दोनों versions इसी session में build करें। Design settle करने के लिए computer version पहले, फिर AI में हर decision रहते फ़ोन version। हर beat restack होता है और balancing animation फ़ोन की पूरी screen। Browser narrow-wide खींचकर switch देखें और Ayesha के लिए record करें।

OpenCode में: /models type करें, OpenRouter से Kimi K3 चुनें और build करें। Hallmark को नाम दें और usage देखें।

Kimi K3 बहुत सोचती है, इसलिए Claude session से धीमी और wordier है। Result साफ़ तौर पर average नहीं। Scroll पर accounting line खुद draw होती है। Feature boxes की एक भी row नहीं।

Step 6: Media pass

Storyboard follow करके helper AI beats 1, 2 और 4 के लिए free photo libraries search करती है, same light और mood रखते हुए। Helper अलग conversation में करती है क्योंकि चालीस thumbnails main conversation भर देंगी। फ़ोन से ली दो office photos beat 5 के लिए assets/ में। हर file beat के नाम पर और size limit से नीचे।

Beat को imagined picture चाहिए होती तो Lane 3 में कुछ cents या chatgpt.com पर free बनाते।

Ayesha video approve करतीं तो यहाँ बनता। Gemini Omni Flash से बात करके shot खोजें। Review के लिए Seedance पर 720p final version lock करें। Approval के बाद quoted price में wide और tall दोनों की full quality लें।

दोनों tools में identical।

Step 7: Verify: screenshots, audit, cross-model review

Concept 11 के तीन checkers, क्रम में।

Screenshot rule लगातार चुपचाप काम कर रहा था। अब Hallmark audit run करें। First run सात problems पाता है, जिसमें mouse hover पर ही काम करने वाली चीज़ है जो फ़ोन पर पूरी तरह fail है। List fix करके empty होने तक फिर run करें।

फिर Concept 12: दूसरी company की AI को brief, design.md और screenshots दें। यहाँ Claude, Kimi K3 का काम review करती है। Findings file में लिखती है, कुछ बदलती नहीं।

Reviewer दो चीज़ें पकड़ती है: beat 4 की photo की light बाकी से cooler है और green background पर amber button पढ़ना कठिन है।

Builder दोनों fix करती है। इस बार disagreement settle नहीं करना पड़ा, लेकिन सब पढ़ें क्योंकि final judgment आपका है।

Claude Code में: reviewer coding crash course की तरह second worktree में run करती है। OpenCode में: reviewer same project का second connected provider है।

Step 8: Publish करें और process save करें

फ़ोन version Step 5 में computer version के तुरंत बाद same session में बना, जैसा Concept 10 चाहता है। इसलिए Step 7 checking ने दोनों widths cover कीं।

अब publishing बची है। Findability work अभी: title, description, page list और sharing card। Preview link WhatsApp chat में paste करके card test करें।

Preview address के लिए vercel run करें, live page की दोनों widths में final pictures लें और Ayesha को तीन शब्दों के साथ link भेजें: "फ़ोन पर खोलें।"

Approval के बाद: vercel --prod, उनके account से अपनी .pk address connect, उनके account से Google registration और Concept 14 package handover।

अंत में compounding move। पूरी process skill file में save करें: story template, brand questions, audit-then-review order और publishing checklist।

Ayesha की cousin textile export business चलाती हैं। दूसरी website कल शुरू होगी और आधा समय लेगी।

अभी क्या हुआ

Coding crash course से आई चीज़ें गिनें: rules file, plan mode, skills, helper AI models, automatic checks, second opinion और reuse के लिए saved work।

अब यहाँ की नई चीज़ें: taste file, pictures पाने का तरीका, test के रूप में screenshot और finished product के रूप में live web address।

यही ratio point है। आप designer नहीं बने। आपने checking machine को नए काम की ओर लगाया, और machine ने good taste की एक file के साथ बाकी किया।

Tools के differences फिर छोटे थे: Kimi K3 का अलग setup, plan mode की अलग key और reviewer की अलग जगह। Thinking identical थी।

Thinking real tool है। Settings decoration हैं।

इसमें सच में अच्छे कैसे बनें

Coding crash course का same rule: page पढ़ना बहुत कम करता है, build करना लगभग सब।

Problems आएँगी। यह normal है और learning ऐसे होती है। हर problem इस page के concept की ओर इशारा करती है:

आपकी problem	क्या fix करें
"मेरी हर site same दिखती है"	Taste file load नहीं या उसका नाम नहीं ले रहे (Concept 5)
"AI ने brand colors ignore किए"	design.md नहीं या colors साफ़ rules mark नहीं (Concept 7)
"Laptop पर great, फ़ोन पर broken"	एक version build करके squeeze किया। Story फिर film करें (Concept 10)
"Page सुंदर है पर कोई नहीं जानता क्या करना है"	Story नहीं या एक screen पर दो ideas लड़ रहे हैं (Concept 8)
"कम generic कहता हूँ, कुछ नहीं बदलता"	Instruction fail नहीं हो सकता। Audit run करके list fix करें (Concept 11)
"Picture bill ने surprise किया"	Planning से पहले pictures बनाईं (Concepts 9 और 15)
"AI और मैं obvious mistake चूक गए"	दूसरी company की AI से दिखाएँ (Concept 12)
"दिन के अंत में Kimi K3 confused और expensive"	उस route पर conversation केवल आप tidy करते हैं (Concepts 4 और 15)
"Site live लेकिन button कुछ नहीं करता"	Last beat किसी mechanism से connect नहीं (Concepts 8 और 11)
"Laptop पर सुंदर, visitors के लिए heavy"	Size limit, video के पीछे still picture और late picture loading (Concept 11)
"पाँच pages पाँच websites जैसे"	एक design.md सबको govern करे (multi-page section)

हर week एक website, हर दिन आठ concepts से बेहतर है।

कुछ real चुनें: page के रूप में अपना CV, friend की shop, family business या school club। आठों steps run करें और cost लिखें।

तीसरी website तक steps, steps जैसे नहीं लगते। वे आपका working style बनते हैं।

आप ladder पर कहाँ हैं: इसमें अच्छा बनने की आठ stages (खोलने के लिए click करें)

Skill stages में बढ़ती है। Current stage जानने से अगली practice पता चलती है।

Stage	यह कैसी दिखती है	कहाँ सिखाई गई
0. Mindset	AI की design habits, देखकर checking और file में taste समझते हैं	Course के ऊपर तीन ideas
1. पहली website online	एक real page, free pictures, live address जिसे किसी और ने फ़ोन पर खोला	Concepts 2, 9, 10, 13
2. Taste loaded	Hallmark installed, page problems की list पढ़कर सब fix	Concepts 5 और 11
3. Story पहले, हर बार	Final action सहित story लिखे और agree हुए बिना build शुरू नहीं	Concept 8
4. Checking खुद चलती है	हर build में screenshots, audit और automatic rules	Concept 11
5. दूसरों के लिए build	Brand find-confirm, second opinion, client फ़ोन review और चार boxes से price	Concepts 7, 12, 14
6. Process एक file	पूरी process skill में save और second client सच में आधा time	Concept 14 और Part 6, Step 8
7. Process एक business	Clients, चार boxes से pricing, एक design system से multi-page sites और referrals	Concepts 2, 14 और multi-page section

ज़्यादातर लोग stages 1 और 2 के बीच अटकते हैं। Taste file एक बार load करके हमेशा काम लेने के बजाय working pages publish और clever prompts collect करते हैं।

आज की position से एक stage भी चढ़ें तो course अपनी cost चुका चुका है।

Quick reference

15 concepts, हर एक एक line में

AI slop maths है, laziness नहीं। हर AI का favorite look है क्योंकि वह सीखी सबसे common चीज़ से answer देती है। Anthropic ने Claude को habits से बचाने की file भी लिखी।
चार pieces हर site बनाते हैं। Model, taste, media, host। हर decision एक box में और इन्हीं से job price।
Design की best AI overall best नहीं। अलग competitions हैं। Blind comparison site check करके leader को design work दें।
कोई AI tool में run हो सकती है। Claude Code settings में address बदलें या OpenCode list से चुनें। /status से check करें, /model से कभी नहीं। Best AI rented crown है; tool और files आपके हैं।
Hallmark file में taste है। चार commands (build, audit, redesign, study), 58 checks और हर बार अलग page shape। सबके लिए free।
Sites से सीखें, copy न करें। study, काम करने के कारण design.md में लिखता है। तीन references उपयोग करें, क्योंकि एक copy के लिए लुभाती है।
Brand पहले सही करें। Exact colors और fonts के source proof माँगें, फिर client files से confirm। Brand colors rules हैं, suggestions नहीं।
एक story, एक scroll। Build से पहले story, हर screen एक idea, ऊपर real चीज़, एक जगह bold। Last beat काम करे: WhatsApp link, form या small program। Dead button कभी नहीं।
Pictures के चार तरीके। Real photos free, AI pictures free में manual quality या automatic convenience, cents में दोनों और real money में video। Story shot list है।
फ़ोन main screen है। Same story tall shape के लिए फिर film। Layout change जानबूझकर।
तीन checkers design testable बनाते हैं। Screenshots आँखें, audit taste की list और automatic rules readable contrast, keyboard use व mobile data पर light page guarantee करते हैं।
दूसरी company की AI से second opinion। AI अपनी habits नहीं देखती। Brief, design file और screenshots भेजें। Findings file में।
Publishing दो commands है। vercel share preview, vercel --prod real। फिर client की web address और title, description, sharing card। Live page check करें, computer नहीं।
Client work के छह steps। Written agreement, brand find-confirm, pictures से पहले story, client फ़ोन review, चार boxes से price और care ability handover।
Costs जानें। Pictures से पहले price, conversations tidy और whole project cost सीखें।

Setup quick-ref (खोलने के लिए click करें)

आप चाहते हैं...	Claude Code	OpenCode
Kimi K3 run करना	`.claude/settings.json` में Moonshot env block, `/status` से verify	`/connect` openrouter → `/models` → K3
Taste layer install करना	`npx skills add Nutlope/hallmark` और Anthropic frontend-design plugin	`npx skills add Nutlope/hallmark`
Session में media generate	Higgsfield CLI/MCP या fetch और APIs से Lane 1–2	Same
Render screenshot लेना	Playwright screenshots setup करने को कहें	Same
Deploy करना	"CLI से Vercel connect करके project deploy करें"	Same
K3 context देखना	`CLAUDE_CODE_AUTO_COMPACT_WINDOW` को `1048576` set करके खुद देखें	TUI में token readout

एक decision tree में build

New page or site?
    → Spine first (plan mode) → Hallmark default → media per beat → verify

Page exists but looks generated?
    → Hallmark audit → fix the list → if the skeleton itself is slop, redesign

Client has a brand?
    → Extract with quoted sources → confirm real assets → design.md as constraints

Admire a site?
    → Hallmark study → design.md as direction (never a clone)

Site outgrown one page?
    → A spine per page, one design.md for all → files as routes →
      framework with layouts only when repetition earns it

Before anyone sees it?
    → Screenshot both widths on the deployed URL → cross-family review → then the human

Flashcards Study Aid

Quiz: 15 Concepts पर 42 Questions

सीखी हुई चीज़ test करें। हर session में 15 नए questions दिखते हैं।

Checking access...

Design करने से पहले मानने वाली तीन बातें​

आपके काम आने वाले तीन tools​

यह course क्या cover करता है​

📚 Teaching Aid​

Part 1: Foundations​

1. सभी AI websites एक जैसी क्यों दिखती हैं​

2. Four-piece stack​

3. Design model चुनना​

4. आपके tool के अंदर कोई भी model​

Part 2: Skill के रूप में visual taste​

5. Hallmark: असरदार visual taste file​

6. Study करें, clone नहीं​

7. Brand extraction: client का DNA पहले से online है​

Part 3: Build​

8. एक story, एक scroll​

9. Media pipeline​

10. Mobile primary device है​

एक page से कई तक: multi-page sites और routing​

Part 4: Design verification​

11. Visual verification loop​

12. Cross-model design review​

Part 5: Ship​

13. Deploy: folder से URL तक​

14. Client workflow​

15. Cost discipline​

Part 6: पूरा worked example, दो बार​

Build​

आठ steps​

Step 1: Web project की rules file​

Step 2: Taste layer install करें​

Step 3: Brand extract करें, direction study करें​

Step 4: Plan mode, spine से structure​

Step 5: Design model से build करें​

Step 6: Media pass​

Step 7: Verify: screenshots, audit, cross-model review​

Step 8: Publish करें और process save करें​

अभी क्या हुआ​

इसमें सच में अच्छे कैसे बनें​

Quick reference​

15 concepts, हर एक एक line में​

एक decision tree में build​

Flashcards Study Aid​

Quiz: 15 Concepts पर 42 Questions​