Sắp làm lại trang web? Hãy trích xuất hệ thống thiết kế trước

Khi nào nên làm việc này#

• Chuyển framework. Giao diện giữ nguyên, stack mới. DESIGN.md cho phép agent lập trình AI dựng lại component bằng giá trị chính xác thay vì đọc stylesheet cũ.
• Đổi thương hiệu. Lưu lại hệ thống cũ trước, để bạn biết chính xác màu, font và bo góc nào thay đổi, cái nào giữ nguyên.
• Bàn giao. Một agency mới hay một nhóm mới nhận được một tệp mô tả trang web trông thế nào hôm nay, thay vì phải đi một vòng qua codebase.

Các bước#

1. 1

   Trích xuất trang đang chạy trước khi thay đổi bất cứ thứ gì

   Dán URL production vào trang chủ Design Extractor và chạy một lượt trích xuất Pro. Đó phải là trang công khai: lượt trích xuất tải trang như một khách truy cập, nên localhost và các trang cần đăng nhập không dùng được.

2. 2

   Commit tệp làm mốc chuẩn

   Lưu thành DESIGN.md trong repository mới và commit trước khi bắt đầu làm lại. Từ đây tệp ghi lại trang web trông thế nào vào ngày hôm đó.

3. 3

   Đọc phần Known Gaps

   Cuối tệp liệt kê những gì lượt chạy không ghi lại được. Mỗi mục trong đó là một việc cần kiểm tra thủ công.

4. 4

   Kiểm tra những gì DESIGN.md không chứa được

   Tài nguyên, màn hình sau đăng nhập, chuyển động và các mục khác bên dưới. Ghi chú vào tệp trong lúc làm.

5. 5

   Dựng dựa trên tệp

   Trỏ agent lập trình AI tới tệp, như hướng dẫn cho Claude Code và Cursor chỉ ra, và đối chiếu từng màn hình mới với nó.

Những gì tệp đã ghi lại trên Stripe#

Những gì tệp tự nhận là còn thiếu

Tệp nói rõ giới hạn của mình. 5 mục đầu tiên trong tổng số 11 mục ở phần Known Gaps:

## Known Gaps

- **Many recipes did not reproduce exactly.** `button-primary` (84% pixel match), `card` (78%), `card-2` (94%), `promo-banner` (77%) and `skip-link` (0%; it is visually hidden until focused) are approximations. So are several header and footer recipes (`header-landing`, `header-inner-2` timed out, `footer-landing`, `footer-inner`, `footer-inner-2`).
- **Some recipes could not be judged at all.** `stat` and `stat-2` were not verifiable, because page media covered most of the element.
- **Some elements were never visible.** `footer-landing`, `header-inner` and `logo-strip-item` were not visible when verification ran, so their values come from computed styles only.
- **No section rhythm was measured.** `sectionRhythm` is empty, so vertical spacing between page sections and the inner padding of large cards is described only qualitatively.
- **No `base` spacing step was published.** The evidence frequency (4px, 8px, 12px, 16px and 24px most common) suggests a 4px-derived grid, but it is not a verified token.

Tệp của bạn sẽ có danh sách riêng. Hãy coi đó là danh sách việc cần làm cho các bước kiểm tra bên dưới.

Những gì cần kiểm tra thủ công#

Sau khi làm lại#

Các tệp dùng trong hướng dẫn này#

Mở một tệp để xem DESIGN.md đầy đủ, từ token ở đầu đến phần Known Gaps ở cuối.

• 
  Tài chính & Fintech

  Stripe

  Trang chủ tiếp thị của Stripe sử dụng một hệ thống thiết kế được kiểm soát chặt chẽ (HDS — Stripe Design System), xây dựng quanh phông chữ biến thiên "sohne-var" ở các độ đậm nhẹ (300–400), một bảng màu thương hiệu từ xanh navy đậm đến chàm, lấy #533afd (Stripe Indigo) làm trục chính, cùng với phần hero có dải gradient quang phổ tràn viền đặc trưng. Các thành phần có bo góc nhỏ (4–6px), bóng đổ phẳng đến tối giản, và được bố cục theo lưới khoảng cách cơ sở 8px. Tổng thể giọng điệu vừa đầy uy quyền vừa gần gũi: hạ tầng tài chính được truyền đạt qua kiểu chữ tự tin và cách dùng màu tiết chế.

• 
  Dịch vụ doanh nghiệp & Chuyên môn

  Shopify

  Trang chủ tiếp thị của Shopify sử dụng một khu vực hero video toàn màn hình đầy kịch tính, với nền gần đen (#02090a) tương phản rõ rệt với thanh điều hướng màu trắng phía trên. Màu nhấn thương hiệu chủ đạo là xanh bạc hà rực rỡ (#36f4a4), được dùng tiết chế cho các điểm nhấn và trạng thái tương tác. Kiểu chữ được phân chia giữa NeueHaasGrotesk cho tiêu đề hiển thị và mang tính biên tập, và Inter-Variable cho nội dung giao diện người dùng. Các nút kêu gọi hành động (CTA) có hình viên thuốc bo tròn hoàn toàn (border-radius: 9999px). Tổng thể hệ thống thiết kế tự tin, độ tương phản cao và đầy khát vọng, được xây dựng để biến khách truy cập thành người bán hàng.

• 
  Lập trình & Hạ tầng · Developer Tools & IDEs

  Supabase

  Supabase sử dụng một hệ thống thiết kế ưu tiên giao diện tối, lấy nền gần đen sâu (oklch ~0.19) làm nền tảng, kết hợp với màu nhấn xanh lá rực rỡ (#3ecf8e / #3fcf8e). Bố cục được xây dựng quanh lưới thẻ tính năng đáp ứng, với Manrope cho tiêu đề hiển thị và Inter cho văn bản nội dung cũng như giao diện. Source Code Pro được dùng cho mọi ngữ cảnh monospace và mã nguồn. Hệ thống màu dựa trên các custom property oklch với cách đặt tên theo ngữ nghĩa. Thẻ có bo góc 12px và viền mỏng tinh tế, nút bo góc 6–8px, mật độ nội dung vừa phải và lưới khoảng cách cơ sở 8px.

Xem tất cả mẫu DESIGN.md