Claude Code cơ bản qua ba ví dụ: cờ caro, CRM, website

1. Claude Code là gì

Vũ Đức Hồng mở đầu video: nếu bạn nghe mọi người nói chuyện về Claude Code rất nhiều, muốn tìm hiểu nhưng không biết bắt đầu từ đâu, thì theo anh (video đăng ngày 01/11/2026) video này dành cho bạn. Giả sử bạn là một người mới tinh, chưa biết gì về Claude Code, thì trong video này anh cùng người xem sẽ đi qua ba câu hỏi: Claude Code là gì, nó làm được những gì, và các chức năng của nó vận hành ra sao.

Phần đầu tiên là định nghĩa và bản chất của Claude Code. Theo anh Hồng (video đăng ngày 01/11/2026), Claude Code là một công cụ lập trình dựa trên AI agent. Anh nhấn mạnh người xem cần lưu ý điểm này: Claude Code chỉ là một công cụ lập trình, và nó được xây dựng trên nền tảng của AI agent. Vì nó là một AI agent, nó có thể đọc mã nguồn, tạo hoặc chỉnh sửa file, và thực thi được lệnh. Claude Code cũng có thể kết nối và tương tác với các công cụ, ứng dụng bên ngoài, từ đó giúp người dùng thực hiện một hoặc nhiều tác vụ coding nhất định.

Ngay bên dưới phần định nghĩa, anh chuẩn bị sẵn một sơ đồ để người xem hình dung Claude Code một cách chính xác nhất, theo lời anh (video đăng ngày 01/11/2026).

2. Công cụ lập trình, AI agent và Claude Code CLI

Ở một bên sơ đồ là các công cụ lập trình, gồm phần mềm Claude Code, Visual Studio Code và Cursor. Anh Hồng gọi những phần mềm này là công cụ lập trình, hay phần mềm lập trình. Bên trong các công cụ này, AI agent có tên Claude Code hoặc đã được tích hợp sẵn, hoặc bạn cài thêm vào, để nó hỗ trợ công việc lập trình. Theo anh (video đăng ngày 01/11/2026), với phần mềm Claude Code thì AI agent đã được tích hợp sẵn, còn với Visual Studio Code hay Cursor thì bạn cần cài thêm AI agent này vào.

Theo anh (video đăng ngày 01/11/2026), sau khi được tích hợp, AI agent của Claude Code hoạt động ngay trong cửa sổ của phần mềm lập trình tương ứng. Với phần mềm Claude Code, nó chạy trong cửa sổ của Claude Code. Tương tự, trong Visual Studio Code hoặc Cursor, AI agent này cũng được đưa vào cửa sổ làm việc của từng phần mềm đó.

Anh đặt tiếp một câu hỏi: vậy nếu AI agent này không được cài vào công cụ lập trình nào cả thì chúng ta có dùng được nó không? Câu trả lời của anh là có. Theo anh (video đăng ngày 01/11/2026), bạn có thể dùng AI agent của Claude Code một cách độc lập qua cửa sổ dòng lệnh, gọi là Claude Code CLI (Command Line Interface), và dùng nó bằng cửa sổ dòng lệnh terminal.

Theo anh Hồng (video đăng ngày 01/11/2026), các công cụ lập trình kia giúp người dùng dễ nhìn, trực quan và dễ thao tác hơn. Nếu không dùng chúng, bạn vẫn dùng được Claude Code qua terminal. Từ đó anh rút ra bản chất của việc học Claude Code: chúng ta học cách hoạt động của AI agent này. Còn các công cụ lập trình chỉ giúp chúng ta làm việc trực quan hơn và hỗ trợ trong quá trình làm. Anh nói thêm, nếu trong tương lai những phần mềm này không còn tồn tại hay không còn hoạt động nữa, chúng ta vẫn có thể dùng AI agent Claude Code một cách độc lập.

3. Cài phần mềm, gói Pro và giao diện tiếng Việt

Anh Hồng cho biết trong video (đăng ngày 01/11/2026) anh dùng chính phần mềm Claude Code làm công cụ lập trình. Để bắt đầu, bạn lên trang Claude Code, tải phần mềm về và cài đặt trên máy tính. Sau đó mở phần mềm lên và đăng nhập tài khoản Claude AI của mình.

Lúc bắt đầu, anh đang dùng gói miễn phí (theo video đăng ngày 01/11/2026). Ở cửa sổ mặc định, phần mềm hiện giao diện của Claude Chat và Claude Cowork. Bạn chuyển sang chế độ Claude Code bằng cách bấm vào nút tương ứng. Anh lưu ý rằng muốn dùng được Claude Code thì bạn cần nâng cấp, tối thiểu là gói Pro (theo video đăng ngày 01/11/2026). Sau khi nâng cấp xong, chữ Pro hiện bên cạnh tên tài khoản, và lúc đó bạn đã dùng được Claude Code.

Mặc định giao diện là tiếng Anh. Theo anh (video đăng ngày 01/11/2026), bạn có thể chuyển sang tiếng Việt bằng cách vào phần Language và chọn tiếng Việt; khi đó giao diện của Claude Code hiển thị bằng tiếng Việt. Trước khi đi vào nội dung chính, anh giới thiệu thêm một sơ đồ để người xem hiểu rõ hơn cách Claude Code hoạt động.

4. Agent loop: Claude Code làm việc theo vòng lặp

Theo sơ đồ của anh Hồng (video đăng ngày 01/11/2026), đầu tiên Claude Code tiếp nhận yêu cầu từ người dùng, mà chúng ta gọi là user prompt. Sau đó Claude Code thu thập tất cả các thông tin như system prompt, memory và user prompt để tạo thành một context, tức bối cảnh, rồi đưa thông tin này vào một mô hình AI. Mô hình có thể là Fable, Opus, Sonnet hoặc Haiku.

Tiếp theo, Claude Code thực thi hành động: đọc, ghi, chạy lệnh. Tuỳ yêu cầu của người dùng mà nó thực thi những hành động tương ứng. Cuối cùng, nó xác nhận kết quả. Nếu kết quả chưa đạt, nó quay lại bước thu thập context, gom lại các thông tin hiện tại hoặc các thông tin lỗi, rồi gửi tiếp vào mô hình AI, lại thực thi và chạy lệnh. Anh Hồng nói nó cứ làm như vậy, ví dụ khoảng 2 đến 3 lần hoặc 4 lần, cho đến khi đạt kết quả thì kết thúc vòng lặp (theo video đăng ngày 01/11/2026).

Toàn bộ vòng lặp này được gọi là agent loop. Theo anh Hồng (video đăng ngày 01/11/2026), cơ chế này cũng là cơ chế hoạt động chung của tất cả các AI agent hiện tại.

5. Dùng Claude Code cho đúng việc, và các tuỳ chọn

Anh Hồng nhắc lại ý ở đầu video: Claude Code là một công cụ lập trình, hỗ trợ người dùng trong những tác vụ coding nhất định. Vì vậy, theo anh (video đăng ngày 01/11/2026), bạn cần dùng Claude Code như một trợ lý trong lĩnh vực lập trình và coding, để giúp bạn tạo ra phần mềm, tạo ra website. Đừng dùng Claude Code như Claude AI, ví dụ hỏi đi du lịch Hà Nội thì nên đi đâu, hay ẩm thực Hà Nội có những món gì. Anh nói rõ: không dùng Claude Code như thế, mà dùng nó để tạo phần mềm và website.

Sau đó anh đi qua màn hình chính của Claude Code (giao diện trong video đăng ngày 01/11/2026). Ở giữa có một ô để bạn nhập thông tin, chính là yêu cầu, tức prompt. Bên dưới ô này là môi trường làm việc: lúc đó Claude Code đang làm việc trên chính máy tính của anh, và theo anh bạn cũng có thể chọn đám mây, tức là kết nối với cloud.

Tiếp theo anh tạo một folder để Claude Code làm việc trong đó. Anh đặt tên folder theo trò chơi sẽ làm, là cờ caro, vì lát nữa anh sẽ bảo Claude Code tạo một trò chơi cờ caro. Kế đến là chế độ làm việc. Theo anh (video đăng ngày 01/11/2026), có các chế độ tự động, thủ công, chấp nhận chỉnh sửa và kế hoạch; chọn chế độ nào tuỳ vào yêu cầu cũng như cách làm việc của bạn.

Sau đó là lựa chọn mô hình. Theo anh (video đăng ngày 01/11/2026), bạn có thể chọn mô hình cao cấp hay thấp cấp: mô hình cao cấp hơn thì tốn tiền hơn, mô hình thấp cấp hơn thì rẻ hơn. Cuối cùng là mức độ nỗ lực. Anh chọn mức trung bình để cân bằng giữa tác vụ làm việc và chi phí. Bạn cũng có thể chọn mức cao hơn hoặc tối đa, đồng nghĩa với việc bạn sẽ tiêu tốn nhiều token hơn.

6. Ví dụ 1: tạo trò chơi cờ caro bằng một câu prompt

Với folder cờ caro đã chọn, chế độ tự động, model Opus 5.5 và mức nỗ lực trung bình, anh Hồng nhập yêu cầu đầu tiên và gửi lên (demo trong video đăng ngày 01/11/2026):

hãy tạo trò chơi cờ karo bằng HTML

Claude Code bắt đầu phân tích và chạy các tác vụ cần thiết. Ở bên phải cửa sổ, nó hiển thị các thông tin về môi trường: máy tính này, folder đang làm việc, và phần ngữ cảnh. Theo anh (video đăng ngày 01/11/2026), bạn có thể mở phần ngữ cảnh ra để xem chi tiết. Sau một lúc chờ, Claude Code tiến hành tạo các file cần thiết cho trò chơi cờ caro. Anh mở folder ra: đây là folder cờ caro anh tạo từ đầu, và bên trong Claude Code đã tạo ra một file là index.html (demo trong video đăng ngày 01/11/2026).

Ở bên phải, Claude Code hiển thị kết quả đầu ra. Anh mở thử trong trình duyệt của chính nó, và Claude Code đã tạo cho anh một trò chơi cờ caro. Anh bắt đầu chơi thử: anh là X, máy là O, và máy tự động đánh lại (demo trong video đăng ngày 01/11/2026). Anh giải thích rằng đây là trình duyệt được tích hợp sẵn trong Claude Code, giúp người dùng xem nhanh và xem trực tiếp kết quả một cách trực quan, đồng thời giúp Claude Code chỉnh sửa dễ dàng hơn (theo video đăng ngày 01/11/2026).

Tiếp đó anh mở trực tiếp file index.html bằng trình duyệt Chrome của mình. Theo anh, đây là giao diện chính thức khi bạn muốn đưa trò chơi này lên Internet. Anh chơi thử, và trò chơi cũng tự động hoạt động (demo trong video đăng ngày 01/11/2026).

Nhưng anh phát hiện một lỗi: khi các ô được đánh X hoặc O, kích thước của ô bị thay đổi. Ban đầu ô có hình vuông, nhưng khi đánh vào thì nó hiển thị thành hình chữ nhật (demo trong video đăng ngày 01/11/2026). Anh nói lát nữa sẽ bảo Claude Code chỉnh sửa lỗi này. Ở phía trên trò chơi, anh chỉ cho người xem các chế độ: chơi với máy hay 2 người chơi, mức độ trung bình hay dễ, bạn đi trước hay máy đi trước. Theo nhận xét của anh, trông cũng rất đầy đủ (demo trong video đăng ngày 01/11/2026).

7. Sửa lỗi bằng ảnh chú thích, thêm dark mode và Tailwind CSS

Theo anh Hồng (video đăng ngày 01/11/2026), trong cửa sổ của Claude Code có sẵn các công cụ để bạn chú thích lên kết quả, rồi yêu cầu Claude Code sửa theo chú thích đó. Ví dụ, anh dùng một hình khối để khoanh tròn vùng các ô bị đổi kích thước trên bàn cờ, rồi thêm một đoạn chat kèm theo hình. Nội dung anh gõ là (demo trong video đăng ngày 01/11/2026):

hiện tại khi được đánh x hoặc o, kích thước của ô bị thay đổi, tôi muốn kích thước các ô được cố định hình vuông

Anh gửi thông tin này lên. Theo anh, Claude Code dựa vào hình ảnh này cùng yêu cầu của anh để sửa tương ứng. Trong lúc chờ, Claude Code can thiệp vào code của trò chơi và kiểm tra lại (demo trong video đăng ngày 01/11/2026). Khi xong, anh cho người xem thấy: lúc đánh X hoặc O, kích thước ô không còn bị thay đổi nữa. Anh test lại một lần nữa bằng cách đánh vào các ô, và kích thước vẫn giữ nguyên. Theo anh, như vậy là Claude Code đã đáp ứng được yêu cầu anh đề ra (demo trong video đăng ngày 01/11/2026).

Anh lưu ý người xem để ý phần ngữ cảnh ở phía trên. Lúc đó, anh đọc con số khoảng 81.000 trên 1 triệu, và đã dùng 8% (theo video đăng ngày 01/11/2026). Sau đó anh thêm một yêu cầu mới:

tạo thêm chức năng dark mode và sử dụng tailwind css để website đẹp hơn

Trong lúc Claude Code chỉnh sửa website theo đúng yêu cầu, anh chỉ vào phần ngữ cảnh: nó đang tăng lên hơn 81.000, và theo anh, trong quá trình Claude Code làm việc thì con số này sẽ còn tăng tiếp (theo video đăng ngày 01/11/2026). Khi tác vụ hoàn tất, giao diện được chỉnh sửa trông đẹp hơn, có chế độ dark mode có thể bật sáng, tối, và giao diện đã dùng công nghệ Tailwind CSS (demo trong video đăng ngày 01/11/2026).

Anh chỉ ra thêm một điểm: khi làm việc, Claude Code cũng tự kiểm tra trong trình duyệt. Theo anh, nó tự đánh, tự chơi để kiểm tra (demo trong video đăng ngày 01/11/2026). Anh xem lại trò chơi và nó hoạt động bình thường. Ở phần ngữ cảnh, con số lúc trước là 81.000, giờ đã tăng lên khoảng 90.000 (theo video đăng ngày 01/11/2026).

8. Chọn phần tử để Claude Code sửa đúng chỗ

Trong thanh công cụ chỉnh sửa của trình duyệt tích hợp, theo anh Hồng (video đăng ngày 01/11/2026), bạn có thể chọn công cụ chọn phần tử, rồi trỏ tới đúng phần tử bạn muốn chỉnh sửa. Ví dụ, anh chọn vào nút chuyển sáng, tối và click vào đó. Khi ấy, đoạn code của nút này được đưa vào ô prompt của Claude Code (demo trong video đăng ngày 01/11/2026).

Anh gõ yêu cầu "sửa phần này thành hình vuông, ko cần bo tròn". Theo anh, khi có đoạn code đi kèm như vậy thì Claude Code biết rằng nó cần sửa chỗ nào. Claude Code chỉnh sửa xong rất nhanh, và nút đã biến thành hình vuông (demo trong video đăng ngày 01/11/2026). Ở câu trả lời, Claude Code ghi rằng nó đổi rounded-full thành rounded-none trong index.html.

Trò chơi vẫn hoạt động bình thường. Anh tiếp tục chọn một phần tử khác, là thanh chứa các menu chế độ chơi, và bảo Claude Code "làm tương tự với chỗ này". Kết quả, phần này cũng chuyển thành hình vuông: nó không còn bo góc nữa mà chuyển sang góc vuông (demo trong video đăng ngày 01/11/2026).

9. Context window: 200 nghìn và 1 triệu token

Sau vài thao tác như vậy, anh Hồng chỉ cho người xem lượng ngữ cảnh đang sử dụng: 95,6 nghìn trên 1 triệu (theo video đăng ngày 01/11/2026). Anh giải thích ý nghĩa con số này. Lúc đó anh đang dùng mô hình Opus 5.5, và con số 1 triệu chính là kích thước cửa sổ ngữ cảnh, tức context window, của mô hình này. Theo anh (video đăng ngày 01/11/2026), với những mô hình cũ trước đây như Sonnet 4.5 hay Haiku 4.5, kích thước cửa sổ ngữ cảnh tối đa là 200.000 token.

Anh dùng một hình vẽ để giải thích cơ chế của context window. Giả sử cửa sổ ngữ cảnh tối đa là 200 nghìn, thì công việc vừa làm đã chiếm 95,6 nghìn. Càng làm việc nhiều, cửa sổ ngữ cảnh càng đầy. Nếu nó tràn ra, ví dụ tăng lên khoảng 300 nghìn, thì cửa sổ ngữ cảnh không còn bao phủ được toàn bộ bối cảnh bạn đang làm việc. Theo anh (video đăng ngày 01/11/2026), khi đó mô hình sẽ dẫn tới sai sót, hoặc thiếu thông tin, thiếu dữ liệu, hoặc bị ảo giác về thông tin, và cũng dẫn tới sai sót.

Theo anh, với mức độ làm việc hiện tại thì cửa sổ ngữ cảnh 200.000 là quá ít, nên các mô hình mới như Opus 5.5, Sonnet 5.5, Haiku 5.5 hay Fable 5.1 đã tăng cửa sổ ngữ cảnh lên mức 1 triệu token (theo video đăng ngày 01/11/2026). Khi có một cửa sổ ngữ cảnh đủ lớn, công việc của chúng ta được làm liên tục, xuyên suốt, không bị ngắt quãng, cũng như không bị ảo giác thông tin dẫn tới sai sót. Vì thế, theo anh, dùng những mô hình có cửa sổ ngữ cảnh lớn cũng là một lợi thế khi làm việc.

Anh nói tiếp: trong quá trình làm việc, ngữ cảnh tăng lên, ví dụ tới mức khoảng 700.000, tức chiếm khoảng 70% cửa sổ ngữ cảnh của mô hình. Khi đó, theo anh (video đăng ngày 01/11/2026), trong Claude Code có một cơ chế để tóm tắt 700.000 token này và thu gọn lại, ví dụ còn khoảng 100.000. Như thế bạn vẫn có thể tiếp tục dùng cửa sổ này mà không bị mất đi quá nhiều chi tiết đã trao đổi trước đó.

10. Ngữ cảnh đang chứa gì, và giới hạn sử dụng theo phiên

Trong bảng ngữ cảnh, Claude Code cũng thống kê 95,6 nghìn token đó gồm những gì (theo video đăng ngày 01/11/2026). Phần tin nhắn đã chiếm khoảng 40.000 token, các tool hệ thống khoảng 21.000, và tương tự với những phần còn lại. Phần còn trống, theo anh đọc, là 871.000 token.

Bên dưới phần này, anh click vào biểu tượng hình tròn. Một phần màu xanh hiện ra, ghi giới hạn 5 giờ, và lúc đó anh đã dùng hết 3% (demo trong video đăng ngày 01/11/2026). Anh bấm "xem tất cả" để mở rộng ra: phiên hiện tại đang dùng 3%. Theo anh Hồng (video đăng ngày 01/11/2026), lượng token bạn dùng bị giới hạn trong một khoảng giờ nhất định. Khi dùng hết, bạn không dùng được nữa và phải chờ tới phiên tiếp theo mới dùng tiếp được.

Vì vậy, theo anh, lượng token bạn có là hữu hạn chứ không phải vô hạn, và anh khuyên dùng một cách tiết kiệm nhất, hiệu quả nhất (lời khuyên trong video đăng ngày 01/11/2026).

11. Dùng Claude Code trong cửa sổ terminal

Anh Hồng nhắc lại điều đã nói ở phần trước: nếu không dùng những công cụ lập trình như phần mềm Claude Code, bạn vẫn dùng được Claude Code qua cửa sổ terminal. Để minh hoạ, anh tắt phần mềm Claude Code đi và mở dự án cờ caro ra trên trình duyệt. Bây giờ nếu muốn yêu cầu Claude Code chỉnh sửa dự án này, anh vào folder dự án và mở một trình terminal; theo anh, bạn có thể dùng PowerShell (video đăng ngày 01/11/2026).

Sau đó anh gõ lệnh claude để bật Claude Code lên. Claude Code yêu cầu chọn các chế độ, rồi tiến hành đăng nhập tài khoản. Anh chọn lựa chọn đầu tiên, và một cửa sổ trình duyệt mở ra để đăng nhập. Đăng nhập thành công, anh quay lại terminal (tức CLI), bấm Enter, rồi Enter tiếp, và như vậy đã vào được tài khoản (demo trong video đăng ngày 01/11/2026). Phần đầu cửa sổ ghi Claude Code v2.1.302, Opus 5.5 (1M context), Claude Pro, đang ở folder co-karo trên Desktop, kèm thông báo Opus 5.5 nay là model mặc định và tiêu hao hạn mức nhanh hơn Sonnet 5, có thể đổi bất cứ lúc nào bằng /model (màn hình terminal trong video đăng ngày 01/11/2026).

Ô ở dưới cùng là nơi nhập prompt. Anh gõ yêu cầu bắt đầu bằng "tôi muốn chỉnh sửa lại style theo phong cách", kèm tên một phong cách. Claude Code đọc dự án rồi chỉnh sửa trò chơi cờ caro sang một phong cách khác; cửa sổ terminal sau đó mang tiêu đề "Chỉnh sửa style theo phong cách Vox" (demo trong video đăng ngày 01/11/2026). Sau một khoảng thời gian, nó đã tiếp nhận yêu cầu và chỉnh sửa lại giao diện: trò chơi chuyển sang nền sáng, chữ "Cờ Caro" in đậm, các nút viền đen (demo trong video đăng ngày 01/11/2026).

Anh thêm một yêu cầu nữa: thêm hiệu ứng khi đặt quân cờ. Hiệu ứng lúc đó đang như hiện tại, và anh muốn Claude Code tạo ra một phong cách mới. Chờ một chút trong lúc nó thực thi, Claude Code chỉnh sửa xong. Anh tải lại trang và test thử hiệu ứng mới: trông nó đã khác, và anh nhận xét trông rất thú vị (demo trong video đăng ngày 01/11/2026).

Tiếp theo anh nhập lệnh /context trong terminal để hiện bảng tính lượng token đang dùng. Trong phiên terminal, con số là 71.000 token trên 1 triệu, tức dùng hết 7%. Còn trong cửa sổ của phần mềm Claude Code thì đang là 95.000 (demo trong video đăng ngày 01/11/2026). Từ đó anh suy ra hai phiên này là khác nhau. Anh so sánh: bạn có thể hình dung phiên trong phần mềm Claude Code là nhân viên thứ nhất, còn phiên trong terminal là nhân viên thứ hai; đó là hai phiên khác nhau.

Trong phạm vi nội dung video này, anh cho biết chỉ giới thiệu cửa sổ terminal như vậy thôi, chứ sẽ không dùng nhiều. Anh dùng chính phần mềm Claude Code, vì theo anh nó trực quan hơn và dễ dùng hơn với người dùng phổ thông (video đăng ngày 01/11/2026). Anh chỉ thêm một cách nữa: trong phần mềm Claude Code, bạn có thể click vào một nút và chọn làm việc trong terminal, và phần mềm cũng sẽ hiện ra màn hình để bạn làm việc với Claude Code trong terminal ngay trong cửa sổ đó (demo trong video đăng ngày 01/11/2026).

12. Ví dụ 2: website CRM với chế độ kế hoạch

Sang ví dụ tiếp theo, anh Hồng tạo một phiên mới và chọn folder đặt tên là CRM để Claude Code làm việc trong đó. Anh bảo Claude Code tạo một dự án website CRM để quản lý khách hàng, dành cho nhà hàng hoặc quán ăn. Câu prompt anh gửi là (demo trong video đăng ngày 01/11/2026):

tôi muốn tạo dự án website crm để quản lý khách hàng, gồm các thông tin họ tên, số điện thoại, email, địa chỉ, giới tính. Dành cho nhà hàng, quán ăn.

Anh nhắc lại dự án cờ caro trước đó: khi anh nhập một prompt, mặc định Claude Code tự suy luận, tự tạo file và tự tạo ra các chức năng mà không hỏi anh có đồng ý hay không (theo video đăng ngày 01/11/2026). Ở dự án này, anh chuyển chế độ làm việc sang chế độ kế hoạch. Theo anh, ở chế độ này, trước khi làm thì Claude Code vẽ ra một kế hoạch, hỏi anh một số ý, rồi mới bắt đầu làm.

Anh gửi yêu cầu, và Claude Code bắt đầu một phiên mới, phân tích yêu cầu, lên kế hoạch và đưa ra các câu hỏi để anh chọn. Anh lưu ý phiên làm việc này khác hoàn toàn với phiên làm trò chơi cờ caro. Claude Code xem folder dự án, kiểm tra các runtime đã cài, rồi báo thư mục còn trống, máy có Node 22 và Python 3.11, và nó cần anh chọn vài điểm trước khi lên kế hoạch (demo trong video đăng ngày 01/11/2026).

Câu hỏi đầu tiên là muốn dùng công nghệ nào cho website CRM, với các lựa chọn Node.js + SQLite (được đánh dấu Recommended), Next.js + Supabase, Python Flask + SQLite và "Khác". Anh chọn Node.js và SQLite, rồi bấm Tiếp theo. Câu hỏi thứ hai: ngoài 5 trường cơ bản này, bạn muốn thêm tính năng nào cho nhà hàng. Anh chọn thêm tất cả, gồm ngày sinh và ghi chú, lịch sử ghé quán, hạng thành viên và đăng nhập, rồi gửi đi (demo trong video đăng ngày 01/11/2026).

Claude Code phân tích lựa chọn của anh, chọn và viết thêm vào kế hoạch. Nó vẽ ra một kế hoạch có tiêu đề "Kế hoạch: Website CRM quản lý khách hàng cho nhà hàng / quán ăn", gồm phần bối cảnh, cấu trúc dự án và các mô tả. Cấu trúc gồm package.json, .env.example, server.js, thư mục src/ với db.js, auth.js, tiers.js và các route khách hàng, lượt ghé, thống kê, thư mục public/ với trang đăng nhập, dashboard, trang chi tiết khách hàng, cùng README.md; phần cơ sở dữ liệu SQLite có các bảng users và customers (demo trong video đăng ngày 01/11/2026).

Theo anh (video đăng ngày 01/11/2026), nếu bạn là lập trình viên thì hoàn toàn có thể đọc kế hoạch để hiểu cấu trúc này có phù hợp hay không. Nếu từ chối thì bạn chọn nút từ chối, còn nếu muốn thay đổi, chỉnh sửa thì chọn chỉnh sửa. Ở đây anh bấm chấp nhận, và Claude Code thực thi theo kế hoạch đã vẽ ra.

Claude Code hỏi anh có cho phép nó ghi package.json không, và anh chọn luôn cho phép. Nó khởi tạo dự án và cài các thư viện, anh tiếp tục chọn luôn cho phép (demo trong video đăng ngày 01/11/2026). Anh nói thêm, tất nhiên nếu bạn có chuyên môn thì hoàn toàn có thể đọc đề xuất của nó: thấy đúng thì chấp nhận, thấy không phù hợp thì từ chối.

Lệnh tạo dữ liệu mẫu mà Claude Code xin chạy trong hộp trên (demo trong video đăng ngày 01/11/2026) là:

$ npm run seed 2>&1 | tail -3

Anh giải thích: khi bạn đồng ý các thao tác vừa rồi, Claude Code chuyển sang chế độ chấp nhận chỉnh sửa, tức là tự động chấp nhận mọi chỉnh sửa tệp; nó tự động tạo file và tự động sửa file (theo video đăng ngày 01/11/2026). Trong quá trình làm, Claude Code hoạt động trong vòng lặp và tiêu tốn token. Anh đọc con số thống kê token trong cửa sổ lúc đó là 109 nghìn, và theo anh con số này sẽ còn tăng tiếp cho tới khi quy trình hoàn thành.

Claude muốn chạy lệnh để tạo dữ liệu mẫu, và anh cho phép. Nó chạy thử và kiểm tra trên trình duyệt; anh bấm tiếp, cho phép tiếp, và nó khởi động bản xem trước của CRM. Anh lại bấm cho phép (demo trong video đăng ngày 01/11/2026). Anh nhắc lại rằng nếu có chuyên môn lập trình thì bạn hoàn toàn đọc được các lệnh nó đề xuất. Lúc đó, Claude Code đang tạo API để test, phần password thì nó đọc trong file .env, và nó đang làm trang login. Theo anh, nghĩa là nó tự xây dựng CRM và tự test các chức năng, còn số token tiếp tục tăng lên (demo trong video đăng ngày 01/11/2026).

Anh chọn luôn cho phép, rồi bấm tiếp "cho phép một lần". Theo anh, sau khoảng hơn 10 phút thì Claude Code chạy xong, và phía trên là toàn bộ các bước nó đã thực thi (demo trong video đăng ngày 01/11/2026). Anh nói thời gian nhanh hay chậm tuỳ thuộc vào yêu cầu của bạn. Lúc này phiên đã tiêu tốn 133.000 token. Claude Code đã tự động khởi chạy phần mềm và đăng nhập vào cho anh, và anh phóng to cửa sổ ra để xem.

13. Thử CRM và sửa lỗi bằng chú thích trên ảnh

Anh Hồng vào phần thêm khách hàng và điền thông tin của chính mình để xem CRM có lưu được không. Anh bấm lưu, và thông tin đã được điền vào danh sách (demo trong video đăng ngày 01/11/2026). Anh chỉ cho người xem phía trên: Claude Code đã mở nhiều tab trình duyệt, như trang đăng nhập, trang khách hàng, trang chi tiết khách hàng. Theo anh, nghĩa là trong quá trình test và làm việc, nó đã tự động mở các trang này để kiểm tra, và khi hoàn tất thì mở cho anh trang web cuối cùng như vậy (demo trong video đăng ngày 01/11/2026).

Trang tổng quan của CRM có các ô tổng khách hàng, tổng doanh thu ghi nhận, khách hạng Vàng (chi tiêu từ 20 triệu) và khách hạng Bạc (chi tiêu từ 5 triệu), một danh sách khách hàng có ô tìm kiếm theo tên, số điện thoại, email cùng các bộ lọc giới tính, hạng và sắp xếp, và một khung sinh nhật trong 7 ngày tới (demo trong video đăng ngày 01/11/2026).

Anh mở danh sách file ở bên cạnh: đây là tất cả các file Claude Code đã tạo trong quá trình làm việc để xây dựng dự án này. Theo anh, dự án này có rất nhiều file, chứ không chỉ một file như trò chơi cờ caro; trong đó có nhiều file và mỗi file lại có rất nhiều code (demo trong video đăng ngày 01/11/2026). Vì thế, mới đầu chạy một vài yêu cầu mà nó đã tiêu tốn 133.000 token, nhiều hơn hẳn so với lúc làm trò chơi cờ caro, theo lời anh (video đăng ngày 01/11/2026).

Anh test qua một vài tính năng: tìm kiếm, lọc theo giới tính, lọc theo hạng, sắp xếp từ A tới Z. Khi click vào một khách hàng, CRM hiện thông tin của khách hàng đó cùng lịch sử chi tiêu, và anh có thể thêm lịch sử ghé thăm (demo trong video đăng ngày 01/11/2026). Ở ô ngày, anh chỉ ra rằng định dạng đang để tháng trước, ngày sau, và nói lát nữa sẽ bảo Claude Code sửa. Anh nhập số tiền là 100.000, số người là 10, rồi bấm thêm; thông tin tự động được thêm vào lịch sử. Anh thử xoá, nhưng lúc đó chưa xoá được dữ liệu của lượt ghé thăm (demo trong video đăng ngày 01/11/2026).

Anh dùng công cụ chú thích để hỗ trợ chỉnh sửa. Anh chọn hình khối để vẽ quanh ô ngày, thêm phần văn bản "đổi sang format ngày tháng năm" kèm dạng dd/mm/yyyy. Theo anh, bạn cũng có thể ghi là ngày tháng năm, hoàn toàn bằng ngôn ngữ tự nhiên (video đăng ngày 01/11/2026). Anh bổ sung một chú thích nữa quanh các nút xoá, ghi là chưa thể xoá được dữ liệu, rồi bấm thêm vào đoạn chat. Khi đó các hình ảnh này được đưa vào bối cảnh, và anh gửi yêu cầu "thực hiện sửa cho tôi" (demo trong video đăng ngày 01/11/2026).

Claude Code tiến hành đọc và thực thi yêu cầu. Danh sách việc nó lập ra gồm tìm nguyên nhân nút Xoá không chạy, thay confirm() bằng hộp xác nhận riêng, đổi ô ngày sang dd/mm/yyyy, và kiểm tra lại trên trình duyệt (demo trong video đăng ngày 01/11/2026). Khi xong, phía trên là các thông tin mô tả nó đã sửa gì và nguyên nhân từ đâu. Anh mở CRM ra, tải lại trang và thử xoá: lần này đã xoá được dữ liệu, và ô ngày đã đổi sang định dạng ngày tháng năm (demo trong video đăng ngày 01/11/2026).

Theo anh Hồng (video đăng ngày 01/11/2026), đó là cách áp dụng chế độ lên kế hoạch, để bạn có một kế hoạch trước khi Claude Code thực thi.

14. Hai dự án chạy song song trên một màn hình

Lúc này anh Hồng có hai dự án: thứ nhất là cờ caro, thứ hai là CRM. Theo anh (video đăng ngày 01/11/2026), nếu bạn muốn xử lý đồng thời hai tác vụ, hai dự án này, thì có thể mở chúng thành hai cửa sổ cho dễ làm việc. Bạn click vào nút dấu ba chấm, chọn "mở bằng" rồi chọn chia đôi màn hình. Khi đó hai dự án nằm ở hai bên màn hình, và bạn có thể thao tác đồng thời với cả hai.

Ví dụ, anh bảo bên cờ caro chuyển màu thành đen trắng, và bên CRM bổ sung thêm tính năng dark mode. Hai dự án chạy đồng thời với nhau, và theo anh, một bên lúc đó đang dùng khoảng 159.000 token, bên kia hơn 100.000 (demo trong video đăng ngày 01/11/2026). Khi cả hai thực thi xong, anh phóng to dự án thứ nhất ra: CRM đã có chức năng dark mode. Bên cờ caro thì đã chuyển sang chế độ đen trắng (demo trong video đăng ngày 01/11/2026).

15. Slash command: status, permissions và model

Theo anh Hồng (video đăng ngày 01/11/2026), Claude Code cung cấp một chức năng gọi là slash command, tức lệnh gạch chéo. Khi bạn nhập dấu gạch chéo vào ô chat, nó hiện ra các lệnh có thể dùng. Đưa chuột vào từng lệnh, phần mô tả hiện bên cạnh để bạn hiểu lệnh đó có chức năng gì. Ví dụ, lệnh /status hiển thị phiên bản, mô hình, môi trường và tài khoản của phiên này. Anh nhập lệnh, và Claude Code hiện các thông tin gồm phiên, mô hình đang dùng, quyền, môi trường (demo trong video đăng ngày 01/11/2026).

Nếu muốn thay đổi quyền, bạn có thể click vào đó và chọn chế độ mong muốn. Ngoài ra, theo anh, cốt lõi của nó là lệnh /permissions: bạn gõ lệnh, bấm Enter, và cửa sổ chọn quyền cũng hiện ra (video đăng ngày 01/11/2026). Anh giải thích, vì đang dùng phần mềm Claude desktop nên có giao diện trực quan để dễ sử dụng, nhưng khi làm việc trong cửa sổ terminal thì không có các nút chức năng đó để chọn.

Để minh hoạ, anh tạo một phiên mới trong terminal, nhập dấu gạch chéo và tìm lệnh về quyền. Terminal cũng hiện ra các chế độ, ví dụ tự động, cho phép hoặc cấm, và bạn chọn bằng cách di chuyển phím mũi tên sang trái, sang phải (demo trong video đăng ngày 01/11/2026).

Tiếp theo anh dùng lệnh /model để đổi sang mô hình khác. Bạn nhập lệnh /model rồi nhập model ID. Theo lời anh, ID anh nhập là claude-sonnet-5-5, chính là ID của mô hình đó; anh bấm Enter, bấm chuyển mô hình, và ở phía dưới cửa sổ đã chuyển sang Sonnet 5.5 (demo trong video đăng ngày 01/11/2026).

Để tìm model ID, theo anh, bạn vào phần mô hình và giá trên trang docs của Claude. Ở trang của Sonnet 5.5 có ID của nó, kèm các thông tin như cửa sổ ngữ cảnh 1 triệu token, chi phí sử dụng cho token đầu vào và đầu ra. Tương tự, bạn có thể xem ID của Opus và chi phí token của nó (trang docs trong video đăng ngày 01/11/2026). Theo anh, Opus 5.5 đắt hơn nhiều so với Sonnet, còn Fable 5.1 thì cũng đắt hơn Opus 5.5 (video đăng ngày 01/11/2026).

Anh cho biết ngoài ra còn rất nhiều lệnh khác. Nếu muốn tự tìm hiểu, bạn vào trang Commands trong docs của Claude Code; trang này liệt kê các lệnh có trong Claude Code cùng mô tả chức năng của từng lệnh (theo video đăng ngày 01/11/2026).

16. Lệnh compact và autocompact để giải phóng ngữ cảnh

Lúc đó trong dự án CRM, anh Hồng đang dùng 175.000 token. Theo anh (video đăng ngày 01/11/2026), Claude Code có một lệnh là /compact giúp giải phóng ngữ cảnh: nó tóm tắt lại những tiến trình đã làm trước đó để số token này được thu gọn lại. Anh chạy thử và chờ một lúc trong lúc nó nén phiên lại. Chạy xong, Claude Code thông báo đã tiết kiệm được 157.000 token, và trong phiên chỉ còn 83.000 token (demo trong video đăng ngày 01/11/2026).

Theo anh, khi nén phiên, tức tóm tắt lại phiên, Claude Code giữ lại những thông tin quan trọng. Tất nhiên nó có thể làm rơi rớt một vài thông tin khác, nhưng đây là cách để tối ưu lại lượng token (video đăng ngày 01/11/2026).

Ngoài ra, bạn có thể dùng chế độ autocompact. Anh thử lệnh /autocompact: với lệnh này, bạn đặt được một mức token, và khi phiên đạt tới mức đó thì Claude Code tự động nén. Ví dụ, bạn có thể cài khoảng 500k token, thì khi tới mức 500.000 token, nó tự động nén lại phiên này. Còn nếu không, bạn có thể để chế độ auto: nhập auto, và Claude Code tự động nén khi nào nó thấy cần (theo video đăng ngày 01/11/2026). Trang Commands của Claude Code docs cũng mô tả /autocompact [auto|<tokens>] theo cách này, với ví dụ 500k (đọc ngày 01/11/2026).

17. File CLAUDE.md: bộ quy tắc cố định cho dự án

Anh Hồng nhìn lại hai dự án vừa làm: gần như anh ngẫu hứng ra lệnh cho Claude Code thực hiện, và cứ thế nó làm theo yêu cầu của anh để chỉnh sửa. Theo anh, không có một bộ khung hay bộ quy tắc nhất định nào trong quá trình làm việc, mà gần như ngẫu hứng từ người gửi yêu cầu (video đăng ngày 01/11/2026). Nếu sau này bạn làm những dự án thật, có nhiều trang và muốn đồng nhất nguyên tắc thiết kế cho từng trang, thì theo anh bạn cần dùng một tính năng là file CLAUDE.md.

Theo anh (video đăng ngày 01/11/2026), file CLAUDE.md là một tệp văn bản ở định dạng Markdown, có đuôi .md, được đặt tại thư mục gốc của dự án. Nó giúp cung cấp hướng dẫn, quy tắc hành vi và ngữ cảnh cố định cho công cụ Claude Code hoặc các trợ lý lập trình AI khác, và CLAUDE.md luôn luôn được tải vào phiên làm việc trong mỗi cuộc trò chuyện. Với Claude Code, bạn dùng file CLAUDE.md; còn với các agent khác, bạn có thể dùng file AGENTS.md. Trang về memory trong Claude Code docs cũng ghi rằng Claude đọc các file này ở đầu mỗi phiên, và nếu repo dùng AGENTS.md thì có mục hướng dẫn riêng cho trường hợp đó (đọc ngày 01/11/2026).

Để minh hoạ, anh có một folder dự án mới tên là thiết kế website hoa bánh sinh nhật. Trong đó có một file ảnh, là file thiết kế layout của trang web. Anh cho biết bản thiết kế này được làm với sự hỗ trợ của ChatGPT, và theo anh trông rất đẹp (video đăng ngày 01/11/2026). Anh sẽ dựa vào ảnh thiết kế này để Claude Code làm theo.

Trong dự án này, anh đã tạo sẵn một file CLAUDE.md, chứa các quy tắc và hướng dẫn hành vi anh đặt ra để Claude Code làm theo. Theo lời anh, thứ nhất là công nghệ sử dụng, thứ hai là quy tắc thiết kế UI/UX, rồi quy tắc viết code, responsive design, hiệu năng và SEO, và cuối cùng là quy trình làm việc. File có độ dài khoảng 51 dòng; thanh trạng thái của Notepad++ ghi "lines: 51" (demo trong video đăng ngày 01/11/2026).

Một đoạn của file, từ dòng 1 tới dòng 36, đọc được trên cửa sổ Notepad++:

# CLAUDE.md

## 1. Công nghệ sử dụng

- Framework: Next.js với App Router.
- Ngôn ngữ: TypeScript.
- CSS: Tailwind CSS.
- Ưu tiên Server Components, chỉ sử dụng Client Components khi cần tương tác.
- Sử dụng các thư viện tương thích với phiên bản hiện có của dự án.

## 2. Quy tắc thiết kế UI/UX

- Thiết kế giao diện hiện đại, chuyên nghiệp và phù hợp với lĩnh vực website.
- Chủ động lựa chọn màu sắc, typography, hình ảnh và bố cục phù hợp.
- Đảm bảo tính nhất quán giữa các trang và component.
- Tránh giao diện đơn điệu, lạm dụng hiệu ứng hoặc sử dụng template quá phổ thông.
- Ưu tiên trải nghiệm người dùng và khả năng chuyển đổi.

## 3. Quy tắc viết code

- Viết code sạch, dễ đọc, dễ bảo trì và tái sử dụng.
- Chia giao diện thành các component hợp lý.
- Sử dụng Tailwind CSS cho styling, hạn chế CSS thuần khi không cần thiết.
- Sử dụng TypeScript với kiểu dữ liệu rõ ràng.
- Không cài thêm thư viện hoặc thay đổi cấu hình dự án nếu không cần thiết.

## 4. Responsive Design

- Thiết kế theo hướng mobile-first.
- Đảm bảo website hiển thị tốt trên desktop, tablet và mobile.
- Không để nội dung bị tràn, chồng lấn hoặc hình ảnh bị méo.
- Tối ưu kích thước chữ, khoảng cách và thao tác cảm ứng trên mobile.

## 5. Hiệu năng và SEO

- Tối ưu hình ảnh, font chữ và tốc độ tải trang.

18. Ví dụ 3: website hoa tươi và bánh sinh nhật từ một file thiết kế

Bây giờ anh Hồng dựa vào file thiết kế hoa-banh.png. Anh tạo một phiên mới, trỏ tới folder cần làm việc, rồi gõ câu lệnh bắt đầu bằng "Sử dụng". Anh nhập ký tự @ để dẫn tới file cần dùng và tham chiếu tới file hoa-banh.png, chính là file thiết kế. Theo lời anh, phần còn lại của câu là dùng file này để thiết kế website theo yêu cầu, rồi anh gửi đi; phiên sau đó mang tên "Thiết kế website với @hoa-banh.png" (demo trong video đăng ngày 01/11/2026).

Theo anh (video đăng ngày 01/11/2026), khi gửi tin nhắn này lên, Claude Code tự động lấy file CLAUDE.md để xem hướng dẫn và quy tắc thiết kế. Sau khoảng 10 phút, nó thực thi và hoàn thành yêu cầu của anh, và lượng token đã tiêu tốn là 150.000 (demo trong video đăng ngày 01/11/2026).

Anh mở website ra để xem nó thiết kế đúng hay chưa, phóng to và cuộn xuống. Theo nhận xét của anh, thiết kế rất chính xác so với bản thiết kế gốc (demo trong video đăng ngày 01/11/2026). Anh xem các ảnh trên trang và cho rằng hình như chúng đã được cắt ra từ file thiết kế. Bản tóm tắt của Claude Code ở mục "Còn tồn tại" cũng ghi ảnh có độ phân giải thấp vì mockup chỉ rộng 778px, nên 23 ảnh trong public/images/ được cắt từ mockup rồi phóng to (demo trong video đăng ngày 01/11/2026).

Lúc này mới chỉ có trang chủ: chưa vào xem được trang chi tiết sản phẩm, cũng chưa đặt hàng được (demo trong video đăng ngày 01/11/2026). Anh bảo Claude Code hoàn thiện các trang tiếp theo:

hãy hoàn thiện thêm các trang chi tiết sản phẩm, giỏ hàng, đặt hàng

Anh chờ Claude Code triển khai. Theo anh, sau gần 10 phút, nó đã hoàn thiện các chức năng tiếp theo anh đề ra (demo trong video đăng ngày 01/11/2026). Anh mở trang web, tải lại và phóng to. Anh click vào một bó hoa thì trang chi tiết sản phẩm hiện ra. Anh bấm thử "thêm giỏ hàng", và số lượng trong giỏ tăng lên. Anh xoá giỏ hàng thử, xoá được, rồi thêm lại một bó hoa vào giỏ (demo trong video đăng ngày 01/11/2026).

Tiếp theo là bánh sinh nhật. Trong giỏ lúc đó chưa có bánh, nên anh vào danh mục sản phẩm bánh sinh nhật, chọn một chiếc bánh và thêm vào giỏ hàng. Giỏ hàng có hai sản phẩm: một bó hoa cúc vàng và một chiếc bánh sinh nhật. Có nút "xoá tất cả", nhưng anh cho thấy nút này chưa chạy, chưa hoạt động (demo trong video đăng ngày 01/11/2026).

Anh bấm tiến hành đặt hàng và điền thông tin vào form: người nhận hàng, quận huyện (Claude Code đã thêm sẵn danh sách quận huyện), ngày giao, giờ giao và phương thức thanh toán. Anh bấm xác nhận đặt hàng, và trang đặt hàng thành công hiện ra (demo trong video đăng ngày 01/11/2026).

Cuối cùng anh bảo Claude Code thêm nút liên hệ ở góc phải màn hình; theo lời anh, câu yêu cầu là thêm nút liên hệ ở góc phải màn hình, số điện thoại và Zalo. Sau một lúc chờ, Claude Code hoàn tất và thêm hai nút ở góc màn hình: chat Zalo và liên hệ qua số điện thoại. Anh nhận xét trông cũng rất đẹp (demo trong video đăng ngày 01/11/2026).

Anh Hồng kết thúc video (đăng ngày 01/11/2026): qua phần nội dung rất cơ bản vừa rồi, anh đã chia sẻ và hướng dẫn cách sử dụng Claude Code để xây dựng những ứng dụng và website phục vụ cho công việc của mỗi người.