Prompt dùng để sao chép và dán vào tiện ích mở rộng trình duyệt Claude trên Chrome nhằm trích xuất CSS và HTML của trang web để xây dựng và xuất ra tệp markdown Hệ Thống Thiết Kế (Design System)
Phân tích hệ thống thiết kế (design system) của trang web hiện tại bằng cách xem xét các trang chính của nó: trang chủ, trang sản phẩm hoặc bảng giá, trang nội dung bên trong, trang biểu mẫu hoặc liên hệ, và bất kỳ trang nào có các mẫu giao diện người dùng (UI patterns) đặc thù (nhận xét khách hàng, bảng giá, v.v.). Ở những nơi có thể, hãy kiểm tra các giá trị CSS thực tế đã được tính toán (computed CSS values thông qua công cụ kiểm tra phần tử) thay vì ước lượng bằng mắt thường, để màu sắc, kích thước và khoảng cách đạt độ chính xác cao thay vì chỉ mang tính xấp xỉ. Ghi lại tài liệu cho các hạng mục sau: - Bảng màu (Color palette): màu chính (primary), màu phụ (secondary), màu nhấn (accent) và các màu trung tính kèm theo giá trị hex/rgb và vị trí sử dụng của từng màu - Kiểu chữ (Typography): họ phông chữ (font families), độ đậm (weights), kích cỡ (sizes) và chiều cao dòng (line-heights) cho các thẻ từ H1-H6, văn bản thân bài (body text) và chú thích/nhãn (captions/labels) - Khoảng cách và bố cục (Spacing and layout): thang đo khoảng cách, chiều rộng khung chứa (container widths), cấu trúc lưới (grid structure) và các điểm ngắt đáp ứng (responsive breakpoints) - Nút bấm và lời kêu gọi hành động (Buttons and CTAs): kiểu dáng nút chính/phụ/cấp ba, bao gồm cả trạng thái di chuột (hover) và trạng thái nhấn giữ (active) nếu nhìn thấy được - Biểu mẫu và ô nhập liệu (Forms and inputs): kiểu dáng trường nhập, đường viền, trạng thái được chọn (focus states) - Điều hướng (Navigation): cấu trúc và kiểu dáng thanh đầu trang/điều hướng (header/nav), cấu trúc chân trang (footer) - Thẻ và khung chứa (Cards and containers): độ bo góc (border-radius), đổ bóng (shadows), đường viền (borders) - Phong cách biểu tượng (iconography) và hình ảnh minh họa Đánh dấu bất kỳ sự thiếu nhất quán nào giữa các trang (ví dụ: các kiểu nút bấm khác nhau ở những vị trí khác nhau) thay vì chỉ chọn một kiểu rồi bỏ qua phần còn lại. Xuất kết quả dưới dạng một tệp markdown (.md) duy nhất với các tiêu đề H2 cho từng danh mục, bảng biểu cho bảng màu và thang đo kiểu chữ, cùng các khối mã (code blocks) cho các giá trị CSS. Hãy cấu trúc tài liệu sao cho lập trình viên hoặc nhà thiết kế có thể sử dụng trực tiếp ngay lập tức. Lưu tệp dưới tên [site-name]-design-system.md để tôi có thể xuất nó ra từ luồng hội thoại này.
