Firebase Studio: Vibe Coding Từ Ý Tưởng đến Website Ấn Tượng

AI và Cuộc Cách Mạng Thiết Kế Website

AI đang thay đổi cách chúng ta biến ý tưởng thành hiện thực. Bạn không cần phải là lập trình viên chuyên nghiệp để tạo ra một website đẹp mắt, chức năng thú vị. Với Google Firebase Studio¹ và một chút sáng tạo, bất kỳ ai có ý tưởng và sự kiên trì đều có thể xây dựng sản phẩm ấn tượng. Đây là câu chuyện của mình về hành trình "vibe coding" để tạo ra ba website gồm Vnstock, Thinh Vu Blog (trang bạn đang đọc), Learn Anything LMS với trải nghiệm thú vị, đẹp mắt mà không cần thành thạo Next.js², Shadcn UI³, hay Tailwind CSS⁴ vốn là các công nghệ đằng sau chúng.

Chuỗi bài viết này sẽ dẫn bạn qua từng bước của hành trình đó, từ ý tưởng ban đầu đến sản phẩm hoàn chỉnh, với sự hỗ trợ đắc lực từ AI.

Vibe Coding Là Gì?

Vibe coding là cách tiếp cận xây dựng website dựa trên cảm hứng và sự tương tác với AI, thay vì tập trung vào những dòng code phức tạp. Bạn không cần phải là chuyên gia lập trình, chỉ cần:

• Ý tưởng rõ ràng: Biết bạn muốn xây dựng gì (một blog, một trang khóa học, hay một hệ thống tài chính).
• Kỹ năng giao tiếp với AI: Diễn đạt ý tưởng qua prompt⁵ để AI hiểu và hỗ trợ.
• Tinh thần học hỏi & vượt khó: Sẵn sàng thử nghiệm, mắc lỗi và bền bỉ nâng cấp kỹ năng qua những tình huống thực tế dù đôi khi tưởng chừng muốn bỏ cuộc.

Hãy nghĩ về vibe coding như việc trò chuyện với một người bạn thông minh (AI), mô tả ý tưởng của bạn, và để nó giúp bạn biến ý tưởng thành hiện thực – giống như một kiến trúc sư vẽ bản thiết kế cho ngôi nhà mơ ước của bạn.

Một Chút Nền Tảng: Không Phải Lập Trình Viên, Nhưng Không Hẳn Là Tờ Giấy Trắng

Trước khi bắt tay vào làm web theo kiểu Vibe Coding với Firebase Studio, mình tuy không phải là lập trình viên chuyên nghiệp, nhưng có chút kinh nghiệm cơ bản:

• Tập tành vọc làm website từ 2010 khi còn tồn tại Yahoo 360 Blog và bản thân mình hoạt động về Digital Marketing cũng gần 10 năm.
• Tự xây dựng blog và trang khóa học với WordPress⁶.
• Sử dụng Docusaurus⁷ và tạo các trang nội dung marketing với React⁸ cho trang tài liệu của dự án như Vnstock và Learn Anything.
• Đã quen các thao tác cơ bản với Node.js⁹, làm việc với môi trường dòng lệnh trong Terminal¹⁰, hay Git¹¹ và 4 năm kinh nghiệm lập trình Python¹².

Dù vậy mình chưa bao giờ học hay biết về các công nghệ tạo nên các website trong Firebase Studio như NextJS, Shadcn UI, Tailwind CSS. Điều đó không có gì cản trở mình cả bởi chỉ cần tập trung vào mục tiêu, xem AI có thể tạo ra thứ gì rồi tìm hiểu thêm cũng chưa muộn.

Những kỹ năng này, cộng với tư duy hệ thống và khả năng debug trên nhiều môi trường, đã giúp mình dễ dàng thích nghi với cách làm việc hoàn toàn mới của Firebase Studio. Dù không biết gì về Next.js, Shadcn UI hay Tailwind CSS, mình vẫn tự tin bắt đầu nhờ khả năng tương tác với mã nguồn và sự hỗ trợ mạnh mẽ từ AI.

Prompt Hơn Ngàn Lần & Sự Ra Đời Của 3 Website Ấn Tượng

Với 1341 lần prompt và commit¹³ github để sửa đổi, mình đã xây dựng ba website:

Hành trình này không chỉ là về việc viết code, mà là về việc học cách tư duy, cách đặt câu hỏi đúng cho AI, và quan trọng nhất là không bao giờ bỏ cuộc, mất ăn mất ngủ để chinh phục mục tiêu.

Thành Quả Truyền Cảm Hứng

Hãy tưởng tượng: từ một ý tưởng mơ hồ, bạn tạo ra những website không chỉ đẹp mắt mà còn hoạt động mượt mà, đáp ứng nhu cầu mở rộng trong tương lai. Dưới đây là hình ảnh thực tế của các website mình đã xây dựng với Firebase Studio:

Những website này không chỉ là sản phẩm kỹ thuật mà còn là minh chứng cho sức mạnh của sự sáng tạo kết hợp với AI. Từ một hệ thống học tập trực tuyến chuyên nghiệp, một blog tối ưu hóa trải nghiệm đọc và tìm kiếm, đến một nền tảng sản phẩm phần mềm đầy tiềm năng – tất cả đều bắt đầu từ những dòng prompt đơn giản và sự kiên trì. Bạn cũng có thể làm được điều tương tự!

Tại Sao Chọn Firebase Studio?

Khi bắt đầu hành trình xây dựng website, bạn sẽ đối mặt với vô số lựa chọn: từ các nền tảng quen thuộc như WordPress hay Docusaurus đến các công cụ lập trình hỗ trợ AI như Cursor, Windsurf, hay V0¹⁴. Vậy tại sao mình lại chọn Google Firebase Studio để vibe coding? Dựa trên trải nghiệm thực tế khi xây dựng ba website (Learn Anything LMS, Thinh Vu Blog, và Vnstock), dưới đây là những lý do khiến Firebase Studio trở thành công cụ lý tưởng, cùng so sánh với các lựa chọn khác để bạn thấy rõ sự khác biệt.

1. Mô Hình AI Được Đào Tạo Chuyên Biệt Cho Giao Diện Đẹp Mắt

Firebase Studio sử dụng mô hình AI được tối ưu để tạo ra giao diện hiện đại, chuyên nghiệp nhờ tích hợp Shadcn UI¹⁵ và Tailwind CSS¹⁶. Chỉ với một prompt¹⁷ như dưới đây và AI có thể sinh ra một giao diện đẹp mắt đủ làm mình bất ngờ và sẵn sàng phác thảo tiếp dễ tùy chỉnh.

Core Features:

- Elegant Reader-Centric Design: Stunning and elegant personal blog design, optimized for readability on all devices.
- Markdown Editor: Markdown-based content creation and editing for seamless writing and formatting.
- WordPress Migration: Migration support for importing existing WordPress posts, including preserving URL structures like https://thinhvu.com/2024/09/23/obsidian-flow-va-dikm-tu-thong-tin-den-thong-thai/.

Điều này khác biệt hoàn toàn so với các IDE như Cursor hay Windsurf, nơi mình từng thử cùng một prompt nhưng kết quả cho thấy sự thô ráp và thiếu tinh tế (tụt luôn cảm xúc thì làm sao còn gọi là vibe coding nữa). Lý do? Các IDE này chủ yếu hỗ trợ viết code đa dụng, không được đào tạo chuyên biệt để tạo giao diện trực quan như Firebase Studio.

2. Miễn Phí và Mạnh Mẽ

Firebase Studio thuộc hệ sinh thái Google Firebase cho xây dựng website và app, trong đó cung cấp bậc miễn phí để bạn sử dụng các dịch vụ bao gồm Google Authentication¹⁸ và Firestore Database¹⁹, đủ để xây dựng các dự án cá nhân hoặc nhỏ mà không tốn chi phí cũng như bảo mật cao. So với WordPress, bạn thường phải mua theme trả phí (giá từ 30-60 USD) hoặc plugin (như RankMath SEO) vì bản thân bạn khó có thể tùy biến website với lập trình php. Với Docusaurus²⁰, tuy miễn phí nhưng quá tập trung vào trải nghiệm trang tài liệu và mất sức khi bạn phải tự cấu hình nhiều thứ dựa trên các yêu cầu bó buộc sẵn từ nền tảng. Từ tìm kiếm đến giao diện, và đôi khi cần dịch vụ bên thứ ba như Algolia²¹ để hỗ trợ tìm kiếm trong trang và dịch vụ này miễn phí cho cá nhân nhưng không cung cấp hỗ trợ dịch vụ nên nếu bạn không may gặp lỗi thì coi như xui xẻo. Firebase Studio được đào tạo kỹ tài liệu và khả năng tích hợp tốt các dịch vụ trong hệ sinh thái Google giúp mình tiết kiệm chi phí mà vẫn tạo được website chuyên nghiệp, như Thinh Vu Blog, triển khai miễn phí trên Netlify²² chỉ trong 5 ngày.

3. Next.js: Tốc Độ, SEO, và Khả Năng Mở Rộng

Next.js²³, nền tảng cốt lõi của Firebase Studio, đảm bảo website tải nhanh, tối ưu SEO²⁴, và dễ dàng mở rộng tính năng. So với WordPress, nhiều người nghĩ WordPress là lựa chọn hàng đầu cho SEO, nhưng Next.js hoàn toàn có thể thay thế khi được yêu cầu. Với kinh nghiệm tối ưu SEO và trải nghiệm RankMath SEO trên WordPress, mình viết prompt để yêu cầu Firebase Studio tạo ra logic tối ưu SEO cho website tương tự mà không cần plugin trả phí (nhưng trả phí không phải là nỗi lo lớn nhất).

WordPress, nơi bạn bị phụ thuộc vào theme hoặc nhà cung cấp plugin (và có thể gặp rủi ro nếu theme hay plugin không còn được hỗ trợ). Mình gặp lỗi khá khó chịu khi WordPress nâng cấp phiên bản tự động hoặc 1 plugin trong trang xung đột với các plugin khác khi nâng cấp phiên bản khiến website trở nên mong manh trước thay đổi về mặt kỹ thuật. Với Next.js, bạn có thể tùy chỉnh tự do nhờ AI, từ giao diện đến logic. So với Docusaurus, Next.js linh hoạt hơn nhiều – Docusaurus phù hợp cho tài liệu tĩnh nhưng thiếu các tính năng động như tìm kiếm tích hợp, đăng nhập, bình luận, v.v. Ví dụ, khi xây dựng Vnstock, chức năng tìm kiếm nội dung trong trang đã có sẵn mà mình không cần dịch vụ bên ngoài như Google Programmable Search Engine²⁵.

4. Khắc Phục Hạn Chế của Trang Tài Liệu Docusaurus

Nếu bạn từng dùng trang tài liệu dạng tĩnh static site generators (SSG)²⁶ như Docusaurus, bạn có thể quen với việc phải tự xây dựng nhiều thứ thủ công. Chẳng hạn, Docusaurus không có sẵn chức năng tìm kiếm nội dung mạnh mẽ, buộc bạn phải tích hợp Algolia hoặc các giải pháp bên ngoài, mất thời gian và đôi khi tốn phí. Firebase Studio khắc phục điều này bằng cách cho phép tạo bản phác thảo website nhanh chóng qua prompt, đồng thời tích hợp các component library²⁷ như Shadcn UI. Điều này giúp mình tạo ra các thành phần giao diện (như nút, biểu mẫu) đẹp mắt mà không cần viết code từ đầu. Bạn có thể tự mình so sánh 2 trang khóa học sau đây bao gồm trang tạo với Docusaurus (React) nhờ AI và trang mình chuyển thể giao diện cũ với Firebase Studio.

• Khóa học tại Learn Anything (Docusaurus): https://learn-anything.vn/khoa-hoc
• Khóa học tại Vnstock (Next.js): https://vnstocks.com/khoa-hoc

Sau khi chuyển đổi, không còn tình trạng trang bị đứng hình phải reload lại.

5. Tự Do Sáng Tạo với Firebase Studio và Học Hỏi từ Các Nền Tảng Khác

Firebase Studio cho phép học hỏi logic từ các nền tảng như WordPress hay Docusaurus và áp dụng vào dự án Next.js. Ví dụ, mình đã tái hiện cách WordPress sinh ra URL bài viết trên blog để chuyển đổi nền tảng công nghệ mà không ảnh hưởng đến xếp hạng tìm kiếm qua SEO bằng cách yêu cầu sinh ra nội dung web từ file Markdown. Điều này giúp mình kết hợp sự đơn giản của soạn thảo nội dung Markdown thông qua Obsidian tương tự như mình làm cho Docusaurus với khả năng tối ưu SEO của WordPress trong website mục tiêu dùng công nghệ Next.js.

Lời Kết

Mình tin rằng câu chuyện của mình sẽ là nguồn cảm hứng cho những ai đang có ý tưởng nhưng lại ngần ngại vì rào cản kỹ thuật. Công nghệ AI đang ở đây để giúp chúng ta, và việc của bạn chỉ là bắt đầu.

Trong bài viết tiếp theo, mình sẽ chia sẻ chi tiết hơn về kinh nghiệm thực chiến và các kỹ năng cốt lõi để bạn có thể "vibe coding" hiệu quả với Google Firebase Studio.

Bài 2 - Làm Chủ Firebase Studio

---

Footnotes

1. Google Firebase Studio: Một nền tảng phát triển ứng dụng web, tích hợp AI để hỗ trợ tạo giao diện và chức năng mà không cần viết nhiều code. ↩

2. Next.js: Một framework JavaScript để xây dựng website nhanh, hiện đại, và thân thiện với SEO. ↩

3. Shadcn UI: Bộ công cụ giao diện người dùng (UI) cung cấp các thành phần (component) đẹp, dễ tùy chỉnh. ↩

4. Tailwind CSS: Một thư viện CSS giúp thiết kế giao diện nhanh chóng bằng cách sử dụng các lớp (class) có sẵn. ↩

5. Prompt: Câu lệnh hoặc mô tả bạn nhập vào để yêu cầu AI thực hiện một tác vụ, ví dụ: "Tạo một nút bấm màu xanh." ↩

6. WordPress: Một nền tảng phổ biến để xây dựng website, đặc biệt là blog, không cần nhiều kiến thức lập trình. ↩

7. Docusaurus: Một công cụ để tạo website tài liệu tĩnh, thường dùng cho dự án phần mềm. ↩

8. React: Một thư viện JavaScript để xây dựng giao diện người dùng tương tác. ↩

9. Node.js: Một môi trường chạy JavaScript bên ngoài trình duyệt, dùng để xây dựng backend. ↩

10. Terminal: Giao diện dòng lệnh để chạy các lệnh lập trình hoặc quản lý hệ thống. ↩

11. Git: Tên công cụ quản lý phiên bản trong lập trình. ↩

12. Python: Một ngôn ngữ lập trình phổ biến, dễ học, dùng cho nhiều mục đích từ web đến phân tích dữ liệu. ↩

13. Commit: Hành động lưu lại thay đổi trong mã nguồn, giúp theo dõi và quản lý các phiên bản của dự án. ↩

14. V0: Công cụ hỗ trợ AI để tạo giao diện web, nhưng không được tối ưu hóa chuyên biệt như Firebase Studio. ↩

15. Shadcn UI: Bộ công cụ giao diện người dùng (UI) cung cấp các thành phần (component) đẹp, dễ tùy chỉnh. ↩

16. Tailwind CSS: Thư viện CSS giúp thiết kế giao diện nhanh chóng bằng cách sử dụng các lớp (class) có sẵn. ↩

17. Prompt: Câu lệnh hoặc mô tả bạn nhập để yêu cầu AI thực hiện một tác vụ, ví dụ: "Tạo một nút bấm màu xanh." ↩

18. Firebase Authentication: Dịch vụ của Google để quản lý đăng nhập/đăng ký người dùng. ↩

19. Firestore Database: Cơ sở dữ liệu của Google để lưu trữ và quản lý dữ liệu động, như bình luận hoặc thông tin người dùng. ↩

20. Docusaurus: Công cụ tạo website tài liệu tĩnh, thường dùng cho dự án phần mềm. ↩

21. Algolia: Dịch vụ tìm kiếm bên thứ ba, thường được tích hợp vào website để thêm chức năng tìm kiếm. ↩

22. Netlify: Nền tảng miễn phí để triển khai và quản lý website tĩnh. ↩

23. Next.js: Framework JavaScript để xây dựng website nhanh, hiện đại, và thân thiện với SEO. ↩

24. SEO (Search Engine Optimization): Kỹ thuật tối ưu website để xuất hiện cao hơn trên kết quả tìm kiếm Google. ↩

25. Google Programmable Search Engine: Công cụ của Google để thêm tính năng tìm kiếm tùy chỉnh cho website. ↩

26. Static Site Generator (SSG): Công cụ tạo website tĩnh từ nội dung cố định, như Docusaurus, phù hợp cho blog hoặc tài liệu. ↩

27. Component Library: Thư viện chứa các thành phần giao diện (như nút, biểu mẫu) có sẵn, giúp xây dựng website nhanh hơn. ↩