Vibe Coding cho người non-tech: Không biết code vẫn có thể bắt đầu tạo sản phẩm với AI Agent như thế nào?

Duc Nguyen
Duc Nguyen

4/26/202610 mins read

843
0
Vibe Coding cho người non-tech: Không biết code vẫn có thể bắt đầu tạo sản phẩm với AI Agent như thế nào?

Có một câu Đức thấy ngày càng đúng trong thời đại AI:

Ngày xưa, muốn làm phần mềm thì phải biết code. Bây giờ, muốn bắt đầu làm phần mềm, trước tiên bạn cần biết mô tả đúng điều mình muốn.

Tất nhiên, nói như vậy không có nghĩa là “AI làm hết, developer nghỉ việc”. Không đơn giản vậy. Nhưng rõ ràng, rào cản để một người non-tech tạo ra landing page, prototype, mini app, chatbot, dashboard demo hay một sản phẩm thử nghiệm đã thấp hơn rất nhiều.

Nếu trước đây ý tưởng của chúng ta thường nằm trong PowerPoint, Word, Figma hoặc… trong đầu, thì bây giờ với các công cụ như Google AI Studio, Google Antigravity, VS Code kết hợp Claude Code, Codex, GitHub Copilot, người không biết code vẫn có thể bắt đầu biến ý tưởng thành một bản demo chạy được.

Và đó chính là tinh thần của vibe coding. Các bạn hãy cùng lắng nghe trao đổi giữa các AI về chủ đề này nhé.

0:00
0:00

Vibe coding là gì?

Trước khi nói đến công cụ, mình cần hiểu đúng chữ “vibe”.

Trong tiếng Anh đời thường, vibe có thể hiểu là:

  • Cảm giác
  • Phong cách
  • Không khí
  • Mood
  • Cái “chất” của một thứ gì đó

Ví dụ:

  • “Thiết kế này đúng vibe startup công nghệ.”
  • “Trang web này nhìn chưa đúng vibe giáo dục.”
  • “App này dùng được nhưng chưa có cảm giác premium.”

Vậy vibe coding có thể hiểu đơn giản là:

Lập trình bằng cách đối thoại với AI theo dòng chảy ý tưởng: mô tả điều mình muốn, để AI tạo bản đầu tiên, chạy thử, cảm nhận, phản hồi, chỉnh tiếp cho đến khi sản phẩm dần đúng ý.

Ngày xưa, khi muốn tạo một nút đăng ký, bạn có thể phải tự viết HTML/CSS/JavaScript.
Bây giờ, bạn có thể nói với AI:

Hãy tạo cho tôi một landing page cho khóa học AI dành cho nhân sự.
Giao diện chuyên nghiệp, màu xanh ngân hàng, có phần giới thiệu, lợi ích, lịch học, form đăng ký và nút CTA nổi bật.

AI tạo ra bản đầu tiên. Bạn xem và nói tiếp:

Phần mở đầu chưa đủ hấp dẫn. Hãy làm headline mạnh hơn, thêm icon, bố cục giống SaaS landing page hiện đại.

Rồi lại chỉnh tiếp:

Thêm section so sánh trước và sau khi học khóa này.
Thêm phần testimonial.
Tối ưu giao diện mobile.

Cứ như vậy, bạn không còn “code từng dòng” theo nghĩa truyền thống, mà đang đạo diễn sản phẩm bằng ngôn ngữ tự nhiên.


Nhưng vibe coding không phải là “không biết gì cũng làm app triệu đô”

Đây là điểm Đức muốn nói rất rõ. Vibe coding không biến người non-tech thành senior developer sau một đêm.

Nó giúp bạn:

  • Tạo prototype nhanh hơn.
  • Kiểm thử ý tưởng nhanh hơn.
  • Biến ý tưởng mơ hồ thành sản phẩm nhìn thấy được.
  • Giao tiếp tốt hơn với đội kỹ thuật.
  • Tự làm được các công cụ nhỏ phục vụ công việc.
  • Hiểu phần mềm ở mức thực tế hơn.

Nhưng nó không thay thế hoàn toàn:

  • Tư duy sản phẩm.
  • Kiến thức bảo mật.
  • Kiến trúc hệ thống.
  • Kiểm thử.
  • Quản lý dữ liệu.
  • Kinh nghiệm triển khai production.

Nói vui một chút:

Vibe coding giống như bạn có một đội thợ AI rất chăm chỉ, nhưng bạn vẫn phải là người biết mình muốn xây căn nhà kiểu gì. Không thể bảo “xây cho tôi căn nhà đẹp đẹp” rồi mong có biệt thự chống bão, hợp phong thủy, tối ưu chi phí và không nứt móng.


Vì sao vibe coding đặc biệt quan trọng với người non-tech?

Trước đây, khoảng cách giữa “người có ý tưởng” và “người làm được phần mềm” khá xa.

Một founder, giảng viên, marketer, HR, sales, vận hành, kế toán, chuyên viên dữ liệu hoặc chủ doanh nghiệp có thể có rất nhiều ý tưởng hay, nhưng thường mắc ở đoạn:

  • Không biết bắt đầu code từ đâu.
  • Không biết thuê ai.
  • Không biết mô tả yêu cầu cho developer.
  • Không biết prototype như thế nào.
  • Không biết app mình muốn có thật sự hợp lý không.
  • Không biết chi phí làm phần mềm sẽ phình ra vì đâu.

AI Coding Agent làm thay đổi cuộc chơi ở chỗ: người non-tech có thể tự tạo bản nháp đầu tiên.

Bản nháp này có thể chưa hoàn hảo, nhưng nó rất có giá trị:

  • Để demo với team.
  • Để thử với khách hàng.
  • Để đưa cho developer phát triển tiếp.
  • Để hiểu rõ hơn mình thật sự muốn gì.
  • Để phát hiện yêu cầu ban đầu của mình còn mơ hồ ở đâu.

Với COMPA Class, đây cũng là một hướng rất đáng quan tâm: AI không chỉ giúp học lập trình, mà còn giúp người học không chuyên kỹ thuật tạo ra sản phẩm số phục vụ công việc và học tập.


Bộ công cụ final cho người non-tech bắt đầu vibe coding

Trong bài này, Đức không muốn liệt kê quá nhiều công cụ làm người mới bị rối. Thay vào đó, mình chia thành một “bộ đồ nghề” theo đúng hành trình từ dễ đến khó.

Danh sách công cụ nên biết

NhómCông cụVai trò dễ hiểu
Nghĩ ý tưởng & viết yêu cầuChatGPT / Claude / GeminiHỏi đáp, brainstorm, viết prompt, tạo đặc tả sản phẩm
Thử AI model & logic AIGoogle AI StudioPhòng lab để thử Gemini, test prompt, lấy API key, tạo prototype AI
Vibe coding trực quanGoogle AntigravityMôi trường agent-first để giao việc cho AI tạo/sửa app
Code editor phổ biếnVisual Studio Code / VS CodeBàn làm việc chính để mở project, quản lý file, chạy code
Agent sửa code mạnhClaude CodeĐọc codebase, sửa nhiều file, chạy lệnh, hỗ trợ phát triển tính năng
Agent coding của OpenAICodexCoding agent mạnh cho viết, sửa, review, tự động hóa quy trình dev
Agent phổ biến trong GitHub/VS CodeGitHub CopilotGợi ý code, chat, agent mode, hỗ trợ làm việc trong VS Code
Đưa web lên mạngGitHub Pages / Vercel / Cloudflare PagesPublish web demo, landing page, web tĩnh
Làm app có dữ liệuFirebase / SupabaseĐăng nhập, database, backend nhanh cho MVP

Vai trò của từng công cụ trong hành trình vibe coding

1. ChatGPT / Claude / Gemini: người bạn để nghĩ và viết yêu cầu

Đây là điểm bắt đầu dễ nhất. Người non-tech không nên mở code editor ngay. Việc đầu tiên nên làm là dùng AI chat để biến ý tưởng thành yêu cầu rõ ràng hơn. Ví dụ, thay vì nói:

Tôi muốn làm app học tiếng Anh.

Hãy nhờ AI phân tích thành:

Tôi muốn làm một web app học tiếng Anh cho người đi làm.
Tính năng gồm:
- Học từ vựng theo chủ đề
- Làm quiz
- Lưu tiến độ
- Gợi ý bài học bằng AI
- Có dashboard theo dõi kết quả
Hãy giúp tôi viết PRD đơn giản và chia MVP thành 3 giai đoạn.

Đây là bước cực kỳ quan trọng. Vì nếu yêu cầu đầu vào mơ hồ, AI coding agent phía sau cũng sẽ tạo ra sản phẩm mơ hồ.

AI code giỏi đến đâu cũng không cứu được một yêu cầu sản phẩm quá mù mờ.


2. Google AI Studio: phòng thí nghiệm AI cho người mới

Nếu ChatGPT/Claude/Gemini là nơi bạn hỏi đáp, thì Google AI Studio là nơi bạn có thể thử nghiệm nghiêm túc hơn với Gemini model.

Google AI Studio cho phép người dùng bắt đầu xây dựng với Gemini API, lấy API key, quản lý key và theo dõi usage trong một nơi. Đây là điểm rất phù hợp cho người muốn hiểu cách một tính năng AI có thể hoạt động trước khi đưa nó vào app thật. (AI Studio)

Google cũng công bố bảng giá Gemini API với free tier và paid tier theo token/model; ví dụ Gemini 2.5 Flash có free tier và paid tier tính theo mỗi 1 triệu token đầu vào/đầu ra. Điều này giúp người mới hiểu rằng khi app bắt đầu gọi AI nhiều, chi phí không còn là “miễn phí tuyệt đối”, mà phụ thuộc vào số lượng request và token sử dụng. (Google AI for Developers)

Google AI Studio phù hợp để làm gì?

  • Thử prompt.
  • Test phản hồi của Gemini.
  • Tạo logic chatbot.
  • Tạo thử tính năng phân tích ảnh, văn bản, file.
  • Lấy API key để đưa vào prototype.
  • Hiểu sơ bộ chi phí gọi AI API.

Google AI Studio không phải là gì?

Nó không phải là code editor chính kiểu VS Code. Nó cũng không phải nơi bạn quản lý toàn bộ project phần mềm nhiều file. Nó giống một phòng lab AI hơn.

Nói đơn giản:

Google AI Studio giúp bạn kiểm tra “trí tuệ AI” trước, còn Antigravity hoặc VS Code giúp bạn biến trí tuệ đó thành ứng dụng.


3. Google Antigravity: môi trường vibe coding rất hợp cho non-tech

Google Antigravity là một trong những công cụ đáng chú ý nhất cho làn sóng vibe coding vì nó được định vị theo hướng agent-first. Google mô tả Antigravity là công cụ phù hợp cả với professional developer, enterprise codebase và hobbyist vibe-coding. (Google Antigravity)

Trang pricing của Antigravity hiện có Individual plan $0/tháng, hỗ trợ các agent model như Gemini 3.1 Pro, Gemini 3 Flash, Claude Sonnet & Opus 4.6 và gpt-oss-120b, kèm unlimited tab completions theo thông tin công bố hiện tại. (Google Antigravity)

Điểm mạnh của Antigravity với người non-tech là cảm giác ít “developer hóa” hơn so với việc bắt đầu ngay bằng VS Code.

Bạn có thể giao nhiệm vụ kiểu:

Hãy tạo cho tôi một eProfile cá nhân gồm:
- Giới thiệu bản thân
- QR code
- Business card dạng ảnh
- Nút share
- Giao diện hiện đại, mobile-first
- Xuất thành một file HTML chạy được trên GitHub Pages

Với người mới, đây là cách bắt đầu rất tự nhiên.

Antigravity phù hợp nhất cho:

  • Landing page.
  • eProfile.
  • Mini web app.
  • Prototype startup.
  • Dashboard demo.
  • Công cụ nội bộ nhỏ.
  • App HTML/CSS/JS đơn giản.
  • Ý tưởng sản phẩm cần bản demo nhanh.

Điểm cần lưu ý:

  • Vẫn cần biết file nào được tạo ra.
  • Vẫn cần biết cách backup.
  • Vẫn nên đưa code lên GitHub.
  • Không nên giao một nhiệm vụ quá lớn ngay từ đầu.

4. VS Code: bàn làm việc chính nếu muốn đi xa hơn

VS Code là code editor phổ biến, mạnh, miễn phí và có hệ sinh thái extension rất lớn.

Điểm quan trọng hiện nay là VS Code không chỉ còn là nơi gõ code. Microsoft đã có tài liệu về việc dùng agents trong VS Code, bao gồm local agents, Copilot CLI và cloud agents; agent có thể chạy ở nhiều môi trường khác nhau tùy mức độ giám sát và tự động hóa mà người dùng muốn. (Visual Studio Code)

VS Code cũng có hướng dẫn làm việc với agents qua ví dụ tạo todo app, thêm theme toggle và redesign layout bằng cách giao việc cho nhiều loại agent. (Visual Studio Code)

Với người non-tech, VS Code ban đầu có thể hơi “khó thở” vì nhìn vào sẽ thấy:

  • Explorer.
  • Terminal.
  • Extensions.
  • Git.
  • Package.
  • Node modules.
  • JSON.
  • Env file.

Nhưng nếu muốn làm sản phẩm nghiêm túc hơn, sớm muộn gì cũng nên hiểu VS Code ở mức cơ bản.

Bạn không cần thành developer ngay, nhưng nên hiểu:

Khái niệmHiểu đơn giản
Folder projectCặp hồ sơ chứa toàn bộ app
File HTMLKhung nội dung web
File CSSGiao diện, màu sắc, bố cục
File JSLogic và tương tác
TerminalNơi gõ lệnh để chạy project
GitHệ thống lưu lịch sử thay đổi
GitHubNơi lưu code online
.envFile chứa secret/API key, không đưa công khai

Nếu Antigravity là nơi rất hợp để “bắt đầu theo vibe”, thì VS Code là nơi phù hợp để đi vào kỷ luật làm sản phẩm.


5. GitHub Copilot: lựa chọn cân bằng cho người muốn học nghiêm túc

GitHub Copilot có nhiều gói khác nhau. Theo GitHub Docs, Copilot Free có giới hạn miễn phí, Copilot Pro là $10/tháng, Pro+ là $39/tháng, Business là $19/user/tháng, Enterprise là $39/user/tháng; premium requests cũng khác nhau theo từng gói. (GitHub Docs)

Với người non-tech đã bắt đầu quen VS Code, Copilot là lựa chọn rất ổn vì:

  • Dễ tích hợp với VS Code.
  • Có gợi ý code.
  • Có chat giải thích code.
  • Có agent mode.
  • Gắn chặt với GitHub.

Copilot hợp nhất khi bạn đã muốn:

  • Hiểu code AI tạo ra.
  • Sửa project từng bước.
  • Quản lý repo GitHub.
  • Làm việc với developer.
  • Tạo pull request, review, commit.

Nói cách khác, Copilot là cầu nối tốt giữa người mới học codeworkflow developer thật.


6. Claude Code: mạnh, nhưng nên dùng khi đã có project rõ hơn

Anthropic mô tả Claude Code là agentic coding tool có thể đọc codebase, edit files, chạy commands và tích hợp với development tools; nó có thể làm việc trên nhiều file và nhiều công cụ để hoàn thành nhiệm vụ. (Claude)

Trang sản phẩm Claude Code cũng mô tả đây là hệ thống coding agent có thể đọc codebase, thay đổi nhiều file, chạy test và tạo committed code; Anthropic còn nói đây là một “entry point” mới cho những người không có nền tảng engineering. (Anthropic)

Đây là công cụ rất mạnh, nhưng người non-tech cần cẩn thận.

Vì khi AI có khả năng sửa nhiều file, chạy lệnh, refactor hệ thống, thì nó cũng có thể:

  • Sửa quá nhiều thứ cùng lúc.
  • Làm bạn không hiểu project thay đổi ở đâu.
  • Tạo bug mới.
  • Xóa hoặc đổi logic cũ.
  • Làm app chạy được nhưng kiến trúc rối.

Cách dùng Claude Code an toàn hơn:

Thay vì nói:

Hãy tối ưu toàn bộ project này.

Nên nói:

Hãy đọc project và tạo plan trước.
Chưa sửa file nào.
Liệt kê:
1. Cấu trúc project hiện tại
2. Các vấn đề phát hiện
3. Đề xuất thứ tự sửa
4. File nào sẽ bị ảnh hưởng
Sau khi tôi đồng ý mới bắt đầu sửa từng bước.

Đây là tư duy rất quan trọng khi dùng agent mạnh.


7. OpenAI Codex: AI Agent mạnh cho lập trình của Open AI

Codex là hướng coding agent của OpenAI. Trang pricing của OpenAI cho Codex cho biết có gói Pro $100 và có chương trình tăng usage cho Pro đến 31/05/2026; ngoài ra Codex cũng có API/rate card riêng theo cách tính usage. Điểm mạnh của Codex là các gói đa dạng hơn từ gói Go → Plus → Pro nhưng nếu sử dụng liên tục thì chi phí cũng sẽ ngang ngửa như với Claude.

Tương tự như Claude Code, Codex rất phù hợp khi:

  • Bạn đã có project nghiêm túc.
  • Bạn cần agent xử lý task kỹ thuật.
  • Bạn có team dev.
  • Bạn muốn tích hợp vào workflow automation.
  • Bạn quan tâm đến review, fix, test, refactor.

Nhưng với người non-tech mới hoàn toàn, Đức không khuyên bắt đầu bằng Codex trả phí cao ngay. Nên đi từ:

ChatGPT/Gemini/Claude
→ Google AI Studio
→ Google Antigravity
→ VS Code + GitHub
→ Copilot/Claude Code/Codex khi cần

Bảng so sánh công cụ ưu tiên cho người non-tech

So sánh theo độ dễ dùng, ứng dụng và chi phí

Công cụTHỨ TỰ CHO NON-TECHĐộ khóỨng dụng chínhChi phí khởi đầuNhận xét thực tế
ChatGPT / Claude / GeminiRất nênRất dễNghĩ ý tưởng, viết prompt, giải thích code, viết PRDCó free/paid tùy góiĐiểm bắt đầu tốt nhất để biến ý tưởng mơ hồ thành yêu cầu rõ
Google AI StudioRất nênDễTest Gemini, thử prompt, tạo logic AI, lấy API keyCó free tier, paid theo usageRất hợp cho non-tech muốn hiểu AI trước khi đưa vào app
Google AntigravityRất nênDễ-trung bìnhVibe coding, tạo prototype/app trực quanIndividual plan hiện $0/thángCông cụ rất hợp để người mới tạo sản phẩm đầu tiên
VS CodeNên học sau bước đầuTrung bìnhQuản lý project, chạy code, làm việc nghiêm túcFreeBan đầu hơi kỹ thuật, nhưng muốn đi xa phải biết
GitHub CopilotNên dùng khi đã mở VS CodeTrung bìnhGợi ý code, chat, agent trong VS CodeFree giới hạn; Pro $10/tháng; Pro+ $39/thángLựa chọn cân bằng nhất cho người học nghiêm túc
Claude CodeDùng khi có project rõTrung bình-khóĐọc/sửa codebase, refactor, chạy commandClaude Pro hiện từ $20/tháng nếu billed monthly, có Claude Code theo trang pricingRất mạnh nhưng phải dùng có kiểm soát
OpenAI CodexChưa cần cho người mớiKhó hơnCoding agent chuyên sâu, automation, dev workflowCodex Pro từ $100; API theo usageMạnh, nhưng nên dùng khi đã có nhu cầu thật
Firebase / SupabaseDùng ở level MVPTrung bìnhAuth, database, backend nhanhCó free tier/paid theo usageKhi app cần đăng nhập/lưu dữ liệu thì mới nên học
Vercel / Cloudflare PagesDùng sau GitHub PagesTrung bìnhDeploy frontend/web appCó free/paidHợp khi app phức tạp hơn web tĩnh

So sánh theo level người dùng

LevelBạn đang ở đâu?Công cụ nên dùngMục tiêu
Level 0Không biết code, chỉ có ý tưởngChatGPT/Claude/Gemini, Google AI StudioViết yêu cầu, thử prompt, hiểu sản phẩm muốn làm
Level 1Muốn tạo demo đầu tiênGoogle Antigravity, GitHub PagesTạo landing page, eProfile, mini tool chạy được
Level 2Muốn quản lý project tốt hơnVS Code, GitHub, CopilotBiết sửa file, lưu version, đọc hiểu code cơ bản
Level 3Muốn làm MVP có dữ liệuVS Code, Firebase/Supabase, Vercel/Cloudflare PagesCó đăng nhập, lưu dữ liệu, gọi API
Level 4Muốn phát triển sản phẩm nghiêm túcClaude Code, Codex, Docker, Cloud Run, developer reviewRefactor, test, deploy, bảo mật, vận hành

Tổ hợp công cụ nên dùng theo từng nhu cầu

Nhu cầu 1: Tôi chỉ muốn tạo landing page hoặc eProfile

Tổ hợp đề xuất:

ChatGPT/Gemini/Claude
→ Google Antigravity
→ GitHub
→ GitHub Pages

Phù hợp với:

  • Trang cá nhân.
  • Landing page khóa học.
  • Trang giới thiệu sản phẩm.
  • Portfolio.
  • Business card online.
  • Web HTML một file.

Không cần vội học:

  • Backend.
  • Database.
  • Docker.
  • Cloud Run.
  • CI/CD.

Nhu cầu 2: Tôi muốn tạo chatbot hoặc app có tính năng AI

Tổ hợp đề xuất:

ChatGPT/Gemini/Claude
→ Google AI Studio
→ Google Antigravity hoặc VS Code
→ Gemini API
→ Deploy demo

Phù hợp với:

  • Chatbot tư vấn khóa học.
  • Công cụ tạo nội dung.
  • App tóm tắt tài liệu.
  • Tool phân loại dữ liệu.
  • Demo AI cho lớp học.

Điểm cần nhớ: nếu dùng API key, phải hiểu cách bảo vệ key. Không nên nhúng API key thẳng vào file HTML public.

Nhu cầu 3: Tôi muốn học nghiêm túc để tự làm mini app

Tổ hợp đề xuất:

VS Code
→ GitHub
→ GitHub Copilot
→ Vercel / Cloudflare Pages

Phù hợp với:

  • Todo app.
  • Quiz app.
  • Dashboard demo.
  • Web app nội bộ.
  • Công cụ tính toán đơn giản.
  • App học tập nhỏ.

Đây là đường học bền vững nhất nếu muốn từ non-tech chuyển sang “semi-tech”.

Nhu cầu 4: Tôi đã có project và muốn AI sửa/nâng cấp

Tổ hợp đề xuất:

VS Code
→ GitHub
→ Claude Code hoặc Codex
→ Copilot
→ Review từng commit

Phù hợp với:

  • Thêm tính năng.
  • Sửa bug.
  • Refactor code.
  • Tạo tài liệu.
  • Viết test.
  • Tối ưu giao diện.

Nguyên tắc sống còn:

Agent càng mạnh, càng phải bắt nó lập kế hoạch trước khi sửa.


Lộ trình 30 ngày cho người non-tech bắt đầu vibe coding

Tuần 1: Hiểu vibe coding và tạo sản phẩm HTML đầu tiên

Mục tiêu: tạo được một trang web đơn giản chạy được.

Nên học:

  • HTML là gì.
  • CSS là gì.
  • JavaScript là gì.
  • File/folder là gì.
  • Web tĩnh là gì.

Bài tập:

  • Tạo eProfile cá nhân.
  • Tạo landing page khóa học.
  • Tạo trang giới thiệu sản phẩm.
  • Tạo quiz đơn giản.

Công cụ:

  • ChatGPT/Claude/Gemini.
  • Google Antigravity.
  • GitHub Pages.

Prompt mẫu:

Bạn là Senior Front-end Developer kiêm Product Designer.

Hãy tạo cho tôi một landing page một file HTML cho khóa học AI dành cho người đi làm.
Yêu cầu:
- Chạy offline, không cần backend
- Giao diện hiện đại, dễ đọc
- Có hero section, lợi ích, nội dung khóa học, giảng viên, form đăng ký giả lập
- Responsive trên mobile
- Code gồm HTML, CSS, JS inline trong một file
Trước khi viết code, hãy mô tả bố cục ngắn gọn.

Tuần 2: Học GitHub và cách không làm mất code

Mục tiêu: biết lưu code, quay lại bản cũ, publish demo.

Nên học:

  • GitHub repo.
  • Commit.
  • README.md.
  • GitHub Pages.
  • .gitignore.
  • Không commit secret/API key.

Bài tập:

  • Đưa landing page lên GitHub Pages.
  • Mỗi lần sửa giao diện thì commit một lần.
  • Viết README mô tả project.
  • Nhờ AI giải thích từng file.

Câu nên nói với AI:

Hãy giải thích project này cho người không biết code.
Mỗi file dùng để làm gì?
Nếu tôi muốn sửa tiêu đề, màu sắc, nội dung thì sửa ở đâu?

Tuần 3: Bắt đầu dùng VS Code và Copilot

Mục tiêu: không còn sợ code editor.

Nên học:

  • Mở folder bằng VS Code.
  • Cài extension cơ bản.
  • Dùng terminal đơn giản.
  • Dùng Copilot Chat.
  • Hỏi AI giải thích lỗi.

Bài tập:

  • Tách file HTML thành index.html, style.css, script.js.
  • Thêm dark mode.
  • Thêm lưu dữ liệu bằng localStorage.
  • Thêm form validation.

Prompt mẫu:

Hãy giúp tôi tách file HTML hiện tại thành 3 file:
- index.html
- style.css
- script.js

Yêu cầu:
- Không làm thay đổi giao diện
- Giải thích file nào chứa phần nào
- Sau khi tách, hướng dẫn tôi cách chạy lại project

Tuần 4: Làm mini MVP có tính năng thật hơn

Mục tiêu: tạo một app nhỏ có logic rõ ràng.

Chọn một trong các mini project:

  • App quản lý học viên.
  • Quiz app cho lớp học.
  • CRM mini cho lead.
  • Tool tạo prompt.
  • Công cụ tính chi phí khóa học.
  • Chatbot demo tư vấn khóa học.

Công cụ:

  • VS Code.
  • GitHub.
  • Google AI Studio nếu có AI.
  • Firebase/Supabase nếu cần lưu dữ liệu.
  • Vercel/Cloudflare Pages nếu muốn deploy đẹp hơn.

Bài tập cuối tháng:

Tạo một MVP quản lý học viên đơn giản:
- Thêm học viên
- Sửa học viên
- Xóa học viên
- Tìm kiếm
- Lưu dữ liệu trên trình duyệt bằng localStorage
- Giao diện đẹp, responsive
- Có README hướng dẫn sử dụng

Nguyên tắc dùng AI Coding Agent cho người non-tech

1. Luôn bắt AI lập kế hoạch trước khi code

Đừng nói:

Làm app này cho tôi.

Hãy nói:

Trước tiên hãy phân tích yêu cầu.
Sau đó đề xuất cấu trúc tính năng.
Tiếp theo đề xuất cấu trúc file.
Chưa viết code cho đến khi tôi đồng ý.

2. Chia nhỏ yêu cầu

Không nên yêu cầu:

Làm cho tôi một nền tảng học online giống Udemy.

Nên chia thành:

Tham khảo trang E-learning trên Udemy và thực hiện:
Bước 1: Tạo landing page.
Bước 2: Tạo danh sách khóa học.
Bước 3: Tạo trang chi tiết khóa học.
Bước 4: Tạo form đăng ký.
Bước 5: Tạo dashboard admin đơn giản.

3. Mỗi lần sửa chỉ sửa một nhóm vấn đề

Ví dụ:

  • Lần 1: sửa giao diện.
  • Lần 2: sửa responsive.
  • Lần 3: thêm chức năng.
  • Lần 4: tối ưu code.
  • Lần 5: viết README.

Đừng một lúc yêu cầu:

Sửa UI, thêm database, thêm login, thêm thanh toán, tối ưu SEO, deploy production.

AI có thể làm, nhưng xác suất “toang nhẹ” khá cao.

4. Luôn yêu cầu giải thích code cho người mới

Prompt nên dùng thường xuyên:

Hãy giải thích đoạn code này cho người không biết lập trình.
Giải thích theo 3 mức:
1. Mục đích chung
2. Từng phần chính
3. Nếu muốn sửa thì sửa ở đâu

5. Không đưa secret vào code public

Các thông tin như:

  • API key
  • Database password
  • Token
  • Secret key
  • Private credential

Không nên đưa thẳng vào code public hoặc gửi bừa vào các công cụ không rõ chính sách dữ liệu.

Nếu bạn chưa hiểu .env, backend, server-side, client-side là gì, hãy hỏi AI trước khi dùng API thật.


Những sai lầm phổ biến khi non-tech bắt đầu vibe coding

Sai lầmVì sao nguy hiểm?Cách sửa
Muốn làm app quá lớn ngayAI tạo code rối, khó kiểm soátBắt đầu từ mini use case
Không lưu versionSửa hỏng không quay lại đượcDùng GitHub và commit thường xuyên
Tin AI tuyệt đốiAI có thể tạo code sai hoặc thiếu bảo mậtLuôn chạy thử và hỏi giải thích
Không hiểu file nào làm gìMất kiểm soát projectYêu cầu AI tạo README và giải thích cấu trúc
Copy API key vào frontendDễ lộ key, mất tiềnHọc .env, backend proxy hoặc dùng demo key an toàn
Dùng agent mạnh quá sớmAgent sửa nhiều file khiến bạn không hiểuBắt agent lập plan trước
Không có checklist testApp nhìn đẹp nhưng lỗi logicTạo test case đơn giản trước khi deploy

Công thức prompt chuẩn cho người non-tech khi vibe coding

Đây là template Đức khuyên nên lưu lại và dùng đi dùng lại.

Bạn là Senior Software Engineer kiêm Product Designer, nhưng hãy giải thích cho tôi như một người non-tech.

Tôi muốn xây dựng: [mô tả sản phẩm]

Người dùng mục tiêu: [ai sẽ dùng]

Mục tiêu chính:
1. ...
2. ...
3. ...

Tính năng cần có trong phiên bản đầu tiên:
1. ...
2. ...
3. ...

Yêu cầu giao diện:
- Phong cách:
- Màu sắc:
- Thiết bị ưu tiên:
- Có cần responsive không:

Yêu cầu kỹ thuật:
- Chạy offline hay cần internet?
- Một file HTML hay nhiều file?
- Có cần backend không?
- Có cần database không?
- Có cần đăng nhập không?
- Có cần dùng AI API không?

Quy trình làm việc:
1. Đầu tiên hãy phân tích yêu cầu.
2. Sau đó đề xuất phiên bản MVP nhỏ nhất.
3. Đề xuất cấu trúc file.
4. Chỉ ra rủi ro và phần tôi cần chú ý.
5. Chưa viết code cho đến khi tôi yêu cầu.
6. Khi viết code, hãy giải thích tôi cần chạy như thế nào.

Kết luận: Vibe coding là cơ hội lớn, nhưng phải dùng tỉnh táo

Vibe coding không phải phép màu. Nhưng nó là một cơ hội rất lớn cho người non-tech.

Ngày xưa, khoảng cách từ ý tưởng đến sản phẩm demo có thể là vài tuần, vài tháng, hoặc phải thuê người làm ngay từ đầu. Bây giờ, nếu biết dùng AI Agent đúng cách, bạn có thể có bản thử nghiệm đầu tiên trong vài giờ hoặc vài ngày.

Nhưng để đi xa hơn, bạn vẫn cần học:

  • Cách mô tả yêu cầu.
  • Cách chia nhỏ bài toán.
  • Cách kiểm thử.
  • Cách quản lý version.
  • Cách bảo vệ dữ liệu.
  • Cách làm việc với developer.

Đức nghĩ đây mới là ý nghĩa thật sự của vibe coding:

Vibe coding không phải là “AI code thay tôi”, mà là “tôi học cách biến ý tưởng thành sản phẩm bằng cách cộng tác với AI”.

Và với người non-tech, đây là một kỹ năng rất đáng học.

Không phải để ai cũng trở thành lập trình viên chuyên nghiệp.
Mà để mỗi người có thể chủ động hơn với ý tưởng của mình.

Vì trong thời đại AI Agent, lợi thế không chỉ thuộc về người biết code.

Lợi thế thuộc về người hiểu vấn đề đủ rõ để biến ý tưởng mơ hồ thành yêu cầu cụ thể, rồi dùng AI và con người cùng thực thi.