Xây cửa hàng với Claude Code

Plugin EcomWeb cho Claude Code tạo trên máy bạn một dự án storefront gắn với cửa hàng, rồi để Claude dựng và sửa giao diện bằng dữ liệu thật của cửa hàng. Bạn nói điều muốn làm, Claude sửa code và kiểm tra.

Mọi thay đổi nằm trên máy bạn. Khách chưa thấy gì cho tới khi bạn tự đưa code lên cửa hàng.

Chuẩn bị máy tính

Cài Claude Code.
Cài Node.js 24 trở lên.
Cài pnpm.
Cài Git.

Plugin kiểm tra ba công cụ này trước khi tạo dự án, và cho bạn đường dẫn cài nếu thiếu.

Cài plugin

Mở Claude Code.
Gõ lệnh thêm kho plugin của EcomWeb.
Gõ lệnh cài plugin.

Terminal

$ /plugin marketplace add ecomwebai/ecomweb-claude-plugin
$ /plugin install ecomweb@ecomweb

Tạo dự án cho cửa hàng

Trong Claude Code, gõ /ecomweb:new. Bạn có thể thêm mã cửa hàng sau lệnh, ví dụ /ecomweb:new <mã cửa hàng>.
Mở đường dẫn đăng nhập Claude đưa cho bạn.
Trên trang Đăng nhập ecomweb CLI?, kiểm tra Mã khớp với mã Claude hiện.
Bấm Cho phép.
Nếu bạn có nhiều cửa hàng, trả lời Claude cửa hàng muốn dùng.
Khi Claude hỏi nơi tạo dự án, chọn tạo dự án trên máy này.

Chỉ chủ cửa hàng tạo được dự án, vì lệnh cần khóa công khai của cửa hàng. Claude tạo thư mục dự án và cài các gói cần thiết. Nếu bạn chưa có cửa hàng, Claude hỏi tên và tạo cửa hàng mới.

Chạy và mở dự án

Mở terminal trong thư mục dự án mới.
Chạy pnpm dev.
Mở http://localhost:3002 để xem storefront với dữ liệu cửa hàng.
Thoát Claude Code.
Chạy claude trong thư mục dự án.

Mở Claude Code ngay trong thư mục dự án để Claude nạp hướng dẫn riêng của dự án. Hướng dẫn này dạy Claude bộ công cụ storefront, dữ liệu thật của cửa hàng và khi nào một trang được coi là xong.

Nhờ Claude dựng giao diện

Sao chép prompt bên dưới.
Dán vào Claude Code đang mở trong thư mục dự án.
Thay phần trong ngoặc vuông bằng điều bạn muốn.
Gửi prompt.

Lời nhắc cho Claude Code hoặc Codex

Trong dự án storefront này, [ví dụ: dựng trang chủ từ các sản phẩm bán chạy nhất, theo màu thương hiệu của tôi].
Chỉ sửa code trên máy. Xong thì chạy pnpm check và cho tôi biết cần mở trang nào để xem.
Đừng triển khai và đừng xuất bản giao diện, tôi sẽ tự làm.

Ứng dụng Claude ↗Ứng dụng ChatGPT ↗

Dùng ứng dụng trên máy tính, vì trợ lý cần chạy lệnh trên máy bạn.

Xem kết quả ở http://localhost:3002, rồi nói với Claude những gì cần sửa thêm.

Kiểm tra và cập nhật dự án

Terminal

# Chạy pnpm check rồi xem lại các trang theo danh sách chất lượng
$ /ecomweb:check
# Cập nhật hướng dẫn của dự án, storefront-kit và SDK, rồi chạy pnpm check
$ /ecomweb:update

Đưa code lên cửa hàng

Khi đã ưng ý, chạy dự án trên máy chủ của bạn, rồi kết nối một giao diện với website đó. Cách này dùng được ở mọi gói, xem Kết nối website tự host.

Câu hỏi thường gặp

Claude có hỏi khóa API hay mật khẩu của tôi không?

Không. Bạn duyệt đăng nhập trên trình duyệt của mình. Plugin dặn Claude không bao giờ hỏi mã, khóa hay token, và không ghi chúng vào tệp.

Tôi dùng Codex thay cho Claude Code được không?

Được, nhưng không qua plugin. Chạy npx @ecomweb/cli storefront init để tạo dự án, rồi mở thư mục đó trong Codex. Dự án có tệp AGENTS.md trỏ tới cùng hướng dẫn cho trợ lý.

Làm sao cập nhật plugin?

Plugin được cài thẳng từ kho mã của EcomWeb trên GitHub, nên bạn nhận bản mới qua cách cập nhật plugin của Claude Code. Lệnh /ecomweb:update chỉ cập nhật dự án storefront.