Mag-ship gamit ang Claude CodeMula terminal-curious tungo sa sarili mong live na site
Magtrabaho gamit ang Claude CoworkIpasa ang mga totoong task sa AI na gumagana sa computer mo
Makuha ang Susunod Mong TrabahoTotoong job search kasama si Claude, simula hanggang offer
Claude DesignDesign na nakakakuha ng client, si Claude ang bumubuhat sa bigatLahat ng 9 courseMula sa wala tungo sa totoong site sa sarili mong domain — na hindi mukhang gawa ng AI.
Kayang-kaya ng lahat na magpagawa ng web page sa AI. Halos walang nakakakuha ng isang mukhang talagang dinisenyo, o isang nakakalabas sa chat window. Ito ang buong daan: desisyunan kung ano ang dapat gawin ng site, isulat muna ang mga salita, pumili ng hitsura bago ka magtayo, gawin ito sa Claude Code, claude.ai o Cowork, patakbuhin ang taste pass na pumapatay sa mga bakas ng AI, at ilabas ito nang live sa domain na pag-aari mo. Piliin ang track mo — portfolio, local business, product, o services — at sa iyo na ang apat.
Ano ang magagawa mo
Isang tapos at live na website na hindi ka mahihiyang ipadala — gawa sa loob ng isang hapon, sa kung anumang Claude ang ginagamit mo na.
Ang unang araw ang pinakamahirap, at kaya mong gawin ang unang araw sa tab na ito. Ngayon din.
Hindi mockup. Bawat isa ay galing sa anim na hakbang sa ibaba — buksan ang kahit alin nang full-screen.
Piliin kung saan mo ito patatakbuhin at kung ano ang ginagawa mo. Sa'yo ang lahat ng apat na track at puwede kang lumipat kahit kailan — walang naka-lock sa likod ng pinili mo.
Kung saan mo ito patatakbuhin
Kung ano ang ginagawa mo
Hakbang 01Nagbabago depende sa track mo
Ito ang unang patakbuhin, bago mo palapitin si Claude sa kahit isang linya ng design. Ang sampung minuto rito ang pumipigil sa iyong gawin ulit ang site nang tatlong beses.
Halimbawa · Input
Motion designer ako, 3 taon na, karamihan freelance. Gusto kong kunin ako ng mga studio para sa title sequence.
Halimbawa · Output
Isang pangungusap na nagsasabi kung para kanino ang site at ang iisang action na dapat nitong likhain, ang 4–6 na section ayon sa pagkakasunod, kung aling 3 trabaho ang mangunguna, at kung ano ang sinadya mong iwanan.
Isa kang portfolio director na nakasuri na ng libu-libong creative portfolio at kumuha ng tao mula rito. Siyasatin mo ang plano ko bago pa ako gumawa ng kahit ano. Sumagot ka sa wikang ginagamit ko sa pagsulat. ANO ANG GINAGAWA KO: [ANG CRAFT MO, AT GAANO NA KATAGAL] SINO ANG GUSTO KONG KUMUHA SA AKIN: [MGA STUDIO / CLIENT / ISANG EMPLOYER — MAGING ESPESIPIKO] ANG TRABAHONG PINAKA-IPINAGMAMALAKI KO: [2-4 NA PIYESA, TIG-ISANG LINYA] ANO ANG GUSTO KONG GAWIN NILA: [MAG-EMAIL SA AKIN / MAG-BOOK NG CALL / TINGNAN ANG CV KO] Kung may sagot na masyadong malabo para pag-designan, magtanong ka sa akin ng hanggang tatlong matalas na tanong, tapos magpatuloy. Ibigay mo: 1. ANG IISANG TRABAHO. Isang pangungusap: para kanino ang site na ito, at ang iisang action na dahilan ng pag-iral nito. Kung dalawang trabaho ang sinusubukan nitong gawin, sabihin mo at pilitin mo akong pumili. 2. ANG HIRING TEST. Ang tatlong bagay na hinahanap sa unang labinlimang segundo ng taong nagdedesisyon kung kukunin ako. Maging espesipiko sa craft ko, hindi pangkalahatang payo. 3. MGA SECTION, AYON SA PAGKAKASUNOD. Saklawin ang bawat item sa required list sa dulo ng prompt na ito, nakaayos para sa sitwasyon ko. Para sa bawat isa: ano ang dapat nitong patunayan, at halos gaano kalaking espasyo ang makukuha nito. Panatilihing nangingibabaw ang trabaho — ang listahan ay minimum, hindi imbitasyong ilibing ang tatlong proyekto sa ilalim ng walong block ng text. 4. ANG NANGUNGUNANG TRABAHO. Aling mga piyesa ang mauuna, at bakit ganoon ang pagkakasunod. Kung mas mahina ang isa sa mga piyesa ko kaysa sa iba, sabihin mong tanggalin ko — tatlong malakas na piyesa ang panalo sa anim na halu-halo, at ang pinakamahina ang nagtatakda ng antas ko. 5. ANO ANG IIWANAN. Pangalanan ang mga bagay na matutukso akong idagdag pero mas sisira lang sa lahat: ang skills bar chart, ang "about me" na talatang nagsisimula sa "Isa akong passionate na...", ang blog na may dalawang post, ang CV na walang humingi. Maging prangka. Sabihin mo ang hindi komportableng bagay tungkol sa plano ko sa halip na sang-ayunan ito. Mas mahalaga ang katumpakan kaysa sa pampalakas-loob. DAPAT NASA BAWAT SITE ANG MGA ITO, AT KALAHATI NITO ANG KULANG SA KARAMIHAN NG UNANG DRAFT. Dumaan ka sa listahan at sabihin, para sa bawat isa, kung ano ang laman nito sa AKING site — o kung bakit talagang hindi ito applicable: - HEADER. Ang pangalan (itaas-kaliwa), isang linyang tagline na nagsasabi kung ano ito, at isang primary nav na tumatalon sa mga section sa ibaba. Ang bisitang dumapo sa gitna ng page ay walang ideya kung nasaan siya kung wala ito. - HERO. Ano ito, para kanino, at ang iisang primary action — kitang-kita nang hindi nagsi-scroll. - ANG INAALOK. Ang mga service, product, o trabaho, kasama ang presyo o price range saanman may ganoon. - PATUNAY. Mga review, testimonial, credential, pangalan ng client, o numero. Kung wala pa akong kahit isa, sabihin mo nang diretso at sabihin kung anong tapat na kapalit ang gagamitin at paano ako makakakolekta ng totoong patunay sa loob ng isang buwan. Huwag kailanman mag-imbento ng kahit alin dito. - FAQ. Lima hanggang walong totoong tanong, sinagot nang diretso. Dito hinaharap ang mga pagtutol na tahimik na pumapatay sa isang inquiry — presyo, timing, "ginagawa n'yo ba ang X", at kung anuman ang totoong itinatanong ng mga bisita ko. - ABOUT. Sino ang nasa likod nito, may pangalan at may mukha. Ang site na walang tao ay nababasang parang shell. - CONTACT. Phone bilang tappable link, email, physical address kung mayroon, mapa o direksyon papunta, at ang oras ng bukas. Halos kalahati ng mga bumibili ay umaalis sa site na itinatago ang contact details nito. - FOOTER. Pangalan, address, phone at oras ng bukas na inulit, mga social link, at link sa privacy policy kung may kumukuha ng data sa page. - STRUCTURED DATA. JSON-LD sa head para mabasa ng mga search engine at AI assistant ang negosyo, hindi lang ang mga salita: LocalBusiness para sa pisikal na lugar, Person para sa portfolio, Product o SoftwareApplication para sa product, ProfessionalService para sa mga service. Para sa pisikal na lugar, dapat eksaktong tugma ang pangalan, address at phone sa Google Business Profile ko. - ANG WINDOW TITLE. Nagsisimula sa pangalan. Tapusin sa isang-pangungusap na brief sa sarili nitong linya, para mai-paste ko ito sa susunod na hakbang.
Hakbang 02Nagbabago depende sa track mo
I-paste ang brief mula sa hakbang 1. Gawin ito BAGO ang anumang design — ang layout na itinayo sa paligid ng totoong salita ay kasya; ang salitang ibinuhos sa tapos nang layout ay hindi kailanman kasya.
Halimbawa · Input
Ang isang-pangungusap na brief mula sa hakbang 1, at ang magagaspang na notes tungkol sa bawat proyekto.
Halimbawa · Output
Bawat linya ng text na kailangan ng site — headline, mga blurb ng proyekto, ang about na talata, ang contact line — nakasulat sa tamang haba at handang ilagay.
Hakbang 03Nagbabago depende sa track mo
Ang hakbang na nilalaktawan ng lahat, at ang dahilan kung bakit mukhang generated ang site nila. Patakbuhin ito habang hawak mo ang copy mo at itago ang output — ito ang brief na ipe-paste mo sa bawat build.
Halimbawa · Input
Ang copy mo mula sa hakbang 2, at dalawa o tatlong site na hinahangaan mo ang itsura.
Halimbawa · Output
Isang maikling nakasulat na direction — mga typeface, limang-kulay na palette na may hex code, spacing, kung paano ipinapakita ang trabaho — at kung ano ang tahasang ipinagbabawal.
Hakbang 04Nagbabago depende sa kung saan mo pinapatakbo
Patakbuhin ito sa loob ng walang lamang folder sa Claude Code. Nagtatayo ito ng totoong proyektong pag-aari mo, nasa makina mo ang mga file at may version history mula sa unang commit.
Halimbawa · Input
Ang copy mo mula sa hakbang 2 at ang design direction mo mula sa hakbang 3.
Halimbawa · Output
Isang totoong proyekto sa makina mo — index.html, styles.css, isang git repo na may malilinis na commit — ginawa kada section at nape-preview sa browser mo.
Hakbang 05Pareho para sa lahat
Patakbuhin ito sa tapos nang build, sa parehong chat o session. Ito ang hakbang na naghihiwalay sa site mo mula sa bawat AI-built na page — huwag mo itong laktawan dahil lang 'mukhang okay naman' na ang site.
Halimbawa · Input
Ang site na ginawa mo, at ang screenshot nito kung nakakakita ng image ang Claude mo.
Halimbawa · Output
Isang nakaranggong listahan ng mga bagay na nagpapamukha ritong generated, bawat isa ay may espesipikong ayos — tapos inilalapat ang mga ayos nang isa-isa para mahusgahan mo ang bawat isa.
Hakbang 06Nagbabago depende sa kung saan mo pinapatakbo
Patakbuhin ito sa Claude Code kapag handa na ang site. Pinapatakbo nito ang pre-flight, inilalagay ka sa totoong host na may automatic na deploy, tapos ikinakabit ang domain mo.
Halimbawa · Input
Ang tapos mong proyekto, at kung may sarili ka nang domain.
Halimbawa · Output
Ang site na live sa totoong host, awtomatikong nagde-deploy sa bawat push, nakadetalye ang mga domain record at naitala ang mga pre-flight check.
Bagay ang pack na ito sa
Ang mga pack ang mabilisang panalo. Ang buong course ang magtuturo sa'yo na gawin ito — at lahat ng iba pa — nang mag-isa.
Lumalim pa
May buong course sa likod ng pack na ito
Patakbuhin ang Araw Mo sa mga Terminal
Binibigyan ka ng Gumawa ng Sariling Website ng mga prompt. Binibigyan ka ng course ng sistemang bumabalot sa mga iyon — at ang pagbili ng pack na ito ay magbabawas ng $5 sa course.
