0:00

26:09

Build $10,000 Websites using Claude Code (Ultimate Guide)

Metics Media·26:09·Technology·B2

Chương · 8

Chương 1·What a $10,000 Website Means

Hiển thị

Tiếng ViệtAuto-scroll

0:00

- In this video, I'm going to show you how to build a $10,000 website using Claude Code.

- Trong video này, tôi sẽ chỉ cho bạn cách xây dựng một trang web trị giá 10.000 đô la bằng Claude Code.

0:06

These sites you're seeing were all built with Claude Code, and by the end of this video, yours is going to be one of them.

Những trang web bạn đang thấy đều được xây dựng bằng Claude Code, và đến cuối video này, trang của bạn cũng sẽ là một trong số đó.

0:11

We'll install Claude Code, level it up with two design skills, write one prompt, polish the result, and put it on a real domain.

Chúng ta sẽ cài đặt Claude Code, nâng cấp nó với hai kỹ năng thiết kế, viết một câu lệnh, trau chuốt kết quả, và đưa nó lên một tên miền thật.

0:19

The site is going to look like the work of a freelance developer charging $10,000 and nobody who visits it is going to know an AI made it.

Trang web sẽ trông như tác phẩm của một lập trình viên tự do tính giá 10.000 đô la và không ai truy cập vào sẽ biết là do AI tạo ra.

0:27

Stick around for chapter seven especially.

Hãy ở lại đặc biệt cho chương bảy.

0:29

That's where the cursor effects and motion design take the build from professional to expensive.

Đó là nơi các hiệu ứng con trỏ và thiết kế chuyển động đưa sản phẩm từ chuyên nghiệp lên đắt giá.

0:34

And by the very end, I'll show you the cheapest way to put it live on the internet at a custom domain, but first, what exactly is Claude Code?

Và đến cuối cùng, tôi sẽ chỉ cho bạn cách rẻ nhất để đưa nó lên internet trực tuyến với một tên miền tùy chỉnh, nhưng trước tiên, Claude Code chính xác là gì?

0:42

Claude Code is an AI coding assistant.

Claude Code là một trợ lý lập trình AI.

0:45

You describe a website to it in natural language and it writes the code for you while you watch.

Bạn mô tả một trang web cho nó bằng ngôn ngữ tự nhiên và nó viết mã cho bạn trong khi bạn xem.

0:49

We're using the Claude Code desktop app today because it gives you everything you need in one window with no extra developer setup.

Hôm nay chúng ta dùng ứng dụng desktop Claude Code vì nó cung cấp mọi thứ bạn cần trong một cửa sổ mà không cần thiết lập lập trình viên thêm.

0:56

Before we build anything, I want to define what a $10,000 website actually looks like.

Trước khi xây dựng bất cứ thứ gì, tôi muốn định nghĩa một trang web trị giá 10.000 đô la thực sự trông như thế nào.

1:02

So I asked Claude, there are eight things that separate a $10,000 website from a $200 one.

Vì vậy tôi đã hỏi Claude, có tám điều phân biệt một trang web 10.000 đô la với một trang 200 đô la.

1:09

Point of view, typography, colour, hierarchy, imagery, motion, mobile, and the invisible stuff that makes a site feel fast and finished.

Quan điểm, kiểu chữ, màu sắc, thứ bậc, hình ảnh, chuyển động, di động, và những thứ vô hình khiến một trang web cảm giác nhanh và hoàn thiện.

1:23

Those eight items fall into three groups: taste, substance and felt quality.

Tám mục đó rơi vào ba nhóm: gu thẩm mỹ, nội dung và chất lượng cảm nhận.

1:30

We're hitting all eight today.

Hôm nay chúng ta sẽ chạm đến cả tám.

1:31

Here's why Claude Code can hit a $10,000 bar and why most no-code website builders can't.

Đây là lý do tại sao Claude Code có thể đạt chuẩn 10.000 đô la và tại sao hầu hết các công cụ xây dựng website không cần mã đều không thể.

1:37

When you use a tool like Wix or Squarespace, you start with a template and whatever you build ends up looking like every other site that started from that template.

Khi bạn dùng một công cụ như Wix hay Squarespace, bạn bắt đầu với một mẫu và bất cứ thứ gì bạn xây dựng đều trông giống mọi trang web khác bắt đầu từ mẫu đó.

1:46

Claude Code doesn't work that way.

Claude Code không hoạt động như vậy.

1:48

It writes the code for your site from scratch based on what you describe, so you can get a completely custom result without ever having to learn to code yourself.

Nó viết mã cho trang web của bạn từ đầu dựa trên những gì bạn mô tả, vì vậy bạn có thể có được kết quả hoàn toàn tùy chỉnh mà không bao giờ phải tự học lập trình.

1:57

On top of that, Claude can install design skills that level up everything it makes.

Thêm vào đó, Claude có thể cài đặt các kỹ năng thiết kế để nâng cấp mọi thứ nó tạo ra.

2:02

You can drop in pre-made components from libraries online, the kind of things that used to require a real developer, and you can keep iterating with Claude on every detail until the site actually feels expensive.

Bạn có thể thêm vào các thành phần làm sẵn từ các thư viện trực tuyến, những thứ trước đây từng cần một lập trình viên thực thụ, và bạn có thể tiếp tục tinh chỉnh với Claude ở từng chi tiết cho đến khi trang web thực sự cảm giác đắt giá.

2:13

We're going to do all of that today.

Hôm nay chúng ta sẽ làm tất cả những điều đó.

2:15

The first step is getting Claude Code set up on your computer.

Bước đầu tiên là thiết lập Claude Code trên máy tính của bạn.

2:20

Go to claude.com using the link of the description below and pick the pro plan.

Truy cập claude.com bằng liên kết trong phần mô tả bên dưới và chọn gói pro.

2:25

Right now, as I'm recording this, it's only $20 per month and that's going to cover everything we need for this video.

Ngay bây giờ, khi tôi đang ghi hình điều này, nó chỉ 20 đô la mỗi tháng và thế là đủ cho mọi thứ chúng ta cần trong video này.

2:31

Get yourself signed up and I'll skip past the boring stuff.

Hãy tự đăng ký và tôi sẽ bỏ qua những phần nhàm chán.

2:35

Once you're logged in, in the bottom left corner of the page, click the download icon, navigate to the Claude Code section, download the desktop app version, then open the file to run the installer.

Khi bạn đã đăng nhập, ở góc dưới bên trái của trang, nhấp vào biểu tượng tải xuống, điều hướng đến phần Claude Code, tải phiên bản ứng dụng desktop, sau đó mở tệp để chạy trình cài đặt.

2:49

Once you get it installed, open the desktop app, then sign in.

Khi bạn cài đặt xong, mở ứng dụng desktop, rồi đăng nhập.

2:53

At this point I need to mention, depending on when you watch this video, the actual software interface might look different for you than it does for me here.

Đến đây tôi cần lưu ý, tùy thuộc vào thời điểm bạn xem video này, giao diện phần mềm thực tế có thể trông khác với những gì bạn thấy ở tôi đây.

3:01

Claude gets updated regularly, so if things don't look the exact same, don't panic.

Claude được cập nhật thường xuyên, nên nếu mọi thứ không trông giống hệt, đừng hoảng.

3:06

Just try to understand the general concepts I'm explaining and apply them to how the software looks when you're using it.

Chỉ cần cố gắng hiểu các khái niệm chung tôi đang giải thích và áp dụng chúng vào cách phần mềm trông như thế nào khi bạn sử dụng.

3:11

When you get signed in, switch from chat mode to code mode.

Khi bạn đăng nhập, hãy chuyển từ chế độ chat sang chế độ code.

3:15

In my app, that tab is available in the upper left.

Trong ứng dụng của tôi, tab đó có ở phía trên bên trái.

3:19

Alternatively, you can also press Command 3 on your keyboard on a Mac or Ctrl 3 on Windows to switch to code mode.

Ngoài ra, bạn cũng có thể nhấn Command 3 trên bàn phím nếu dùng Mac hoặc Ctrl 3 trên Windows để chuyển sang chế độ code.

3:26

Claude Code works best when it has its own folder to live in.

Claude Code hoạt động tốt nhất khi nó có thư mục riêng để ở.

3:30

Create one anywhere on your computer, then click the folder select button near the chat box and select your new folder to open it inside the app.

Tạo một thư mục ở bất cứ đâu trên máy tính của bạn, sau đó nhấp vào nút chọn thư mục gần hộp chat và chọn thư mục mới của bạn để mở nó trong ứng dụng.

3:39

That folder is going to be your workspace for this project from now on.

Thư mục đó sẽ là không gian làm việc của bạn cho dự án này từ giờ trở đi.

3:43

Alright, that's the setup done.

Được rồi, phần thiết lập đã xong.

3:45

Now we're going to level Claude up by installing two skills.

Bây giờ chúng ta sẽ nâng cấp Claude bằng cách cài đặt hai kỹ năng.

3:49

Out of the box, Claude is a general purpose AI, it knows a lot about a lot of things, but its default design output is just okay.

Mặc định, Claude là một AI đa dụng, nó biết nhiều về nhiều thứ, nhưng kết quả thiết kế mặc định của nó chỉ ở mức ổn.

3:59

It tends to reach for the same fonts, the same colours, and the same predictable layouts you've seen on every other AI-generated website.

Nó có xu hướng chọn cùng những phông chữ, cùng những màu sắc, và cùng những bố cục dễ đoán mà bạn đã thấy trên mọi trang web do AI tạo khác.

4:07

This is why a lot of AI websites end up looking generic.

Đây là lý do tại sao nhiều trang web AI cuối cùng trông chung chung.

4:10

Skills fix that.

Các kỹ năng khắc phục điều đó.

4:12

A skill is like an instruction manual for Claude, a text file that levels up Claude's knowledge in one specific area.

Một kỹ năng giống như một cuốn sách hướng dẫn cho Claude, một tệp văn bản nâng cao kiến thức của Claude trong một lĩnh vực cụ thể.

4:18

You install it once and Claude uses it forever.

Bạn cài đặt nó một lần và Claude sử dụng nó mãi mãi.

4:22

We're installing two skills today and both of them are free.

Hôm nay chúng ta cài đặt hai kỹ năng và cả hai đều miễn phí.

4:25

The first skill we're installing is called Front End Design.

Kỹ năng đầu tiên chúng ta cài đặt có tên là Front End Design.

4:28

It's built by Anthropic, the company behind Claude.

Nó được xây dựng bởi Anthropic, công ty đứng sau Claude.

4:31

It runs in the background and it quietly makes Claude smarter at design.

Nó chạy ở chế độ nền và âm thầm làm cho Claude thông minh hơn về thiết kế.

4:36

What it actually does is ban the most overused fonts on the internet and push Claude toward bold design direction instead of generic AI output.

Điều nó thực sự làm là cấm những phông chữ bị lạm dụng nhiều nhất trên internet và đẩy Claude hướng tới một định hướng thiết kế táo bạo thay vì kết quả AI chung chung.

4:45

To install it, grab the front end design link from the description below and paste it into Claude Code with the message, "Install this skill," then send the message and let it run.

Để cài đặt nó, hãy lấy liên kết thiết kế front end từ phần mô tả bên dưới và dán vào Claude Code với tin nhắn, "Install this skill," sau đó gửi tin nhắn và để nó chạy.

4:57

Allow the edits when it asks and install it globally.

Cho phép các chỉnh sửa khi nó hỏi và cài đặt nó trên toàn cục.

5:01

The second skill is community built.

Skill thứ hai được cộng đồng xây dựng.

5:03

It's called UI UX Pro Max.

Nó được gọi là UI UX Pro Max.

5:07

As you can see on screen, it ships with 57 UI styles, 95 colour palettes and 56 font pairings.

Như bạn có thể thấy trên màn hình, nó đi kèm với 57 phong cách UI, 95 bảng màu và 56 cặp font chữ.

5:15

Unlike the first skill, this one we call directly when we want a big design intervention, and that's exactly how we're going to build our site today.

Không giống như skill đầu tiên, cái này chúng ta gọi trực tiếp khi muốn một can thiệp thiết kế lớn, và đó chính xác là cách chúng ta sẽ xây dựng trang web của mình hôm nay.

5:24

To install it, grab the UI UX Pro Max link from the description below and paste it into Claude Code with the message: "Install this plugin using NPM." That exact phrasing matters because it's what gets it to install cleanly, using the terminal.

Để cài đặt nó, hãy lấy liên kết UI UX Pro Max từ phần mô tả bên dưới và dán vào Claude Code với tin nhắn: "Install this plugin using NPM." Cách diễn đạt chính xác đó rất quan trọng vì đó là điều giúp nó cài đặt sạch sẽ, sử dụng terminal.

5:40

Allow the edits when it asks and install it globally.

Cho phép các chỉnh sửa khi nó hỏi và cài đặt nó trên toàn cục.

5:44

Now there's one last setup move before we start building.

Bây giờ có một bước thiết lập cuối cùng trước khi chúng ta bắt đầu xây dựng.

5:47

Click the mode selector in the bottom left under your chat and switch it to auto mode.

Nhấp vào bộ chọn chế độ ở góc dưới bên trái dưới cửa sổ chat của bạn và chuyển nó sang chế độ auto.

5:53

This lets Claude work without stopping to ask for permission at every step.

Điều này cho phép Claude làm việc mà không dừng lại để xin phép ở mỗi bước.

5:57

With mode on and both skills installed, we're ready to write the prompt that builds the site, but there's one more thing worth talking about first.

Với chế độ đã bật và cả hai skill đã được cài đặt, chúng ta đã sẵn sàng viết prompt để xây dựng trang web, nhưng có một điều nữa đáng để nói đến trước tiên.

6:07

The other big thing that separates a great result from a mediocre one is the brief you give Claude.

Một điều lớn khác tạo nên sự khác biệt giữa kết quả tuyệt vời và kết quả tầm thường là bản tóm tắt bạn đưa cho Claude.

6:13

The more specific you are, the better the result.

Bạn càng cụ thể, kết quả càng tốt.

6:15

If you already know exactly what you want, you can just describe it and that's what I did for this build, but describing visual taste in words is hard, especially if you're newer to design.

Nếu bạn đã biết chính xác mình muốn gì, bạn chỉ cần mô tả nó và đó là những gì tôi đã làm cho bản build này, nhưng việc mô tả gu thẩm mỹ thị giác bằng lời rất khó, đặc biệt nếu bạn mới làm quen với thiết kế.

6:27

You don't speak the design language yet and that makes it tough to tell Claude what you want.

Bạn chưa nói được ngôn ngữ thiết kế và điều đó khiến bạn khó nói cho Claude biết bạn muốn gì.

6:32

If you're in that spot, references are your shortcut.

Nếu bạn đang ở trong tình huống đó, các tài liệu tham khảo là lối tắt của bạn.

6:36

References are just screenshots of sites you like that you give to Claude so it can match the visual style.

Tài liệu tham khảo chỉ là ảnh chụp màn hình của những trang web bạn thích mà bạn đưa cho Claude để nó có thể khớp với phong cách thị giác.

6:42

It's a lot easier to show Claude what you want than to describe it.

Việc cho Claude thấy bạn muốn gì dễ dàng hơn nhiều so với việc mô tả nó.

6:46

References are also useful for refining your own direction before you commit.

Tài liệu tham khảo cũng hữu ích để tinh chỉnh hướng đi của riêng bạn trước khi bạn cam kết.

6:50

You scroll, you find things you like and you start to understand what your taste actually is.

Bạn cuộn, bạn tìm thấy những thứ bạn thích và bạn bắt đầu hiểu gu thẩm mỹ thực sự của mình là gì.

6:55

I'll share a few of my favourite websites with you that you can draw ideas from.

Tôi sẽ chia sẻ với bạn một vài trang web yêu thích của tôi mà bạn có thể lấy ý tưởng.

6:59

This is Dribble.

Đây là Dribble.

7:01

It's where designers post their work and it's full of inspiration for almost any style of website.

Đây là nơi các nhà thiết kế đăng tác phẩm của họ và nó đầy cảm hứng cho hầu hết mọi phong cách trang web.

7:06

This is Awards.

Đây là Awards.

7:08

These are sites that have won industry design awards, so it's a great place to browse high quality designs.

Đây là những trang web đã giành được giải thưởng thiết kế trong ngành, vì vậy đây là nơi tuyệt vời để duyệt qua các thiết kế chất lượng cao.

7:14

And you can always just search Pinterest for the kind of site you want to build.

Và bạn luôn có thể chỉ cần tìm kiếm trên Pinterest loại trang web bạn muốn xây dựng.

7:18

It pulls examples from everywhere.

Nó lấy ví dụ từ khắp mọi nơi.

7:20

Here I searched for modern website design restaurant.

Ở đây tôi đã tìm kiếm modern website design restaurant.

7:24

I've included links to all of these in the description below.

Tôi đã bao gồm liên kết đến tất cả những thứ này trong phần mô tả bên dưới.

7:27

Find three to five sites you like and save screenshots of them.

Tìm ba đến năm trang web bạn thích và lưu ảnh chụp màn hình của chúng.

7:31

You're not copying these sites.

Bạn không sao chép những trang web này.

7:32

Instead, you're showing Claude what you like and how you want your own design to end up.

Thay vào đó, bạn đang cho Claude thấy những gì bạn thích và cách bạn muốn thiết kế của riêng mình kết thúc.

7:38

For my build, I'm creating a website for a restaurant in Seattle.

Đối với bản build của tôi, tôi đang tạo một trang web cho một nhà hàng ở Seattle.

7:42

Here's the prompt I used.

Đây là prompt tôi đã sử dụng.

7:43

This is the whole video in a single sentence.

Đây là toàn bộ video trong một câu.

7:46

/ui-ux-pro-max is how we call the design skill we just installed.

/ui-ux-pro-max là cách chúng ta gọi skill thiết kế mà chúng ta vừa cài đặt.

7:54

Then we type out the brief for the AI.

Sau đó chúng ta gõ ra bản tóm tắt cho AI.

7:57

The trick to making this work is this last line, "Ask me clarifying questions." That's the line that makes Claude stop and think before it starts building.

Mẹo để làm cho điều này hoạt động là dòng cuối cùng này, "Ask me clarifying questions." Đó là dòng khiến Claude dừng lại và suy nghĩ trước khi bắt đầu xây dựng.

8:07

Here Claude comes back with seven questions.

Ở đây Claude quay lại với bảy câu hỏi.

8:10

They cover the restaurant name, the style direction, which sections we want, who's writing the content, the tech stack, the animation level, and anything else we wanna specify.

Chúng bao gồm tên nhà hàng, hướng phong cách, những phần chúng ta muốn, ai viết nội dung, tech stack, mức độ animation, và bất cứ điều gì khác chúng ta muốn chỉ định.

8:20

And here's the part that really matters.

Và đây là phần thực sự quan trọng.

8:23

Claude offers three style directions to choose from, a Manhattan steakhouse with dark moody energy, a Pacific Northwest modern look, or a classic old school chophouse.

Claude đưa ra ba hướng phong cách để chọn, một steakhouse Manhattan với năng lượng tối tăm đầy tâm trạng, một diện mạo hiện đại Pacific Northwest, hoặc một chophouse cổ điển kiểu cũ.

8:34

It's giving you the menu of style options.

Nó đang đưa cho bạn menu các lựa chọn phong cách.

8:36

I picked dark moody luxury, but with Pacific Northwest grounding so it doesn't look like a Manhattan steakhouse.

Tôi đã chọn sang trọng tối tăm đầy tâm trạng, nhưng với nền tảng Pacific Northwest để nó không trông giống một steakhouse Manhattan.

8:43

Five sections total, no gallery, no booking system, just a single page that scrolls all the way through.

Tổng cộng năm phần, không có gallery, không có hệ thống đặt bàn, chỉ một trang đơn cuộn xuyên suốt.

8:50

This is the most important moment in the entire build.

Đây là khoảnh khắc quan trọng nhất trong toàn bộ bản build.

8:53

The answers you give here become the entire site.

Những câu trả lời bạn đưa ra ở đây trở thành toàn bộ trang web.

8:57

The more specific you are at this stage, the less you'll have to fight Claude later to make revisions.

Bạn càng cụ thể ở giai đoạn này, bạn càng ít phải đấu tranh với Claude sau này để thực hiện các sửa đổi.

9:03

Really take your time to answer the questions thoughtfully.

Thực sự hãy dành thời gian của bạn để trả lời các câu hỏi một cách chu đáo.

9:06

Then send to watch the magic begin.

Sau đó gửi đi để xem điều kỳ diệu bắt đầu.

9:10

Now, Claude reads the brief and it takes about three minutes before it writes a single line of code.

Bây giờ, Claude đọc bản tóm tắt và mất khoảng ba phút trước khi nó viết một dòng mã nào.

9:16

Then it spends another four or five minutes or so actually building.

Sau đó nó dành thêm khoảng bốn hoặc năm phút để thực sự xây dựng.

9:20

So I'll skip ahead to the fun part, the reveal.

Vậy nên tôi sẽ tua nhanh đến phần thú vị, phần tiết lộ.

9:24

And there it is.

Và đây rồi.

9:26

This is already better than most AI website demos I've seen and we haven't even started polishing yet.

Cái này đã tốt hơn hầu hết các bản demo website AI mà tôi từng thấy và chúng ta thậm chí còn chưa bắt đầu trau chuốt.

9:32

So how does this stack up against our $10,000 website checklist?

Vậy cái này so với danh sách kiểm tra website 10.000 đô của chúng ta thì thế nào?

9:37

Let's start with point of view.

Hãy bắt đầu với quan điểm.

9:38

Look at the brief we gave Claude.

Nhìn vào bản tóm tắt mà chúng ta đã đưa cho Claude.

9:40

We had a real direction in mind when we answered its questions, not just a mood board.

Chúng ta đã có một định hướng thực sự trong đầu khi trả lời các câu hỏi của nó, không chỉ là một bảng tâm trạng.

9:44

Then there's typography.

Tiếp theo là typography.

9:46

Claude picked Fraunces for the headlines and Inter for the body.

Claude chọn Fraunces cho tiêu đề và Inter cho phần nội dung.

9:50

Now we'll swap out Inter later because it's one of the most overused AI fonts on the internet right now.

Giờ chúng ta sẽ thay Inter sau vì nó là một trong những font AI bị lạm dụng nhiều nhất trên internet hiện nay.

9:55

For colour, Claude landed on five hex values: near black, warm cream, oxblood, brass, and slate.

Về màu sắc, Claude chọn năm giá trị hex: gần đen, kem ấm, đỏ nâu, đồng thau và xám đá.

10:03

There are no rainbow palettes here.

Ở đây không có bảng màu cầu vồng.

10:06

Restraint with colour is what signals quality.

Sự tiết chế với màu sắc là thứ báo hiệu chất lượng.

10:09

Then there's hierarchy.

Tiếp theo là thứ bậc.

10:10

Look at how this section is laid out.

Nhìn vào cách phần này được bố trí.

10:12

The city name is huge, the address is medium sized and the room description is small.

Tên thành phố rất lớn, địa chỉ cỡ trung bình và mô tả phòng thì nhỏ.

10:17

That's not random sizing.

Đó không phải là kích thước ngẫu nhiên.

10:18

It's telling your eye what to read first, second, and third.

Nó đang chỉ cho mắt bạn biết đọc gì trước, thứ hai và thứ ba.

10:22

Without that, a site feels flat and hard to scan.

Không có điều đó, một trang web sẽ có cảm giác phẳng lì và khó quét.

10:26

Take a look at the copy too.

Hãy nhìn vào phần nội dung chữ nữa.

10:28

Dry-Aged Ribeye, 16 ounce, 60-day, hearth-fired.

10:34

That's not generic AI text.

Đó không phải là văn bản AI chung chung.

10:36

That's a restaurant copy that reads like a real chef wrote it.

Đó là nội dung của một nhà hàng đọc như thể một đầu bếp thực thụ viết ra.

10:39

We're going to come back to this in chapter seven.

Chúng ta sẽ quay lại vấn đề này ở chương bảy.

10:42

Alright, that's four boxes checked.

Được rồi, vậy là đã đánh dấu bốn ô.

10:44

We've still got four to go, and the next ones are going to need a bit more work.

Chúng ta vẫn còn bốn ô nữa, và những ô tiếp theo sẽ cần thêm chút công sức.

10:48

Number five on the checklist is imagery.

Mục số năm trong danh sách kiểm tra là hình ảnh.

10:50

This is one pillar Claude can't fully solve on its own.

Đây là một trụ cột mà Claude không thể tự giải quyết hoàn toàn.

10:53

You're going to have to bring some assets yourself.

Bạn sẽ phải tự mang theo một số tài nguyên.

10:56

The best thing you can have on a premium website is custom photography or custom graphics, work that's been shot or designed specifically for your brand.

Điều tốt nhất bạn có thể có trên một website cao cấp là nhiếp ảnh tùy chỉnh hoặc đồ họa tùy chỉnh, tác phẩm được chụp hoặc thiết kế riêng cho thương hiệu của bạn.

11:05

If you've got that, great, drop it into your project folder and you're set.

Nếu bạn có những thứ đó, tuyệt vời, hãy thả nó vào thư mục dự án của bạn và bạn đã sẵn sàng.

11:10

Just tell Claude what and where it is and what to do with it.

Chỉ cần nói cho Claude biết đó là gì, ở đâu và làm gì với nó.

11:14

But many people don't have a professional photo shoot budget.

Nhưng nhiều người không có ngân sách cho một buổi chụp ảnh chuyên nghiệp.

11:17

So the next best thing is AI image and video generation.

Vậy nên lựa chọn tốt nhất tiếp theo là tạo hình ảnh và video bằng AI.

11:21

The tools are good enough now that used right, nobody can tell the difference.

Các công cụ giờ đã đủ tốt đến mức nếu dùng đúng cách, không ai có thể nhận ra sự khác biệt.

11:26

For a single image ChatGPT is the fastest path, if you've got a subscription already.

Với một hình ảnh đơn lẻ, ChatGPT là con đường nhanh nhất, nếu bạn đã có đăng ký.

11:31

Its latest image model is excellent for photoreal work, but there's a catch.

Mô hình hình ảnh mới nhất của nó rất xuất sắc cho công việc tả thực, nhưng có một vấn đề.

11:37

ChatGPT can't make video, so if your site needs any kind of animation like the hero scroll effect I'm about to build, ChatGPT alone won't get you there.

ChatGPT không thể tạo video, nên nếu trang web của bạn cần bất kỳ loại hoạt ảnh nào như hiệu ứng cuộn hero mà tôi sắp xây dựng, chỉ ChatGPT thôi sẽ không đưa bạn tới đích.

11:47

That's where aggregator tools come in.

Đó là lúc các công cụ tổng hợp phát huy tác dụng.

11:49

These tools give you access to every major image and video generation model from one tab.

Những công cụ này cho bạn quyền truy cập vào mọi mô hình tạo hình ảnh và video lớn từ một tab.

11:55

The one I use is 11ElevenLabs.

Cái tôi dùng là 11ElevenLabs.

11:57

11ElevenLabs is a paid service, but their plans are reasonable and if you use the 11ElevenLabs link in the description below, you'll get 50% off your first month of the creator plan, which gets you access to everything I'm about to demonstrate.

11ElevenLabs là một dịch vụ trả phí, nhưng các gói của họ khá hợp lý và nếu bạn dùng liên kết 11ElevenLabs trong phần mô tả bên dưới, bạn sẽ được giảm 50% cho tháng đầu tiên của gói creator, giúp bạn truy cập mọi thứ tôi sắp trình diễn.

12:09

Inside 11ElevenLabs here, I generate an image with ChatGPT's image model.

Trong 11ElevenLabs ở đây, tôi tạo một hình ảnh bằng mô hình hình ảnh của ChatGPT.

12:15

Once that renders, I'll pick one of the four options and then drop that exact image in as the starting frame for Google's Veo 3.1 to turn it into a video.

Khi nó kết xuất xong, tôi sẽ chọn một trong bốn tùy chọn và sau đó thả chính xác hình ảnh đó vào làm khung bắt đầu để Google Veo 3.1 biến nó thành video.

12:26

Then once I get the output for that, I'll select one of the options, then upscale the result with Topaz, all without leaving the tab.

Sau đó khi tôi có kết quả cho việc đó, tôi sẽ chọn một trong các tùy chọn, rồi nâng cấp kết quả bằng Topaz, tất cả mà không cần rời khỏi tab.

12:35

That's the workflow we're using to create the hero asset for our steakhouse here.

Đó là quy trình chúng ta đang dùng để tạo tài nguyên hero cho nhà hàng bít tết của mình ở đây.

12:39

Here's the trick that makes this fast.

Đây là mẹo giúp việc này nhanh chóng.

12:41

You don't have to write the image prompt yourself.

Bạn không cần phải tự viết prompt hình ảnh.

12:44

Claude already knows your project, so you can ask Claude to write the image generation prompt for you.

Claude đã biết dự án của bạn, nên bạn có thể nhờ Claude viết prompt tạo hình ảnh cho bạn.

12:49

You paste that prompt into your image generator and you get something that matches your brand and your existing design aesthetic on the first try.

Bạn dán prompt đó vào trình tạo hình ảnh của mình và bạn sẽ có được thứ phù hợp với thương hiệu và phong cách thiết kế hiện có của bạn ngay lần thử đầu tiên.

12:57

Once you have your asset, drop it into your project folder and Claude has everything it needs.

Khi bạn đã có tài nguyên của mình, hãy thả nó vào thư mục dự án và Claude có mọi thứ nó cần.

13:02

Okay, that covers imagery, but what about when you wanna level up visuals on your site that aren't photos or videos?

Được rồi, vậy là đã xong phần hình ảnh, nhưng còn khi bạn muốn nâng cấp hình ảnh trên trang web của mình mà không phải là ảnh hay video thì sao?

13:08

That's where 21st.dev comes in.

Đó là lúc 21st.dev xuất hiện.

13:12

21st.dev is a library of pre-made web components, animations, scroll effects, buttons and more, all built by real developers and all free to grab.

21st.dev là một thư viện các thành phần web, hoạt ảnh, hiệu ứng cuộn, nút và nhiều thứ khác được tạo sẵn, tất cả đều do các nhà phát triển thực thụ xây dựng và đều miễn phí để lấy.

13:24

You can use 21st.dev two ways.

Bạn có thể sử dụng 21st.dev theo hai cách.

13:27

You can browse around for visual inspiration, if you're not sure what you want to add to your site or if you find a specific design or element you like, you can copy a prompt that tells Claude exactly how to recreate it in your project.

Bạn có thể duyệt qua để tìm cảm hứng thị giác, nếu bạn không chắc mình muốn thêm gì vào trang web của mình, hoặc nếu bạn tìm thấy một thiết kế hay yếu tố cụ thể mà bạn thích, bạn có thể sao chép một prompt hướng dẫn Claude chính xác cách tái tạo nó trong dự án của bạn.

13:40

For our build, I want to build something visually striking for the hero section, a really cool image effect that makes the site feel premium right when someone lands on it.

Đối với bản dựng của chúng ta, tôi muốn xây dựng một thứ gì đó gây ấn tượng mạnh về mặt thị giác cho phần hero, một hiệu ứng hình ảnh thực sự thú vị khiến trang web cảm giác cao cấp ngay khi ai đó truy cập vào.

13:49

Scrolling through 21st.dev here, I find a smooth scroll image component I like, so I'll click the copy prompt button on it, and back in Claude Code I'll paste that prompt in, add the stake video we just generated and tell Claude to use the component to build out the hero.

Cuộn qua 21st.dev ở đây, tôi tìm thấy một thành phần hình ảnh cuộn mượt mà tôi thích, nên tôi sẽ nhấp vào nút sao chép prompt trên đó, và quay lại Claude Code tôi sẽ dán prompt đó vào, thêm video stake mà chúng ta vừa tạo và bảo Claude sử dụng thành phần đó để xây dựng phần hero.

14:08

Now watch what Claude does next.

Bây giờ hãy xem Claude làm gì tiếp theo.

14:10

It pushes back.

Nó phản đối.

14:12

The 21st.dev component I picked is for a system called React.

Thành phần 21st.dev mà tôi chọn là cho một hệ thống gọi là React.

14:16

React is a more complex setup than what we're using here.

React là một thiết lập phức tạp hơn những gì chúng ta đang sử dụng ở đây.

14:20

Our project is a simple static site, so Claude says no to dropping in the react component as is, because it would change how our whole project works.

Dự án của chúng ta là một trang tĩnh đơn giản, nên Claude nói không với việc thả thành phần react vào nguyên trạng, vì nó sẽ thay đổi cách toàn bộ dự án của chúng ta hoạt động.

14:29

For your project, you might actually want something more complex than what we're doing here, like a dashboard, a checkout flow, or a site with a login.

Đối với dự án của bạn, bạn có thể thực sự muốn một thứ gì đó phức tạp hơn những gì chúng ta đang làm ở đây, như một bảng điều khiển, một luồng thanh toán, hoặc một trang web có đăng nhập.

14:36

In that case, Claude would say yes to react because it fits your project.

Trong trường hợp đó, Claude sẽ nói có với react vì nó phù hợp với dự án của bạn.

14:39

The point is that Claude protects the architecture you set up.

Điểm mấu chốt là Claude bảo vệ kiến trúc mà bạn đã thiết lập.

14:43

It doesn't break things just because you asked.

Nó không phá vỡ mọi thứ chỉ vì bạn yêu cầu.

14:45

For our static site, single file HTML is the right choice, and you'll see why when we deploy in chapter eight.

Đối với trang tĩnh của chúng ta, HTML một tệp là lựa chọn đúng đắn, và bạn sẽ thấy tại sao khi chúng ta triển khai ở chương tám.

14:51

So Claude rebuilds the hero without react and the first attempt doesn't work.

Vậy là Claude xây dựng lại phần hero mà không có react và lần thử đầu tiên không hoạt động.

14:56

The video shows up on the page, but it isn't scrolling, so I tell Claude what's happening.

Video xuất hiện trên trang, nhưng nó không cuộn, nên tôi nói với Claude chuyện gì đang xảy ra.

15:01

It finds two bugs and fixes them.

Nó tìm thấy hai lỗi và sửa chúng.

15:04

The page is still broken though, so I ask Claude to dig deeper.

Trang vẫn bị lỗi, nên tôi yêu cầu Claude đào sâu hơn.

15:08

It actually opens the page itself in my browser, inspects what's happening live and finds the real problem.

Nó thực sự mở chính trang đó trong trình duyệt của tôi, kiểm tra những gì đang xảy ra trực tiếp và tìm ra vấn đề thực sự.

15:15

Three layers in, it works.

Qua ba lớp, nó hoạt động.

15:17

The lesson here is to keep pushing when something breaks.

Bài học ở đây là hãy tiếp tục đẩy khi có gì đó bị hỏng.

15:20

Just explain what went wrong and what you were expecting instead.

Chỉ cần giải thích điều gì đã sai và điều bạn mong đợi thay vào đó.

15:24

Claude can usually solve it, if you give it the chance to look closer.

Claude thường có thể giải quyết nó, nếu bạn cho nó cơ hội nhìn kỹ hơn.

15:28

And there it is, a cinematic hero, scroll driven, exactly like we asked for.

Và đây rồi, một phần hero đậm chất điện ảnh, được điều khiển bằng cuộn, đúng như chúng ta yêu cầu.

15:34

Next, we do one more pass on the hero, making the text readable against the bright background image and making the hero reveal its content as the user scrolls.

Tiếp theo, chúng ta thực hiện thêm một lượt nữa trên phần hero, làm cho văn bản dễ đọc trên nền hình ảnh sáng và làm cho phần hero tiết lộ nội dung của nó khi người dùng cuộn.

15:45

The key thing to know is that you can keep iterating like this until your hero feels right.

Điều quan trọng cần biết là bạn có thể tiếp tục lặp lại như thế này cho đến khi phần hero của bạn cảm thấy đúng.

15:50

Once your hero section is locked in, it's time to step back and check yourself against the bigger picture.

Khi phần hero của bạn đã được chốt, đã đến lúc lùi lại và kiểm tra bản thân so với bức tranh lớn hơn.

15:57

Once you've got the bones of your site in place, you should grade yourself against the original checklist before you keep polishing.

Khi bạn đã có bộ khung của trang web, bạn nên tự đánh giá so với danh sách kiểm tra ban đầu trước khi tiếp tục trau chuốt.

16:04

This is the move that separates a polished result from a generic one.

Đây là bước phân biệt một kết quả được trau chuốt với một kết quả chung chung.

16:07

You can grab a PDF download of that 10K website checklist using the link in the description below.

Bạn có thể tải xuống PDF của danh sách kiểm tra 10K website đó bằng liên kết trong phần mô tả bên dưới.

16:14

You set the bar high at the start and now you check yourself against it.

Bạn đã đặt tiêu chuẩn cao ngay từ đầu và bây giờ bạn kiểm tra bản thân so với nó.

16:18

To do this, paste that checklist into Claude and ask, "Where does this site land against each of these criteria?

Để làm điều này, hãy dán danh sách kiểm tra đó vào Claude và hỏi, "Trang web này đạt được gì so với từng tiêu chí này?

16:24

Be honest." In my case, Claude goes through each one calling out what's strong, what's mixed, and what's missing.

Hãy trung thực." Trong trường hợp của tôi, Claude đi qua từng tiêu chí và chỉ ra cái gì mạnh, cái gì lẫn lộn, và cái gì còn thiếu.

16:31

For our build, Claude comes back with point of view strong, colour strong, hierarchy strong, and typography mixed, imagery, motion, mobile and the invisible stuff are all mixed.

Đối với bản dựng của chúng ta, Claude trả về quan điểm mạnh, màu sắc mạnh, thứ bậc mạnh, và kiểu chữ lẫn lộn, hình ảnh, chuyển động, di động và những thứ vô hình đều lẫn lộn.

16:43

You'll probably get a similar split on your project and that's fine.

Bạn có thể sẽ nhận được sự phân chia tương tự trong dự án của mình và điều đó không sao.

16:46

The point is to know exactly what's left to do.

Điểm mấu chốt là biết chính xác còn lại những gì cần làm.

16:49

For the items that need work, don't ask Claude to fix them one at a time.

Đối với những mục cần cải thiện, đừng yêu cầu Claude sửa chúng từng cái một.

16:52

Ask Claude to propose a batch of fixes instead and lead your ask with intent, not specifics.

Thay vào đó, hãy yêu cầu Claude đề xuất một loạt các sửa chữa và dẫn dắt yêu cầu của bạn bằng ý định, không phải chi tiết cụ thể.

16:58

Here's the exact prompt I use for our build.

Đây là prompt chính xác mà tôi sử dụng cho bản dựng của chúng ta.

17:01

I tell Claude, "We need more handcrafted micro interactions.

Tôi nói với Claude, "Chúng ta cần nhiều tương tác vi mô được chế tác thủ công hơn.

17:06

The lower sections feel a bit generic.

Các phần bên dưới cảm giác hơi chung chung.

17:08

We don't need to make them busier, just more expensive." Notice what I'm doing there.

Chúng ta không cần làm chúng bận rộn hơn, chỉ cần đắt giá hơn." Hãy chú ý điều tôi đang làm ở đó.

17:13

I'm not telling Claude what to add.

Tôi không nói với Claude cần thêm gì.

17:16

I'm telling Claude how I want it to feel.

Tôi đang nói với Claude cảm giác tôi muốn nó mang lại.

17:19

Claude is better at translating intent into specifics than most people are at writing specifications.

Claude giỏi chuyển ý định thành chi tiết cụ thể hơn hầu hết mọi người viết đặc tả.

17:25

Claude comes back with a batch, film green across the whole site, animated brass hairlines between sections, a glowing ember effect in the Reserve a Table section, word-by-word reveals the headlines and a few other small details on top.

Claude trả về một loạt thay đổi: màu xanh lá kiểu phim trên toàn bộ trang, những đường kẻ mảnh màu đồng được vẽ động giữa các phần, hiệu ứng tàn lửa phát sáng trong phần Reserve a Table, tiêu đề hiện ra từng từ một và vài chi tiết nhỏ khác.

17:40

Five small changes in one prompt.

Năm thay đổi nhỏ trong một câu lệnh.

17:43

I approve them and Claude ships them all at once.

Tôi duyệt chúng và Claude triển khai tất cả cùng lúc.

17:47

There's less back and forth that way.

Cách đó ít qua lại hơn.

17:48

You spend fewer tokens and the result feels more cohesive than if you drip feed Claude one tweak at a time.

Bạn tốn ít token hơn và kết quả trông gắn kết hơn so với việc nhỏ giọt từng chỉnh sửa một cho Claude.

17:55

Now, here's the move most people skip, and it's the move that does the most work on whether your site feels expensive.

Giờ đây, đây là bước mà hầu hết mọi người bỏ qua, và nó là bước tác động nhiều nhất đến việc trang web của bạn có cảm giác đắt tiền hay không.

18:02

Once that batch of edits lands, scroll through your site section by section and find the ones that still feel flat, a little boring.

Khi loạt chỉnh sửa đó đã xong, hãy cuộn qua trang web của bạn từng phần một và tìm những phần vẫn còn phẳng lì, hơi nhàm chán.

18:11

There's always going to be a couple.

Luôn luôn sẽ có vài phần như vậy.

18:12

Claude won't catch them because Claude can't feel your sight the way you can.

Claude sẽ không phát hiện ra chúng vì Claude không thể cảm nhận được tầm nhìn của bạn như chính bạn.

18:17

This pass, you have to drive yourself.

Lượt này, bạn phải tự dẫn dắt.

18:20

For each flat section you give Claude one specific motion or cursor interaction to add, one per section, all of them restrained and subtle.

Với mỗi phần phẳng lì, bạn đưa cho Claude một chuyển động hoặc tương tác con trỏ cụ thể để thêm vào, mỗi phần một cái, tất cả đều tiết chế và tinh tế.

18:31

You can ask for something specific, grab something you like from 21st.dev or just ask Claude what makes sense to add.

Bạn có thể yêu cầu một thứ cụ thể, lấy thứ bạn thích từ 21st.dev hoặc chỉ hỏi Claude xem thêm gì thì hợp lý.

18:38

In our Reserve a Table section, the ember glow from the batch is in, but it's still static.

Trong phần Reserve a Table của chúng tôi, hiệu ứng tàn lửa phát sáng từ loạt chỉnh sửa đã có, nhưng nó vẫn tĩnh.

18:43

There's no movement, so I tell Claude, "Make the embers move like fire.

Không có chuyển động, nên tôi bảo Claude: "Làm cho tàn lửa chuyển động như lửa.

18:47

Have them react to the cursor as it moves around the page." Claude adds a parallax effect on the embers that follows your cursor.

Cho chúng phản ứng với con trỏ khi nó di chuyển quanh trang." Claude thêm hiệu ứng parallax cho tàn lửa đi theo con trỏ của bạn.

18:55

Now the fire effect feels alive.

Giờ hiệu ứng lửa có cảm giác sống động.

18:57

Then I scroll into the story section and it's still flat, so I tell Claude, "Add some elegant micro movements and cursor interactions here.

Rồi tôi cuộn xuống phần story và nó vẫn phẳng lì, nên tôi bảo Claude: "Thêm vài chuyển động vi mô thanh lịch và tương tác con trỏ ở đây.

19:06

This section is feeling very static." Claude adds a soft candlelight halo that follows the cursor as you read.

Phần này đang có cảm giác rất tĩnh." Claude thêm một quầng sáng nến dịu đi theo con trỏ khi bạn đọc.

19:13

Its first attempt though is too obvious, so I push back.

Tuy nhiên lần thử đầu tiên của nó quá lộ liễu, nên tôi phản hồi lại.

19:16

I say, "Make it more subtle, more refined." Claude adds trailing motion to the halo so it lags a bit behind the cursor.

Tôi nói: "Làm cho nó tinh tế hơn, trau chuốt hơn." Claude thêm chuyển động trễ cho quầng sáng để nó theo sau con trỏ một chút.

19:24

That's the version we'll ship.

Đó là phiên bản chúng tôi sẽ triển khai.

19:25

Two prompts, two sections.

Hai câu lệnh, hai phần.

19:27

That's all this layer takes, but that layer is the difference between a site that looks expensive and one that feels expensive as visitors navigate the pages.

Lớp này chỉ cần có thế, nhưng lớp đó chính là sự khác biệt giữa một trang web trông đắt tiền và một trang web có cảm giác đắt tiền khi khách truy cập điều hướng qua các trang.

19:36

The pattern is to review every section, find the ones that feel flat, ask Claude for one cursor interaction or piece of movement per section and tell Claude to make it more subtle, until the section feels alive without being noisy and obnoxious.

Công thức là xem lại từng phần, tìm những phần có cảm giác phẳng lì, yêu cầu Claude thêm một tương tác con trỏ hoặc một chuyển động cho mỗi phần và bảo Claude làm cho nó tinh tế hơn, cho đến khi phần đó có cảm giác sống động mà không ồn ào và khó chịu.

19:53

Speaking of polish, copy.

Nói về độ trau chuốt, hãy nói đến nội dung chữ.

19:55

The written content on your site is another place where AI tends to fall short by default.

Nội dung chữ viết trên trang web của bạn là một chỗ khác mà AI thường mặc định làm chưa tới.

20:01

AI generated copy usually over explains, uses too many adjectives and tries to sound impressive.

Nội dung do AI tạo thường giải thích quá nhiều, dùng quá nhiều tính từ và cố tỏ ra ấn tượng.

20:07

Take a look at this line from our site.

Hãy xem dòng này từ trang web của chúng tôi.

20:09

Six dishes, one fire.

Sáu món ăn, một ngọn lửa.

20:11

That's restraint, not adjectives.

Đó là sự tiết chế, không phải tính từ.

20:14

That's what separates a $10,000 menu from a $200 one.

Đó là thứ phân biệt một thực đơn 10.000 đô với một thực đơn 200 đô.

20:18

The front end design skill we installed at the start of this video is what helps Claude to write copy like this.

Kỹ năng thiết kế front end mà chúng ta đã cài đặt ở đầu video này chính là thứ giúp Claude viết nội dung chữ như thế này.

20:22

Restrained sensory writing is one of the things that skill pushes Claude toward, which is another reason it earns its place in every project.

Lối viết giàu giác quan nhưng tiết chế là một trong những thứ mà kỹ năng đó hướng Claude tới, và đó là một lý do khác khiến nó xứng đáng có mặt trong mọi dự án.

20:31

Here's another quick win you can apply to any AI generated site.

Đây là một thắng lợi nhanh khác mà bạn có thể áp dụng cho bất kỳ trang web do AI tạo nào.

20:35

There's one font called Inter, that's so overused on AI generated sites, it instantly screams "AI made this." If you see Inter in your output, ask Claude to swap it out.

Có một phông chữ tên là Inter, bị dùng quá nhiều trên các trang web do AI tạo đến mức nó ngay lập tức hét lên "AI làm cái này." Nếu bạn thấy Inter trong kết quả của mình, hãy bảo Claude đổi nó đi.

20:45

For our build Claude Swaps enter a font called Geist.

Với bản dựng của chúng tôi, Claude đổi sang một phông chữ tên là Geist.

20:49

It's a small change, but it makes a real difference to how the site reads.

Đó là một thay đổi nhỏ, nhưng nó tạo ra khác biệt thực sự cho cảm nhận của trang web.

20:52

Item seven on the checklist is mobile that's actually designed, not just shrunk down.

Mục thứ bảy trong danh sách kiểm tra là mobile phải thực sự được thiết kế, chứ không chỉ bị thu nhỏ lại.

20:58

By default, Claude makes your site responsive, meaning it'll fit on phones or other small screens, but responsive isn't the same as designed for phones.

Mặc định, Claude làm cho trang web của bạn responsive, nghĩa là nó sẽ vừa trên điện thoại hoặc các màn hình nhỏ khác, nhưng responsive không giống với được thiết kế cho điện thoại.

21:07

Phones are going to see your site way more often than desktops will, and if your mobile version is just your desktop version squished smaller, your viewers will feel it.

Điện thoại sẽ xem trang web của bạn thường xuyên hơn nhiều so với máy tính để bàn, và nếu phiên bản mobile của bạn chỉ là phiên bản desktop bị bóp nhỏ lại, người xem sẽ cảm nhận được điều đó.

21:17

You have to ask Claude for it specifically.

Bạn phải yêu cầu Claude làm điều đó một cách cụ thể.

21:19

So tell Claude to do a dedicated pass on the mobile version.

Vậy hãy bảo Claude thực hiện một lượt riêng dành cho phiên bản mobile.

21:23

Tell it to think about what should be hidden on small screens, what should be tighter and what should resize.

Bảo nó nghĩ xem cái gì nên bị ẩn trên màn hình nhỏ, cái gì nên chặt hơn và cái gì nên đổi kích thước.

21:29

For our build, the navigation collapses on phones.

Với bản dựng của chúng tôi, thanh điều hướng thu gọn lại trên điện thoại.

21:32

The word mark gets tighter spacing and the buttons get a smaller variant.

Word mark có khoảng cách chặt hơn và các nút có một biến thể nhỏ hơn.

21:36

With those polished passes done, all eight checklist items are complete.

Khi những lượt trau chuốt đó hoàn tất, cả tám mục trong danh sách kiểm tra đều đã xong.

21:41

Your site looks $10,000.

Trang web của bạn trông đáng 10.000 đô.

21:43

Now we have to actually put it online.

Giờ chúng ta phải thực sự đưa nó lên mạng.

21:46

You can build the most beautiful site in the world, but up to this point, your site only exists on your computer, so if you copy the URL from your preview right now, the one that starts with local host and send it to a friend, they're going to be very disappointed.

Bạn có thể xây dựng trang web đẹp nhất thế giới, nhưng cho đến lúc này, trang web của bạn chỉ tồn tại trên máy tính của bạn, vì vậy nếu bạn sao chép URL từ bản xem trước ngay bây giờ, cái bắt đầu bằng local host và gửi cho một người bạn, họ sẽ rất thất vọng.

22:00

That URL only works on your machine.

URL đó chỉ hoạt động trên máy của bạn.

22:03

To share your site with the world, you have to put it on a real server at a real custom URL.

Để chia sẻ trang web của bạn với thế giới, bạn phải đưa nó lên một máy chủ thật với một URL tùy chỉnh thật.

22:08

Hosting is the service that runs your website on a server 24/7 so anyone in the world can reach it.

Hosting là dịch vụ chạy trang web của bạn trên máy chủ 24/7 để bất kỳ ai trên thế giới cũng có thể truy cập.

22:13

It's the boring part of owning a website, but every real site needs one.

Đó là phần nhàm chán của việc sở hữu một trang web, nhưng mọi trang web thật đều cần nó.

22:17

I use Hostinger because it's the cheapest professional host I know of that gives you a free domain for the first year on top of your plan.

Tôi dùng Hostinger vì đó là nhà cung cấp hosting chuyên nghiệp rẻ nhất mà tôi biết, cung cấp cho bạn một tên miền miễn phí cho năm đầu tiên ngoài gói của bạn.

22:24

And here's the deal.

Và đây là thỏa thuận.

22:25

If you grab hosting through the link on screen or the first link in the description below, you'll get 10% off whatever Hostinger's current promotional price is.

Nếu bạn lấy hosting qua liên kết trên màn hình hoặc liên kết đầu tiên trong phần mô tả bên dưới, bạn sẽ được giảm 10% so với giá khuyến mãi hiện tại của Hostinger.

22:33

Prices change throughout the year, but 10% off the best available price is always the cheapest way to get started.

Giá thay đổi trong suốt cả năm, nhưng giảm 10% so với giá tốt nhất hiện có luôn là cách rẻ nhất để bắt đầu.

22:40

Now, before you click anything, let's talk about which plan you actually want.

Bây giờ, trước khi bạn nhấp vào bất cứ thứ gì, hãy nói về gói mà bạn thực sự muốn.

22:43

For the kind of site we built in this video, a simple static site with no login, no checkout and no real database, Hostinger's premium plan covers everything.

Đối với loại trang web chúng ta đã xây dựng trong video này, một trang tĩnh đơn giản không có đăng nhập, không có thanh toán và không có cơ sở dữ liệu thực, gói premium của Hostinger bao gồm mọi thứ.

22:52

That's the one we're picking today, but if your project is more complex than what we did here, like a site with user accounts, a payment flow or a database in the background, premium won't cut it.

Đó là gói chúng ta chọn hôm nay, nhưng nếu dự án của bạn phức tạp hơn những gì chúng ta làm ở đây, như trang web có tài khoản người dùng, luồng thanh toán hoặc cơ sở dữ liệu ở phía sau, premium sẽ không đủ.

23:01

For projects like that, you want Hostinger's business plan instead.

Đối với những dự án như vậy, bạn nên chọn gói business của Hostinger.

23:04

It supports Node.js and more advanced setups Claude tends to use for complex sites.

Nó hỗ trợ Node.js và các thiết lập nâng cao hơn mà Claude thường dùng cho các trang web phức tạp.

23:10

Same link, same 10% off, just one tier up.

Cùng liên kết, cùng giảm 10%, chỉ cao hơn một bậc.

23:14

Remember when Claude said no to react back in Chapter 6?

Còn nhớ khi Claude từ chối react trong Chương 6 không?

23:17

That's the kind of moment that tells you which plan you need.

Đó là kiểu khoảnh khắc cho bạn biết bạn cần gói nào.

23:20

If Claude kept your site simple, premium is fine.

Nếu Claude giữ trang web của bạn đơn giản, premium là ổn.

23:22

If Claude built you something with a real backend, you want business.

Nếu Claude xây dựng cho bạn thứ gì đó có backend thực, bạn muốn business.

23:26

For our steakhouse, premium is the right pick.

Đối với nhà hàng bít tết của chúng ta, premium là lựa chọn đúng.

23:28

Open the link from the description.

Mở liên kết từ phần mô tả.

23:30

You'll land on this page here.

Bạn sẽ đến trang này đây.

23:32

Click Start Now, and that'll scroll you down to the pricing panels.

Nhấp vào Start Now, và nó sẽ cuộn bạn xuống các bảng giá.

23:36

Select the plan you want.

Chọn gói bạn muốn.

23:37

Set the term to 12 months.

Đặt thời hạn là 12 tháng.

23:39

12 months is the minimum term that gets you a free domain for the first year.

12 tháng là thời hạn tối thiểu để bạn được tên miền miễn phí cho năm đầu tiên.

23:43

Now, search for the domain you want.

Bây giờ, hãy tìm tên miền bạn muốn.

23:45

If it's available, claim it.

Nếu nó còn trống, hãy đăng ký nó.

23:47

Your cart total is going to depend on whatever promotion Hostinger has running when you sign up.

Tổng giỏ hàng của bạn sẽ phụ thuộc vào bất kỳ chương trình khuyến mãi nào Hostinger đang chạy khi bạn đăng ký.

23:52

For me, it comes out to about $43 for the year.

Với tôi, nó ra khoảng 43 đô la cho cả năm.

23:54

That's hosting plus a domain plus a free email account, all in.

Đó là hosting cộng tên miền cộng tài khoản email miễn phí, tất cả gộp lại.

23:59

The exact number you see might be a few dollars different, but using the link below is always going to get you the best available price.

Con số chính xác bạn thấy có thể chênh vài đô la, nhưng dùng liên kết bên dưới luôn giúp bạn có giá tốt nhất hiện có.

24:05

If you add a month of Claude Pro on top of that, which is about 20 bucks, you've built a $10,000 website for roughly $60 total.

Nếu bạn thêm một tháng Claude Pro vào đó, khoảng 20 đô, bạn đã xây dựng một trang web trị giá 10.000 đô la với tổng chi phí khoảng 60 đô.

24:13

Click Continue.

Nhấp vào Continue.

24:14

Then add your email and a password to register an account.

Sau đó thêm email và mật khẩu để đăng ký tài khoản.

24:18

On the next page, enter your billing information to complete the transaction.

Trên trang tiếp theo, nhập thông tin thanh toán của bạn để hoàn tất giao dịch.

24:23

After checkout is complete, the onboarding flow asks what kind of site you have.

Sau khi thanh toán hoàn tất, quy trình onboarding sẽ hỏi bạn có loại trang web nào.

24:27

Since we're uploading our own files, pick Migrate Existing Site, then upload backup files.

Vì chúng ta đang tải lên các tệp của riêng mình, hãy chọn Migrate Existing Site, rồi upload backup files.

24:35

Then select the domain you just bought.

Sau đó chọn tên miền bạn vừa mua.

24:38

Now return to your project folder on your computer so you can see the files that Claude built.

Bây giờ quay lại thư mục dự án trên máy tính của bạn để bạn có thể thấy các tệp mà Claude đã xây dựng.

24:43

Your index.html plus any images, videos or subfolders sitting inside.

index.html của bạn cùng với bất kỳ hình ảnh, video hoặc thư mục con nào nằm bên trong.

24:50

Here's the part that matters.

Đây là phần quan trọng.

24:51

You don't want to zip the project folder itself.

Bạn không muốn nén chính thư mục dự án.

24:54

You want to zip the files inside the folder.

Bạn muốn nén các tệp bên trong thư mục.

24:58

If you zip the whole folder, Hostinger unzips it on their server and your site ends up one directory deeper than it should, your domain loads a blank page, so select everything inside your project folder.

Nếu bạn nén toàn bộ thư mục, Hostinger sẽ giải nén nó trên máy chủ của họ và trang web của bạn sẽ nằm sâu hơn một thư mục so với mức nên có, tên miền của bạn tải một trang trắng, vì vậy hãy chọn mọi thứ bên trong thư mục dự án của bạn.

25:10

That's Command A on Mac or Ctrl A on Windows, then right click on your selection.

Đó là Command A trên Mac hoặc Ctrl A trên Windows, sau đó nhấp chuột phải vào lựa chọn của bạn.

25:16

On Mac hit Compress, on Windows pick Sent To, then Compressed Folder.

Trên Mac nhấn Compress, trên Windows chọn Sent To, rồi Compressed Folder.

25:24

You get one zip file with your index.html sitting right at the top level.

Bạn nhận được một tệp zip với index.html nằm ngay ở cấp cao nhất.

25:29

That's exactly what Hostinger wants.

Đó chính xác là những gì Hostinger muốn.

25:31

You can drag the zip file back out to the same level as your parent folder, and then give it a relevant name.

Bạn có thể kéo tệp zip trở lại cùng cấp với thư mục cha của bạn, rồi đặt cho nó một cái tên phù hợp.

25:37

Drag that zip into Hostinger and once the files finish uploading, click Next.

Kéo tệp zip đó vào Hostinger và khi các tệp tải lên xong, nhấp vào Next.

25:42

Then click Submit Request.

Sau đó nhấp vào Submit Request.

25:44

Once it loads, click on your domain and there it is.

Khi nó tải xong, nhấp vào tên miền của bạn và nó đây rồi.

25:48

That's your $10,000 website, live at your own custom domain, built with just a handful of prompts.

Đó là trang web trị giá 10.000 đô la của bạn, hoạt động trực tiếp trên tên miền tùy chỉnh của riêng bạn, được xây dựng chỉ với một vài câu lệnh.

25:55

If you want yours online too, grab Hostinger using the first link in the description below.

Nếu bạn cũng muốn trang web của mình hoạt động trực tuyến, hãy lấy Hostinger bằng liên kết đầu tiên trong phần mô tả bên dưới.

25:59

That's how you lock in your 10% discount on top of whatever promotion they already have running.

Đó là cách bạn khóa ưu đãi giảm giá 10% của mình trên bất kỳ chương trình khuyến mãi nào họ đang có.

26:04

It's the cheapest way I know of to put a real professional website on the internet.

Đó là cách rẻ nhất mà tôi biết để đưa một trang web chuyên nghiệp thực sự lên internet.

26:08

Thanks for watching.

Cảm ơn bạn đã xem.

Transcript

Hiển thị

What a $10,000 Website Means

The video sets out to build a premium website with Claude Code, an AI coding assistant that writes code from natural language descriptions. It defines the eight qualities that separate an expensive site from a cheap one and explains why template builders cannot reach that bar.

Video bắt đầu xây dựng một trang web cao cấp với Claude Code, một trợ lý lập trình AI viết mã từ mô tả bằng ngôn ngữ tự nhiên. Nó định nghĩa tám phẩm chất phân biệt một trang web đắt tiền với một trang rẻ tiền và giải thích tại sao các công cụ tạo template không thể đạt được tiêu chuẩn đó.