Claude Code / Codex Plugin: Cho phép agent đọc mã nguồn của bạn, vẽ ra một bản đồ tương tác có thể thu phóng, mỗi module, tệp và giao diện đều kèm theo một câu giải thích dễ hiểu và đánh dấu các cuộc gọi lẫn nhau; khi frontend và backend nằm ở các kho lưu trữ riêng biệt, vẫn có thể khớp các yêu cầu do frontend gửi với các giao diện backend phản hồi chúng.
Số sao 809 (+44 / 24h)
Lý do
- Dành cho những người “đã xây dựng được ứng dụng chạy được nhờ AI nhưng không giải thích rõ cách nó hoạt động”: có thể bắt đầu từ một trang, xem các thành phần, yêu cầu, mã phía máy chủ, dữ liệu và dịch vụ bên ngoài nằm phía sau nó; cũng có thể đặt câu hỏi trên bản đồ, ví dụ “tiền hoàn lại được chuyển về thẻ của khách hàng như thế nào”, để nhận được câu trả lời và một bản đồ nhỏ chỉ chứa các phần liên quan
- Tính năng kiểm tra sức khỏe (health check) chuyên phát hiện các lỗi phổ biến trong ứng dụng do AI viết: khóa bí mật (secret) được viết trong mã hoặc gửi đến trình duyệt, bảng Supabase mà ai cũng có thể đọc, quy tắc Firebase mở, callback Stripe có thể bị giả mạo, các giao diện không yêu cầu đăng nhập, mỗi mục đều kèm theo bản sửa lỗi có thể sao chép; mục “Thay đổi gần đây” đánh dấu màu xanh lá cây các thẻ mà agent vừa sửa và ghi rõ lý do
- Việc quét, phân tích, khớp yêu cầu và bố cục được thực hiện bởi các script Node không phụ thuộc; việc đặt tên module và mô tả được giao cho Claude / Codex; khi cập nhật chỉ đọc lại các phần đã thay đổi; khi chưa viết mã, có thể vẽ ra một “bản thiết kế” (blueprint) dạng đường nét đứt từ tài liệu PRD
Cách sử dụng
- Yêu cầu Node.js 18+; Claude Code: chạy lệnh
claude plugin marketplace add haydenschmitty/floorplan, sau đóclaude plugin install floorplan@floorplan; Codex: chạy lệnhcodex plugin marketplace add haydenschmitty/floorplan, sau đócodex plugin add floorplan@floorplan - Trong dự án, hãy nói “Make me a floorplan of this app” (với Codex cũng có thể nhập
$floorplan), bản đồ sẽ được tạo tạifloorplan/index.htmlvà tự động mở ra; sau khi sửa mã, hãy nói “Update the floorplan”, có thể xuất ra một tệp HTML duy nhất để gửi cho người khác - Tác giả cung cấp bản demo trực tuyến của ứng dụng mẫu Brewline, bạn có thể trải nghiệm mà không cần cài đặt
Rủi ro
- Tác giả nói rõ rằng tính năng kiểm tra sức khỏe là để kiểm tra chứ không phải để kiểm toán; có danh sách hỗ trợ cho các ngôn ngữ và framework (TS/JS, Python, Go, Rust, Java, v.v., Express, FastAPI, Next.js, Spring, v.v.), mức độ hỗ trợ cho những thứ ngoài danh sách này khá hạn chế
- Bản đồ được tạo bằng hạn mức Claude / Codex của chính bạn, không cần cấu hình thêm API Key; phiên bản 0.6.0, giấy phép MIT, kho lưu trữ được tạo vào ngày 27 tháng 10