Tiêu đề gốc: Cách trở thành một Vibe Coder chuyên nghiệp trong 6 tháng (Khóa học đầy đủ + tài nguyên)
Tác giả gốc: Avid
Trình biên dịch: Peggy, BlockBeats

Lưu ý của người biên tập: Vibe Coding không chỉ đơn giản là "để AI viết mã cho bạn" mà là một phương pháp xây dựng hoàn chỉnh từ ý tưởng đến sản phẩm trực tuyến. Cách thực sự hiệu quả không phải là liên tục đưa ra các yêu cầu mơ hồ và chờ mô hình “ma thuật”, mà là học cách lên kế hoạch trước, nhắc nhở, xem xét rồi triển khai.

Lộ trình này chia Vibe Coding thành sáu tháng: đầu tiên là hoàn thành nền tảng Web, Git và công nghệ cơ bản, sau đó thành thạo các công cụ như Cursor và Claude Code; sau đó học các từ nhắc nhở, kỹ thuật ngữ cảnh, MCP, RAG, thử nghiệm, bảo mật và triển khai sản xuất. Cốt lõi của nó không phải là biến những người mới bắt đầu thành lập trình viên truyền thống mà là giúp bất kỳ ai có ý tưởng sản phẩm sử dụng AI để biến ý tưởng của họ thành các ứng dụng thực tế và có thể sử dụng một cách có hệ thống hơn.

Lời khuyên quan trọng nhất dành cho người mới bắt đầu là: đừng chỉ làm theo hướng dẫn, hãy tiếp tục làm theo. Hàng tháng, bạn nên hoàn thành một dự án nhỏ có thể chạy được, có thể truy cập và có thể lặp lại. Sự tiến bộ thực sự không đến từ việc "bạn đã hoàn thành bao nhiêu khóa học", mà đến từ việc bạn có thực sự phát hành sản phẩm hay không.

Sau đây là văn bản gốc:

Vibe Coding đã phát triển từ một thử nghiệm thích hợp trên Twitter trở thành một trong những kỹ năng xây dựng được tìm kiếm nhiều nhất.

Tôi vừa chia sẻ cách trở thành Agentic Coder thuộc top 1%.

Cơ hội tham gia sớm vẫn mở nhưng chỉ dành cho những người thực sự tạo ra sản phẩm.

Vấn đề là hầu hết những người mới bắt đầu đều không biết bắt đầu từ đâu. Họ thường: tải xuống Con trỏ, nhập một ý tưởng mơ hồ và sau đó tự hỏi tại sao kết quả tạo ra lại lộn xộn; xem vô số hướng dẫn trên YouTube nhưng chưa bao giờ thực sự làm được điều gì đó; nhảy thẳng vào các công cụ phức tạp mà không hiểu cách sắp xếp các từ gợi ý, quản lý ngữ cảnh hoặc hoàn tất quá trình triển khai.

Kết quả thường giống nhau: bản demo chưa hoàn thành một nửa, một vòng chết liên tục "sửa lỗi và tạo ra lỗi mới" và không có sản phẩm trực tuyến thực sự.

Hướng dẫn này được thiết kế để giải quyết vấn đề này. Đó là lộ trình chi tiết từng tháng với các nguồn lực đã được chứng minh cho giai đoạn 2025–2026, bao gồm mọi kỹ năng bạn cần để phát triển từ đầu thành Vibe Coder có khả năng cung cấp các sản phẩm thực sự. Mỗi tháng có một cột mốc quan trọng và mỗi kỹ năng đều có liên kết đến các tài nguyên.

Chỉ có một quy tắc duy nhất trước khi bạn bắt đầu: hãy tự tay làm mọi thứ.

Không đọc về nó, không xem người khác làm mà thực sự mở công cụ ra, làm theo các bước, phá vỡ thứ gì đó, sửa chữa nó và cuối cùng xuất bản nó.

Chính xác Vibe Coding là gì?

Thuật ngữ "Vibe Coding" được đặt ra bởi nhà nghiên cứu AI Andrej Karpathy. Anh dùng nó để mô tả một cách lập trình được giao hoàn toàn cho AI: chấp nhận mọi đề xuất của AI, không xem xét mã theo cách thủ công và tập trung hoàn toàn vào việc mô tả kết quả cuối cùng thay vì tự viết logic.

Trong thực tế, điều đó có nghĩa là bạn sử dụng ngôn ngữ tự nhiên để mô tả phần mềm bạn muốn, sau đó để AI tạo, lặp lại, kiểm tra và sửa mã cho bạn.

Nhưng hầu hết những người mới bắt đầu đều có xu hướng bỏ qua một điều: Vibe Coding không phải là chờ đợi thụ động, cũng không phải là phép thuật. Nó là một tập hợp các quy trình có cấu trúc, về cơ bản chuyển đổi ý định của con người thành phần mềm có thể chạy được.

Chất lượng đầu ra phụ thuộc gần như hoàn toàn vào chất lượng đầu vào: lời nhắc, tệp ngữ cảnh, khả năng lập kế hoạch và khả năng xem lại nội dung đầu ra AI của bạn. Nắm vững những yếu tố đầu vào này là cốt lõi của toàn bộ trò chơi.

Đến năm 2026, các công cụ Vibe Coding nhìn chung sẽ chia thành hai loại:

các công cụ xây dựng ứng dụng AI: chẳng hạn như Lovable, Bolt và Replit. Những công cụ như vậy có thể tạo ra một ứng dụng đầy đủ hoàn chỉnh dựa trên mô tả, bao gồm cả lưu trữ và triển khai. Chúng nhắm đến người dùng không có kỹ thuật và các nhà phát triển tạo mẫu nhanh và không yêu cầu môi trường cấu hình cục bộ.

IDE lập trình AI: chẳng hạn như Cursor 3.0, Claude Code và Windsurf. Những công cụ này được nhúng vào môi trường phát triển và giúp các nhà phát triển viết, gỡ lỗi và lặp lại mã. Chúng đòi hỏi một nền tảng kỹ thuật nhất định, nhưng cung cấp khả năng kiểm soát tốt hơn và giới hạn trên về khả năng phát triển ở cấp độ sản xuất nghiêm túc.

Lộ trình sau đây sẽ đưa bạn vào cả hai thế giới: bắt đầu với những kỹ năng cơ bản giúp tất cả các công cụ hoạt động tốt hơn và sau đó tiến tới chuyên môn hóa.

Tháng 1: Khả năng cơ bản, điều mà mọi Vibe Coder phải thành thạo

Mục tiêu của tháng này là: hiểu cách phần mềm hoạt động từ cấp độ khái niệm, để mã do AI tạo ra không còn trông giống hộp đen nữa và có thể ra lệnh cho phần mềm một cách thông minh hơn.

Sai lầm phổ biến nhất mà những người mới chơi Vibe Coders mắc phải là bỏ qua hoàn toàn tháng này. Họ mở một công cụ, viết ra một lời nhắc mơ hồ, cảm thấy bối rối sau khi nhìn thấy kết quả được tạo ra, rồi rơi vào cái mà cộng đồng thường gọi là "vòng lặp tử thần": liên tục để AI sửa lỗi và AI tiếp tục tạo ra lỗi mới, và chu kỳ đó lại tiếp tục.

Những người thoát khỏi vòng luẩn quẩn này thường có đủ kiến ​​thức cơ bản. Thay vì chỉ phản ứng với kết quả đầu ra của AI, họ có thể đọc và hướng dẫn nó.

Bạn không cần phải là lập trình viên. Bạn chỉ cần có đủ nền tảng khái niệm để có thể đặt những câu hỏi thông minh và phát hiện ra những lỗi rõ ràng.

Web hoạt động như thế nào

Trước khi xây dựng bất kỳ sản phẩm web nào, bạn cần hiểu cơ sở hạ tầng mà bạn đang phát triển. Hầu hết các sản phẩm của Vibe Coding đều là ứng dụng web. Điều này có nghĩa là bạn cần hiểu mô hình máy khách-máy chủ cơ bản, cách trình duyệt giao tiếp với chương trình phụ trợ, URL chính xác là gì và API là gì.

Nguồn:

Tài liệu web MDN: Cách thức hoạt động của web (miễn phí)
Liên kết: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
Một trong những giải thích rõ ràng và có căn cứ nhất về trình duyệt, máy chủ và HTTP, được duy trì bởi Mozilla.

MDN: Tổng quan về HTTP (miễn phí)
Liên kết: https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
Giới thiệu về sự khác biệt giữa GET và POST, mã trạng thái (200 OK, 400 Yêu cầu Không hợp lệ, 401 Không được ủy quyền, 404 Not Found, 500 Server Error) và lý do những lời nhắc này xuất hiện khi ứng dụng của bạn gặp sự cố.

Hướng dẫn REST API (miễn phí)
Liên kết: https://restfulapi.net/
Nội dung ngắn gọn, thiết thực và có thể áp dụng trực tiếp. Sau khi tìm hiểu, bạn sẽ hiểu điều gì sẽ xảy ra khi mỗi backend được viết thông qua Vibe Coding “gọi API”.

Những điều bạn cần hiểu:

Từ khi bạn nhập URL cho đến khi trang được hiển thị, điều gì xảy ra ở phần giữa;

Sự khác biệt giữa giao diện người dùng và giao diện phía sau: giao diện người dùng là giao diện mà người dùng nhìn thấy và giao diện phía sau là logic và cơ sở dữ liệu máy chủ;

API là gì, yêu cầu là gì và phản hồi là gì;

HTTP Mã trạng thái có ý nghĩa gì và chúng biểu thị điều gì khi gỡ lỗi một chương trình ứng dụng;

"Biến môi trường" là gì và tại sao khóa không bao giờ được viết trực tiếp bằng mã.

Git và GitHub: Cỗ máy thời gian của bạn

Đây là kỹ năng thực hành quan trọng nhất trong toàn bộ hướng dẫn. Mọi lập trình viên nghiêm túc đều sử dụng Git.

Không có Git, một lời nhắc AI tồi có thể làm hỏng hàng giờ làm việc mà không có cách nào quay lại. Với Git, mọi trạng thái có thể chạy bình thường đều trở thành điểm kiểm tra mà bạn có thể quay lại bất kỳ lúc nào.

Git không phải là tùy chọn. Nó quyết định liệu bạn xây dựng sản phẩm một cách hiệu quả hay bắt đầu lại từ đầu mỗi khi AI gặp trục trặc.

Cách học là: đừng cố gắng ghi nhớ lệnh mà trước tiên hãy hiểu mô hình của nó. Git theo dõi các thay đổi của tệp theo thời gian và cho phép bạn tiến hoặc lùi trong lịch sử đó. Một khi bạn hiểu điều này, các lệnh sẽ trở nên tự nhiên.

Tài nguyên:

Git dành cho Vibe Coders: Điều gì thực sự quan trọng (YouTube, miễn phí)
Liên kết: https://www.youtube.com/watch?v=ADEFvP5Gw5c
Được sản xuất dành riêng cho Vibe Coder. Thông qua một dự án Next.js thực tế, git add, git commit, git push, git pull, nhánh và rollback được giải thích.

Git và GitHub dành cho Vibe Coders (hướng dẫn miễn phí, DeepakNess.com)
Liên kết: https://deepakness.com/blog/git-for-vibe-codes/
Hướng dẫn này dành riêng cho các nhà phát triển được AI hỗ trợ vào cuối năm 2025, bao gồm cuộc sống hàng ngày của quy trình làm việc của Vibe Coder Git, bao gồm cam kết cứ sau 15–20 phút và kiểm tra các thay đổi bằng git diff trước khi chấp nhận các thay đổi do AI tạo.

Tìm hiểu Phân nhánh Git (miễn phí, tương tác)
Liên kết: https://learngitbranching.js.org/
Một trong những công cụ trực quan tốt nhất để hiểu về phân nhánh và hợp nhất, nó có thể chạy trực tiếp trong trình duyệt mà không cần định cấu hình môi trường.

Kỹ năng GitHub (miễn phí, tương tác)
Liên kết: https://skills.github.com/
Một khóa học tương tác do GitHub chính thức ra mắt, được hoàn thành trực tiếp trong GitHub.

Tập trung vào:

git init, add, commit, Push, pull, status, diff;

Tạo một nhánh mới trước khi bắt đầu bất kỳ tính năng mới nào;

Sử dụng git log để xem lịch sử và git hoàn nguyên để hoàn tác các sửa đổi một cách an toàn;

Tạo tệp .gitignore và thêm tệp .env vào đó trước lần đẩy đầu tiên;

Sử dụng AI Sử dụng các nhánh chức năng khi thực hiện thử nghiệm: tạo một nhánh trước, Vibe Mã hóa trong nhánh và sau đó hợp nhất sau khi vượt qua bài kiểm tra.

Quy tắc là: kể từ bây giờ, mọi dự án bạn thực hiện đều phải được đặt trong kho GitHub, không có ngoại lệ.

Trình độ hiểu biết cơ bản về HTML, CSS và JavaScript

Bạn không cần phải là nhà phát triển giao diện người dùng. Bạn chỉ cần có thể hiểu các thành phần do AI tạo ra và hiểu đại khái div, nút, onClick và useState là gì.

Việc này mất khoảng một tuần, nhưng sẽ tiết kiệm rất nhiều thời gian khi bạn cần chỉ đạo AI sửa đổi một phần cụ thể của giao diện.

Tài nguyên:

Dự án Odin: Nền tảng (miễn phí, tự học)
Liên kết: https://www.theodinproject.com/paths/foundations
Một trong những khóa học nền tảng toàn diện miễn phí tốt nhất trên internet. Chỉ cần tìm hiểu Nền tảng HTML, Nền tảng CSS và Khái niệm cơ bản về JavaScript. Khoảng 1–2 tuần với tốc độ vừa phải.

freeCodeCamp: Thiết kế web đáp ứng (miễn phí, tương tác)
Liên kết: https://www.freecodecamp.org/learn/2022/Response-web-design/
Bài tập dựa trên trình duyệt, không cần cấu hình môi trường. Có thể được sử dụng như một phần bổ sung cho Dự án Odin.

JavaScript.info (tham khảo miễn phí)
Liên kết: https://javascript.info/
Một trong những tài liệu JavaScript rõ ràng nhất hiện có. Hãy sử dụng nó làm tài liệu tham khảo khi AI tạo mã mà bạn không hiểu. Nó tương đương với phiên bản MDN được giải thích bằng JavaScript.

Tập trung vào:

HTML: các phần tử, thuộc tính, mối quan hệ lồng nhau và cấu trúc trang;

CSS: bộ chọn, Flexbox và lý do giao diện hiển thị một kiểu nhất định;

JavaScript: biến, hàm, mảng, đối tượng và ý nghĩa của async/await;

Cơ bản về phản ứng: thành phần là gì, đạo cụ và trạng thái là gì.

Chọn hệ thống công nghệ của bạn và gắn bó với nó

Một trong những sai lầm phổ biến nhất mà người mới bắt đầu mắc phải là liên tục chuyển đổi khung công tác.

Các mô hình AI được đào tạo về mã công khai. Chúng hoạt động tốt hơn đáng kể trên các nhóm công nghệ phổ biến và được ghi chép rõ ràng so với các nhóm công nghệ ít phổ biến hơn. Ngăn xếp công nghệ càng phổ biến thì càng có nhiều hướng dẫn, trường hợp và dữ liệu đào tạo phù hợp hơn và chất lượng đầu ra AI càng cao.

Bộ công nghệ được đề xuất cho người mới bắt đầu Vibe Coder vào năm 2026:

Front-end: React, được sử dụng thông qua Next.js (Bộ định tuyến ứng dụng);

Phong cách: Tailwind CSS;

Cơ sở dữ liệu + Xác thực: Supabase (Cơ sở dữ liệu Postgres, xác thực, lưu trữ, tất cả được sử dụng thông qua API);

Triển khai: Vercel;

Có thể sử dụng ngôn ngữ: TypeScript ưa thích hoặc JavaScript.

Ngăn xếp công nghệ này thân thiện với người mới bắt đầu, được quản lý hoàn toàn, phù hợp với sự phát triển được hỗ trợ bởi AI và cho phép bạn xuất bản một sản phẩm đầy đủ hoàn chỉnh từ cơ sở dữ liệu đến URL trực tuyến mà không cần quản lý cơ sở hạ tầng máy chủ.

Đây cũng là một trong những ngăn xếp công nghệ Vibe Coding phổ biến nhất nên các công cụ AI rất quen thuộc với nó.

Tài nguyên:

Khóa học chính thức của Next.js: Tìm hiểu Next.js (miễn phí, tương tác)
Liên kết: https://nextjs.org/learn
Khóa học tương tác chính thức sẽ từng bước xây dựng một ứng dụng trang tổng quan hoàn chỉnh. Phiên bản App Router đã được cập nhật vào năm 2024 và vẫn hoạt động.

Tài liệu CSS của Tailwind (Miễn phí)
Liên kết: https://tailwindcss.com/docs
Tailwind là khung CSS tiện ích đầu tiên. Tài liệu của nó có chất lượng cao. Do mật độ dữ liệu đào tạo cao, mã Tailwind do AI tạo thường hoạt động tốt hơn hầu hết các hệ thống tạo kiểu khác.

Supabase Docs: Bắt đầu (Miễn phí)
Liên kết: https://supabase.com/docs/guides/getting-started
Supabase cung cấp cơ sở dữ liệu Postgres, chính sách bảo mật cấp hàng, xác thực (email, thông tin đăng nhập mạng xã hội, mật khẩu một lần) và bộ lưu trữ tệp, tất cả đều có sẵn thông qua lệnh gọi SDK JavaScript đơn giản.

Vercel: Bắt đầu (Miễn phí)
Liên kết: https://vercel.com/docs/getting-started-with-vercel
Kết nối kho lưu trữ GitHub của bạn với Vercel và mọi thao tác đẩy sẽ được triển khai tự động. Toàn bộ quá trình cấu hình chỉ mất khoảng 5 phút.

Các cột mốc của Tháng 1

Vào cuối tháng này, bạn sẽ có thể:

Giải thích API là gì và điều gì xảy ra khi trình duyệt đưa ra yêu cầu;

Tạo kho lưu trữ Git, xác nhận mã, tạo nhánh và đẩy lên GitHub;

Đọc thành phần React do AI tạo ra và hiểu cấu trúc chung của nó;

Tạo một dự án Next.js cơ bản và chạy cục bộ bằng npm run dev;

Triển khai một trang tĩnh tới Vercel bằng cách kết nối với kho lưu trữ GitHub.

Tháng 2: Làm chủ các công cụ, Cursor 3.0, Claude Code và hệ sinh thái trình xây dựng

Mục tiêu của tháng này là trở nên thực sự thành thạo các công cụ Vibe Coding cốt lõi, hiểu những kịch bản nào phù hợp với các công cụ khác nhau và hoàn thành dự án hoàn chỉnh đầu tiên của bạn.

Bắt đầu từ tháng này, Vibe Coding đã thực sự bước vào giai đoạn thực hành. Các công cụ có sẵn vào năm 2026 vốn đã rất mạnh mẽ, nhưng chúng sẽ thưởng cho những người biết cách sử dụng chúng và sẽ tiếp tục trừng phạt những người coi các công cụ này là "ma thuật".

Hiểu được bối cảnh công cụ hoàn chỉnh (2026)

Đến năm 2026, hệ sinh thái Vibe Coding đã trưởng thành đáng kể. Sau đây là những điều cần biết về trạng thái của các công cụ phổ biến tính đến tháng 5 năm 2026.

AI Lập trình IDE

Thích hợp cho các nhà xây dựng kỹ thuật từ bán kỹ thuật đến kỹ thuật.

Con trỏ 3.0
Trình chỉnh sửa đầu tiên bằng AI tất cả trong một. Miễn phí/Pro $20/tháng. Hỗ trợ Cửa sổ đại lý, Đại lý đám mây song song, Trình soạn thảo 2, Thị trường và trình duyệt tích hợp.

Claude Code
giỏi lập trình Agentic và suy luận cơ sở mã đầy đủ. Giá thanh toán khi bạn di chuyển cũng có sẵn thông qua Claude Pro với giá 20 đô la mỗi tháng. Hiện hỗ trợ CLI, plug-in VS Code, ứng dụng máy tính để bàn và máy khách web.

Lướt ván
phù hợp hơn với người dùng doanh nghiệp và nhà phát triển có ngân sách hạn chế. Miễn phí/Pro $15/tháng. Có Cascade Agent, được Google mua lại vào năm 2025 với giá 2,4 tỷ USD.

GitHub Copilot
Lý tưởng để cung cấp hỗ trợ hàng ngày trong bất kỳ IDE nào. Miễn phí/Pro $10/tháng. Hỗ trợ VS Code, JetBrains, Neovim, Xcode và các môi trường phát triển khác.

Cline
Dành cho người dùng nâng cao nguồn mở. Bản thân công cụ này miễn phí nhưng bạn thanh toán bằng Mã thông báo API. Nó là plugin VS Code có thể kết nối các mô hình Claude, GPT-5.5, Gemini hoặc local.

Google AntiGravity
Thích hợp cho việc xây dựng song song nhiều Tác nhân. Giá cần được xác định. Được phát hành cùng với Gemini 3 vào tháng 11 năm 2025, nó cung cấp "Chế độ xem của người quản lý" để quản lý các Đại lý song song.

Không có mã / trình tạo ứng dụng hoàn chỉnh

Thích hợp cho người dùng hoàn toàn không có nền tảng và phát triển nguyên mẫu nhanh chóng.

Dễ thương
Thích hợp cho những người sáng lập không có nền tảng về kỹ thuật và xây dựng React UI. Miễn phí/Pro $25/tháng. Nó có thể tạo ra một ứng dụng full-stack React + Supabase hoàn chỉnh, thân thiện nhất với những người không phải lập trình viên.

Bolt.new
Thích hợp để tạo nhanh các ứng dụng web và không yêu cầu cấu hình cục bộ. Miễn phí/Chuyên nghiệp $29/tháng. Chạy hoàn toàn trên trình duyệt, thích hợp cho người mới bắt đầu làm quen nhanh chóng.

Vercel v0
Thích hợp để tạo các thành phần giao diện người dùng. Phiên bản miễn phí / $20 mỗi tháng. Phù hợp hơn với các nhà phát triển, nó hỗ trợ đồng bộ hóa GitHub và triển khai trực tiếp lên Vercel.

Replit
Tích hợp xây dựng và lưu trữ. Phiên bản miễn phí / $20 mỗi tháng. Tính năng hoàn thiện nhất, Agent 3 có thể xây dựng, chạy và triển khai ứng dụng trực tiếp trên trình duyệt.

Base44
Thích hợp để phát triển công cụ nội bộ không cần mã. Phiên bản miễn phí / $20 mỗi tháng. Cung cấp các ứng dụng được hỗ trợ bởi AI và khả năng back-end cho các nhà xây dựng không chuyên về kỹ thuật.

Gợi ý lựa chọn

Nếu bạn là người mới bắt đầu và chưa có kiến ​​thức nền tảng về kỹ thuật, bạn có thể bắt đầu với Lovable hoặc Bolt.new.

Nếu bạn là nhà phát triển và muốn tích hợp AI vào quy trình làm việc hiện tại của mình, bạn có thể chọn Cursor 3.0 hoặc GitHub Copilot.

Nếu bạn đã quen với việc sử dụng thiết bị đầu cuối và muốn kiểm soát cơ sở mã hoàn chỉnh, bạn có thể chọn Mã Claude.

Nếu bạn là nhà phát triển quan tâm đến ngân sách, bạn có thể chọn Windsurf với giá 15 đô la mỗi tháng.

Nếu bạn muốn cùng nhóm của mình xây dựng các ứng dụng cấp doanh nghiệp, hãy xem xét Windsurf, ứng dụng đã được Google mua lại.

Tài nguyên

roadmap.sh: 10 công cụ mã hóa Vibe tốt nhất năm 2026 (Hướng dẫn miễn phí)
Liên kết: https://roadmap.sh/vibe-coding/best-tools
Đây là bảng xếp hạng do cộng đồng duy trì về các công cụ tốt nhất vào năm 2026.

BuildMVPFast: 10 công cụ mã hóa Vibe tốt nhất năm 2026 (Hướng dẫn miễn phí)
Liên kết: https://www.buildmvpfast.com/blog/best-vibe-coding-tools-2026
Có sẵn toàn bộ cây quyết định và phân tích từng công cụ, giá cả thông tin được xác minh kể từ năm 2026.

So sánh công cụ mã hóa Vibe năm 2026 (miễn phí,Technically.dev)
Liên kết: https://Technically.dev/posts/vibe-coding-tool-comparison
So sánh Replit, v0, Lovable và Bolt trong cùng một dự án.

Vibe Coding: Tại sao chúng ta thích lướt ván hơn Lovable và Bolt (Hướng dẫn miễn phí, Koncile)
Liên kết: https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable
Đánh giá của nhóm về 4 công cụ dựa trên các dự án web thực tế, được xuất bản vào tháng 4 năm 2026.

Cursor 3.0: Một công cụ tái cấu trúc hoàn chỉnh

Cursor 3.0 được phát hành vào ngày 2 tháng 4 năm 2026. Đây là bản cập nhật quan trọng nhất kể từ đó Anysphere đã được phân nhánh dựa trên VS Code vào năm 2023.

Nó không còn chỉ là một công cụ “phủ các chức năng AI trên trình chỉnh sửa tệp” mà đã trở thành một không gian làm việc hợp nhất để xây dựng phần mềm bằng Agent.

Các tính năng mới trong Cursor 3.0

Cửa sổ tác nhân
Một giao diện độc lập mới có thể được mở thông qua Cmd/Ctrl + Shift + P → Cửa sổ tác nhân để chạy song song nhiều Tác nhân AI. Tác nhân có thể chạy đồng thời trên các máy cục bộ, môi trường đám mây, cây công việc SSH hoặc Git.

Composer 2
Cursor là một mô hình lập trình tiên tiến tự phát triển, được thiết kế đặc biệt để chỉnh sửa mã nhiều tệp và đào tạo lặp lại.

Tác nhân đám mây
Các tác nhân chạy trong hộp cát đám mây từ xa. Bạn có thể bắt đầu một nhiệm vụ và quay lại sau để xem kết quả. Tác nhân đám mây tự lưu trữ dành cho doanh nghiệp được ra mắt vào ngày 25 tháng 3 năm 2026.

Trình duyệt tích hợp
Trình duyệt tích hợp cho phép Tác nhân xem trực tiếp hiệu ứng hiển thị thực tế và kiểm tra kết quả sửa chữa của chính tác nhân đó, loại bỏ nhu cầu người dùng chụp ảnh màn hình thủ công.

Cursor Marketplace
Cài đặt bằng một cú nhấp chuột các plugin đóng gói Kỹ năng, Đại lý phụ, máy chủ MCP, Móc và Quy tắc cùng nhau. Các plugin có sẵn bao gồm AWS, Figma, Linear, Stripe, Vercel, Datadog, Snowflake, v.v.

Chế độ thiết kế
Bạn có thể nhấp và kéo trực tiếp trên các thành phần giao diện người dùng được trình duyệt hiển thị để cho phép AI chỉnh sửa chính xác các phần tương ứng. Không còn từ nào mô tả vị trí của một thành phần.

Tự động hóa
Tính năng này được phát hành vào ngày 5 tháng 3 năm 2026. Đây là một Tác nhân thường trú có thể được kích hoạt bởi các sự kiện bên ngoài, chẳng hạn như các tác vụ đã lên lịch, thông báo Slack, sự cố tuyến tính, sự kiện GitHub và cảnh báo PagerDuty. Tác nhân sẽ khởi động hộp cát trên đám mây và sử dụng MCP đã định cấu hình của bạn để thực hiện các tác vụ.

Chế độ xem khác biệt mới
hỗ trợ đánh giá thay đổi cấp độ từng từ, dàn dựng và tạo Yêu cầu kéo và toàn bộ quá trình có thể được hoàn thành trong Cửa sổ tổng đài viên.

/worktree command
Hãy để tác vụ chạy trong cây công việc Git độc lập để ngăn công việc của Tác nhân làm ảnh hưởng đến nhánh chính.

/best-of-n command
Hãy để cùng một tác vụ chạy trong nhiều mô hình và trả về kết quả tốt nhất.

Tài nguyên

Nhật ký thay đổi con trỏ: 3.0 (chính thức, miễn phí)
Liên kết: https://cursor.com/changelog/3-0
Ghi chú phát hành chính thức cho Cursor 3.0.

DataCamp: Con trỏ 3 là gì? (Hướng dẫn miễn phí)
Liên kết: https://www.datacamp.com/blog/cursor-3
Một trong những bản tóm tắt đầy đủ nhất về mọi tính năng mới trong Cursor 3.0, được xuất bản vào ngày 7 tháng 4 năm 2026.

Cursor 3 Thay đổi mọi thứ đối với Mã hóa tác nhân (YouTube, Miễn phí, Scrimba)
Liên kết: https://www.youtube.com/watch?v=HTKGyLar8AU
Trình diễn đầy đủ về Cửa sổ đại lý, Trình soạn thảo 2, trình duyệt tích hợp, Đại lý song song và Thị trường thông qua các dự án thực tế.

Hướng dẫn con trỏ 2026: Tìm hiểu mã hóa AI trong 15 phút (Hướng dẫn miễn phí, NXCode)
Liên kết: https://www.nxcode.io/resources/news/cursor-tutorial-beginners-2026
A hướng dẫn từng bước dành cho người mới bắt đầu, bao gồm Trình soạn thảo, Chế độ tác nhân và Tác nhân đám mây.

Xây dựng nhanh chóng với AI: Cursor 3 vs Google AntiGravity (Hướng dẫn miễn phí)
Liên kết: https://www.buildfastwithai.com/blogs/cursor-3-vs-antiGravity-ai-ide-2026
So sánh tính năng hữu ích giữa Cursor 3.0 và AI IDE AntiGravity mới của Google.

Mã Claude: Một công cụ Mã hóa tác nhân có thể hiểu toàn bộ cơ sở mã

Mã Claude là một công cụ lập trình tác tử gốc thiết bị đầu cuối do Anthropic đưa ra.

Không giống như các công cụ IDE hoạt động chủ yếu xung quanh các tệp đang mở, Claude Code có thể đọc toàn bộ cơ sở mã của bạn, suy luận trên nhiều tệp, chạy lệnh, xử lý các thao tác Git và thực hiện các tác vụ nhiều bước một cách tự động trong khi yêu cầu bạn phê duyệt ở mỗi bước.

Hiện tại, nó có sẵn trong bốn môi trường: CLI đầu cuối, plug-in VS Code, JetBrains IDE và ứng dụng máy tính để bàn.

Cách bắt đầu

Bạn cần đăng ký Claude Pro, $20 mỗi tháng trở lên và Terminal trên macOS, Linux hoặc Windows 11.

Cài đặt qua npm:

npm install -g @anthropic-ai/claude-code

Vào thư mục dự án của bạn:

cd ~/projects/my-app && claude

Bắt đầu với một mẹo khám phá:

Dự án này làm gì?

Điều này cho phép Claude Trước khi sửa đổi bất cứ điều gì, hãy phân tích cơ sở mã của bạn.

Quy trình làm việc cốt lõi: Khám phá → Lập kế hoạch → Mã → Cam kết

Khám phá: Khám phá
Nhấn Shift + Tab hai lần để vào Chế độ lập kế hoạch. Claude sẽ đọc hồ sơ và trả lời các câu hỏi nhưng sẽ không sửa đổi bất cứ điều gì. Bạn có thể sử dụng mô hình này để hiểu kiến ​​trúc dự án, theo dõi luồng dữ liệu và sắp xếp cấu trúc cơ sở mã.

Kế hoạch: Lập kế hoạch
Trong Chế độ lập kế hoạch, yêu cầu Claude tạo kế hoạch thực hiện. Bạn cần xem lại, sàng lọc và đưa ra phản bác đối với những phần bạn không đồng ý. Chỉ sau khi xác nhận, bạn mới nói "tiếp tục".

Mã:Mã hóa
Chuyển về chế độ bình thường. Claude sẽ triển khai tính năng này theo kế hoạch, trình bày những điểm khác biệt và yêu cầu bạn phê duyệt theo từng bước thực hiện.

Cam kết: Cam kết
Xem xét sự khác biệt, chạy thử nghiệm và sau đó hoàn thành cam kết bằng thông báo cam kết rõ ràng.

CLUDE.md là gì?

CLAUDE.md là một tệp Markdown được đặt trong thư mục gốc của dự án, được sử dụng để thông báo cho Claude Code:

Cách chạy dự án của bạn;

Những quy ước nào nên được tuân theo;

Những lệnh nào nên được chạy;

Nội dung nào không được sửa đổi.

Bạn có thể chạy:

claude /init

để tạo phiên bản ban đầu và sau đó tùy chỉnh nó theo tình hình dự án.

Tài nguyên

builder.io: Cách sử dụng Mã Claude (Hướng dẫn cho người mới bắt đầu, miễn phí)
Liên kết: https://www.builder.io/blog/how-to-use-claude-code
Một trong những hướng dẫn dành cho người mới bắt đầu sử dụng Mã Claude đầy đủ nhất hiện nay, bao gồm cài đặt và Chế độ kế hoạch Quy trình làm việc, thiết lập CLAUDE.md và các phương pháp hay nhất, được xuất bản vào tháng 4 năm 2026.

Hướng dẫn đầy đủ về mã Claude dành cho người mới bắt đầu không rành về kỹ thuật (YouTube, miễn phí)
Liên kết: https://www.youtube.com/watch?v=bqJzIWAEn40
Video hướng dẫn từng bước để xây dựng một ứng dụng từ đầu với Claude Code, không cần kinh nghiệm lập trình, được xuất bản vào tháng 4 năm 2026.

Khóa học đầy đủ về Claude Code; 4 giờ (YouTube, miễn phí)
Liên kết: https://www.youtube.com/watch?v=QoQBzR1NIqI
Một trong những khóa học video Claude Code đầy đủ nhất hiện có, bao gồm toàn bộ quy trình từ cấu hình đến phát hành và bán sản phẩm.

Hướng dẫn về mã Claude dành cho người mới bắt đầu 2026 (hướng dẫn miễn phí, dev.to)
Liên kết: https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma
Hướng dẫn bằng văn bản, bao gồm cài đặt, cấu hình thiết bị đầu cuối và xây dựng dự án đầu tiên.

Bắt đầu với Mã Claude: Hướng dẫn thiết lập dành cho nhà nghiên cứu (Hướng dẫn miễn phí)
Liên kết: https://paulgp.substack.com/p/getting-started-with-claude-code
Đặc biệt phù hợp để hiểu nguyên tắc "đủ cụ thể", quản lý cửa sổ theo ngữ cảnh và phương pháp nhắc nhở lặp đi lặp lại.

OpenSaaS.sh: Cách tốt nhất để tạo cảm giác viết mã SaaS vào năm 2026 (Hướng dẫn miễn phí)
Liên kết: https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
Giới thiệu cấu hình SaaS Vibe Coding tốt hơn vào năm 2026: Mã Claude + mẫu SaaS có cấu trúc + Tài liệu thân thiện với LLM (llms.txt). Ngoài ra còn có cách chạy máy chủ phát triển phụ trợ để Claude có thể xem nhật ký trực tiếp và cách tự động hóa trình duyệt bằng Chrome DevTools MCP.

Các mốc quan trọng của Tháng 2

Vào cuối tháng này, bạn sẽ có thể:

Chọn công cụ thích hợp cho các loại dự án khác nhau;

Sử dụng Cửa sổ tác nhân của Cursor 3.0 để thực hiện các tác vụ thông qua tác nhân đám mây;

Trước khi viết bất kỳ mã nào, hãy sử dụng Chế độ lập kế hoạch của Claude Code để lập kế hoạch;

Thiết lập CLAUDE.md cho bất kỳ Tệp dự án nào;

Xây dựng và triển khai ít nhất một dự án hoàn chỉnh, tức là một ứng dụng web có thể chạy bình thường và có URL trực tuyến thực.

Tháng 3: Nghệ thuật dùng từ gợi ý, bối cảnh, cấu trúc và đầu ra ổn định

Mục tiêu của tháng này là nắm vững khả năng cốt lõi của Vibe Coding, tức là viết tốt lời nhắc, quản lý tốt ngữ cảnh để AI có thể tạo ra kết quả mà bạn mong muốn một cách ổn định trong lần thử đầu tiên.

Trong toàn bộ hệ thống công nghệ Vibe Coding, lời nhắc là kỹ năng có đòn bẩy cao nhất. Nếu lời nhắc của bạn mơ hồ thì bản thân công cụ này sẽ khó có tác dụng. Một công cụ trung bình với những lời nhắc xuất sắc sẽ luôn tốt hơn một công cụ hàng đầu với những lời nhắc mơ hồ.

Lời nhắc của Vibe Coding thực sự hoạt động tốt như thế nào

Sự khác biệt giữa lời nhắc của người mới và lời nhắc của chuyên gia gần như hoàn toàn nằm ở cấu trúc.

Người mới sẽ nói:

Thêm trang đăng nhập.

Các chuyên gia sẽ nói:

Tạo trang đăng nhập trong app/login/page.tsx, sử dụng ứng dụng khách xác thực Supabase hiện có trong lib/supabase.ts. Kiểu biểu mẫu tuân theo app/signup/page.tsx. Chứa các hộp nhập email và mật khẩu, nút gửi và xử lý các lời nhắc lỗi đối với thông tin đăng nhập không hợp lệ. Không sửa đổi bất kỳ tập tin nào khác.

Cái trước có thể tạo ra một thành phần hoạt động hoặc nó có thể phá vỡ các tệp khác hoặc đưa ra các mẫu không nhất quán với cơ sở mã hiện tại. Cái sau có nhiều khả năng tạo ra một thành phần thực sự có thể chạy được và phù hợp với cấu trúc dự án.

Một lời nhắc hay thường có bốn phần:

Mục tiêu: Chính xác thì tính năng này có tác dụng gì?
Bối cảnh: Những tập tin nào có liên quan? Dự án hiện tại đã có những gì?
Ràng buộc: Điều gì không thể thay đổi? Những mô hình đã được thiết lập nên được tuân theo?
Định dạng đầu ra: Kết quả cuối cùng sẽ như thế nào?

Tài nguyên

Anthropic: Hướng dẫn kỹ thuật nhắc nhở tương tác (Miễn phí, GitHub)
Liên kết: https://github.com/anthropics/prompt-eng-interactive-tutorial
Đây là khóa học tương tác gồm 9 chương với các bài tập được thiết kế để Claude sử dụng. API chạy trong Jupyter cuốn sổ. Đây là một trong những khóa học kỹ thuật nhanh chóng mang tính thực hành tốt nhất hiện có.

PromptingGuide.ai (free)
Link: https://www.promptingguide.ai/
Covers the complete content from basic prompt words, thought chains, few-shot examples, to Agentic prompting technology, and is continuously updated.

r/PromptEngineering: The Ultimate Vibe Coding Guide (Free, Reddit)
Link: https://www.reddit.com/r/PromptEngineering/comments/1kyboo0/the_ultimate_vibe_coding_guide/
18 practical lessons from active Vibe Coders, including how to deal with AI offsets, how to maintain consistency across multiple features, and how to create "Common AI Mistakes" files.

Roadmap.sh: Vibe Coding Best Practices (Free Guide)
Link: https://roadmap.sh/vibe-coding/best-practices
Provides 10 practice rules to help you get stable results from Vibe Coding tools, updated and verified for 2026.

Appwrite: Complete Vibe Coding Guide 2026 (Free Guide)
Link: https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025
Complete introduction to what Vibe is Coding, how to write clear prompts, and how to stay in control as a builder rather than a passenger on the tool.

PRP Framework: Plan first, then prompt

The most common reason for the "death loop" is to start developing functions directly without any planning.

AI writes a piece of code, breaks something; you ask it to fix it, it breaks something else; and then the whole process spirals downward.

The solution is actually simple: before writing any code prompts, write a plan.

PRP Framework: Product Requirements Prompt

Before opening the Vibe Coding tool, answer three questions in a document:

Who is this for?
Who is the target user? How comfortable are they with technology?

What problem does it solve?
Explain the core value clearly in one sentence.

What does success look like?
Write specific, testable standards.

Then, give this document to Claude or ChatGPT to expand it into a complete product requirements document, which is a PRD. This PRD will become your opening prompt in Cursor or Claude Code.

This habit is the dividing line between "people who can actually launch products" and "people who are stuck in a death cycle."

Especially in Claude Code, you should press Shift + Tab twice to enter Plan Mode before any implementation. Ask Claude to explain which files it creates or modifies, which functions it introduces, and which edge cases or architectural decisions it needs to consider. You review the plan, raise objections to questionable parts, and then, only after confirmation, say "go ahead."

llms.txt: The standard for AI-readable documents

One of the most underrated techniques in Vibe Coding is llms.txt.

It is a plain text Markdown file placed in the root directory of a library, framework, or project to provide AI tools with the precise context they need to use the project correctly.

The problem it solves is: most library documents are written for human viewing and are optimized for browser reading. AI models don’t work well with HTML, JavaScript-heavy documentation pages, and navigation menus. llms.txt removes all this noise and provides the model with a clean, structured, API-focused reference that can be placed in the context window.

Where to find llms.txt, and how to use it

Most major libraries now release llms.txt. For example:

https://docs.supabase.com/llms.txt

You can paste this URL into Claude Code, Cursor or ChatGPT and say: Read this documentation first, then help me build functionality with this library.

For libraries that do not yet have llms.txt, you can generate one yourself: copy the API documentation of this library, paste it to Claude, and then say: Please organize this document into a clear llms.txt format: including classes, methods, required parameters and examples. Control it within 5000 tokens.

The OpenSaaS technology stack, that is, Claude Code + Open SaaS boilerplate, uses llms.txt for both the boilerplate and the Wasp framework. This is one of the reasons why Claude Code produces significantly more stable code in this configuration compared to any technology stack.

Resources

llms.txt Official Standard (free)
Link: https://llmstxt.org/
Official specification, lists all libraries and frameworks that have released llms.txt files.

OpenSaaS: The Best Way to Vibe Code a SaaS in 2026 (Free Guide)
Link: https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
This is a real-life example of how llms.txt, SaaS boilerplate and Claude Code combine to form one of the most stable Vibe Coding configurations in 2026.

Cursor Rules and CLAUDE.md: Long-term instructions for AI

Cursor Rules and CLAUDE.md files are one of the practices with the lowest usage rate but the highest input-output ratio in Vibe Coding.

They are persistent instruction files that the AI ​​reads at the beginning of each session. They define your project, conventions, technology stack, and what AI absolutely cannot do.

Cursor settings in 2026

Cursor now uses the .cursor/rules/ directory and manages rules through a separate .mdc file, replacing the previous single .cursorrules file.

Rules have four activation modes:

Always Apply
Loads for every conversation, regardless of context.

Auto Attached (globs)
Automatically activated when a reference matches a file pattern, such as a *.tsx file.

Agent Requested (based on description)
AI determines when to apply based on task description.

Manual (@rule-name)
Will only be loaded if you explicitly reference it in the prompt word.

What should a good rule setting include?

A .cursor/index.mdc file is used to describe the project overview, technology stack and general conventions. It is recommended to control it within 100 lines;

Create multiple independent .mdc files in .cursor/rules/, corresponding to specific contexts, such as authentication, database schema, UI components, etc.;

Place one in the project root directory CLAUDE.md file, written with the same information for use by Claude Code.

Resources

Vibe Coding Academy: Cursor Rules Complete Guide + 15 Templates (Free Guide)
Link: https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide
This is 2026 About One of the most detailed guides to Cursor Rules, covering the .mdc format, four activation modes, and reproducible templates for 15 common technology stacks.

CLAUDE.md and Cursor Rules: Multiple Levels (YouTube, free)
Link: https://www.youtube.com/watch?v=Ia54BXaci5o
In-depth explanation of how to set up multi-level rules for Cursor and Claude Code, including real cases. The video was released in mid-2025 but is still completely applicable today.

How to Create and Use SKILLS.md in Cursor (YouTube, free)
Link: https://www.youtube.com/watch?v=DfLL5_zbWGc
Introducing Cursor's skills system, released in February 2026. Content covers how to create a .cursor/skills/ file so that the Agent can be called via the slash command.

Cursor Directory (free, community)
Link: https://cursor.directory/
A directory of rule files contributed by the community, covering a large number of technology stacks. Choose a rules file that matches your technology stack and then customize it.

Awesome CursorRules (Free, GitHub)
Link: https://github.com/PatrickJS/awesome-cursorrules
A selected repository of high-quality rule files, classified by framework, and continuously updated.

Sync Coding Rules: Cursor, Claude Code, and Windsurf (Free Guide)
Link: https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude
A more advanced approach: have a master rules file automatically synchronized to all AI tools through hard links.

Spec-Driven Development: A professional upgrade of Vibe Coding

Spec-Driven Development, also known as specification-driven development, or SDD for short, is a professional method that appears when Vibe Coding enters a real project and needs to be expanded.

This method was formally proposed by JetBrains in the 2026 DeepLearning.AI course. It emphasizes: Before letting any Agent write code, first define what the system should do through structured specification documents, and put these documents directly into the code repository.

Vibe Coding usually hits a wall around month 3 of a project. The model begins to generate code that contradicts previous decisions; context accumulates; conflicting patterns begin to emerge; a death spiral ensues.

Spec-Driven Development attempts to solve this problem: make the spec, the specification document, rather than a single prompt word, the source of truth for the project.

SDD 工作流

写规格文档
在任何代码出现之前，先精确描述系统行为：这个功能从外部看要做什么，它的输入、输出、边界情况和约束是什么。这里写的不是实现细节，而是可观察的行为。

生成需求
把规格文档交给 AI Agent，让它生成一份结构化需求文档。然后你来审查：它是否覆盖了所有内容？是否需要批准或修改？

创建设计文档
AI 将已经批准的需求转化为技术计划，其中包含具体的代码、测试和文档任务。在写下第一行代码之前，你需要先审查这份计划。

实现
AI 根据规格文档写代码，而不是根据一段模糊提示词自由发挥。重试逻辑、幂等处理、超时行为，这些都应该在规格文档里决定，而不是交给模型想象。

生成并运行测试
由于规格文档已经明确了输入、输出和边界情况，测试用例也可以直接从规格文档生成。

让 SDD 真正有效的文档结构

mission.md
说明你正在构建什么，以及为什么要构建它。

tech-stack.md
记录核心技术决策。

roadmap.md
按实现顺序拆分项目阶段。

specs/[feature-name]/plan.md
该功能的编号任务组。

specs/[feature-name]/requirements.md
该功能的范围、关键决策和上下文。

specs/[feature-name]/validation.md
成功标准和合并确认条件。

什么时候用 SDD，什么时候用纯 Vibe Coding

如果是原型、实验、概念验证，或者在这份路线图第 3–4 个月中探索方向，可以使用 Vibe Coding。

如果某个功能需要长期维护、项目有第二位贡献者参与，或者功能行为涉及商业或法律影响，就应该使用 SDD。

折中路径是：用 SDD 管好「宪法」，也就是使命、技术栈和架构；在这些边界之内，用 Vibe Coding 执行具体任务。

资源

Toward Data Science：From Vibe Coding to Spec-Driven Development（免费指南）
链接：https://towardsdatascience.com/from-vibe-coding-to-spec-driven-development/
目前最详细的 SDD 实践者指南之一，包含完整文档结构、plan → implement → validate 循环，以及如何把 spec 工作流自动化为 Claude Code skills。

GitHub Spec Kit（免费，开源）
链接：https://github.com/github/spec-kit
GitHub 官方开源的规格驱动开发工具包。提供模板、specify CLI，以及可与 Claude Code、GitHub Copilot 和 Gemini CLI 配合使用的结构化命令，包括 /specify、/plan 和 /tasks。支持 30 多种编码 Agent。

GitHub Blog：Get Started with Spec-Driven Development（官方免费指南）
链接：https://github.blog/ai-and-ml/generative-ai/spec-driven-development-with-ai-get-started-with-a-new-open-source-toolkit/
GitHub 官方对 Spec Kit 的使用介绍，包括四个阶段：Specify → Plan → Tasks → Implement，如何安装 specify CLI，以及如何用 /speckit.constitution 建立项目治理原则。

JetBrains Course：Spec-Driven Development with Coding Agents（DeepLearning.AI 免费课程）
链接：https://www.deeplearning.ai/courses/spec-driven-development-with-coding-agents/
使这一方法论正式成型的课程。覆盖完整的计划、实现、验证循环，以及如何在 Claude Code 中把 SDD 工作流自动化为可复用技能。

Test Collab：From Vibe Coding to Spec-Driven Development（免费指南）
链接：https://testcollab.com/blog/from-vibe-coding-to-spec-driven-development
不绑定具体工具的 SDD 解释文章，包含真实案例，并说明 CLAUDE.md、Cursor Rules 和 GitHub Copilot PRD 工作流如何实现同一底层模式。

Red Hat：Vibes, Specs, Skills, and Agents; The Four Pillars of AI Coding（免费指南）
链接：https://developers.redhat.com/articles/2026/03/30/vibes-specs-skills-agents-ai-coding
一个更高级的框架：用 vibe 做探索，用 spec 保证精确，用 skill 封装可复用的 Agent 能力，用 agent 执行任务。这是理解专业 AI 辅助开发较完整的心智模型之一。

每个专家级 Vibe Coder 都在使用的 18 条实践

这些实践直接来自 r/ClaudeAI 和 r/PromptEngineering 社区，并结合 2025–2026 年的实践者经验进行了验证。

从详细愿景开始
在打开任何工具之前，先把你想做什么完整写出来。

大量使用 Git 和分支
每一次功能实验都创建一个新分支。

维护一个 instructions 文件夹
建立 /docs 或 /instructions 目录，用 Markdown 文件记录你的架构、组件和决策。

把功能拆成多个阶段
不要一次性要求 AI 做完整功能。把它拆成 3–5 个提示词逐步完成。

上下文过长时，开启新对话
长对话会降低输出质量。开发新功能时，最好重新开始一个会话。

每个提示词都引用具体文件
明确告诉 AI 应该查看哪些文件。

不要塞入过多上下文
只提最相关的文件，不要把所有内容都丢进去。

引用已有组件
当你要求 AI 创建新组件时，指向一个已有组件作为风格参考。

用 Gemini 3.5 Pro 做第二审查者
把生成代码复制给 Gemini，让它检查安全漏洞或不良模式。

始终在服务端验证和清洗数据
永远不要信任客户端提交的数据。

把密钥放在服务端
使用环境变量，绝不要把 API Key 放进前端代码。

显式处理错误
从控制台复制错误信息，然后粘贴给 AI。

如果修复失败三次，就重新审视你的提示词
不要用同一个有问题的提示词要求 AI 尝试第四次。

让 AI 加日志
调试时，不要靠猜。要求 AI 在关键节点添加 console.log。

明确范围
在每个提示词里加入：「不要修改我没有要求修改的任何内容。」

维护一个「Common AI Mistakes」文件
记录 AI 反复犯的错误，并在开始新功能时引用它。

先要计划，不要直接要代码
永远先让 AI 给出计划，经过你批准后再开始实现。

让 AI 解释陌生代码
不要接受你完全看不懂的代码。在继续之前，先让 AI 解释清楚。

第 3 个月里程碑

到这个月结束时，你应该能够：

写出结构化提示词，并在第一次尝试时获得稳定输出；

使用 PRP 框架，在构建任何应用之前先完成规划；

为任意项目设置 Cursor Rules 和 CLAUDE.md；

习惯性应用以上 18 条专家实践；

为自己的项目维护一个可用的「Common AI Mistakes」文件。

第 4 个月：构建真实项目，从想法到上线产品

这个月的目标是：构建 2–3 个完整项目，从想法推进到真实上线 URL。这些项目将成为你的作品集。

教程 Demo 和真实产品之间的差距，正是大多数 Vibe Coder 永久停滞的地方。真实产品有用户，会以意想不到的方式出问题，需要数据库和身份认证，也必须能在移动端正常运行。这个月的重点，就是补上这段差距。

1、真正值得构建的项目

忘掉习惯追踪器，忘掉天气应用。最好的 Vibe Coding 项目，往往是范围很窄、非常垂直，并且能为某一类具体人群解决一个明确痛点的产品。

下面这些是真实想法：有些已经被 2026 年的独立开发者拿来变现，有些已经有人实际做出来了。它们都不是千篇一律的模板项目。

初级：先真正动手做起来（第 3–4 个月）

这些项目流程单一、边界清晰，有真实使用场景，通常可以在一个周末做出来，而且不只是 Demo，而是真的有用。

Reddit Diss Track Generator

这个工具通过 PRAW（Python Reddit API Wrapper）连接 Reddit API，从任意帖子中抓取评论，识别其中最精彩的嘲讽和攻击性表达，再用 LLM 把它们串成歌词，最后通过文本转语音和基础音频编辑输出一个 .wav 文件。

它很奇怪、很好笑、也很适合传播，正是那种容易在 Twitter 上获得关注的项目。

你能学到：第三方 API 集成、LLM 链式调用、音频文件生成。

AI Meeting Brief Generator

在会议开始前，用户输入公司名称和会议目的。工具会抓取该公司官网和 LinkedIn 信息，读取你与对方最近一封邮件往来（通过 Gmail API），然后生成一页会议简报，包括谈话要点、关键风险和建议问题。

你能学到：多源数据抓取、提示词链路、API 认证。

变现方式：面向顾问和客户经理，每月 19 美元。尤其适合每周有 5 次以上客户电话的人。

AI Changelog Writer

这个工具通过 GitHub API 连接一个 GitHub 仓库。每周读取最近的 commit，提取发生了哪些变化，并自动写成一篇清晰、面向客户的更新日志。

开发者通常不喜欢写 changelog，这个工具可以把这件事自动化。

你能学到：GitHub API、结构化 LLM 输出、定时任务。

目标用户非常明确：独立创始人和开发团队。

Freelance Invoice Chaser

这是一个为自由职业者设计的工具，解决他们不想追讨逾期付款的问题。

它可以集成 Stripe，或者使用手动录入的发票数据。系统会按照预设时间表自动发送礼貌但逐步升级的付款提醒邮件。发票逾期越久，语气越坚定，并且会记录所有操作。

你能学到：通过 Resend/Nodemailer 发送邮件、cron 定时任务、Stripe webhook 处理。

这是一类自由职业者一看就会想要的工具。

StickyCanvas：一个不像 Notion 的笔记工具

这是一个真实项目，创作者每天都在使用。

它是一个极简画布，用户可以自由拖动便利贴。没有文件夹、没有标签、没有层级结构。它的全部价值主张就是：足够简单。

没有菜单，没有命令，也没有 Notion 那种复杂性。只有一块画布和一些笔记。

你能学到：拖拽交互、画布交互、本地存储。

这个项目一个周末就可以上线。

中级：能吸引注意力的作品集项目（第 4–5 个月）

这些项目需要数据库、用户认证和真实设计，能够展示你的产品思维。

面向特定行业的垂直 AI 聊天机器人

这不是一个通用聊天机器人，而是一个针对某一类具体业务知识库训练出来的聊天机器人。

选择一个垂直领域：牙科诊所、汽车维修店、房地产中介、瑜伽馆。构建一个能回答预约问题、价格问题和常见问题的聊天机器人，然后把部署服务卖给这类商家。

一些独立开发者反馈，这类垂直项目每月可以从单个细分市场获得 850–3200 美元收入。

你能学到：RAG 管线、Supabase 向量搜索、可嵌入 widget、多租户架构。

Proposal Version Tracker

这是一个面向自由职业者和代理公司的工具，用来追踪发给客户的每一版销售提案。

它可以显示哪一版被打开了、客户看了多久，并在客户重新打开提案时发送通知。客户重新打开提案通常意味着他们又开始认真考虑了。

你可以把它理解为：专门为 proposal 做的 DocuSign analytics。

你能学到：PDF 上传与存储、邮件打开追踪、实时通知、Supabase 数据库设计。

Screenshot-to-React Component Converter

用户上传任意 UI 截图，比如落地页、竞品应用界面，或者他们截下来的 Figma 设计图。

工具会把截图发送给视觉模型，比如 GPT-5.5 或 Claude，然后生成一个干净的 React + Tailwind 组件，尽量匹配原始布局和样式。

你能学到：视觉模型 API、图片上传、多模态模型的结构化输出。

这个工具对开发者真的有用，而且很容易支撑每月 25 美元的定价。

Water Pipeline / Infrastructure Map Tool

这是 Vibe Coding subreddit 上有人真实做过的项目：一个交互式地图工具，让市政或公用事业团队可以绘制水管和流域，添加维修历史、成本和维护日志，并按日期或位置搜索和筛选。

这种定制化运营工具往往有几个特点：垂直、略显无聊、但极其有用。 B2B 买家会毫不犹豫地为这类工具付费。

你能学到：使用 Mapbox 或 Leaflet 渲染地图、在 Supabase 中存储地理空间数据、重表单 UI、文件上传。

Gamified Family Chore App

这个项目的创作者一开始并不打算发布它，只是因为自己家里需要，就在一个周末做了出来。一个月后，已经有 100 多个家庭在使用。

这个应用可以把家务分配给家庭成员，完成任务后获得积分，积分可以解锁由家长设置的奖励。技术栈是 FastAPI + PostgreSQL + PWA。

它的经验很简单：为你自己真实遇到的问题构建产品。

这样做出来的东西发布得更快，也更真实。因为你本身就是用户之一，其他真实用户也更容易找到它。

高级：证明真实能力的复杂项目（第 5–6 个月）

这些项目足够复杂，需要合理架构、上下文工程和多会话构建。每一个都可以成为真正的产品，而不是 Demo。

VC Investor CRM

这是一个专门为风险投资人或天使投资人设计的交易追踪 CRM。

它可以追踪创业项目交易、管理关系历史、自动总结对话，并用 LLM 根据自定义投资 thesis 给公司打分。

关键洞察在于：现成 CRM，比如 Salesforce、HubSpot，是为销售团队设计的，而不是为投资人设计的。两者的心智模型完全不同。

为现有工具忽视的某一类特定用户构建产品，是最有可能产生收入的路径之一。

Basketball Management Simulation Game

一个完整的浏览器端篮球经营模拟游戏，真实项目案例是 azario.floot.app。

玩家可以建立自己的篮球队，通过训练计划提升球员能力，在实时市场中与其他玩家交易，并通过实时比分逻辑模拟比赛。

你能学到：复杂状态管理、游戏模拟算法、多用户实时数据、排行榜。

这类项目能展示真正的工程野心。

AI-Powered Speech Therapy App（Aphasio）

这是一个使用 Cursor 构建、面向中风后失语症患者的 iPhone 应用。

应用会提供 AI 生成的语言训练内容，用户练习朗读单词和句子，App 会监听并评估发音，再根据表现动态调整难度。

创作者之所以做这个项目，是因为家人真的需要它。

你能学到：语音识别 API、自适应练习生成、移动端构建（React Native）、进度追踪云端存储。

这是那种真正有意义的项目。

PDF Accessibility Tool for Visual Impairments

这是一个 AI 工具，可以把任意 PDF 转换成对视觉障碍人士真正可访问的版本。

它不只是基础文本提取，而是会把复杂表格和图表改写成通俗语言描述，为嵌入图片生成 alt text，添加合理阅读顺序，并输出可访问的 HTML 或 EPUB 版本。

你能学到：PDF 解析（PyMuPDF 或 pdfplumber）、用于图表描述的多模态 AI、可访问 HTML 输出。

这个方向不仅有 SaaS 变现潜力，也可能获得资助或机构采购。

项目发现资源

r/vibecoding：Show Me Your Awesome Projects（免费，Reddit）
链接：https://www.reddit.com/r/vibecoding/comments/1rl5ccj/show_me_your_awesome_vibe_coded_projects/
真实社区展示，都是已经上线的 Vibe Coding 项目。适合寻找灵感，也能看到项目范围和难度的真实情况。

r/vibecoding：What Is Your Most Unique Vibe Coded Project?（免费，Reddit）
链接：https://www.reddit.com/r/vibecoding/comments/1rxjc3u/what_is_your_most_unique_vibecoded_project/
这里有一些真正奇怪且有创意的项目，包括 diss track generator、PDF 可访问性工具，以及一个 30 天内做出的地理空间数据库。

DodoPaments：30 Profitable Micro SaaS Ideas for 2026（免费指南）
链接：https://dodopayments.com/blogs/micro-saas-ideas-2026
提供 30 个经过验证的 Micro SaaS 想法，包括市场规模、MRR 潜力、启动成本和变现路径。每个项目都适合独立开发者构建。

SuperFrameworks：Vibe Coding Hits a Tipping Point（免费指南）
链接：https://superframeworks.com/articles/vibe-coding-tipping-point-what-founders-need-to-know
列出 7 个具体细分市场，独立开发者已经通过 Vibe Coding 产品每月获得 500–3200 美元收入，并附有实际收入数字。

IdeaProof：50 Micro-SaaS Ideas for Solo Founders in 2026（免费）
链接：https://ideaproof.io/lists/micro-saas-ideas
每个想法都包含技术难度评级、启动成本估算（1000–15000 美元）和具体市场缺口分析。是目前最具可操作性的想法清单之一。

Cursor Forum：Built with Cursor in 2025（免费，社区）
链接：https://forum.cursor.com/t/built-with-cursor-in-2025-share-your-projects/147737
Cursor 官方论坛的项目展示帖。都是真实项目、真实构建者，也会诚实分享困难在哪里。

2、Plan-Review-Fix 循环：专业构建方式

大多数新手 Vibe Coder 采用的是「提示 → 接受 → 再提示 → 再接受」的循环。

这对 20 行代码可能有用，但如果是真实产品里的真实功能，就会灾难性失败。

专业人士使用的是 Plan-Review-Fix 循环，其中有三个不同角色：你、编码 Agent，以及一个独立 AI 审查者。

工作流

先规划。
在写任何代码之前，先让 AI 列出：它将创建或修改哪些文件、会添加哪些函数、需要哪些依赖，以及可能存在的边界情况。

明确告诉它：不要写任何代码，只展示计划。

然后你来审查计划，并进行修改。

实现。
计划批准后，再让 AI 写代码。

审查。
把生成的代码复制出来，粘贴到一个新的 Gemini 3.5 Pro 会话中。选择它是因为它有非常大的上下文窗口。让它扮演资深安全工程师和代码审查者，检查 Bug、安全漏洞、幻觉生成的包名，以及糟糕模式。

修复。
把审查者的发现反馈给编码 Agent，持续迭代，直到结果干净。

资源

ProductTalk：Vibe Coding Best Practices; Avoid the Doom Loop（免费指南）
链接：https://www.producttalk.org/vibe-coding-best-practices/
关于「死亡循环」和 Plan-Review-Fix 循环最详细的指南之一，包含实用案例。

5 Vibe Coding Workflows That Actually Ship Production Code in 2026（免费指南，dev.to）
链接：https://dev.to/dohkoai/5-vibe-coding-workflows-that-actually-ship-production-code-in-2026-1nmn
介绍使用 Claude Code、Cursor 和 Windsurf 交付真实生产代码的实践流程，而不是 Demo。内容覆盖测试驱动方法、上下文加载模式和真实成本数据。

3、每个 Vibe Coder 都必须掌握的安全基础

AI 生成的代码会反复出现一些可预测的安全问题。你不需要成为安全专家，但你必须知道这些模式存在，并在任何产品上线之前养成检查习惯。

Vibe Coder 安全清单

API Key 和密钥
所有密钥都应该放在 .env.local 里。这个文件必须在第一次 push 之前加入 .gitignore。 No exceptions.

服务端验证
始终在服务端验证和清洗所有用户输入。 AI 经常会跳过这一步。

认证模式
Supabase 默认就能正确处理认证。如果你要自定义认证，请使用经过充分验证的成熟库。

CORS 配置
让 AI 解释它生成了哪些 CORS 设置，以及为什么这么设置。错误的 CORS 配置是 AI 常见问题。

依赖审计
在部署前，让 AI 检查是否存在已知漏洞依赖，或者是否出现了幻觉生成的包名。 AI 偶尔会编造不存在的包名。

Prompt Injection
如果你的应用会把用户输入传给 LLM，用户就可能尝试劫持系统提示词。你需要阅读 OWASP 指南。

资源

OWASP Top 10 for LLM Apps: Prompt Injection（免费）
链接：https://genai.owasp.org/llmrisk/llm01-prompt-injection/
这是关于 Prompt Injection 的权威参考，也是 LLM 应用中的第一大安全风险。内容覆盖直接和间接注入攻击，以及防御模式。

OWASP API Security Top 10（免费）
链接：https://owasp.org/API-Security/
API 安全风险的权威清单。在上线任何接受用户数据的产品之前，都应该理解这些内容。

Clarifai：Vibe Coding Best Practices and Security（免费指南）
链接：https://www.clarifai.com/blog/vibe-coding-explained
针对 AI 生成代码的分步骤安全清单，并提供具体提示策略，帮助你让 AI 构建得更安全。

Cycode MCP Server：Secure AI Code in Real Time（免费）
链接：https://cycode.com/blog/introducing-cycodes-mcp-server/
Cycode 的 MCP server 可以直接集成到 Cursor 和 Windsurf 中，作为实时安全扫描器，在不离开 Vibe Coding 工作流的情况下检查 AI 生成代码。

4、Supabase：你的全栈后端

Supabase 值得单独拿出来讲，因为它是 Vibe Coder 构建真实产品时最重要的基础设施之一。

它提供 Postgres 数据库、身份认证、文件存储和实时订阅，所有能力都可以通过 JavaScript SDK 调用，而且不需要管理服务器。

资源

Supabase：The Vibe Coder's Guide to Environments（官方免费指南）
链接：https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments
这篇文章专门为 Vibe Coder 写作。内容覆盖如何设置开发环境与生产环境、数据库迁移，以及初学者最严重的错误：直接在真实线上数据上测试。

Supabase YouTube Channel：Quickstart Guides（免费）
链接：https://www.youtube.com/@Supabase
每个主要功能都有简短实用的视频指南，例如认证、数据库、存储、实时功能。每个视频大约 5–10 分钟。

Supabase Migrations Docs（官方免费）
链接：https://supabase.com/docs/guides/deployment/database-migrations
把每一次数据库 schema 变更都当作 migration，而不是直接编辑数据库。这是避免灾难性数据丢失的关键。指南中也包含回滚脚本。

5、编码 Agent 的 9 种失败模式：你的项目会在哪里出问题

哥伦比亚大学 DAPLab 的研究人员发布了迄今为止最严谨的 Vibe Coding 失败模式研究。他们在相同任务中分析了 Cline、Claude、Cursor、Replit 和 v0，最终发现了 9 种关键失败模式。

其中最常见、也最危险的两种是：

静默失败
代码看起来能运行，也没有报错，但实际并没有完成你要求的事情。终端没有红色报错，程序没有崩溃，只是行为错误，而且通常很久之后才会被发现，甚至可能已经进入生产环境。

业务逻辑失败
模型正确实现了某个机制，但误解了真实意图。比如连续打卡计数器在一个你忘记明确说明的条件下被重置；发票总额没有包含本应计入的税费。这类错误对真实产品可能是灾难性的。

研究人员识别出的另外 7 种模式包括：

错误处理缺口
出现类似 try {... } catch (e) {} 的写法，完全吞掉错误，也不记录任何日志。

过度编辑范围
Agent 修改了你没有要求它动的文件，导致其他功能损坏。

陈旧上下文漂移
随着对话变长，模型逐渐忘记你的项目约定。

自我合理化测试 mock
测试只是在测试 AI 自己写出来的 mock，而不是测试真实行为。结果是测试通过率 100%，但实际覆盖率为零。

巨型组件蔓延
一个文件超过 600 行，包含 10 多个 useState，几乎无法维护。

规则盲区
Agent 把你的约束当作偏好，而不是规则。它会遵守这些约束，直到它找到一个理由不遵守。

透明度缺口
当事情失败时，当前工具几乎无法让你看清 Agent 原本想做什么、在哪里出错。

针对规则盲区，研究给出的修复方式是：把你的 CLAUDE.md 和规则文件当成强制合约，而不是建议。

你需要加入明确的失败条件，比如：

如果这张表没有 RLS policy，就停止并询问我，不要继续执行。

6、测试：大多数 Vibe Coder 跳过后都会后悔的技能

如果没有结构化 QA 流程，Vibe Coding 应用积累技术债的速度，大约是传统开发软件的三倍。这一结论来自 ICSE 2026 对 101 个 AI 辅助开发相关来源的元分析。

现实结果是：一个看起来「能用」的 Vibe Coding 应用，如果后续需要专业重构，成本通常会达到 5000–30000 美元。

解决办法不是停止使用 AI，而是让 AI 在写功能的同时写测试。

测试优先的 Vibe Coding 方法

在写功能代码之前，先让 AI 为预期行为写测试。这会迫使你更精确地定义功能行为，也会立刻改善功能代码质量。运行测试，看着它失败。然后让 AI 写出能让测试通过的代码。每次重大变更之后，都让 AI 运行 npm test。失败测试就是防止回归的反馈循环。

70/30 规则

这是一个实用准则，用来判断哪些工作最适合交给 AI。

70% 适合 AI 辅助：
样板代码、CRUD 操作、表单验证、为现有代码写测试、写文档、基于清晰模式重构、格式转换（JSON → TypeScript）、正则表达式、一次性脚本。

30% 应该由人类主导：
系统架构决策、安全关键代码（认证、加密、支付）、复杂竞态条件、新问题领域、性能关键算法、法律与合规逻辑。

如果你 95% 都交给 AI，大概率会发布 Bug。如果你只用 AI 完成 20%，则说明你浪费了大量生产力。

资源

Testomat：8 Best AI Testing Tools for Vibe Coders（免费指南）
链接：https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/
这是 2026 年关于 Vibe Testing 工具最完整的指南之一，覆盖 Vitest、Playwright 和 AI 原生 QA 工具。

Vibe Testing with Playwright + MCP（免费指南，Tim Deschryver）
链接：https://timdeschryver.dev/blog/vibe-testing-with-playwright
介绍如何在 Cursor 或 VS Code Copilot 中使用 Playwright MCP server，通过自然语言编写并运行浏览器测试。 Playwright 错误标签里的「copy as prompt」按钮，可以让你直接把失败测试粘贴给 AI Agent。

AI Vibe Coding Notes from the Basement（免费指南，Awesome Testing）
链接：https://www.awesome-testing.com/2025/04/ai-vibe-coding-notes-from-the-basement
这是关于 TDD-first Vibe Coding 最详细的实践者指南之一。内容包括用 o1 规划、用 Cursor + Sonnet 4.6 执行、持续运行测试作为反馈循环，以及使用 gitingest 把代码库压平成单个文件，供思考模型进行推理。

Playwright Codegen（官方免费）
链接：https://playwright.dev/docs/codegen
运行：

npx playwright codegen

然后像普通用户一样在浏览器里点击你的应用。 Playwright 会记录每一次点击，并自动生成 Playwright 测试文件。这是最快写出浏览器测试的方法之一。

Vitest Official Docs（免费）
链接：https://vitest.dev/
这是 2026 年 Vite 系 Next.js 项目的标准单元测试框架。它速度快，兼容 Jest，并且原生支持 TypeScript。

第 4 个月里程碑

到这个月结束时，你应该已经拥有：

2–3 个完整且已部署的项目，并且它们都有真实线上 URL；

至少一个项目具备用户认证和 Supabase 数据库；

每个重要功能都同步或提前写好了测试；

Plan-Review-Fix 工作流已经嵌入你的构建习惯；

安全审查成为每次部署前的标准步骤；

GitHub 主页上至少有 3 个真实仓库。

第 5 个月：上下文工程与 MCP，区分「优秀」和「顶尖」的元技能

这个月的目标是：掌握上下文工程，也就是在正确的时间，向 AI 提供恰到好处的信息，让它能够持续产出高质量、架构一致的结果。

上下文工程，是区分普通 Vibe Coder 和优秀 Vibe Coder 的关键。前者往往会做出混乱、不一致的代码库；后者则能构建干净、可维护的产品。随着项目规模扩大，上下文管理会成为你最重要的能力。

1、上下文工程到底是什么？

上下文工程，是在每次提示词之前和执行过程中，有意识地塑造进入 AI 上下文窗口的信息。

它不是某一个单独技巧，而是一套系统。这个系统包括你的规则文件、项目文档结构、提示词中引用的文件、代码库组织方式，以及你如何处理 AI 的上下文长度限制。

上下文不足的 AI，会生成不一致、过时、甚至互相冲突的代码。上下文优秀的 AI，则能生成完全符合项目模式的代码，理解你的架构，并避开已知错误。

2026 年的上下文工程技术栈

.cursor/rules/ + CLAUDE.md
项目级长期指令，第 3 个月已经讲过。

/docs 或 /instructions 文件夹
用 Markdown 文件记录关键架构决策、组件模式和第三方集成。

功能规格文件
每个主要功能对应一份 Markdown 文件，说明它做什么、如何连接系统其他部分，以及有哪些约束。

示例文件
在提示词中引用现有组件，把它们作为风格参考。

后台开发服务器
将 npm run dev 作为后台任务运行，让 AI 在构建过程中实时看到编译错误和服务端日志。

通过 MCP 进行浏览器自动化
例如 Chrome DevTools MCP 或 Vercel 的 agent browser，让 AI 不需要截图，也能看到真实渲染效果、控制台错误和网络请求。

资源

NXCode：Agentic Engineering; The Complete Guide to AI-First Software Development（免费指南）
链接：https://www.nxcode.io/resources/news/agentic-engineering-complete-guide-vibe-coding-ai-agents-2026
Karpathy 在 2026 年初提出「agentic engineering」一词，用来描述从随意 Vibe Coding 走向专业化 AI 辅助开发的演进。这份指南覆盖完整的 PEV 循环，也就是 Plan → Execute → Verify，上下文架构和质量门禁。发表于 2026 年 3 月。

10 GitHub Repositories to Master Vibe Coding（免费指南，KDnuggets）
链接：https://www.kdnuggets.com/10-github-repositories-to-master-vibe-coding
精选了一批最有用的 GitHub 仓库，覆盖上下文工程、工作流模板、规则手册配置等内容。

Awesome Vibe Coding（免费，GitHub）
链接：https://github.com/filipecalegario/awesome-vibe-coding
目前最完整的 Vibe Coding 参考资料、工具、指南与资源精选清单之一。

2、MCP：Model Context Protocol

MCP，全称 Model Context Protocol，是由 Anthropic 创建的开放标准，用来让 AI 工具连接外部数据源，例如数据库、API、实时数据、外部文档和第三方服务。

现在，MCP 已经被 Cursor 3.0、Claude Code 和 Windsurf 原生支持。其中 Cursor 3.0 可通过 Marketplace 使用。

理解 MCP，意味着你进入了 Vibe Coding 的下一层：Agent 不再只是写代码，而是可以查询你的真实数据、实时查找文档、与第三方服务交互，并在外部系统中执行操作。

MCP 在实际使用中是什么样？

Stripe MCP server
让你的 Agent 可以读取和创建 Stripe 发票。

Supabase MCP
让你的 Agent 在开发过程中查询实时数据库。

Figma MCP
让 Cursor Agent 读取你的设计文件，并据此实现组件。

GitHub MCP
让 Agent 创建 issue、打开 PR、管理工作流。

Qdrant MCP
让 Agent 访问向量数据库，用于构建支持 RAG 的应用。

资源

MCP Official Introduction（Anthropic 官方免费文档）
链接：https://modelcontextprotocol.io/introduction
Model Context Protocol 的官方文档和规范。

Building Your First MCP Server with Vibe Coding（免费指南）
链接：https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/
用 Cursor 构建第一个 MCP server 的实操教程，让 AI 能够从外部来源拉取实时上下文。

Build Your MCP Server in 5 Minutes with Vibe Coding（免费指南，Claranet）
链接：https://www.claranet.com/uk/blog/build-your-mcp-server-just-5-minutes-using-vibe-coding-kiro/
最快速的 MCP server 动手教程之一。

Vibe Coding RAG with Qdrant's MCP Server（免费，Qdrant）
链接：https://qdrant.tech/blog/webinar-vibe-coding-rag/
介绍如何使用 Qdrant 的 MCP server，让 Cursor 和 Claude Code 在构建过程中直接访问向量数据库。

Cursor Marketplace（应用内）
链接：https://cursor.com/marketplace
可以浏览并安装预构建 MCP server 插件，包括 AWS、Figma、Linear、Stripe、Vercel、Datadog 等，均可在 Cursor 3.0 中一键安装。

3、Figma to Code：专业 Vibe Coder 使用的设计工作流

如果你希望产品不只是「能用」，而是看起来足够精致，那么 Figma → Code 工作流就是 Vibe Coder 工具箱里杠杆最高的设计能力。

与其用文字描述界面，不如先在 Figma 中做出视觉设计，再通过 Figma MCP，让 AI 直接从设计文件中生成匹配的代码。

工作流

先将 Figma MCP 连接到 Cursor 或 Claude Code。可以在 Cursor Marketplace 中安装 Figma 插件。

然后在提示词中引用 Figma 文件：

研究这个 Figma 文件中的 design tokens。提取调色板、字号和间距，并整理成 Tailwind config。先不要写组件。

等 design tokens 确立后，再引用具体组件：

根据 Figma 设计生成 Navbar 组件。精确匹配间距、字体排版和 hover 状态。使用 Tailwind CSS，只写 TypeScript。

按区块逐步构建，并始终引用 Figma 文件中的尺寸和布局逻辑。

一个关键建议

即便不用 Figma MCP，初学者也可以采用一个更快的替代方式：先用 Canva 做页面草图。

在打开任何构建工具前，花 30 分钟在 Canva 里画一下布局。这会迫使你先回答几个问题：每个页面有什么内容？导航放在哪里？每个区块包含什么？

这样可以在写第一条提示词之前，就提前消除大量不确定性，也能省下后续几个小时的纠错提示。

资源

Figma MCP + Cursor: The New AI Design System Workflow（YouTube，免费）
链接：https://www.youtube.com/watch?v=09VgyFFLrOw
完整演示如何通过 MCP 把 Figma 连接到 Cursor，导入 design tokens，并生成精确符合 Figma 规格的组件。发布于 2025 年 11 月。

Claude Code × Figma MCP: The Designer's Playbook（免费指南，ADPList）
链接：https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers
作者以设计师身份进行了 100 天 Vibe Coding 后，总结出一套较顺畅的 Figma → Claude Code → 生产级 React 组件工作流。包含可直接复制使用的提示词模板，用于提取 design tokens 和生成响应式区块。

Figma Make（官方，有免费层级）
链接：https://www.figma.com/solutions/vibe-coding-tool/
Figma 原生 Vibe Coding 工具。可以直接在 Figma 中用自然语言描述 UI 或原型，生成交互式原型，并导出干净代码。可与 Figma MCP 集成，供外部 Agent 使用。

Anima：Vibe Code With Your Figma Design System（有免费层级）
链接：https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system/
把 Figma 设计系统导入 Anima，再生成遵循 design tokens 的 React 组件。输出内容可以通过 Anima MCP 交给 Claude Code 或 Cursor 继续处理。

Muzli：Complete Vibe Coding Guide for Designers（免费指南）
链接：https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/
面向非开发者构建 AI 生成产品的完整指南，覆盖设计系统提示词、提示词中的视觉参考，以及如何在 Vibe Coding 组件中保持品牌一致性。

4、为产品加入 AI 功能：Vercel AI SDK

如果你想构建「使用 AI 的产品」，而不只是「用 AI 构建产品」，那么在 Next.js 技术栈中，Vercel AI SDK 是最快、最干净的选择之一。

资源

Vercel AI SDK Documentation（官方免费文档）
链接：https://sdk.vercel.ai/docs
官方参考文档。它通过统一接口支持 20 多家 AI 提供商，包括 OpenAI、Anthropic、Google、Mistral、Groq 等。内置 React hooks，例如 useChat、useCompletion，并支持流式输出、工具调用和结构化生成。

AI SDK V5 Tutorial Series（YouTube，免费）
链接：https://www.youtube.com/playlist?list=PL4cUxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO
一套关于使用 Vercel AI SDK 构建 Next.js AI 应用的多集教程。第 1 集介绍和第 2 集项目配置于 2025 年 8 月发布，覆盖完整搭建流程。

Build a Streaming AI Chat App with Vercel AI SDK and Next.js（免费指南，dev.to）
链接：https://dev.to/nikolasbarwicki/build-a-streaming-ai-chat-app-with-vercel-ai-sdk-and-nextjs-10f6
从零开始构建流式 AI 聊天应用的分步骤代码教程。

这个月可以做什么？

从你第 4 个月做出的项目中选一个，用 Vercel AI SDK 加入一个 AI 功能。例如：给笔记应用加入 AI 自动标签；给习惯追踪器加入一个「询问你的习惯数据」的 AI 助手；根据用户粘贴的文本自动生成 AI flashcards。

5、RAG：让 AI 基于你的文档回答问题

RAG，全称 Retrieval-Augmented Generation，也就是检索增强生成。它是大多数严肃企业级 AI 应用背后的核心能力，例如客服机器人、内部知识库、文档问答工具。

对于想走「AI 产品工程师」路线的人来说，RAG 也是最热门、最有需求的技能之一。

核心概念很简单：不要让 LLM 仅凭训练数据回答问题，而是先从你自己的文档中检索相关片段，再把这些片段放进提示词里，让模型基于你提供的信息回答。

资源

LlamaIndex：Introduction to RAG（官方免费文档）
链接：https://developers.llamaindex.ai/python/framework/understanding/rag/
覆盖五个关键阶段：加载、索引、存储、查询和评估。

LlamaIndex Starter Tutorial（官方免费文档）
链接：https://developers.llamaindex.ai/python/framework/getting_started/starter_example/
用不到 30 行代码构建一个可运行的 RAG system.

LangChain Tutorial For Beginners（2026 Guide）（YouTube，免费）
链接：https://www.youtube.com/watch?v=AOQyRiwydyo
一套完整的 2026 年 LangChain 课程，覆盖 Agents、RAG，以及用于基于数据构建 AI Agent 的 ReAct Agent 框架。

Building Efficient RAG Applications with LangChain and LlamaIndex（YouTube，免费）
链接：https://www.youtube.com/watch?v=D7YwcDJ75lQ
通过真实代码案例，对 LangChain 和 LlamaIndex 在 RAG 场景中的使用方式进行横向对比。

How to Choose an AI Agent Framework（LangChain vs. LlamaIndex）（免费指南）
链接：https://workforcenext.in/blog/how-to-choose-ai-agent-framework/
发表于 2026 年 4 月的坦诚拆解。建议是：如果最难的是检索问题，用 LlamaIndex；如果你需要更广泛的生态和生产级编排能力，用 LangChain / LangGraph。

6、Token 成本与预算管理：没人会提前告诉你，直到账单来了

在单次调用层面，低成本模型和前沿模型之间可能有 30 倍的成本差距。

如果你的生产应用每一次请求都调用 GPT-5.5 或 Claude Sonnet 4.6，账单很可能会在你注意到之前，从每月 20 美元膨胀到几百美元。

据称，Uber 曾在 2026 年仅用四个月，就因为大量使用长上下文 Claude Code 会话，耗尽了全年 AI 编程预算。

其中的数学逻辑很简单：上下文长度会线性推高成本。而 Claude Code 会话如果被赋予完整代码库，很快就会积累到 25 万到 50 万 token。

实用成本管理规则

先设置硬性支出上限
在任何面向公众的 AI 功能上线之前，先在 OpenAI 和 Anthropic 后台设置每月额度上限。上线之前就要做，不要等上线之后。

按任务复杂度分流模型
分类、标签、摘要和格式化任务，可以使用 claude-haiku 或 gpt-5.5-mini。只有推理难度较高的任务，才保留给 Sonnet 4.6、Opus 4.6 或 GPT-5.5。

对于简单任务，便宜模型往往能给出几乎相同质量的输出，但成本可能相差 10 倍。

在 Claude Code 中使用 /compact 命令
当上下文变长时，在开始大型任务前手动运行 /compact。 Claude Code 会自动压缩上下文历史，通常可减少 60%–80%，显著降低下一次调用的 token 数量。

保持较短上下文窗口
上下文长度每翻一倍，成本大致也会翻一倍。开发新功能时，最好开启新对话，而不是一直延续旧对话。

缓存重复的相同提示词
Anthropic 的 prompt caching 对缓存命中的输入 token 只收取 10% 价格。对于每次调用都会重复的系统提示词或 CLAUDE.md 文件，这会长期累积出明显节省。

添加支出提醒
在月度额度达到 50% 和 80% 时设置账单提醒，避免某个 bug 或循环调用在你发现前跑出意外账单。

资源

MindStudio：AI Agent Token Budget Management in Claude Code（免费指南）
链接：https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/
详细拆解 Claude Code 如何处理 token 预算，包括硬性上下文限制、在可配置阈值下自动压缩，以及昂贵操作执行前的预算检查。这些模式也可以被应用到任何 LLM 产品中。

HackerNews：The Real Cost of Claude Code（免费，HN 讨论帖）
链接：https://news.ycombinator.com/item?id=47976415
真实工程讨论，围绕 Claude Code 会话中上下文窗口长度如何几乎线性推高成本，并给出具体数字。

HatchWorks：The Real Cost of Vibe Coding in 2026（免费指南）
链接：https://hatchworks.com/blog/gendd/cost-of-vibe-coding/
对 Vibe Coding 总成本较坦诚的估算：表面订阅成本可能是每月 20–200 美元，但如果算上安全修复、技术债和专业重构，成本可能达到 5000–30000 美元。理解这一点，才能判断 QA 和结构化流程到底值得投入多少。

OpenAI Usage Dashboard（官方）
链接：https://platform.openai.com/usage
上线任何公开功能前，在这里设置月度额度。入口在 Billing → Usage Limits。

Anthropic Console（官方）
链接：https://console.anthropic.com/
Claude API 使用额度同样需要在这里设置。

第 5 个月里程碑

到这个月结束时，你应该能够：

从一开始就组织好项目，让 AI 始终获得正确上下文；

使用 MCP 将 Cursor 或 Claude Code 连接到外部数据源；

用 Vercel AI SDK 给已上线产品集成 AI 功能；

构建一个基础 RAG 管线，让 AI 能够基于文档回答问题；

为每一个 AI API 账户设置活跃的成本监控和支出上限；

维护一套干净的 /docs 架构，让任何 AI 工具都能立刻理解项目。

第 6 个月：像专业人士一样部署，并选择你的专业方向

这个月的目标是：让你的项目达到生产级可用状态，并选择自己的发展方向。真正部署、真正监控、真正产生收入，同时找到与你目标匹配的专业化路径。

1、生产部署与环境配置

Demo 和生产级产品之间的部署差距非常大。其中最关键的一点，是将开发环境和生产环境分开。

2026 年推荐部署技术栈

静态网站或落地页
前端部署在 Vercel 或 Netlify，不需要后端。可以从 GitHub 一键部署。

带认证和数据库的全栈应用
前端用 Vercel，后端用 Supabase。这是最推荐给初学者的技术栈。

复杂后端逻辑
前端用 Vercel，后端使用 Supabase，并通过 Edge Functions 处理计算任务。这样可以在不租用服务器的情况下实现扩展。

完全控制服务器
后端使用 Fly.io 或 Railway，前端可搭配任意方案。控制力更强，但复杂度也更高。

资源

Supabase：Vibe Coder's Guide to Environments（官方免费指南）
链接：https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments
生产安全部署的必读内容，覆盖开发环境与生产环境的区分、数据库迁移和回滚策略。

Add Jam：How to Deploy Your Vibe Coded Project（免费指南）
链接：https://addjam.com/blog/2026-04-07/how-to-deploy-your-vibe-coded-project/
面向非技术用户的部署指南，会根据项目类型帮助你选择合适的部署方式，发表于 2026 年 4 月。

Deploy Your Vibe Coding Projects for Free with Vercel and Netlify（YouTube，免费）
链接：https://www.youtube.com/watch?v=85JVKjW-uG0
从 GitHub 部署到 Vercel 和 Netlify 的分步骤教程。

Vercel Deployment Docs（官方免费文档）
链接：https://vercel.com/docs/deployments/overview
Vercel 官方部署文档，包含预览部署、环境变量管理和域名配置。

2、监控你的线上产品

在生产环境里，看不见的问题就无法修复。下面三个工具可以让你完整了解用户正在经历什么，以及你的应用正在做什么。

资源

Langfuse（开源，有免费层级）
链接：https://langfuse.com/
LLM 可观测性平台。它可以追踪每一次 AI 调用：发送了什么 prompt、收到了什么响应、token 用量、延迟、成本和错误情况。支持 OpenAI、Anthropic 和 LangChain。到 2026 年，它已经成为监控 AI 应用的标准工具之一。

How to Monitor Your AI Application with Langfuse（YouTube，免费）
链接：https://www.youtube.com/watch?v=V7nugySdrgw
完整教程，介绍如何使用 OpenTelemetry 在本地和生产环境中配置 Langfuse，发布于 2025 年 3 月。

Langfuse + Sentry Integration Guide（官方免费指南）
链接：https://langfuse.com/docs/observability/sdk/advanced-features
介绍如何把错误监控数据发送到 Sentry，同时用 Langfuse 捕捉 LLM 可观测性数据。一次配置即可形成完整的生产监控技术栈。

Sentry（官方，有免费层级）
链接：https://sentry.io/
应用错误追踪的标准工具。它可以在你的线上应用报错时第一时间通知你，而不是等用户来反馈。

Vercel Analytics（官方，有免费层级）
链接：https://vercel.com/docs/analytics
Vercel 内置的网站分析工具，一键启用。可以查看页面访问量、性能指标和 Core Web Vitals。

3、选择你的方向

到了第 6 个月，你已经具备基础能力。接下来的问题是：你要往哪个方向深入？

这里有三条可行路径，你需要选择最符合自己目标的一条。

方向一：产品构建者，也就是 Indie Hacker

适合人群：独立创始人、创业公司运营者、独立开发者，以及想要构建并销售自己产品的人。

这是 Vibe Coder 最常见的路径。你不是为了找工作，而是为了发布能够产生收入的产品。

2026 年 Indie Hacker 技术栈

Lovable 或 Bolt：用于快速原型开发和早期验证；

Cursor 3.0 + Claude Code：用于正式构建和深度定制；

Supabase：数据库和认证；

Stripe：支付；

Vercel：部署；

PostHog：用户分析。

2026 年值得关注的可变现应用类型

SaaS 微工具
只解决一个非常具体的问题，采用每月 5–25 美元订阅。

AI wrapper
把某种 LLM 能力封装进一个清晰、具体、面向细分市场的 UI。

目录或市场平台
聚合并整理人们正在搜索的信息。

企业内部工具
把企业当前用表格手动完成的某项工作自动化。

资源

Indie Hackers（免费社区）
链接：https://www.indiehackers.com/
真实创始人分享收入数据、构建日志和经验教训。它是了解什么产品真正卖得出去、什么定价有效的高信号信息源之一。

Stripe Docs：Payments Quickstart（官方免费文档）
链接：https://stripe.com/docs/payments/quickstart
官方指南，介绍如何添加 Stripe Checkout，用于一次性付款和订阅。你可以让 AI「为每月 X 美元订阅集成 Stripe Checkout」，然后用这份指南核查它生成的内容。

PostHog Getting Started（官方免费文档）
链接：https://posthog.com/docs
开源产品分析工具。可以追踪用户行为、转化漏斗、留存和功能开关，让你知道什么真正有效。

方向二：AI 产品工程师

适合人群：希望进入初创公司或科技公司，从事 AI 产品开发的人。

这个方向的作品集项目

构建一个「chat with your docs」产品。

用户可以上传 10–20 个 PDF 文件，应用允许他们基于这些文档提问，并获得带引用来源的答案。它应该是一个完整的全栈应用，已经部署、可以分享。

到 2026 年，这是你能向雇主或客户展示的最高信号作品集项目之一。

资源

LlamaIndex：RAG Introduction（官方免费文档）
链接：https://developers.llamaindex.ai/python/framework/understanding/rag/
构建文档问答系统最快的路径之一。

LangChain Academy：Introduction to LangGraph（免费课程）
链接：https://academy.langchain.com/courses/intro-to-langgraph
LangGraph 官方免费课程。 LangGraph 是主流 Agent 编排框架之一，课程覆盖状态管理、记忆、人类参与回路和多 Agent 协作。

Vercel AI SDK（官方免费文档）
链接：https://sdk.vercel.ai/docs
可以用很少代码，为任何 Next.js 应用加入流式聊天、结构化生成和工具调用能力。支持 20 多家 AI 提供商。

Vibe Coding to Agentic AI: The Next Evolution of Programming（YouTube，免费）
链接：https://www.youtube.com/watch?v=LHAvPwOLz8U
概述这个领域如何从随意的 Vibe Coding，走向能够自主规划、执行和验证的结构化 Agentic 系统。这也是就业市场正在转向的方向。

MindStudio：What Is Agentic Engineering?（免费指南）
链接：https://www.mindstudio.ai/blog/what-is-agentic-engineering/
清晰解释从 Vibe Coding 到 Agentic Engineering 的转变。到 2026 年，这正是许多雇主正在招聘的能力范式。

方向三：AI 自动化顾问

适合人群：想要立即服务企业的人，包括自由职业者、咨询顾问，或者想建立代理服务公司的人。

企业愿意为 AI 自动化支付真金白银，因为它可以替代昂贵、重复、手动的流程。这是把 Vibe Coding 技能变成收入最快的路径之一。

最常见、也最有价值的自动化场景

AI 邮件分拣与自动回复；

潜在客户筛选和个性化外联；

文档提取和处理；

基于知识库的客服机器人；

CRM 数据补全和清洗；

发票和合同处理。

资源

n8n Documentation（免费，开源）
链接：https://docs.n8n.io/
可视化工作流自动化工具，原生支持 AI 节点。可以将 LLM 连接到 400 多种集成，包括 Slack、Gmail、Notion、HubSpot、Airtable 等。自托管版本完全免费。

n8n Full Course; 6 Hours（YouTube，免费）
链接：https://www.youtube.com/watch?v=QoQBzR1NIqI
完整 n8n 课程，覆盖从初级到高级的 AI 工作流自动化。

Make（原 Integromat，有免费层级）
链接：https://www.make.com/
可视化自动化平台。对于复杂的多步骤工作流，它比 Zapier 更强。

Automation Builders：Vibe Coding to Agentic AI（YouTube，免费）
链接：https://www.youtube.com/watch?v=LHAvPwOLz8U
介绍自动化构建者如何结合 n8n、OpenAI 和 Vibe Coding 工具，搭建端到端企业自动化流程。

这个方向的作品集项目

构建一个端到端的潜在客户筛选和外联自动化流程：

从 CSV 或 Airtable 导入 leads；

使用 LLM 研究每个潜在客户，并根据理想客户画像判断匹配度；

为 leads 打分和排序；

用对方的语气草拟个性化外联信息；

把所有结果和状态、备注写回原始表格。

这是一个真实、可计费的自动化项目，企业确实会为它付费。

加餐：用 Vibe Coding 开发移动应用

前面所有内容默认你在构建 Web 应用。大多数 Vibe Coder 也是这么做的。

但如果你的想法是一个移动应用，也就是用户需要安装到手机上的产品，那么情况会有所不同。在第 1 个月开始之前，值得先了解这个生态。

2026 年移动端 Vibe Coding 的真实状态

移动开发比 Web 开发更难进行 Vibe Coding。原因很具体：React Native 的依赖树更大，也更脆弱。 AI 偶尔会生成假设某些包版本兼容的代码，但实际版本可能冲突；iOS 和 Android 模拟器需要本地配置，AI 不能完全替你管理；测试移动端 UI 要么需要真机，要么需要模拟器，无法像 Web 一样直接在浏览器里预览；Expo 大幅简化了流程，但也引入了自己的限制。

如果你想构建移动应用，推荐配置是：

框架：React Native + Expo，使用 managed workflow；

工具链：Expo Router 做导航，基于文件路由，和 Next.js App Router 模式类似；

AI 工具：Claude Code + Cursor，也就是和 Web 开发相同的工具，它们对 React Native 的支持不错；

起始模板：npx create-expo-app 或 create-rn-new，用于生成配置好的脚手架；

预览方式：通过二维码在实体手机上的 Expo Go App 中预览，这是最快的反馈循环。

资源

Vibe Coding a Mobile App from 0 to Market（YouTube，免费）
链接：https://www.youtube.com/watch?v=SzmXEOozpFg
完整演示如何用 Claude Code + Cursor + React Native + Expo Router 从零构建一个健身追踪应用。内容覆盖 Figma-to-spec 工作流、Claude Code 阶段计划，以及如何实时处理 Expo 依赖问题。

Build a React Native App with Vibe Coding in 2026（免费指南）
链接：https://blog.vibecoder.me/build-react-native-app-vibe-coding
分步骤介绍如何设置 Expo 项目、撰写项目 brief，并使用 Claude Code 执行分阶段移动应用构建计划。

React Native Vibe Code SDK（免费，开源）
链接：https://github.com/react-native-vibe-code/react-native-vibe-code-sdk
一个专为通过自然语言提示构建 React Native 和 Expo 应用而设计的开源 IDE。可以理解为移动端开发领域里最接近 Lovable 的工具。

Expo Documentation（官方免费文档）
链接：https://docs.expo.dev/
Expo 配置、Router 和设备 API 的核心参考资料。建议在使用 AI 工具时，同时在浏览器中打开这份文档。

最重要的建议是：每次开始移动端 AI 会话之前，先把相关 Expo 库的 examples 文件夹粘贴到 Google AI Studio 中，让 Gemini 利用大上下文窗口，根据这些 examples 生成文档。然后在提示词中使用这份文档，而不是指望模型知道当前 API。

移动端库的 API 变化很快，而训练数据通常会滞后于现实。

加餐：完整工具地图——2026 年已经存在的所有主要工具

这份指南推荐 Cursor 3.0 和 Claude Code 作为主要工具。但到 2026 年，完整工具版图已经明显扩展，不同工具适合不同场景。下面是更完整的图谱。

终端 / CLI Agent

Claude Code
Anthropic 的终端原生 Agent。最适合全代码库推理和仓库级任务。

Gemini CLI
Google 的开源终端 Agent。可以作为 Claude Code 的免费替代方案，拥有很大的上下文窗口。

OpenCode
社区开源 CLI Agent。可自带模型，成本更灵活。

Factory Droid
自主软件工程 Agent，面向企业 CI/CD 自动化。

其中，Gemini CLI 值得特别说明，因为它完全免费且开源。它使用 Gemini 3.5 Pro 的 100 万 token 上下文窗口，比 Claude Code 更大。

安装方式：

npm install -g @google/gemini-cli

然后运行：

gemini

即可开始使用。你可以把它当作重上下文任务的免费替代方案，也可以用它作为第二审查者，替代第 4 个月工作流中「手动粘贴到 Gemini」的步骤。

OpenAI Codex，也就是新的云端编码 Agent，而不是旧模型，现在也已经可以在 ChatGPT 中作为云编码 Agent 使用，并执行异步任务。它与 Claude Code 的不同之处在于：Codex 运行在云端，而不是本地。你可以通过 ChatGPT 侧边栏访问。

AI 编程 IDE 扩展清单

Cursor 3.0
支持 Agents Window 和并行云端 Agent。 Free version / $20 per month.

Windsurf
具备 Cascade Agent，被 Google 收购后更偏企业场景。免费版 / 每月 15 美元。

GitHub Copilot
几乎无处不在，支持 VS Code、JetBrains、Xcode、Neovim。免费版 / 每月 10 美元。

Cline
开源，自带模型。免费使用，另按 API token 付费。

Google Antigravity
具备多 Agent Manager View，可并行构建。 Price to be determined.

Zed
性能优先，从一开始就原生面向 AI。 free.

Kilo Code
VS Code 插件，开源，支持所有主流提供商。 free.

Continue
开源 Copilot 替代方案，支持 VS Code 和 JetBrains。 free.

资源

DataCamp：Top 15 Vibe Coding Tools to Build Faster in 2026（免费指南）
链接：https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster
2026 年最完整的工具对比之一，覆盖 CLI Agent、AI IDE、浏览器构建器和专用工具。它给出的简明建议是：浏览器优先用 v0，编辑器内用 Codex，全能场景用 Cursor，终端优先用 Claude Code。

The Ultimate Vibe Coding Guide（Full Course Tutorial 2026）（YouTube，免费）
链接：https://www.youtube.com/watch?v=KO_vCL1ZhpI
3 小时大师课，一次性覆盖 Cursor、Codex、Antigravity、Claude Code、Lovable、Bolt、Supabase、Vercel、Figma Stitch、v0 和 MCP servers。到 2026 年 5 月，这是最完整的单视频资源之一。

Vibe Coding for Beginners（Full Course 2026）（YouTube，免费）
链接：https://www.youtube.com/watch?v=BpOsHF5Oj_I
介绍如何用 Codex 和 Firebase，从同一套代码库构建 Web 应用、桌面应用和 iOS Application.发布于 2026 年 5 月。适合想覆盖多平台、但又不想频繁切换技术栈的初学者。

加餐：值得加入的社区

最快的学习，往往发生在那些大家实时分享自己正在构建什么的社区。以下是截至 2026 年中仍然活跃的社区。

Lovable Discord（免费）
链接：https://lovable.dev/community
拥有 16 万多名成员，覆盖各个时区，是 2026 年最活跃的 Vibe Coding 社区之一。提供实时帮助、每周活动，以及上线项目展示频道。

r/vibecoding（免费，Reddit）
链接：https://www.reddit.com/r/vibecoding/
Vibe Coding 社区聚集地。这里有项目展示、工具对比、调试帮助，以及那些你在 YouTube 教程里看不到的真实失败故事。

Cursor Forum（官方免费社区）
链接：https://forum.cursor.com/
Cursor 官方社区，工程团队会在这里阅读和回复。 「Built with Cursor」展示帖是寻找真实项目案例和了解实际难点的最佳来源之一。

Build in Public Strategy for Vibe Coders（YouTube，免费）
链接：https://www.youtube.com/watch?v=ke6oxy8Z7C4
面向 Vibe Coder 的公开构建策略指南：发什么内容、什么时候发、如何把一个项目构建过程转化为受众，以及这些受众如何加速你的下一次发布。

Postiv AI：Vibe Coding to SaaS Pipeline（免费指南）
链接：https://postiv.ai/blog/vibe-coding-marketing
覆盖产品完成后的完整流程：验证商业模式、制定发布策略，以及如何利用 LinkedIn 和 X 分发你已经上线的产品。

Karo Zieminski：Vibe Coding Hub 2026（免费，Substack）
链接：https://karozieminski.substack.com/p/vibecoding-resources-hub
收录 15 多篇经过实践者验证的指南，覆盖 Vibe Coding、规格驱动开发和 AI 辅助产品构建，涵盖完整构建者路径：基础、生产、安全、调试和工具选择。它是 Substack 上较完整的单页资源中心之一。

0xMinds：The Complete Guide to AI-Powered Development（免费指南）
链接：https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026
一份完整的 2026 年指南，覆盖采用数据、六阶段构建工作流，也就是构思 → 上下文 → 生成 → 审查 → 优化 → 发布，以及多 Agent 编排模式和可直接使用的基础配置清单。

Augment Code：Vibe Coding vs Spec-Driven Development（免费指南）
链接：https://www.augmentcode.com/guides/vibe-coding-vs-spec-driven-development
提供一个清晰决策框架，帮助判断什么时候适合纯 Vibe Coding，什么时候应该使用规格驱动开发。文章也说明了纯 Vibe Coding 项目常见的「三个月墙」，以及如何识别什么时候该切换模式。

如何真正使用这份路线图

大多数读完这篇文章的人，并不会真正完成它。不是因为内容太难，而是因为他们会把它当成阅读清单，而不是构建计划。

2026 年真正成功的 Vibe Coder，通常有三个共同习惯：

他们发布产品，而不是只学习。
每个月的里程碑都应该以一个已部署项目结束，也就是一个真实可访问的 URL，而不是一门完成的课程。六个不完美但已经发布的产品，胜过二十门已经学完的教程。

他们公开构建。
在 X、LinkedIn 或任何目标用户所在的平台发布你的构建过程。比如：「构建 X 的第 1 天」，以及「我上线了 X，这是我学到的东西」。这个领域最好的机会通常来自可见度，而不是投简历。

他们先变窄，再变宽。
前六个月只选择一个工具，比如 Cursor 或 Claude Code；一个技术栈，比如 Next.js + Supabase + Vercel；以及一个方向，比如产品构建者、AI 工程师或自动化顾问。深度胜过广度。等你真正发布三个东西之后，再扩大范围。

这篇文章由作者基于六个月的笔记和个人实践路径整理而成，并由 AI 模型 Minimax 和 Opus 4.6 编辑完成。

[原文链接]