Tôi muốn nói rõ một điều trước khi chúng ta bắt đầu.
Hãy lưu lại bài này nhé :)
Tôi không phải là một lập trình viên. Tôi chưa bao giờ là một lập trình viên. Tôi không có bằng khoa học máy tính. Tôi chưa từng tham gia bất kỳ khóa học lập trình cấp tốc nào. Tôi không thể đọc hầu hết các đoạn code và nói cho bạn biết nó làm gì.
Nhưng cuối tuần trước, tôi đã đưa một ứng dụng web hoạt động lên internet. Người dùng thực đã đăng ký. Dữ liệu thực đã được lưu trữ. Các tính năng thực đã hoạt động.
Tôi đã xây dựng toàn bộ ứng dụng đó với Claude Code trong hai ngày. Và tôi sẽ kể cho bạn sự thật về trải nghiệm đó thực sự như thế nào. Không phải phiên bản được chọn lọc. Mà là thực tế lộn xộn, đầy khó chịu và tràn ngập những bước đột phá.
Bởi vì mọi câu chuyện "tôi đã xây dựng một ứng dụng với AI" trên mạng đều nghe có vẻ dễ dàng. Nó không hề dễ dàng. Nhưng nó hoàn toàn có thể làm được.
Sáng Thứ Bảy: Ý Tưởng
Tôi muốn xây dựng một công cụ đơn giản. Một lịch nội dung cho phép bạn lên kế hoạch cho các bài đăng trên nhiều nền tảng, kéo thả chúng giữa các ngày và đánh dấu là đã xuất bản. Không có gì mang tính cách mạng. Nhưng là thứ tôi thực sự cần cho quy trình làm việc của riêng mình.
Tôi đã mở Claude Code trong terminal lần đầu tiên vào lúc 9 giờ sáng Thứ Bảy.
Đến 9 giờ 15 phút sáng, tôi đã mắc sai lầm đầu tiên.
Sai Lầm #1: Bắt Đầu Mà Không Có Kế Hoạch
Câu lệnh đầu tiên của tôi cho Claude Code là:
Xây cho tôi một ứng dụng lịch nội dung
Claude đã tạo ra một loạt các tệp tin. Một thứ gì đó xuất hiện trên màn hình. Trông nó giống như một lịch nội dung được thiết kế bởi một người chưa từng thấy lịch bao giờ.
Đây là lúc 90% mọi người bỏ cuộc. Họ gõ một câu lệnh mơ hồ, nhận được một kết quả mơ hồ, và kết luận rằng vibe coding không hiệu quả.
Vấn đề không phải là Claude. Vấn đề là tôi. Tôi đã không cung cấp cho nó bất kỳ thông tin gì để làm việc.
Điều lẽ ra tôi nên làm:
Tôi nên bắt đầu ở Chế độ Lập Kế Hoạch. Nhấn Shift + Tab trong Claude Code để chuyển từ Chế độ Hành Động sang Chế độ Lập Kế Hoạch. Trong Chế độ Lập Kế Hoạch, Claude suy nghĩ trước khi xây dựng. Nó đặt câu hỏi. Nó vạch ra kiến trúc. Nó cho bạn thấy những gì nó định tạo.
Tôi đã quay lại và làm đúng cách:
Tôi muốn xây dựng một ứng dụng web lịch nội dung. Trước khi viết bất kỳ code nào, hãy lên kế hoạch cho việc này.
Ứng dụng cần:
- Chế độ xem hàng tuần với 7 cột (Thứ Hai đến Chủ Nhật)
- Khả năng thêm bài đăng với tiêu đề, nền tảng (Twitter, LinkedIn, Instagram) và trạng thái (bản nháp, đã lên lịch, đã xuất bản)
- Kéo và thả để di chuyển bài đăng giữa các ngày
- Thiết kế đơn giản, sạch sẽ sử dụng Tailwind CSS
- Dữ liệu được lưu trữ trong cơ sở dữ liệu cục bộ để duy trì giữa các phiên làm việc
Chúng ta nên sử dụng công nghệ nào? Cấu trúc thư mục ra sao? Hãy hướng dẫn tôi về kiến trúc trước khi xây dựng bất cứ thứ gì.
Claude đã trả lại một kế hoạch chi tiết. Next.js làm framework. SQLite làm cơ sở dữ liệu. Tailwind cho việc tạo kiểu. Một cấu trúc thư mục sạch sẽ được sắp xếp theo từng tệp tin.
Bài học rút ra: Luôn bắt đầu ở Chế độ Lập Kế Hoạch. Luôn mô tả chi tiết những gì bạn muốn. 5 phút bạn dành cho việc lập kế hoạch sẽ giúp bạn tiết kiệm 2 giờ xây dựng lại.
Sai Lầm #2: Cố Gắng Xây Dựng Mọi Thứ Cùng Một Lúc
Sau khi lập kế hoạch, tôi rất hào hứng. Tôi bảo Claude xây dựng toàn bộ mọi thứ trong một lần.
Kết quả là một mớ hỗn độn. Một số tính năng hoạt động. Những tính năng khác thì được triển khai một nửa. Tính năng kéo thả bị hỏng. Cơ sở dữ liệu không lưu đúng cách. Tôi không biết bắt đầu sửa từ đâu.
Điều lẽ ra tôi nên làm:
Xây dựng từng tính năng một. Đây là quy tắc vàng của vibe coding.
Tôi đã bắt đầu lại và làm theo thứ tự này:
Phiên 1: Chỉ bố cục trang cơ bản. Bảy cột. Không có tính năng. Phiên 2: Thêm khả năng tạo bài đăng (chỉ một biểu mẫu đơn giản). Phiên 3: Hiển thị các bài đăng đã lưu trong cột ngày chính xác. Phiên 4: Thêm chức năng kéo và thả. Phiên 5: Thêm tính năng trạng thái (bản nháp/đã lên lịch/đã xuất bản). Phiên 6: Làm cho nó trông đẹp mắt.
Mỗi tính năng có một cuộc trò chuyện riêng. Ngữ cảnh mới. Nhiệm vụ rõ ràng. Kết quả sạch sẽ.
Khi tôi xây dựng từng tính năng một, mỗi tính năng đều hoạt động hoàn hảo. Khi tôi cố gắng xây dựng mọi thứ cùng một lúc, chẳng có gì hoạt động cả.
Bài học rút ra: Một cuộc trò chuyện cho mỗi tính năng. Không bao giờ trộn lẫn nhiều tính năng trong cùng một phiên làm việc với Claude Code.
Sai Lầm #3: Không Tạo Tệp CLAUDE.md
Đến chiều Thứ Bảy, tôi đã có một bố cục cơ bản hoạt động và tôi rất hào hứng. Nhưng tôi liên tục gặp phải những vấn đề giống nhau:
Claude liên tục thêm vào sự phức tạp không cần thiết. Nó sẽ tạo ra các hệ thống xử lý lỗi phức tạp trong khi tôi chỉ muốn một try-catch đơn giản. Nó sẽ thêm các thư viện hoạt ảnh trong khi tôi chỉ muốn một chuyển tiếp sạch sẽ. Nó sẽ cấu trúc lại toàn bộ hệ thống thư mục của tôi khi tôi yêu cầu một thay đổi nhỏ.
Tôi đã phải sửa đi sửa lại những thứ giống nhau.
Sau đó tôi nhớ ra đã đọc về CLAUDE.md.
Tôi đã tạo một tệp trong thư mục gốc của dự án:
CLAUDE.md
Quy Tắc Dự Án
- Đây là một lịch nội dung đơn giản. Giữ mọi thứ ở mức tối thiểu.
- Sử dụng Next.js 14 với App Router
- Sử dụng Tailwind CSS cho tất cả việc tạo kiểu. Không sử dụng framework CSS nào khác.
- Sử dụng SQLite với Prisma ORM cho cơ sở dữ liệu
- Giữ mọi thứ đơn giản. Không có sự trừu tượng hóa hoặc mẫu thiết kế không cần thiết.
- Khi tôi nói "làm cho nó trông đẹp", ý tôi là: khoảng cách sạch sẽ, phông chữ dễ đọc, hiệu ứng di chuột tinh tế, các góc bo tròn
- Không bao giờ thêm các phụ thuộc mới mà không hỏi tôi trước
- Hãy hỏi trước khi tái cấu trúc bất kỳ code hiện có nào
Phong Cách Code
- Code đơn giản, dễ đọc. Một người mới bắt đầu có thể hiểu được.
- Tên biến rõ ràng. Không viết tắt.
- Chỉ thêm comment cho logic không hiển nhiên
Sau khi tạo tệp này, trải nghiệm đã thay đổi hoàn toàn. Claude ngừng việc thiết kế quá mức cần thiết. Nó ngừng thêm các thư viện ngẫu nhiên. Nó ngừng cấu trúc lại những thứ tôi không yêu cầu.
Mỗi khi Claude làm điều gì tôi không muốn, tôi lại thêm một quy tắc mới vào CLAUDE.md. Đến tối Chủ Nhật, tệp này đã có hơn 30 quy tắc và Claude đang làm theo tất cả chúng một cách hoàn hảo.
Bài học rút ra: Tạo CLAUDE.md** ngay từ ngày đầu tiên. Cập nhật nó liên tục. Đây là công cụ mạnh mẽ nhất trong Claude Code.
Sai Lầm #4: Không Sử Dụng Ảnh Chụp Màn Hình
Tối Thứ Bảy. Ứng dụng hoạt động về mặt chức năng nhưng trông xấu. Tôi đã gõ:
Làm cho thiết kế hiện đại và chuyên nghiệp hơn
Claude đã thay đổi mọi thứ. Chúng trông khác đi. Không đẹp hơn, chỉ khác thôi.
Tôi đang cố gắng mô tả các vấn đề trực quan bằng lời nói. Điều đó cực kỳ kém hiệu quả.
Thay vào đó, tôi bắt đầu chụp ảnh màn hình của các trang web có thiết kế mà tôi yêu thích. Tôi dán chúng trực tiếp vào Claude Code:
[ảnh chụp màn hình giao diện lịch sạch sẽ]
Tôi muốn lịch của mình trông như thế này. Cụ thể:
- Chính xác sắc thái xám này cho nền
- Các thẻ bo tròn này cho mỗi bài đăng
- Khoảng cách này giữa các phần tử
- Cách ngày đang hoạt động được tô sáng màu xanh lam
Claude đã tái tạo thiết kế gần như hoàn hảo. Ngay lần thử đầu tiên.
Sau đó, khi có thứ gì đó trông không ổn, thay vì mô tả nó, tôi chụp ảnh màn hình, khoanh tròn khu vực có vấn đề, dán nó vào và nói "khoảng cách này sai" hoặc "phông chữ này quá nhỏ."
Bài học rút ra: Ảnh chụp màn hình hiệu quả hơn 10 lần so với lời nói cho phản hồi trực quan. Luôn dán hình ảnh thay vì mô tả những gì bạn thấy.
Chủ Nhật: Mọi Thứ Đã Kết Hợp Lại
Đến sáng Chủ Nhật, tôi đã có một ứng dụng hoạt động với thiết kế sạch sẽ, kéo thả, dữ liệu liên tục và cơ sở dữ liệu hoạt động. Tôi đã xây dựng toàn bộ mọi thứ mà không hiểu hầu hết code.
Nhưng nó chỉ tồn tại trên máy tính xách tay của tôi. Đã đến lúc triển khai.
Sai Lầm #5: Sợ Hãi Việc Triển Khai
Triển khai nghe có vẻ đáng sợ. Máy chủ. Tên miền. DNS. Các tệp cấu hình.
Tôi suýt dừng lại. Tôi suýt quyết định "chạy ở local là đủ tốt rồi."
Nhưng tôi đã vượt qua và hỏi Claude:
Tôi muốn triển khai ứng dụng này trực tiếp lên internet. Tôi muốn sử dụng Vercel vì tôi nghe nói nó dễ nhất. Hãy hướng dẫn tôi các bước chính xác.
Claude đã đưa cho tôi bảy bước:
- Đẩy code lên GitHub (Claude đã giúp tôi thiết lập Git)
- Đăng ký Vercel (miễn phí)
- Kết nối Vercel với kho lưu trữ GitHub của tôi
- Thiết lập các biến môi trường cho cơ sở dữ liệu
- Nhấp vào triển khai
- Đợi 90 giây
- Nhận URL trực tiếp của tôi
Tôi đã làm theo các bước. Ba phút sau, ứng dụng của tôi đã hoạt động trực tiếp. Tôi đã gửi URL cho năm người. Họ đã mở nó. Nó hoạt động.
Bài học rút ra: Triển khai không đáng sợ. Nó chỉ là một danh sách kiểm tra. Claude sẽ hướng dẫn bạn từng bước.
12 Quy Tắc Tôi Ước Mình Biết Trước Khi Bắt Đầu
Mọi thứ tôi học được trong hai ngày, được nén lại thành các quy tắc:
Quy tắc 1: Luôn bắt đầu ở Chế độ Lập Kế Hoạch. Shift + Tab. Suy nghĩ trước khi xây dựng.
Quy tắc 2: Một cuộc trò chuyện cho mỗi tính năng. Ngữ cảnh mới là ngữ cảnh tốt hơn.
Quy tắc 3: Tạo CLAUDE.md ngay từ ngày đầu tiên. Mỗi lần sửa chữa trở thành một quy tắc vĩnh viễn.
Quy tắc 4: Sử dụng ảnh chụp màn hình cho mọi vấn đề trực quan. Khoanh tròn vấn đề. Dán trực tiếp.
Quy tắc 5: Xây dựng phiên bản đơn giản nhất trước. Chỉ thêm sự phức tạp sau khi phiên bản đơn giản hoạt động.
Quy tắc 6: Mô tả chi tiết những gì bạn muốn. Câu lệnh của bạn càng cụ thể, đầu ra càng tốt. "Xây một trang đăng nhập" sẽ cho kết quả tệ. "Xây một trang đăng nhập với trường email và mật khẩu, liên kết 'quên mật khẩu' bên dưới, nút gửi màu xanh lam và chuyển hướng đến /dashboard khi thành công" sẽ cho chính xác những gì bạn yêu cầu.
Quy tắc 7: Sử dụng /compact khi cuộc trò chuyện trở nên dài. Chất lượng của Claude giảm khi ngữ cảnh đầy lên.
Quy tắc 8: Cam kết với Git sau mỗi tính năng hoạt động. Claude có thể giúp bạn làm điều này. Nếu có thứ gì đó hỏng, bạn có thể khôi phục.
Quy tắc 9: Khi có thứ gì đó hỏng, hãy sao chép thông báo lỗi và dán nó vào Claude. Nói "Chẩn đoán nguyên nhân gốc rễ trước khi sửa bất cứ thứ gì." Claude hầu như luôn tìm ra vấn đề ngay lập tức.
Quy tắc 10: Đừng cố gắng hiểu mọi dòng code. Hãy hiểu mỗi tệp làm gì và chúng kết nối với nhau như thế nào. Điều đó là đủ để chỉ đạo Claude một cách hiệu quả.
Quy tắc 11: Khi Claude bị mắc kẹt trong một vòng lặp sửa đi sửa lại cùng một thứ, hãy dừng lại. Bắt đầu một cuộc trò chuyện mới. Chỉ dán tệp liên quan và một mô tả rõ ràng về vấn đề.
Quy tắc 12: Hãy giao hàng trước khi nó hoàn hảo. Phiên bản một không cần phải đẹp. Nó cần phải hoạt động. Bạn luôn có thể làm cho nó tốt hơn trong phiên bản hai.
Những Gì Tôi Đã Xây Dựng Kể Từ Cuối Tuần Đó
Đó là ba tuần trước. Kể từ đó, tôi đã xây dựng:
- Một cổng thông tin giới thiệu khách hàng với đăng nhập và tải tệp lên
- Một bảng điều khiển nội bộ theo dõi các chỉ số nội dung của tôi
- Một trình tạo hóa đơn đơn giản tạo hóa đơn PDF từ một biểu mẫu
- Một trình quản lý dấu trang lưu và sắp xếp các liên kết theo chủ đề
Tôi vẫn không thể đọc hầu hết code. Tôi vẫn không hiểu 80% những gì đang xảy ra trong các tệp. Nhưng tôi có thể mô tả những gì tôi muốn đủ rõ ràng để Claude xây dựng nó. Tôi có thể gỡ lỗi các vấn đề bằng cách cho Claude xem lỗi. Tôi có thể triển khai các sản phẩm hoạt động lên internet.
Đó là vibe coding. Bạn không phải là lập trình viên. Bạn là người quản lý sản phẩm. Claude là lập trình viên. Công việc của bạn là biết những gì cần xây dựng và truyền đạt nó một cách rõ ràng.
Hầu hết mọi người sẽ tiếp tục tự nhủ rằng họ cần học code trước khi có thể xây dựng bất cứ thứ gì.
Những người mở terminal vào cuối tuần này sẽ có một ứng dụng hoạt động vào sáng Thứ Hai. Tôi biết vì đó chính xác là những gì đã xảy ra với tôi.
Theo dõi tôi @eng_khairallah1 để biết thêm các khóa học, công cụ và quy trình làm việc về AI. Nội dung mới mỗi tuần.
hy vọng bài viết này hữu ích cho bạn, Khairallah ❤️
