Bạn thấy một trang đích mà bạn yêu thích. Trong quy trình cũ, bạn sẽ mở DevTools, kiểm tra 50 phần tử, sao chép thủ công mã hex, đoán kích thước phông chữ, và vẫn còn sai khoảng cách. Design Extract làm điều này trong một lệnh — nó đảo ngược kỹ thuật thiết kế trực quan của bất kỳ trang web nào thành một thông số kỹ thuật có cấu trúc mà Claude Code hoặc Cursor có thể tái tạo trực tiếp.

Thông Tin Nhanh
  • Chức năng: Trích xuất màu sắc, phông chữ, khoảng cách, hoạt ảnh và tương tác từ bất kỳ URL nào
  • Kết quả: Thông số kỹ thuật thiết kế có cấu trúc, sẵn sàng cho các công cụ mã hóa AI
  • Trường hợp sử dụng: Tái tạo hoặc lấy cảm hứng từ các thiết kế trang web hiện có
  • Chi phí: Miễn phí, mã nguồn mở
  • Yêu cầu: Node.js
  • Kết hợp với: Claude Code, Cursor, Windsurf, hoặc bất kỳ công cụ mã hóa AI nào
  • Xác minh lần cuối: Tháng 4 năm 2026

Vấn Đề Nó Giải Quyết

Mô tả thiết kế bằng lời nói không chính xác. "Làm cho nó trông giống như trang giá của Stripe" cung cấp cho Claude Code một mục tiêu mơ hồ yêu cầu 5-10 vòng điều chỉnh trực quan. Mỗi vòng tốn token và thời gian.

Design Extract loại bỏ vấn đề mô tả. Nó đọc CSS thực tế, kiểu được tính toán, hoạt ảnh keyframe và cấu trúc DOM của bất kỳ trang nào — sau đó đóng gói nó thành một định dạng mà các công cụ mã hóa AI có thể thực hiện trực tiếp.

Kết quả: thay vì "làm cho nó trông giống như thế này" theo sau bởi vô tận lặp lại, bạn sẽ nhận được "đây là những thông số kỹ thuật chính xác" theo sau bởi một kết quả gần đúng ở lần xây dựng đầu tiên.

Cách Sử Dụng

Cài đặt Design Extract từ kho GitHub của nó. Trỏ nó tới bất kỳ URL nào. Nó xuất ra một tài liệu thiết kế chứa bảng màu với các giá trị hex/RGB chính xác, kiểu chữ bao gồm họ phông chữ, kích thước, trọng lượng và chiều cao dòng, phép đo khoảng cách và bố cục, keyframe hoạt ảnh và hàm tính thời gian, các mẫu tương tác như trạng thái hover và chuyển tiếp, cũng như cấu trúc thành phần với lồng ghép và phân cấp.

Cung cấp tài liệu này cho Claude Code hoặc Cursor làm bối cảnh trước khi nhắc lệnh xây dựng của bạn. "Sử dụng thông số kỹ thuật thiết kế đính kèm, xây dựng một trang đích với kiểu trực quan tương tự" tạo ra kết quả chính xác hơn đáng kể so với bất kỳ mô tả văn bản nào.

Nó Nắm Bắt Được Cái Gì (Và Nó Không Nắm Bắt Được Cái Gì)

Design Extract nắm bắt CSS được tính toán — các kiểu được hiển thị thực tế, không phải mã nguồn. Điều này có nghĩa là nó nhận được kết quả trực quan cuối cùng bất kể liệu nguyên bản có được xây dựng bằng Tailwind, CSS modules, vanilla CSS hay thư viện CSS-in-JS.

Nó nắm bắt hoạt ảnh và chuyển tiếp bao gồm keyframes, thời lượng, hàm easing và điều kiện kích hoạt. Nếu một nút có hoạt ảnh hover, Design Extract ghi lại chính xác cách nó di chuyển, thay đổi tỷ lệ và thay đổi màu sắc.

Bạn có nhận được giá trị từ cái này? Chúng tôi bao quát các công cụ thiết kế và mã hóa AI với độ sâu thực tế. Tham gia những độc giả xây dựng thông minh hơn →

Nó không nắm bắt được: hình ảnh (nó tham chiếu vị trí của chúng nhưng không tải xuống), nội dung động được tải thông qua JavaScript sau khi kết xuất ban đầu (mặc dù nó xử lý hầu hết nội dung SPA), và điểm dừng phản ứng (nó nắm bắt một khung nhìn tại một thời điểm — chạy nó ở nhiều chiều rộng cho thông số kỹ thuật phản ứng).

Quy Trình Làm Việc Thực Tế

Tái tạo trang đích. Tìm 3 trang đích bạn thích. Chạy Design Extract trên mỗi cái. Cung cấp cả 3 thông số kỹ thuật cho Claude Code với: "Sử dụng các phần tử từ 3 thông số kỹ thuật thiết kế này, tạo một trang đích cho [sản phẩm của bạn]. Lấy bảng màu từ thông số 1, kiểu chữ từ thông số 2 và cấu trúc bố cục từ thông số 3."

Tạo hệ thống thiết kế. Chạy Design Extract trên trang web hiện có của bạn (hoặc một trang web có kiểu bạn muốn áp dụng). Kết quả trở thành tệp DESIGN.md của bạn cho Claude Design — cung cấp cho nó bối cảnh phù hợp với thương hiệu cho mỗi nguyên mẫu trong tương lai.

Phân tích cạnh tranh. Trích xuất các thiết kế của 3 đối thủ cạnh tranh hàng đầu của bạn. So sánh các cách tiếp cận trực quan của họ cạnh nhau. Sử dụng các phần tử tốt nhất để thông báo cho hướng thiết kế của riêng bạn — mà không cần kiểm tra thủ công hàng trăm phần tử.

Ghi Chú Đạo Đức

Design Extract nắm bắt các thông số kỹ thuật trực quan, không phải mã độc quyền hoặc tài sản có bản quyền. Sử dụng nó để lấy cảm hứng và học tập là thực tế tiêu chuẩn — giống như những gì các nhà thiết kế làm thủ công trong DevTools mỗi ngày. Sao chép thiết kế của đối thủ từng điểm ảnh và trình bày nó như nguyên bản là sai đạo đức bất kể bạn sử dụng công cụ nào.

Để biết thêm về quy trình thiết kế được hỗ trợ bởi AI, xem hướng dẫn thực tế Claude Design của chúng tôi và so sánh Claude Design với Figma của chúng tôi. Để có mẹo về cách làm cho các tương tác mã hóa AI của bạn hiệu quả hơn, hãy đọc hướng dẫn bỏ token của chúng tôi.

Đây là những gì chúng tôi làm mỗi tuần. Một bài viết sâu về các công cụ AI, quy trình làm việc và quan điểm trung thực — không hype, không phụ chứng. Tham gia chúng tôi →

Tiết lộ: Một số liên kết trong bài viết này là liên kết liên kết. Chúng tôi chỉ khuyên dùng các công cụ mà chúng tôi đã kiểm tra và sử dụng thường xuyên. Xem chính sách tiết lộ đầy đủ của chúng tôi.