Live

Khi nào nên sử dụng

Sử dụng /impeccable live khi bạn muốn lặp trên thứ gì đó trực quan giống như cách bạn làm trong công cụ thiết kế, nhưng giữ code sản xuất làm đầu ra. Luồng giống canvas của Figma mà không cần chuyến khứ hồi đến bước triển khai.

Sử dụng cho:

• Khám phá hướng trên phần tử thực tế. Một hero section, một thẻ newsletter, một pricing tier. Ba cách tiếp cận thực sự khác biệt, cạnh nhau, trên trang thực tế với ngữ cảnh thực tế.
• Polish một phần UI gần như đúng. Bạn biết cái gì cảm thấy không ổn nhưng không thể nói rõ. Chọn phần tử, viết “hơi khó hiểu hơn” hoặc vẽ một nét qua phần gây khó chịu, nhấn Go.
• Một A/B nhanh giữa hai hướng đội ngũ đang tranh luận. Tạo biến thể, không chấp nhận cái nào, bỏ đi. Mục đích là sự so sánh.

KHÔNG dành cho tính năng mới greenfield (sử dụng /impeccable craft) hoặc thiết kế lại toàn trang (sử dụng /impeccable hoặc một lệnh tinh chỉnh chuyên biệt).

Cách hoạt động

Một lệnh gọi lên lớp phủ picker trên dev server đang chạy. Bạn chọn bất kỳ phần tử nào. Một thanh ngữ cảnh nhỏ xuất hiện bên cạnh. Nhập mô tả tự do hoặc chọn một trong các chip hành động (bolder, quieter, distill, polish, typeset, colorize, layout, animate, delight, overdrive). Tùy chọn thả ghim bình luận hoặc vẽ nét trực tiếp lên phần tử trước và kỹ năng đọc chúng như ý định.

Nhấn Go. Ba biến thể chất lượng sản xuất được tạo, mỗi biến thể neo vào một kiểu thiết kế thực sự khác biệt (không phải ba cách xử lý màu) và hoán đổi nóng vào trang qua HMR của framework. Xoay qua chúng bằng phím mũi tên. Chấp nhận một và biến thể được ghi ngược vào source. Loại bỏ cả ba và bản gốc ở lại.

Nó hỗ trợ Vite, Next.js (bao gồm monorepo), SvelteKit, Astro, Nuxt và HTML tĩnh. Nếu dev server của bạn có Content Security Policy nghiêm ngặt, thiết lập chạy đầu tiên sẽ phát hiện và đề xuất bản vá một lần chỉ dành cho dev để picker có thể tải. DESIGN.md thắng trên quyết định trực quan, PRODUCT.md thắng trên giọng điệu: nếu bạn có cả hai, biến thể giữ đúng thương hiệu mà không cần được nói.

Thử ngay

/impeccable live

Mở URL dev server, chọn thẻ đăng ký newsletter, click chip delight, nhấn Go. Bạn sẽ nhận ba biến thể khác nhau theo các chiều cá tính (cảm giác tem-bưu thiếp, phiên bản bất ngờ kiểu chữ, một phiên bản với minh họa nhấn), không phải ba cách xử lý giống nhau.

Hoặc chọn hero, nhập “hơi biên tập hơn, bớt SaaS”, nhấn Go. Ba biến thể neo vào các kiểu biên tập khác nhau (masthead broadsheet, hàng đặc tả kiểu catalog, poster glyph quá cỡ) thay vì ba sắc thái của cùng một ý tưởng.

Dừng live mode khi xong: nói “stop live mode”, đóng tab hoặc nhấn nút thoát trên thanh picker.

Những cạm bẫy cần tránh

• Chạy trên trang vẫn đang viết dở. Tạo biến thể live cần ngữ cảnh. Nếu phần tử có văn bản giữ chỗ, Lorem ipsum chung chung hoặc định dạng mặc định trước stylesheet, biến thể sẽ phản ánh điều đó. Điền nội dung trước.
• Kỳ vọng nó đưa ra quyết định vĩ mô. Live mode lặp trên một phần tử được chọn. Cho “làm lại toàn bộ trang giá”, sử dụng /impeccable hoặc /impeccable craft thay thế.
• Bỏ qua thông báo fallback. Nếu phần tử nằm trong tệp đã tạo (template đã biên dịch, đầu ra build), picker nói rõ ràng và đề nghị chuyển accept vào source thật. Đừng ép accept vào tệp đã tạo: lần build tiếp theo sẽ xóa nó.
• Chạy mà không có PRODUCT.md hoặc DESIGN.md khi bạn quan tâm đến sự phù hợp thương hiệu. Live vẫn sẽ tạo, nhưng biến thể sẽ nghiêng về mặc định chung chung. Chạy /impeccable teach và /impeccable document trước nếu kết quả cần giống sản phẩm của bạn.