Banaya Hua, Generated Nahin: Website Design Crash Course

15 Concepts - Aap Ka Pehla Real Build

Daen taraf ka site ek interior designer ka hai. Yeh sirf farq dikhane ke liye hai. Is course mein aage hum jis client ke liye banayein ge woh mukhtalif shakhs hain: Lahore ki accountant Ayesha Rehman.

AI se apne liye website banane ko kahein. Website mil jaye gi. Woh load aur scroll ho gi, aur har doosri AI website jaisi nazar aye gi.

Aap ne aisi website kai baar dekhi hai. Oopar bari picture, darmiyan bara jumla, ek row mein teen chote boxes, rangeen button aur "Revolutionize your workflow" jaisi headline.

Zyada tar AI websites aisi hi dikhti hain. Woh broken nahin. Masla is se bhi bura hai: woh sab ek jaisi hain.

Is farq ka ek lafz hai aur wohi course ka naam hai. Kuch websites banai jati hain. Zyada tar sirf generated hoti hain. Jab koi computer ko rehnumai na de to generated website milti hai. Banai hui website mein kisi ne haqeeqi choices ki hoti hain.

Yeh course aapko banai hui websites tayar karna sikhata hai.

Aapko designer banne ya haath se code likhne ki zaroorat nahin. Agentic Coding Crash Course ke tools aur is page ke ideas chahiye. Aakhir tak aap real website bana chuke hon ge: story, asli photos, phone par chalne wala version aur aisi web address jise duniya mein koi bhi khol sake.

Yeh ek idea baqi course ko samajhna asaan banata hai. Pehle acha design mehngay tools ya ba-salahiyat logon ke andar rehta tha. Ab aisa nahin. "Banaya hua" aur "generated" mein farq karne wale rules file mein likhe ja sakte hain. Koi bhi AI file parh kar rules follow kar sakti hai.

Ek line mein course ka mauzu yeh hai:

Taste ab ek file hai.

Taste ka matlab jaanna hai ke kya acha dikhta hai. File aap ke computer par document hai. Dono ko milayein to poora idea milta hai: kya acha dikhta hai us ka ilm document mein save ho sakta hai aur AI build se pehle use parhti hai.

Pehle yeh parhein

Claude Code aur OpenCode: A Crash Course. Us course ne tools sikhaye. Yeh course un se kuch real banata hai. Agar skill, plan mode ya rules file jaise alfaaz naye hain to pehle woh course parhein. Is ke baad yeh bohat asaan ho ga.

Kitaab ki ek tarteeb hai aur yeh jaanna madadgar hai ke course kahan ata hai. Pehle courses ne tools sikhaye. Baad ke courses engineering disciplines sikhate hain jo bare scale par kaam reliable banate hain. Yeh darmiyani course hai jahan aap machine ke bare mein seekhna rok kar use real kaam par lagate hain.

Yeh tarteeb jaan boojh kar hai. Website ship karne aur real failure points dekhne ke baad specs, loops aur checkers zyada samajh ate hain.

Is page par milne wale alfaaz

Course ke liye technology background zaroori nahin. Kuch alfaaz baar baar ate hain, is liye un ke seedhe maani yahan hain. Aap kabhi bhi is box par wapas aa sakte hain.

Lafz	Yahan is ka matlab
Model	AI khud: jo alfaaz aur code likhti hai. Claude aur Kimi K3 models hain.
Tool (harness bhi kehte hain)	Woh program jo AI ko aap ke computer par files kholne, badalne aur commands run karne deta hai. Claude Code aur OpenCode is course ke do tools hain.
Skill	Instructions ki file jo ek baar save hoti hai. AI parh kar follow karti hai, jaise recipe card ya employee handbook.
Prompt	Jo aap AI ko type karte hain.
Context	Jo kuch AI abhi dekh sakti hai: messages aur khuli files. Is ki had hoti hai, jaise kam jagah wali desk.
AI slop	Aisa design jo banaya hua nahin, generated lagta hai. Sada average look jis mein har AI chali jati hai.
Code	Woh instructions jin mein website likhi jati hai. Aap type nahin karein ge. AI likhe gi aur aap result check karein ge.
Deploy	Website internet par rakhna taake doosre khol sakein.
CLI	Program jo buttons click karne ke bajaye command type karke run hota hai.
API	Ek program ka doosre se khudkaar baat karne ka tareeqa.
Check (ya hook)	Chota program jo kaam par haan ya nahin mein jawab deta aur jawab nahin ho to rok deta hai.
Domain	Kisi ki milkiyat web address, jaise ayesharehman.pk.
DNS	System jo web address ko website ki asal jagah se jorta hai.
Sharing card (OG image)	WhatsApp ya social app mein link paste karne par nazar ane wali picture aur title.
:::

Design se pehle maan lene wali teen baatein

Is page ki baqi har baat teen ideas par khari hai. Inhein seekh lein to baqi sab samajh aye ga.

1. Har AI ka pasandeeda look hota hai.

AI ne lakhon websites se seekha. Jab aap kehte hain "ise acha dikhayein" to woh dekha hua sab se aam jawab deti hai: aam colors, layout aur font.

AI sust nahin. Woh average ban rahi hai kyun ke us ne average seekha. Community is result ko AI slop kehti hai.

Is ka saboot hai. Anthropic, Claude Code ke liye official frontend-design plugin publish karti hai. File un teen looks ko list karti hai jin mein Claude ko koi na roke to woh jati hai, aur un se bachne ko kehti hai. AI banane wali company ne apni AI ki aadaton se behas ke liye file likhi. Agar yeh karna para to aadatein real hain.

(Yeh plugin hai, is liye Claude Code ke plugin system se ek baar install hota hai. Phir Claude design work mein khud ise chunti hai.)

2. Design ko dekh kar check kiya jata hai.

Agentic Coding Crash Course ne kitaab ka aham rule sikhaya: AI par utna bharosa karein jitna us ka kaam check kar sakte hain.

Code check karna asaan hai kyun ke test pass ya fail hota hai. Design mushkil lagta hai. "Kya yeh acha dikhta hai?" computer ka seedha sawal nahin.

Course dekhne ko checking banata hai. Page ki picture le kar AI ko dikhate hain, buri aadaton ki list chalate hain aur doosri AI se review karate hain. Jab "kya yeh sahi dikhta hai" test ho sake to AI apna kaam code ki tarah theek kar sakti hai.

3. Taste file ban kar ek AI se doosri tak jata hai.

AI web page banana jaanti hai. Woh aap ka faisla nahin jaanti: kaun se layouts be-jaan hain, kaun se fonts saath chalte hain aur page kab mukammal hai.

Faisla file mein rakhein aur koi AI use parh sakti hai. Wohi file aaj Claude aur Kimi K3, aur agle saal ki AI ke saath chale gi. AI badalti hai, file rehti hai.

Isi liye tool names badalne ke baad bhi course mufeed rahe ga.

Aap ke teen tools

Do pehle se maloom hain. Teesra naya hai:

	Claude Code	OpenCode	Kimi K3
Yeh kya hai	Anthropic ka tool jo AI ko computer par kaam deta hai	Waisa open-source tool jo kisi AI ke saath chalta hai	Moonshot AI company ka AI model
Yahan ka kaam	Kaam chalata hai	Zyada model choices ke saath kaam chalata hai	Design mein khaas tor par achi AI
Kyun istemaal	Claude ke saath behtareen chalta hai	Doosre models ka sab se sasta tareeqa	Filhal web pages design karne mein behtareen aur kam kharch

Claude Code aur OpenCode workshop hain. Kimi K3 worker hai jise kisi workshop mein la sakte hain. Workshop wohi rehti hai, worker badal sakta hai.

Design ke liye Kimi K3 kyun? Logon ne real developers ko pages dikhaye bina bataye ke kis AI ne banaye. Developers ne aksar Kimi K3 ke pages chune. Do wajah hain:

• Yeh dekh sakti hai. Page banane ke baad picture dekh kar ghalat cheez theek karti hai. Aksar models apna kaam nahin dekhte, code se andaza lagate hain. Dekhna bara faida hai.
• Yeh kam kharch hai. Top American models ke muqable mein bohat kam lagta hai, is liye bill ki fikr ke baghair das versions azma sakte hain.

Pasand karne se pehle warning. "Best" AI har kuch mahine badalti hai. Koi model jald Kimi K3 se aage ho ga. Naam yaad na karein; aadat yaad karein: check karein ke design mein abhi kaun si AI best hai aur usi ko design work dein. Aaj Kimi K3 hai.

note

Yeh July 2026 tak current hai. Models, prices aur arena rankings aksar badalti hain. Budget se pehle LMArena aur providers ke live pricing pages check karein.

Is page ki har command publish se pehle chalai gai

Install commands, CLI flags, file paths aur folder structures clean machine par chalaye gaye, documentation se copy nahin. Live tools marketing pages se mukhtalif the to course ne tools ko maana. Version numbers aur prices phir bhi badalte hain. Command mukhtalif chale to terminal par bharosa aur current docs check karein.

Tool chunein, page usi par chale ga

Agentic Coding Crash Course ki tarah mukhtalif sections mein switcher hai. Ek chunein aur har switcher us choice ko follow kare ga.

Course kya cover karta hai

Part	Mauzu	Aap kya seekhein ge
1	Bunyadein	AI websites ek jaisi kyun, four-piece stack, design model chunna aur connect karna
2	Taste as a Skill	Hallmark skill, pasandeeda sites se seekhna, client ka brand sahi rakhna
3	Build	Ek story ek scroll, media pipeline, mobile first, multi-page sites aur routing
4	Design Verification	Design acha hai ya nahin check karna aur second opinion lena
5	Ship	Site online karna, clients ke saath kaam aur costs kam rakhna
6	Mukammal Worked Example	Ayesha ki practice website ko shuru se live URL tak dono tools mein banana

Kar ke seekhna hai? Pehle Part 6 par jayein, phir wapas ayein.

---

Teaching Aid

Poora Slideshow Kholein

Poora Presentation Dekhein - Website Design Crash Course

---

Part 1: Bunyadein

1. Sab AI websites ek jaisi kyun dikhti hain

Kisi AI mein "mere liye landing page banayein" type karein aur result dekhein. Oopar bari picture, darmiyan bari headline jismein aksar ek lafz numayan color mein, row mein chote icon wale teen boxes, khush customer ka quote, neeche footer aur kahin purple ya blue-green.

Yeh badsoorat nahin. Yehi uljhan hai. Yeh AI ke dekhe har web page ka average hai, aur average ki personality nahin hoti.

Yeh kyun hota hai? AI chunti nahin, predict karti hai. "Achi website banayein" jaisa open sawal ho to sab se mumkin jawab deti hai, yani seekhi hui sab se aam cheez. Har shakhs ke liye har baar yehi hota hai. Is liye itni websites ek jaisi hain. Lakhon logon ko wohi average mil raha hai.

Coding crash course mein yehi behavior dekha. AI se paanch baar "transcript clean karein" kahein to paanch mukhtalif methods milte hain, is liye method fix karne ko skill file save hoti hai. Design bilkul isi tarah hai. Farq yeh ke design ka masla sab dekh sakte hain.

Saboot: AI companies tasleem karti hain. Anthropic, Claude Code ka official design plugin publish karti hai aur file woh teen looks batati hai jin mein AI design ko koi na roke to woh jata hai. Cream ka exact shade (#F4F1EA) bhi batati hai:

1. Naram cream background, bari numayan serif headline aur orange-brown button
2. Qareeban siyah background ke saath roshan acid-green ya red accent
3. Newspaper look: patli lines, square corners aur text ke ghane columns

Skill inhein "choices ke bajaye defaults" kehti hai aur model ko tab tak istemaal na karne deti jab tak brief ne woh look na manga ho.

Dobara parhein. AI banane wali company ne apni AI se behas ki file likhi. Wohi poore course ka starting point hai.

Exact alfaaz dekhein. Woh nahin kehti ke Claude teen looks mein jati hai. Woh kehti hai aaj ka AI-generated design teen looks mein jata hai. Aadatein ek company ka ajeeb rawayya nahin; same web se seekha poora field hai.

Is ke do nataij hain jo aage sab ko shape karte hain:

• Aadatein AI models mein jati hain, is liye second opinion khud second eye nahin. Anthropic ki file in looks ko aam AI design ka result kehti hai. Companies qareeban same web par train karti hain, is liye same average ki taraf jati hain. Doosri AI se review (Concept 12) mein umeed hoti hai ke blind spot mukhtalif ho. Dono jitni door hon, behtar. Sirf rules file chain reliably torti hai.
• Fix kabhi "aur sakht prompt" nahin. "Unique banayein" khud aam request hai, is liye aam answer milta hai. Fix structural hai: taste file specific patterns ban kare, structural variety lazim kare aur output ko gates se check kare. Yehi Part 2 hai.

2. Four-piece stack

Course ki har website chaar pieces se banti hai. Inhein seekhein to baqi har cheez ki jagah mil jati hai:

Piece	Yeh kya karta hai	Hum kya istemaal karte hain
Model	Page ka code likhta hai	Design ke liye Kimi K3, review ke liye Claude
Taste	AI ko be-jaan default look se rokta hai	Hallmark skill file aur Anthropic frontend-design plugin
Media	Asli photos aur video, kyun ke boxes aur text brand nahin	Free photos se paid video tak chaar lanes (Concept 9)
Host	Page ko real web address par internet mein rakhta hai	Vercel, jise AI khud control kar sakti hai

Dekhein list mein kya nahin: website builder, template shop ya drag-and-drop editor. Maloom tool sab karta hai.

Choti workshop sochein. Model worker hai. Taste file worker ka handbook. Media supply cupboard. Host woh darwaza jahan se finished kaam bahar jata hai.

In chaar boxes se job ka price bhi nikalta hai. Paying client ke liye har box dekhein. Kaun si AI? Brand ko kitni design study? Photo ya video budget? Site kahan rahe gi?

Chaar boxes, invoice par chaar lines.

3. Design model chunna

Coding crash course ka seedha rule tha: kya karna hai tay karne ke liye strong AI aur karne ke liye cheap AI. Design table mein teesri row jorta hai.

Kaam	Kya chunein
Planning, architecture aur uljhan ko debug karna	Sab se capable model
Approved plan follow: routine edits, formatting, tests	Sasta ya free model
Visual design aur frontend polish	Is quarter design arena ka leader

Design ko apni row kyun? Design mein acha hona sirf general intelligence se nahin, do aur cheezon se ata hai:

• Practice. Kuch AI companies apne model ko doosron se zyada web design work par train karti hain.
• Dekhne ki salahiyat. Apne page ki picture dekhne wali AI human designer ki tarah banati, dekhti aur theek karti hai. Sirf code parhne wali AI andhi design karti hai. Kimi K3 dekh sakti hai aur isi liye us ke pages pasand ate hain.

Teen aadatein hype ke peeche jane se rokein gi:

• Announcements nahin, blind tests par bharosa karein. LMArena par real log baghair maker jaane mukhtalif models ke pages compare aur vote karte hain. Yeh company ki apne product ki tareef se behtar saboot hai. July 2026 mein Kimi K3 web design mein pehli, overall Claude aur GPT se neeche thi. Yehi lesson: design mein best aur overall best do mukhtalif muqable hain.
• Ek AI build aur doosri judge kare. Kimi K3 page banati hai, Claude review karti hai. Concept 12 tareeqa dikhata hai.
• Leader badalne ki umeed aur kam lagat dekhein. Agle quarter ke strong leader ko wohi taste file dein to qareeban utna acha kaam mile ga, kyun ke banaye aur generated page ka zyada farq model ke bajaye file mein hai. Yehi course ka argument aur insurance policy hai. Leaderboard ka naam sab se kam mustaqil hissa hai.

Kimi K3 ki do asli kamiyan. Yeh default mein zyada sochti hai, is liye dheemi aur zyada bolti hai. Design mein theek, chote kaam mein pareshan. Kam price aise discount par hai jo conversation saaf rehne par milta hai, jaisa Concept 15 batata hai.

4. Aap ke tool mein koi bhi model

Coding crash course ne tool ke andar mukhtalif AI chalana dikhaya. Kimi K3 ke liye bhi wohi karein. Yeh un chand jagahon mein se hai jahan Claude Code aur OpenCode waqai mukhtalif hain, is liye apna tab chunein.

Setup se pehle samjhein ke aap kya kar rahe hain. Tool aam tor par sawal ek company ki AI ko bhejta hai. Aap woh address badal rahe hain taake sawal Kimi K3 ko jayein. Tool mein aur kuch nahin badalta.

Claude Code default mein Claude se baat karta hai. Moonshot ki service Claude Code ka message format qabool karti hai, is liye extra software ke baghair Kimi K3 se baat ho sakti hai.

platform.kimi.ai se key chahiye. Key password jaisi hai jo computer ko un ki AI istemaal karne deti aur account se juri hoti hai. Shuru se pehle do baatein:

• Pehle account mein thori raqam dalein. Khali account par key nahin chalti.
• Sab se nichla paid level har minute bohat kam messages deta hai, jis se AI dheemi ke bajaye broken lagti hai. Jaanch se pehle pehle level se aage jane jitni raqam dalein.

Jis project folder mein Kimi K3 chahiye us ki .claude/settings.json mein yeh paste karein. Ise aam kaam se alag folder mein rakhein taake doosre projects Claude istemaal karein.

{
  "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 bara lagta hai lekin teen baatein kehta hai: messages kahan bhejne, kaun sa password aur kaun si AI istemaal karni hai. Mushkil tajurbe se seekhi paanch warnings:

• Har model line set karein, sirf pehli nahin. Claude Code background ke chote kaamon ke liye mukhtalif models khud istemaal karta hai. Sirf main model badalne par jobs aisa Claude model mangein gi jo Moonshot ke paas nahin, aur uljhe failures hon ge. Isi liye har ANTHROPIC_DEFAULT_* line, bhooli jane wali Fable line samet, maujood hai.
• Agar pehle Claude Code istemaal kiya hai to ANTHROPIC_API_KEY delete karein. Purani key oopar ke ANTHROPIC_AUTH_TOKEN se takrati hai, magar error asal wajah nahin batata. Clean machine se shuru na karne walon mein yeh sab se aam failure hai.
• Setup ko /status se check karein, /model se nahin. /model menu sirf Claude ke models dikhata hai. Kimi wahan kabhi nahin aye gi aur yeh bug nahin. /status mein kimi-k3 aur Moonshot address dikhna chahiye.
• Key ab file mein plain text hai. File ko public jagah upload na karein. .claude/settings.json ko .gitignore mein dalein taake ghalti se share na ho.
• Is route par web fetching band ho jati hai. Moonshot endpoint abhi nahin deta. Baqi sab chalta hai.

Aakhri setting CLAUDE_CODE_AUTO_COMPACT_WINDOW ko copy ke bajaye samjhein. Conversation bharne ke qareeb Claude Code khud use saaf karta hai, magar "full" size batana hota hai. 1048576, Kimi K3 ki one-million-token window ka poora number hai. Chorne par safai bohat jaldi ya bilkul nahin ho gi.

Ek saaf baat: Moonshot setup support karti hai, Anthropic nahin. Anthropic doosri companies ke models ko Claude Code messages bhejne ko support nahin karti. Update se toot jaye to fix ka wada nahin. Aap AI chunne ki azadi ke badle official support chorte hain. Samajh kar kiya jaye to munasib hai.

OpenCode kisi AI ke saath chalne ke liye bana, is liye yeh asaan rasta hai. OpenRouter bhi yahin sab se zyada madad karta hai.

OpenRouter ek service se qareeban har model, Kimi K3, GPT, Gemini aur kai free models se jorta hai. Har company ke account ke bajaye ek account aur bill. Kai darwaze kholne wali ek key samjhein.

Setup mein qareeban ek minute:

1. openrouter.ai/keys par key banayein aur thora prepaid balance dalein
2. opencode chalayein, /connect type karein, openrouter chunein aur key paste karein
3. /models type karke moonshotai/kimi-k3 chunein (picker ka exact ID; IDs badalti hain, menu par bharosa karein)

Bas. Maloom sab kuch chalta rahe ga aur Kimi K3 list mein ek choice hai.

Acha setup: design ke liye Kimi K3, chote kaam ke liye cheap model aur Concept 12 review mein second opinion ke liye Claude ya GPT connected.

Do baatein dekhein. OpenRouter direct Moonshot se thora zyada charge karta hai kyun ke connection sambhalta hai. Seekhte waqt theek hai. Kimi K3 lambe answers likhti hai, is liye usage number dekhein. Lambe answers zyada kharch hain.

Rented-crown rule

Jo rasta chunein, aadatein tool aur files ke gird banayein, ek AI model ke nahin. Ranking ki top AI ka taj kiraye ka hai jo kisi aur ko mil jaye ga. Files rehti hain.

---

Part 2: Skill ke tor par taste

5. Hallmark: Asar-dar taste file

Part 1 ne masla bataya. Ek free file zyada hissa theek karti hai.

Hallmark, Hassan El Mghari ki design skill hai jo Together AI ke naam se publish hui. Free hai, koi istemaal kar sakta hai aur 2026 ki maqbool skill files mein bani. Apna kaam ek jumle mein: AI ke pages ko banaya hua dikhana, generated nahin.

Yeh skill file ki quwwat ka kitaab mein sab se saaf example hai. Coding course ka wada yaad karein: AI general knowledge, skill aap ka specific judgment lati hai. Hallmark experts ka banaya wohi wada free mein hai.

Dono mein modern tareeqe se install karein:

npx skills add Nutlope/hallmark

Interactive picker skill aur installed agents dhoond kar jagah poochta hai. Claude Code, OpenCode aur Codex aam tor par selected hote hain, is liye Enter. Baghair prompts -g global install aur -y confirmations skip karta hai; npx skills add Nutlope/hallmark -g -a claude-code -y one-line version hai. Update ko dobara chalayein aur npx skills list se installed dekhein.

Files ~/.claude/skills/hallmark/ folder mein ati hain. OpenCode wohi folder parhta hai, ek install dono ke liye.

Folder ek baar kholein. Tarteeb khud lesson hai. Choti main SKILL.md aur saath references folder mein baqi sab: 58 checks, fonts, color, spacing, 21 page shapes aur themes.

Is liye taqseem ke AI extra files zaroorat par parhti hai. Main file choti aur loaded rakhna qareeban free. Coding course ka lesson kisi aur ne bana diya.

Install yaad dilata hai ke skills full agent permissions se chalti aur pehle review honi chahiye. Is ko sanjeeda lein: skill woh instructions hain jo agent follow kare ga. Har installed cheez ki SKILL.md parhein.

File ke andar. Hallmark khoobsurat pictures ka collection nahin, working parts hain:

• Page ki shape pehle. Colors se pehle 21 shapes se structure chunti hai. "Mukhtalif banayein" aksar colors badalta hai; Hallmark skeleton badalti hai. Mukhtalif clients ke sections ka same order nahin. Same skeleton ko naya rang dena hi masla hai.
• Bees named themes aur Custom. Har theme coherent palette, type pairing aur spacing hai (Specimen, Atelier, Brutal, Newsprint, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Riso, Sport, Bloom, Coral, Cobalt, Aurora, Editorial, Carnival, Lumen, Hum). Rotation rule brief ke genre mein ek theme par rukne nahin deta. Koi theme fit na ho to Custom scratch se palette aur fonts banata hai, same gates aur baghair template.
• Kaam wapas dene se pehle lambi checklist. Skill finished page ko buri aadaton se test aur phir khud review karti hai. Project front page 57 checks, installed file 58 kehti hai. Documentation numbers drift karte hain; page aur tool mein tool maanein. Ek baar saved sakht checklist thakan ki sust request se behtar hai.
• Safety rule. Existing website par Hallmark files ya sections hatane se pehle bataye aur approval le gi. Design skill site tabah karne ki permission nahin.

Chaar modes. Hallmark chaar jobs karti hai. Naye page par pehla default hai, baqi teen naam se. Sahi waqt ka mode chunna skill ka bara hissa hai:

Command	Kya karta hai	Kab istemaal
default	Naya page: shape, rules aur 58 checks	Kuch naya shuru
audit	Existing page ki ghalatiyan list, kuch nahin badalta	Sachcha review (Concept 11)
redesign	Purani shape hata kar words aur brand ke saath mukhtalif rebuild	Page chalta magar generated lagta
study	Pasandeeda website ke kaam karne ki wajah likhta	Ache site se seekhna (Concept 6)

Virasat: Anthropic ki frontend-design skill

Hallmark achanak nahin ayi. File sources batati hai, jin mein Claude Code ka Anthropic frontend-design plugin hai.

Dono files compare karna mufeed hai, ek masla mukhtalif tareeqon se hal karti hain.

Anthropic skill judgment sikhati hai. Chote studio designer ki tarah kaam, page ke oopar real baat, fonts ko personality, ek jagah bold aur baqi pur-sukoon. Finished se pehle apne kaam ki picture dekhein.

Hallmark machinery deti hai: shapes, named themes, numbered checks aur lazmi self-review.

Dono saath mufeed. Anthropic plugin rozana design mein khud madad, full treatment ke liye Hallmark naam se. Warning: Kimi K3 jaise non-Claude models skills khud chunne mein kam reliable, is liye har baar naam type karein.

Kya skill har baar same page banati hai? Nahin. AI mein randomness hai, skill choices kam karti hai. Hallmark thaki shape rokti hai, attempts identical nahin. Jo cheez har baar sahi ho us ke liye na-torne wala rule chahiye, Concept 11 dikhata hai.

6. Study karein, clone nahin

Design behtar karne ka tez tareeqa pasandeeda design dikha kar kehna "ise waisa feel dein."

Reputation kharab karne ka tez tareeqa exact copy hai.

Hallmark ka study command is tension ko sambhal kar design sikhata hai.

study ko pasandeeda website ya screenshot dikhayein. Woh page shape, saath chalne wale fonts, main color aur khali jagah likh kar design.md mein save karta hai.

Woh site copy nahin karta. Ideas leta hai, pixels nahin. Do sites ideas aise share kar sakti hain jaise do students teacher: talluq dikhta hai, same nahin.

Copy ghalat aur legal mushkil hai. Teen practical wajah bhi:

• File safar karti hai. design.md likha taste hai. Doosri AI, tool, teammate ya client ko dein, handover ke baad direction rehti hai.
• Nazar train hoti hai. Teen pasandeeda sites ki files parh kar har jagah structure aur fonts nazar ayein ge. Skill kaam ke saath sikhati hai.
• Beginners ka mushkil masla hal. Aksar log look bata nahin sakte, pasandeeda site dikha sakte hain. study ishare ko instructions banata hai.

Rule: har project mein do ya teen sites study karein, ek nahin.

Ek example copy ki taraf khainchta hai. Teen combine karate hain: shape ek, fonts doosre, saadgi teesre se. Original feel combination se.

7. Brand extraction: client ka DNA pehle se online

Concept 6 un sites ke bare mein tha jo aap ko pasand hain. Client ka kaam is ka ulat hai. Jis design ka ehtram zaroori hai woh pehle se mojood hai, kyun ke woh client ka brand hai: un ka logo, colors, fonts aur bolne ka andaaz. Yeh ghalat hon to baqi banayi hui koi cheez un ke liye ahmiyat nahin rakhe gi.

Yahan bunyadi khayal: khaas cheezein maangein, sab kuch nahin.

Agar AI ko poora web page dein to us ke hawale code, scripts aur cookie pop-ups ka dher hota hai. Is dher mein woh yaqeen se aisa color bana de gi jo asal mein wahan hai hi nahin. AI models aisa karti hain: yaqeen na ho to bhi pur-aitemad andaza deti hain. Aap ka kaam andaze ki gunjaish khatam karna hai.

Rasta 1: apni AI se poochein, magar bilkul wazeh (free). Client ki site khulwa kar saboot ke saath exact cheezein maangein:

Is page se sab se zyada istemaal hone wale teen brand colors ke exact color codes, fonts ke naam aur logo file ka address list karein. Har cheez ke liye code ki woh line quote karein jahan yeh mili.

Aakhri jumla aham hai. Akela color code andaza hai. Color code us line ke saath jahan se mila aisi cheez hai jo aap khud check kar sakte hain. Hamesha saboot maangein.

Rasta 2: isi kaam ke liye bana tool istemaal karein (paid, zyada saaf). Firecrawl jaisi services uljhe web pages ko AI ke liye saaf aur tarteeb-shuda maloomat mein badalti hain. Kuch brand ka logo, colors aur fonts seedhe de deti hain. Ek client ke liye rasta 1 theek hai. Har hafte yeh kaam ho to paid tool ghalatiyon ki poori qisam hata kar apni qeemat nikal deta hai. (Yeh jaan lein: jin videos par yeh course mabni hai unhein aise tools promote karne ke paise mile the. Khayal durust hai. Khaas brand ka intikhab aap ka hai, aaj ki qeematein dekh kar.)

Rasta 3: seedha client se poochein. Ise kabhi na chorein. Asal businesses ke paas asal files hoti hain: sahi logo, official colors aur kabhi brand document. Oopar sab kuch pehle draft ke liye hai. Kuch live karne se pehle asal files maangein. Aankh se dobara banaya logo aakhir pakra jaye ga aur sharmindagi ho gi.

Jawab jis tarah bhi milein, wohi ek file mein jate hain: design.md. Magar unhein wazeh tor par rules, suggestions nahin mark karein.

Farq haqeeqi hai. Concept 6 ki pasandeeda sites direction hain: jin se ideas liye ja sakte hain. Client ke brand colors rules hain: zyada khoobsurat cheez milne par bhi badal nahin sakte. Aap ki taste skill un rules ke andar design karti hai.

---

Part 3: Build

8. Ek kahani, ek scroll

Apni jani hui behtareen websites khol kar un ki mushtarka cheez dekhein. Page oopar neeche rakhe sections ka dher nahin. Woh ek kahani hai jo scroll ke order mein sunayi jati hai.

Har screen par ek idea. Har screen agla dekhne ki khwahish jagaye. Scroll se kahani aage barhti hai.

Page ko socha-samjha dikhane ka yeh course ka mazboot tareen idea hai aur plan karna asan:

• Build shuru hone se pehle kahani likhein. Paanch se aath qadam, har ek ki ek line. Film ki tarah inhein beats kehte hain. Honey company ke liye: jangli honeycomb, phir qatra girta hai, jar bharta hai, andar kya hai, kaun banata hai, phir khareedein. Baad mein banne wali accountant site ke liye: receipts ka shoebox, phir sorting, accounts khud balance, mahine ki saaf tasveer, peeche shakhs, phir meeting book. Beats likhein, behas aur ittefaq karein, kuch banne se pehle file mein save karein.
• Har screen par ek idea. Screen do baatein kahe to koi bhi nahin kehti. Do screens mein baant dein.
• Page ke oopar asal cheez dikhni chahiye, "Innovative solutions for modern business" jaisa slogan nahin. Honey site girte honey se khulti hai. Accountant site receipts ke us shoebox se jo har small business owner foran pehchanta hai.
• Ek lamha bold rakhein, baqi sab pur-sukoon. Aisi ek cheez jo visitor baad mein dost ko bata sake: animation, scroll par react karti cheez ya type ka numayan istemaal. Ek jagah bold hona pur-aitemad lagta hai. Har jagah bold hona uljhan.

Story spine aap ka responsive contract aur media shot-list bhi hai. Ise sambhalein: Concept 9 har beat ki imagery banata aur Concept 10 wohi spine mukhtalif screen shape ke liye dobara shoot karta hai. Ek artifact, teen kaam, isi liye zehan ke bajaye likha jata hai.

Aakhri beat ko waqai kuch karna chahiye. Har kahani ek action par khatam: book, buy, message, subscribe.

Yeh phanda qareeban har pehli website ko pakarta hai. Simple website sirf files hai. Peeche message lene ka system nahin. Is liye kahani ke aakhir ka khoobsurat button bilkul kuch nahin karta jab tak aap us ka tareeqa na chunein. Teen imandaar options, sasta pehle:

Option 1: WhatsApp link. Ise extra kuch nahin chahiye aur aksar small businesses ke liye behtareen jawab. Aisa link:

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

WhatsApp pehle se likhe message ke saath kholta hai. Na system banana, na form, na check. Sab se achi baat, message wahin ata hai jahan owner sara din customers ko jawab deta hai. Aksar website templates ka contact form koi check nahin karta. WhatsApp button asani se behtar.

Option 2: form service. Formspree jaisi companies page par aam form lagati aur logon ka submit kiya email karti hain. Un ke free plans small business ke liye kafi. Jab client waqai form chahe tab istemaal karein.

Option 3: server par chota program. Vercel (Concept 13) website ke saath chote programs chala sakta hai, is liye project bara ho to AI proper system bana sakti hai. Pehle do options barh kar yahan ate hain, shuru yahan se nahin.

Jo chunein, planning mein kahani mein likhein. "Beat 6: consultation book, +92 300... ka WhatsApp link" aisi line hai jis ke gird plan aur baad mein check ho sakta hai. Check zaroor karein ge: Concept 11 batata hai finished live page mein working link ka yaqeen kaise ho.

Jo kahani bekaar button par khatam ho woh website nahin. Poster hai.

Order par note. Single page pehle seekhein. Course ki har cheez ek page par asan. Magar asal client work ek page se barhta hai, is liye woh bhi shamil: Part 3 ke aakhir ka multi-page section dikhata hai site ko zyada rooms chahiye hon to kya badalta hai.

9. Media pipeline

Har us website ka imandaar raaz jis ne aap ko ruk kar dekhne par majboor kiya: pictures aadha kaam kar rahi hain.

Ache fonts aur structure aap ko average se oopar le jate hain. Magar sirf rangeen boxes aur text ka page phir bhi document lagta hai, jagah nahin. Asal photographs aur video page ko woh maqam banate hain jahan aap pohnche hon.

Isi liye pictures course ka lazmi hissa hain, aakhir ki sajawat nahin.

Yeh woh akela hissa bhi hai jahan paisa aap ki salahiyat waqai badalta hai. Is liye chaar lanes mein sikhate hain, free se mehngi. Har lane asal achi website bana sakti hai. Har project ki lane chunein aur janein woh kya deti hai.

Lane 1: Asal photographs (hamesha free). Unsplash aur Pexels ki professional photos ki bari libraries free istemaal ho sakti hain, paying clients ke liye bhi. (Rules page parhein: photos istemaal kar sakte hain, khud photos dobara bech nahin sakte.)

Do aadatein free photos ko free jaisa dikhne se rokti hain:

• Roshni match karein. Poore page mein ek qisam ki roshni aur mood wali photos chunein. Mixed lighting page ko ajnabi pictures se jora hua dikhati hai.
• Maqsad se crop karein. Photo jaisi mili waise qabool na karein. Jo dikhana hai us ke liye kaatein.

Aur woh option na bhulein jo qareeban koi istemaal nahin karta: local business ke liye achi shaam ki roshni mein phone camera har baar generic stock photos ko hara deta hai. Client ke asal office ki asal photo koi AI nahin bana sakti.

Lane 2: AI ki banayi pictures, free (ek shart ke saath). Kabhi darkar picture kahin mojood nahin: ghair mamooli illustration style ya aisa product jis ki photo abhi nahin. AI bana sakti hai.

Magar poori lane ki shart: free ho to quality ya sahulat mil sakti hai, dono nahin.

Behtareen picture AI sirf tab free hai jab clicks khud karein. Jinhein aap ki AI automatically chala sakti hai woh kamzor ya kam reliable. Har project ke liye chunein:

2a. Haath se, behtareen AI ke saath: ChatGPT ka free plan. OpenAI ki image AI filhal wasee dastiyab mazboot options mein se hai. Instructions qareeb se follow, picture mein parhne layak text (aksar nahin kar saktin), aur images ke set mein consistent style rakhti hai, is liye poore page ki pictures ek saath lagti hain.

chatgpt.com par roz mehdood pictures ke saath free. OpenAI fixed number publish nahin karta aur woh badalta hai, apna account check karein. Free automatic version nahin, isi liye yeh rasta haath se.

Haath ka kaam bojh ke bajaye acha banane wala workflow: aap ki AI instructions likhe aur aap button dabayein.

Storyboard mein har beat ki description pehle hai. AI se polish karwayein, har ek khud chatgpt.com mein paste, results assets/ folder mein 01-shoebox.png jaise naam se save, aur AI page mein lagaye. Das minute copy-paste se behtareen dastiyab image quality muft.

Daily limit madad bhi karti hai. Roz chand pictures planned build ki raftar hai aur chalis pictures bana kar ek ke chalne ki umeed wali buri aadat namumkin.

2b. Automatic, magar kamzor: free services jinhein AI khud call kare. Jab kaam aap ke baghair chalta rahe, rough drafts, placeholder images, classroom projects, teen options hain. Pollinations.ai baghair account waqai free automatic pictures ke sab se qareeb. Cloudflare Workers AI roz asal free amount deti hai. Google ke free plan ne mukhtalif auqat free pictures di hain.

Aakhri mein lesson hai. Sirf 2026 mein Google ne current image AI free hone ka faisla ek se zyada baar badla. Yaad rehne wali baat company ka naam nahin: free plans mausam jaise hain. Build ke din aaj ka page check karein aur client ko aisi free amount ka wada na karein jo agle mahine gayab ho.

Dono ka acha istemaal: cheezon ki jagah tay karne ke rough drafts 2b se, approved pictures proper 2a se dobara. Draft sasta, finish acha.

Lane 3: Har picture ke chand cents dein. Project ka zara sa budget ho to Lane 2 ki shart khatam.

2a ki wohi umda image AI automatically bhi chalti hai aur per picture qeemat: low quality taqreeban aadha cent, medium chand cents, high qareeban bees cents. (Qeematein badalti hain, check karein.)

In qeematon par quality aur sahulat dono. AI storyboard ki har picture khud top quality mein banati aur poori website ki pictures ek dollar se kam. Aksar asal client work yahin hota hai.

fal.ai aur Replicate jaisi services ek account se kai companies ki image AI par wohi karti hain, bilkul Concept 4 mein text ke liye OpenRouter ki tarah.

Ise sasta rakhne wali adat pehle maloom: drafts low quality mein, high quality tab jab sab picture par razi.

Lane 4: Video, credits ke saath paid (showstopper). Scroll par screen se girta honey drop is lane se. Asal paisa lagta hai aur ache istemaal par qabil-e-qeemat.

Higgsfield ek account se 30 se zyada picture, video aur sound AI models (Gemini Omni Flash, Seedance, Veo, Kling aur doosre) deta hai. Hamein teen cheezein aham:

• Aap ki AI ise seedha chala sakti hai. npm install -g @higgsfield/cli se ek baar install aur higgsfield auth login se ek baar sign in. Phir video banana normal session mein AI ka kaam, file edit ki tarah. Job bhejti, intizar karti aur result lati hai.

• Model chunna zaroori nahin. Darkar shot batayein, "close up, glass par tapakta honey, peeche se garam roshni, phones ke liye tall shape, chaar seconds", aur service apne 30+ models mein behtareen chunti hai. Ek cheez kam seekhni.

• Kharch se pehle qeemat check. higgsfield generate cost video banaye baghair batata hai woh kitne ka hota. Shot waise hi batayein jaise banane ke liye, asal command:

  higgsfield generate cost workflow draw_to_video --duration 8.2 --resolution 720p

  Yeh poore media section ki mufeed tareen command, kyun ke "kharch se pehle plan" ko amal banati hai: storyboard ke har shot ki qeemat, jama, faisla, phir creation. AI ko shoot se pehle quote sikhayein.

Higgsfield kai mein ek company: fal.ai, Replicate aur AI companies khud bhi milta-julta karti hain. Yeh is liye dikhate hain ke filhal tools se asani se jurti hai aur pehle jaisi imandari se, is workflow ko maqbool banane wali kai videos ke paise deti hai. Idea seekhein, AI session ke andar video ko aam qadam banana. Company badal sakti hai.

Kaunsi video AI maangein? Service chun sakti hai, magar website work mein do models qareeban sab cover aur mukhtalif jobs:

• Google ka Gemini Omni Flash (filhal preview model, baghair notice badal ya move ho sakta hai) shot dhoondta hai. Shakhs ki tarah baat: "wohi scene, ahista pour, garam roshni" zero se shuru ke bajaye pichli video sudharta aur refinement mein roshni aur scene consistent. Shot ka faisla karte waqt istemaal.
• ByteDance ka Seedance 2.0 (naam seedance_2_0) shot lock karta hai. Nau reference pictures tak, brand images, approved photos, logo, aur smooth motion mein sab se stable. Stability zaroori: scrolling se judi video loop par flicker ya wobble na kare. Final version ke liye.

Dono ki ek adat: pehle se dhoondein, doosre se lock. Quality level model naam ka hissa nahin, alag --resolution setting, oopar pricing command jaisi. Yeh budget control aur dono jagah wohi knob: shot 720p par price, client ko 720p draft, haan ke baad full quality.

Mustaqil warning: video AI course ki har cheez se tez badalti hai. Yeh July 2026 ke behtareen hain. Build ke din behtareen check karein.

Har lane ka ek rule: kahani se pictures, har beat ki ek, wazeh naam se assets/ folder mein, final layout se pehle.

Khali jagah bharne ke liye aakhir mein lagayi pictures hamesha waisi hi dikhti hain.

Practical tip: bohat photos mein search ke liye helper AI ko alag conversation mein bhejein aur sirf behtareen chand laye. Main conversation mein chalis photos use band kar dein gi, coding crash course ki warning ki tarah.

Permission par chota note, kyun ke client work business use hai.

Free photo sites ke rules parhna aap jante hain. AI pictures ke bhi rules. Aksar companies filhal commercial use deti hain, magar rules companies, free aur paid plans mein mukhtalif aur waqt ke saath badalte. Kuch free plans business use bilkul nahin dete, is liye free plans ko draft tools samjhein.

Qareeban har jagah kuch cheezein mana: asal logon ke chehre, doosri companies ke logos aur named living artist ka style copy.

Chaar sada aadatein mehfooz rakhti hain:

1. Final pictures wali service ke current rules parhein.
2. Banayi cheez ka record: description, service, tareekh. Storyboard mein zyada pehle.
3. Client work mein pehchanne layak asal shakhs ya doosri company ka logo kabhi nahin.
4. Client ko batayein kaunsi pictures AI ki hain. Handover note ka ek jumla baad ki har ajeeb guftagu rokta hai.

Yeh legal advice nahin. Regulated industry ke client ke liye asal lawyers. Magar yeh chaar aadatein professional work ka aam standard.

10. Mobile bunyadi device hai

Har AI website demo jo aap ne dekha wide computer screen par record hua. Aap ki website ke aksar visitors ke ek haath mein phone ho ga.

Is kitaab ke qareeban har reader ke liye, phone doosri screen nahin. Wohi screen hai. Sirf laptop par achi site sirf banane wale ko mutasir karti hai.

Ek idea dono screens ka design sada banata hai:

Wohi kahani, mukhtalif shape ke liye dobara film.

Phone version ka film director nayi kahani nahin likhta. Scenes rehte hain. Har scene ka frame badalta hai. Amal mein matlab:

• Kahani nahin badalti. Shoebox, sorting, balancing, wazahat, shakhs, meeting book, har device par chhe. Test: beat phone par chora ja sakta ho to woh sajawat tha, kahani nahin. Computer version se bhi hata dein.
• Pictures dobara li jati hain. Wide video ko daba kar nahin, wohi subject tall video. Paid lanes mein dono shapes banana aur dono ka paisa, budget mein rakhein. Free lanes mein shuru se dono chunein.
• Layout kahan badle ga, jaan boojh kar tay karein. AI ko saaf: "768 pixels se tang screens par tall video, har section full width, balancing animation bohat bari, kyun ke phone par wohi poora show." Phir test: browser window tang aur wide kheench kar switch ka lamha dekhein. Smooth ya badsoorat nazar ata hai, Concept 11 ka kaam.
• Angoothe mouse pointers nahin. Buttons angoothe ke liye bare. Aham cheez hover na mange, phone par hover nahin. Text pinch zoom ke baghair parhne layak. In mein fail hona style nahin, aksar visitors ke liye broken site.

Phone version kab: computer version ke foran baad wohi working session mein, jab AI har faisla yaad rakhe. Doosre din ya hafte baad nahin. Do sessions do zara mukhtalif websites banate hain, client se pehle aap ko pata nahin chale ga.

Poore build mein jagah? Design settle ke foran baad aur checking se pehle:

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

Order ki wajah sada: checking dono versions check kare. Phone version review ke baad ho to aadhi website review hui.

Ek page se kai tak: multi-page sites aur routing

Ab tak sab jaan boojh kar ek page par sikhaya. Ek page par yeh aadatein asan.

Magar asal client work barhta hai. Ayesha aakhir services page, articles section, shayad har specialization ka page chahe gi.

Achi khabar: seekha kuch nahin badalta. Multi-page site nayi qisam nahin. Wohi kaam har page par ek baar, plus teen rules.

Rule 1: har page ko mojoodgi ki apni wajah aur kahani chahiye.

Ghalat tareeqa ek kahani ko tukron mein todna, phir "About" page par do tanha paragraphs jo scroll mein the.

Sahi tareeqa "har screen par ek idea" test ko ek level oopar. Naya page tab jab visitor ka kaam mukhtalif. Services detail mein compare. Articles parhna. Office dhoondna. Teen jobs, teen pages.

Test pass har page ki apni kahani, Concept 8 ki tarah likhi aur agreed, apne action par khatam.

Pehle ek plan mein sab likhein: har page, job, beats. Doosre page se pehle plan approve.

Menu sajawat ke bajaye us plan se seedha. Chota, items visitor ke kaam ke naam, har page par identical.

Careful ko careless se alag choti cheez: "page not found" screen bhi design. Page hai, wohi tawajjoh.

Rule 2: poori site mein ek look.

Yahan Hallmark ka bunyadi idea ulat jata aur uljhata hai, ahista parhein.

Mukhtalif clients ke darmiyan, skill sameness se larti hai. Do clients ki websites ka skeleton ek nahin.

Ek client ki site ke andar, sameness hi darkar. Paanch pages ek building ke paanch rooms: same colors, fonts, spacing, sab ek design.md ke rules.

Bold moment khaas rahe, home page par. Har page par poori taqat se repeat ho to khaas nahin, wallpaper.

Amal mein look settle karne ko home page pehle. Phir har page: "same design file, same look, new story."

Doosri AI site review kare (Concept 12) to khaas poochein pages consistent hain. Pages ke chote farq builder andar se nahin dekh sakta.

Rule 3: web addresses sirf files hain, jab tak copying masla na bane.

Ek cheez mushkil lagti magar nahin. Simple website mein file hi address hai:

• index.html aap ka home page
• services.html ka address /services.html
• articles/index.html ka address /articles

Links jorte hain aur host folder jaisa hai online rakhta hai. Koi system nahin seekhna. Hamesha yahan se shuru.

Safai ki setting: agar aap /services ko /services.html par tarjeeh dein to pages ke saath vercel.json file mein { "cleanUrls": true }. Vercel addresses se .html hata deta hai. Default off, na chunein to kuch nahin toot-ta.

Kai pages ki asal mushkil addresses nahin. Copying hai. Menu aur footer har file mein copies. Ek menu ki paanch copies, zara mukhtalif hone ke paanch mauqe, ek din ek page ka purana link kisi ko nazar nahin aye ga.

Coding crash course se yeh ehsaas maloom: teesri baar wohi samjhayein to knowledge ek jagah rehna chahti hai.

Do jawab, halke se bhari:

• Halka jawab: simple files rakhein aur automatic check jo pages ke menus identical na hon to save rok de. Ab drift sirf unlikely nahin, namumkin.
• Bhari jawab: site mein chand se zyada pages ya regular articles hon to menu ek baar likh kar reuse karne wale system par. Astro is site ke liye acha, AI ek instruction par setup aur existing pages move.

Judgment wohi jo coding crash course ne tools par: bhari system tab jab asal masle ne kamaya ho, pehle nahin.

Baqi sab har page par ek baar repeat: dono widths ke screenshots, audit, phone version, sitemap entry, weight limit aur cost estimate ki line. Zyada pages ka matlab zyada surface, seekhne ko zyada ideas nahin, isi liye ek se shuru.

---

Part 4: Design verification

11. Visual verification loop

Poori kitaab ka aham tareen pattern ek loop: koshish, check, fix, repeat. AI kaam karti, koi cheez check, fail ho to failure message AI ki agli instruction. AI check pass tak chalti rehti, darmiyan koi nahin.

Coding crash course mein checker test tha. Design ko aise check karna namumkin lagta tha, kyun ke "sahi dikhta hai" computer ka pass/fail nahin.

Yeh concept theek karta hai. Narm se sakht teen checkers:

Checker 1: screenshot. AI ko aankhein dein.

Course ki sab se qeemti aur sada adat. Har build round ke baad AI finished page ki picture le kar use dekhti hai, code ko nahin.

Itna aham kyun? Apna code parhti AI nahin bata sakti ke do text ek doosre par hain. Video load fail, button peeche background jaisa color, ya tang screen par layout bikhar gaya, nahin bata sakti.

Picture ki ek nazar chaaron foran pakarti hai.

Isi liye Kimi K3 design comparisons jeetti hai aur Anthropic ki design skill chori ke qabil line mein: "a picture is worth 1000 tokens." AI kisi cheez ko parhne ke liye tokens deti hai. Yeh kahawat nahin, daawa hai ke dekhna code parhne se behtar ke saath sasta bhi.

Rules file mein rakh kar automatic:

Har aham change ke baad page ki picture 1440 pixels aur 390 pixels width par lein aur done kehne se pehle dono dekhein.

Dono tools kar sakte hain. Apne se Playwright program setup karwayein. Taqreeban barah lines ek baar: browser khole, har width par page load, picture save, band.

Do details pictures ko mufeed. Sirf pehla nazar ane wala nahin, poora page capture, scroll kahani neeche hai. Site online (Concept 13) ho to computer copy nahin, live page ki pictures.

Checker 2: audit. Taste ko list banayein.

Hallmark ki audit command page parh kar khaas maslon ki list deti hai. Kuch badalti nahin, sirf batati.

Loop ko list hi chahiye, har item agli instruction. Build, audit, list fix, dobara audit, list khali tak.

Dekhein kya hua. "Ise kam generic banayein" kabhi fail na hone wali instruction, kuch drive nahin karti. "Yeh saat khaas masle fix karein" finish aur check hota hai. Pehli qisam ko doosri banana poori trick.

Checker 3: automatic rule. Jo hamesha sach hona chahiye us ki guarantee.

Kuch cheezein AI judgment par nahin chor sakte. Har baar sach. Coding crash course ne pehchan aur automatic enforcement sikhayi, AI chahe bhi to skip nahin.

Website ke mashhoor rules:

• Har picture ke saath text description, screen reader users ko maloom kya dikhati hai
• Koi file size limit se bari nahin
• Kuch save hone se pehle site baghair errors build

Coding crash course ki warning: checks khud likhein, AI se na likhwayein. Apni aadaton ke khilaf test banane wali AI madad se test asan pass bana de gi.

Yahan bohat log khud ko dhoka dete hain, tawajjoh se parhein. Rules file mein "har picture ki description" likhna instruction hai jo AI aam tor par follow kare gi. Yeh aisa rule nahin jo woh tor nahin sakti. Farq bhoolne ke din nazar ata hai.

Asal check chota program jo haan ya nahin. Project mein check-site.mjs save karein. Yeh Node.js hai jo npx aur Vercel ke liye pehle se hai, Windows, macOS aur Linux par same:

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 se chalayein. Ghalat ho to file naam print aur failure par stop. Sab theek ho to batata hai.

Dono tarah azmayein, kyun ke fail dekhna maqsad. Ache page par All checks passed. Ab ek alt="..." delete kar ke dobara:

MISSING DESCRIPTION  site/index.html

Yeh failure loop chalata hai. AI script chala kar MISSING DESCRIPTION: services.html parhti, wohi file fix aur dobara chalati. Kisi ko dekhna ya yaad nahin.

Script ki har line samajhna zaroori nahin. Dikhaya farq samjhein: rules file mangti hai, script faisla karti hai.

Kaam ki ghalatiyon ke saath rules barhayein. Har page par identical menu. Page mein waqai working contact link. Title ab bhi "Home" nahin. Download package version ke chhe rules, har ek kyun ke ek baar kuch ghalat hua.

Aur janein yeh kya nahin pakar sakta. Finished Ayesha project mein beat 3 ledger total PKR 217,950 aur beat 4 par PKR 217,930. Accountant ki website par. Audit, reviewing AI aur screenshots ne nahin pakra, sab dekh rahe the page sahi dikhta hai, aur dikhta tha. Teen numbers jama karte shakhs ne pakra.

Is liye: har check ho sakne wali cheez automate, bachi tawajjoh us hisse par jo kabhi nahin. Yeh tasalli ka inaam nahin. Yahi kaam.

Pehle build se rakhne layak do rule groups.

Group ek: har koi site chala sake. Text ka background se kafi contrast. Mouse ke bajaye keyboard navigation wale dekh sakein kahan hain. Reduce motion mangne wale device par animations ruk jayein, motion kuch logon ko beemar karta hai. Anthropic design skill ise khamoshi se banaya floor kehti hai, fakhr ke baghair. Sahi rawayya: minimum, feature nahin.

Group do: page load ke liye halka. Duniya ke aksar aur Pakistan mein yaqeenan kai visitors mid-range phones aur per megabyte data. Khoobsurat 40 megabyte video unhein mutasir nahin, jane ki wajah.

Limits set aur automatic enforce:

• Pehli screen kisi video se pehle taqreeban 1 megabyte se kam load
• Har video ke peeche still picture, page video load se pehle acha
• Neeche pictures visitor ke scroll par hi load
• Khud chalne wali video silent, achanak sound logon se tab band karata hai

Aap ke tez connection par zabardast magar visitor phone par fail site aksar audience ke liye fail. Taste ke baraks, har cheez computer check kar sakta hai.

Jahan aap ab bhi khare hain. Loop correct aur non-generic par milta hai. Is client ke liye sahi par nahin: page Ayesha jaisa, bold moment asar, story beats ki saans. Yeh judgment kabhi delegate nahin, course ki teesri belief: trust utna jitna checkable. Loop ka tohfa aap ka judgment sirf jahan waqai chahiye kharch.

12. Cross-model design review

Coding crash course ka rule: jis AI ne cheez banayi woh us ki badtareen reviewer.

Design rule mazboot, Concept 1 wajah: AI apni aadatein nahin dekh sakti. Andar se pasandeeda look aadat nahin, "websites aisi dikhti hain." Mukhtalif seekhi AI foran pakarti hai.

Setup:

1. Ek AI build. Kimi K3 (ya Claude) page banaye.
2. Mukhtalif company ki AI review. Wohi AI do baar ya same company sibling nahin. Waqai mukhtalif. Reviewer ko original brief, design.md aur screenshots. Sirf code parhne wala design review theatre. Sakht sawal: brief se compare, AI-made dikhne ki teen jagah aur wajah, phone version par kahani, colors/fonts ka design.md se exact match, findings file mein, kuch change nahin.
3. Builder findings parh kar fix. Dono AI disagree to aap faisla.

Mukhtalif company kyun? Concept 1 ka test: Kimi K3 pages doosri AI jaisi aadatein, shayad us se seekhin. Do AI same blind spot share kar sakti hain baghair same company. Kahin aur ka reviewer sasta rasta jo builder khud nahin dekhta.

Extra faida: file mein saved review client ko dikha sakte hain. "Independent review ne yeh paanch issues dhoonde aur sab fix" acha jumla.

---

Part 5: Ship

13. Deploy: folder se URL tak

Computer folder mein website rehearsal hai. Asal performance jab doosre shehar ka shakhs phone par khole.

Website online karna kabhi poora course: servers, addresses, security certificates. Aaj AI kar sakti hai.

Course Vercel istemaal karta hai. Free plan learning projects aur client ko work dikhane ko kafi, AI seedha control. Ek baar account, phir AI ko:

Connect to Vercel via the CLI and deploy this project.

AI zaroorat install, sign in ke liye browser ek baar, site online.

Do commands aham, farq rehearsal aur performance ka:

• vercel preview banata: temporary web address, client ko "yeh dekhein" bhejne ke liye.
• vercel --prod site asal business address par.

Har changes par fresh preview. Client rhythm: build, preview, feedback, dobara build, naya preview. Approval tak asal site untouched.

Teen aadatein kafi:

• Previews changes ke liye. Asal address finished cheezon ke liye. Asal address par work-in-progress na dikhayein, client ko purane preview par na chorein.
• Final checks live page par, computer par nahin. Online fonts, videos, links naye tareeqe se fail. Concept 11 ki picture-taking live preview address par dono widths, insaan se pehle.
• Doosri services wohi kaam. Netlify, Cloudflare Pages, GitHub Pages same. Skill AI se publish karwana, company preference.

Apna web address asal finish line.

Koi client .vercel.app par khatam address ko finished nahin samajhta, durust. Address brand ka hissa.

Lena chota kaam:

1. Kisi seller se address. Pakistan mein .pk PKNIC, .com international seller.
2. Vercel project settings mein add.
3. Vercel do teen values seller settings mein copy karne ko. AI screens se guzare gi.

Chalne mein chand minutes se chand hours.

Do professional aadatein. Address client ke naam aur un ke control account mein. Client address ka malik freelancer achi niyyat se bhi hostage le leta hai. Security padlock automatic, browser warning ho to address settings ghalat, site nahin.

Yaqeen karein log dhoond sakein. Na milne wali site khamoshi se fail. Ek short pass bunyad aur hamesha faida:

• Asal page title. "Ayesha Rehman, Chartered Accountant, Lahore", "Home" nahin. Search results aur browser tabs mein.
• Page ki ek jumla description, search results list scan karte insaan ke liye.
• Sharing picture. Aksar tutorials skip, yahan sab se aham. WhatsApp par link share ho to picture aur title ka card. Khoobsurat card wala link khulta, khali grey nahin. Media pipeline ka ek job: page top 1200 by 630 pixels export aur og.png.
• Search engines ke liye pages ki list, AI seconds mein, plus client ke apne account se Google registration.

Sharing card imandari se test: preview link WhatsApp chat mein paste aur dekhein.

14. Client workflow

Ab tak apne liye build. Koi paisa de to wohi kaam professional aadaton ke saath.

Yeh habits Part 6 ke project se: Lahore ki accountant Ayesha Rehman, practice ki website launch.

Chhe qadam:

1. Build se pehle likh kar ittefaq. Ek page: site kis ke liye, visitor ka ek action, agreed story beats, "finished" mein kitne pages, phone version, kahan publish, photos kaun. Chhe hafte baad yaad mukhtalif ho to page faisla. Yaad contract nahin.
2. Brand dhoondein, phir confirm. Concept 7 ka rule: online cheez draft, client ki bheji final. Ayesha ki purani site colors deti, phone call batati logo change ho raha. Ek call ne poora pehla version ghalat banne se bachaya.
3. Kahani bechein, finished page ki picture nahin. Build se pehle chhe beats, ek line har. Kahani approve karne wala client substance feedback. Pehle finished design dekhne wala exact blue shade. Dikhane ka order kam samjha gaya tool.
4. Un ke apne phone par review. Chat screenshots nahin. Preview link aur "phone par kholein." Un ke customers ka device, phone-version work khamoshi se khud bikta.
5. Chaar boxes se job price. Model: qareeban kuch nahin, invoice pennies ke bajaye absorb. Taste: aap ka waqt aur main line. Media: imandaar guftagu, "stock photographs shamil, is example jaisi custom video X extra." Generation se pehle qeemat check, X pur-aitemad number. Hosting: filhal free, handover par un ka account aur web address.
6. Proper handover. Sab dein: files, un ke control account mein published site, un ke naam address, design.md, aur chahein to sada visitor statistics.

Ek aur: AI se site ke chote changes mangne ka ek page.

Yeh is daur mein naya aur clients yaad rakhte. Sirf website nahin, us ki dekh bhal ki salahiyat deliver.

Compounding qadam: pehle client ke baad poora process skill file mein save, agreement template, brand search, story format, review questions, publishing steps, handover list. Doosra client aadhi mehnat, panchwein tak file aksar kaam.

Yeh ek freelancer ke size par is kitaab ka markazi khayal: rehne wali cheez website nahin. Websites banane wala system.

15. Cost discipline

Coding crash course ne AI conversations sasti rakhna sikhaya. Websites ke do naye costs: per-picture qeemat aur mukhtalif company AI se discounts badalte. Teen aadatein sambhalti hain.

Pictures banane se pehle qeemat nikalein.

Hairani: Kimi K3 build par poori website ka sara code chai ke cup se sasta. Ek custom video baqi sab jama se mehngi. Budget pictures hain, AI nahin.

Kharch se pehle prices check. higgsfield generate cost video banaye baghair qeemat. Storyboard quote: chhe beats, chhe prices, ek total, kharch se pehle faisla.

Rules file mein rakhein:

Koi picture ya video banane se pehle har planned shot ki qeemat ka andaza aur total batayein.

Har jagah wohi discipline: kuch banne se pehle har beat, lane, shape list, poora set review, phir final quality. Mehngi ghalati ek picture nahin, chalis banate hue ahista darkar samajhna kyun ke pehle likha nahin. Phone version list double, quote mein rakhein baad ki hairani mein nahin.

Doosri company AI conversation costs wapas lati hai. Kimi K3 pehle dekhe text ke liye pehli baar se taqreeban das guna kam charge. Isi discount se sasti, aur conversation shuru unchanged tak. Restart ya oopar edit, har cheez full price.

Do aadatein. Concept 4 ke mutabiq CLAUDE_CODE_AUTO_COMPACT_WINDOW set, automatic safai model memory size jane. Aur seekha jari: usage number dekhein, natural stops par tidy, aham facts pehle files mein kyun ke files safai mein gayab nahin.

Janein ek project asal mein kitna padta hai.

Pehli complete website ke baad asal numbers: AI kharch, pictures kharch, kaam ke hours.

Part 6 ki Ayesha site chand dollars AI time, plus picture budget zero, ek dollar se kam, ya pehle checked video price.

Yeh number sab badalta hai. "Kya practice afford?" ko "haan, har hafte". Client website qeemat pooche to andaze ke bajaye number.

---

Part 6: Ek mukammal worked example, do baar

Ab sab jorein. Ek asal website khali folder se live web address, ek baar Claude Code aur ek baar OpenCode. Tools ka farq mark.

Finished project download karein

Neeche har cheez description nahin, asal files: working website aur designed 404 page, sharing card, do photos, six-beat story spine, brand rules wala design.md, rules file, Hallmark audit (pehle saat findings, phir zero), mukhtalif company AI ka independent review, cost record, checker, screenshot script aur asal page ke dono widths par full-page screenshots.

Ayesha project download karein - unzip, phir npm run check. Ek alt="..." delete kar ke dobara chala kar fail dekhein.

Pehle docs/defect-log.md parhein. Ek waqt ship hue aath defects aur har pakarne wala list, sab se sanjeeda accountant ka na milta ledger kisi automatic check ne nahin. Hisaab karte shakhs ne pakra. Poora course isi nisbat ki daleel.

Build

Client: Lahore ki accountant Ayesha Rehman. AI tools se practice relaunch, current website purane logo ka ek old page.

Woh chahti hain shehar ke small business owners scroll par mehsoos karein: yeh shakhs meri uljhan samajhti hai, aur yeh pehle hi hal kar chuki hai.

Agreed story spine (Concept 8, Ayesha ke saath draft, chhe beats):

1. Shoebox, receipts, sab ka chupa raaz, garam aur insani shot
2. Sorting, uljhan categories banti
3. Khud reconcile ledger, bold moment: scroll par balance hoti animated ledger line
4. Mahana wazahat, ek clean statement, ek pur-sukoon number
5. Shakhs, Ayesha, office, credentials, Lahore ki asal roshni
6. Consultation book, ek action, ek button

Aap kya deliver karein ge:

• Wohi kahani ka computer aur phone version
• Brand colors aur fonts exact
• Beat 6 asal WhatsApp link aur pehle se typed message
• Findability bunyad: page title, description, WhatsApp link par acha sharing card
• Approval preview link, handover par apna .pk web address

Pictures: Beats 1, 2, 4, 5 ke liye Lane 1, asal photographs. 1, 2, 4 free library. Beat 5 un ke office mein phone ki do photos. Beat 3 balancing animation code mein, video nahin. Lane 4 custom opening video optional extra quote, qeemat pehle check, faisla un ka. Concept 14 amal: picture budget client se guftagu, akela faisla nahin.

Aath qadam

Qadam 1: Web project ki rules file

Claude Code mein: /init chalayein, generated file ko sirf model ki na samajh ane wali cheez tak chota:

# 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.

Yeh kyun aham: screenshot rule se AI har baar apna kaam check, sirf aap ke yaad dilane par nahin. design.md rule se brand colors AI ki khamosh improvement ki cheez nahin.

OpenCode mein: AGENTS.md mein identical content.

Qadam 2: Taste layer install

Dono tools mein identical:

npx skills add Nutlope/hallmark

Claude Code mein, plugin system se Anthropic frontend-design plugin bhi install. Design work mein automatically madad. Full treatment par Hallmark naam se. Dono saath.

Kimi K3 istemaal ho, Concept 5 warning: doosri companies ke models khud skills chunne mein kam reliable. Har design qadam Hallmark ka naam, umeed nahin.

Qadam 3: Brand extract, direction study

Pehle Concept 7: AI ko Ayesha ki purani site aur exact colors, fonts, logo, har ek ki saboot code line. Deep green, gold, serif font, har ek receipt.

Phir kabhi na chorne wali phone call. Ayesha brand change batati: green rehta, gold garam amber, naya logo proper bhejti.

Phir Concept 6: un ki do pasandeeda websites par Hallmark study. Apna brand mila kar teen references, copy ke bajaye combine karne wala number.

Sab design.md mein, brand saaf rules mark, suggestions nahin.

Dono tools mein identical.

Qadam 4: Plan mode, spine se structure

Plan mode jahan AI dekhe magar change nahin (Shift+Tab Claude Code mein do baar, OpenCode mein Tab). Job batayein: chhe beats, design.md, phones sab se aham, kaunsa bold moment.

AI plan lati aur yahan ghalati muft pakarti. Pehla plan aam page: oopar bari picture, beats aam sections mein dabe. Boring default skeleton aap ki kahani ka libas.

Push back:

Scroll kahani hai. Har screen ek beat. Balancing animation ki apni poori screen. Kahin feature boxes ki rows nahin.

Plan update. Approve aur file mein save.

Qadam 5: Design model se build

Claude Code mein: folder settings Concept 4 ke Kimi K3 par. /status se confirm, /model nahin. Plan mode se niklein, Hallmark naam dete build. Usage par nazar: K3 lamba likhta aur yeh longest qadam.

Dono versions isi session mein build. Design settle ke liye computer pehle, phir phone jab AI har faisla rakhe. Har beat restack, balancing animation phone ki poori screen. Browser tang-wide kheench kar switch dekhein aur Ayesha ke liye record.

OpenCode mein: /models, OpenRouter se Kimi K3, build. Hallmark ka wohi naam, usage par wohi nazar.

Kimi K3 gehra sochti, Claude session se ahista aur lambi. Magar result wazeh average nahin. Accounting line scroll par khud draw. Feature boxes ki ek row nahin.

Qadam 6: Media pass

Storyboard par helper AI beats 1, 2, 4 ke liye free photo libraries mein ek roshni aur mood. (Alag conversation, chalis thumbnails main ko clog.) Phone ki do office photos beat 5 ke assets/. Har file beat naam aur size limit ke neeche.

Beat ko made-up picture chahiye hoti to Lane 3 chand cents ya chatgpt.com free.

Ayesha video ko haan kehti to yahan. Gemini Omni Flash se baat kar ke shot, Seedance 720p par final lock review ke liye. Approval par wide aur tall full quality, pehle quoted qeemat.

Dono tools mein identical.

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

Concept 11 ke teen checkers, order mein.

Screenshot rule khamoshi se chal raha. Ab Hallmark audit. Pehla run saat masle, ek sirf mouse hover par, phone par bilkul fail. List fix, dobara, khali tak.

Phir Concept 12: mukhtalif company AI ko brief, design.md, screenshots. Yahan Claude Kimi K3 ka review, findings file, kuch change nahin.

Reviewer do cheezein: beat 4 photo ki roshni baqi se thandi, green background par amber button mushkil parhna.

Builder dono fix. Is baar disagreement nahin, magar sab parhein kyun ke final judgment aap ka.

Claude Code mein: reviewer doosre worktree mein, coding crash course ki tarah. OpenCode mein: same project ka doosra connected provider.

Qadam 8: Publish aur process save

Phone version Qadam 5 mein computer ke foran baad same session, Concept 10 ke mutabiq, isi liye Qadam 7 checking dono widths.

Ab publishing. Findability: title, description, page list, sharing card. Card test: preview link WhatsApp chat mein paste aur dekhein.

Phir preview address ke liye vercel, live page dono widths ki final pictures, Ayesha ko link teen alfaaz: "phone par kholein."

Approval ke baad: vercel --prod, un ke account se apna .pk, un ke account se Google registration, Concept 14 package handover.

Aakhir compounding qadam. Poora process skill file: story template, brand questions, audit-phir-review order, publishing checklist.

Ayesha ke cousin ka textile export business. Doosri website kal, aadha waqt.

Abhi kya hua

Coding crash course se: rules file, plan mode, skills, helper AI models, automatic checks, second opinion, reuse ke liye save.

Yahan naya: taste file, pictures ka rasta, screenshot as test, live web address finished product.

Yeh nisbat poora maqsad. Aap designer nahin bane. Aap ne checking machine ko naye kaam par lagaya, machine aur achi taste ki file ne baqi.

Dono tools farq phir chote: Kimi K3 setup, plan mode key, reviewer ki jagah. Soch identical.

Soch asal tool. Settings sajawat.

---

Is mein waqai acha kaise banein

Coding crash course ka wohi rule: page parhna bohat kam, build qareeban sab.

Masle ayein ge. Normal, isi se learning. Har masla page ke concept ki taraf:

Aap ka masla	Kya fix karein
"Meri har site same dikhti"	Taste file load nahin ya naam nahin le rahe (Concept 5)
"AI ne brand colors ignore kiye"	design.md nahin ya colors saaf rules mark nahin (Concept 7)
"Laptop par zabardast, phone par broken"	Ek version bana kar dabaya. Kahani dobara film (Concept 10)
"Page khoobsurat magar kisi ko kaam maloom nahin"	Kahani nahin ya ek screen par do ideas ki larai (Concept 8)
"Kam generic kehta hun, kuch nahin badalta"	Instruction kabhi fail nahin, kuch nahin badalti. Audit chala kar list fix (Concept 11)
"Picture bill ne hairan kiya"	Plan se pehle pictures banana shuru (Concepts 9 aur 15)
"AI aur main wazeh ghalati chook gaye"	Mukhtalif company AI se dekhwayein (Concept 12)
"Din ke aakhir Kimi K3 ulajhti aur mehngi"	Is raste conversation sirf aap tidy karte (Concepts 4 aur 15)
"Site live magar button kuch nahin karta"	Aakhri beat kisi cheez se connected nahin (Concepts 8 aur 11)
"Laptop par khoobsurat, visitors ke liye bhari"	Size limit, videos ke peeche still, pictures late load (Concept 11)
"Mere paanch pages paanch websites lagte"	Ek design.md sab ko govern (multi-page section)

Har hafte ek website roz ke aath concepts se behtar.

Asal cheez chunein. Apna CV page. Dost ki shop. Family business. School club. Aath qadam chala kar cost likhein.

Teesri website tak qadam qadam nahin, aap ka kaam lagte hain.

Aap ladder par kahan hain: acha hone ke aath marahil (kholne ko click)

Skill marahil mein barhti. Apna stage agla practice batata hai.

Marhala	Kaisa dikhta hai	Kahan sikhaya
0. Mindset	AI ki design aadatein, dekh kar check aur taste file mein samajhte hain.	Course ke oopar teen ideas
1. Pehli website online	Ek asal page, free pictures, aise address par live jo doosre ne phone par khola.	Concepts 2, 9, 10, 13
2. Taste loaded	Hallmark installed. Apne page ke maslon ki list parh kar sab fix.	Concepts 5 aur 11
3. Har baar story pehle	Final action samet kahani likhe aur agree baghair build nahin.	Concept 8
4. Checking khud chalti	Har build mein screenshots, audit aur automatic rules teenon.	Concept 11
5. Doosron ke liye build	Brand find/confirm, second opinion, client phone review, chaar boxes pricing.	Concepts 7, 12, 14
6. Process ek file	Poora process skill mein, doosra client waqai aadha waqt.	Concept 14 aur Part 6, Qadam 8
7. Process ek business	Clients, chaar boxes pricing, ek design system se multi-page sites, referrals.	Concepts 2 aur 14, plus multi-page section

Aksar log marhala 1 aur 2 ke darmiyan. Working pages publish aur clever prompts jama, taste file ek baar load kar ke hamesha kaam nahin.

Aaj jahan hain wahan se ek marhala charhein to course ki qeemat vasool.

---

Quick reference

15 concepts har ek ek line mein

1. AI slop maths hai, susti nahin. Har AI ka favorite look, kyun ke sab se aam seekhi cheez ka jawab. Anthropic ne Claude ko apni aadatein rokne ki file likhi.
2. Chaar hisse har site banate. Model, taste, media, host. Har faisla ek box, job pricing bhi.
3. Design ki behtareen AI overall behtareen nahin. Mukhtalif muqable. Blind comparison check, design leader ko.
4. Koi AI tool mein chal sakti. Claude Code settings mein address ya OpenCode list. /status se check, /model kabhi nahin. Behtareen AI kiraye ka taj; tool aur files aap ki.
5. Hallmark file mein taste. Chaar commands (build, audit, redesign, study), 58 checks, har baar mukhtalif page shape. Sab ke liye free.
6. Sites se seekhein, copy nahin. study kaam ki wajah design.md mein. Teen references, ek copy ki taraf.
7. Brand pehle sahi. Exact colors/fonts un ke saboot ke saath, phir client files se confirm. Brand colors rules, suggestions nahin.
8. Ek kahani, ek scroll. Build se pehle story, har screen idea, top par asal, ek jagah bold. Aakhri beat waqai kaam: WhatsApp link, form, ya chota program. Dead button nahin.
9. Pictures ke chaar raste. Asal photos free, free AI mein haath se quality ya automatic sahulat, cents mein dono, video asal paisa. Kahani shot list.
10. Phone main screen. Wohi kahani tall shape ke liye dobara film. Layout change jaan boojh kar.
11. Teen checkers design testable. Screenshots aankhein, audit taste list, automatic rules bunyad ki guarantee: readable contrast, keyboard use, mobile data par halka page.
12. Mukhtalif company AI se second opinion. AI apni aadatein nahin dekhti. Brief, design file, screenshots bhejein. Findings file mein.
13. Publishing do commands. vercel share preview, vercel --prod real. Phir client address aur findability: title, description, shared link card. Computer nahin live page check.
14. Clients ke saath chhe qadam. Likh kar agree, brand find/confirm, pictures se pehle story sell, phone review, chaar boxes pricing, dekh bhal ability handover.
15. Costs janein. Pictures se pehle price, conversations tidy, poore project ki qeemat seekhein.

Setup quick-ref (kholne ko click)

Kya karna hai	Claude Code	OpenCode
Kimi K3 chalayein	.claude/settings.json mein Moonshot env block, /status verify	/connect openrouter -> /models -> K3
Taste layer install	npx skills add Nutlope/hallmark, plus Anthropic frontend-design plugin	npx skills add Nutlope/hallmark
Session mein media	Higgsfield CLI/MCP, ya fetch aur APIs se Lane 1-2	Wohi
Render screenshot	Playwright screenshots setup karwayein	Wohi
Deploy	"Vercel se CLI ke zariye connect aur project deploy"	Wohi
K3 context dekhein	CLAUDE_CODE_AUTO_COMPACT_WINDOW ko 1048576, phir khud dekhein	TUI mein token readout

Ek decision tree mein 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 par 42 sawal

Seekha hua test karein. Har session 15 sawalon ka naya set.

Checking access...