Hướng dẫn

Kết hợp hai trang tham khảo thành một thiết kế cho bản prototype

“Làm sao cho nó giống Notion kết hợp với Stripe.” Khách hàng thường xuyên đặt yêu cầu prototype như vậy. Khi có DESIGN.md của từng trang, bạn có thể biến câu đó thành một đặc tả cụ thể: so sánh token song song, quyết định tệp nào làm chủ đạo, rồi gộp lại.

Design Extractor cung cấp cho bạn hai tệp. Việc gộp là do bạn quyết định, làm thủ công hoặc cùng agent lập trình AI của bạn, và hướng dẫn này trình bày cả hai cách.

Viết cho designer và agency làm prototype. Cập nhật .

Bạn sẽ nhận được

  • Hai tệp DESIGN.md được so sánh theo từng token, để thấy rõ khác biệt cụ thể.
  • Một kế hoạch gộp: một tệp làm nền, cộng với các nhóm token được chỉ định từ tệp kia.
  • DESIGN.md đã gộp, do bạn tự làm hoặc do agent làm với prompt bên dưới.
  • Một bước kiểm tra độ tương phản, để bản kết hợp vẫn dễ đọc.

Cách kết hợp hoạt động

Kết hợp không phải là lấy trung bình. Trộn nửa bảng màu này với nửa bảng màu kia sẽ cho ra một trang không giống bên nào. Cách hiệu quả là một tệp nền cộng với vài phần được chỉ định từ tệp kia:

  • Tệp nền tạo cấu trúc: thang kiểu chữ, khoảng cách, bo góc và công thức component.
  • Tệp điểm nhấn cho mượn trọn nhóm, như họ màu chính hoặc font tiêu đề, không bao giờ là những giá trị lẻ tẻ.

Cả hai tệp đều tuân theo đặc tả DESIGN.md của Google, nên các nhóm khớp nhau: colors, typography, rounded, spacing và components. Xem DESIGN.md gồm những gì để biết cấu trúc đầy đủ.

Các bước

  1. Lấy cả hai tệp

    Sao chép từ thư viện mẫu nếu có sẵn, hoặc dán từng URL vào trang chủ Design Extractor và chạy một lượt trích xuất Pro cho mỗi trang.

  2. Đặt chúng cạnh nhau

    So sánh màu chính, nền, font, cỡ chữ và bo góc, như trong bảng bên dưới.

  3. Chọn tệp nền

    Chọn trang có bố cục và mật độ khớp với bản prototype.

  4. Chỉ rõ tệp điểm nhấn cho mượn gì

    Ghi lại dưới dạng nhóm token, như “họ màu chính của nó”.

  5. Gộp thủ công hoặc cùng agent

    Cả hai cách đều ở bên dưới. Lưu kết quả thành DESIGN.md trong repo của bản prototype.

  6. Kiểm tra độ tương phản và cấu trúc

    Dán tệp đã gộp vào Trình kiểm tra DESIGN.md miễn phí.

Ví dụ thực tế: Notion kết hợp Stripe

Hai tệp thật từ thư viện mẫu: DESIGN.md của Notion và DESIGN.md của Stripe. Cả hai được trích xuất từ trang web công khai của các thương hiệu và không phải hướng dẫn thương hiệu chính thức.

NotionStripe
Màu chính#0075DE#533AFD
Nền#FFFFFF#FFFFFF
Chữ#000000#061B31
FontNotion Inter, Lyon TextSohne
Cỡ chữ lớn nhấthero-display, 96px, độ đậm 600hero-display, 56px, độ đậm 500
Chữ nội dungbody, 16px, độ đậm 400body-lg, 18px, độ đậm 300
Bo góc nút8px4px
Token màu2021
Công thức component1471

Một cách kết hợp hai tệp

Lấy Notion làm nền cho kiểu chữ, khoảng cách, bo góc và component, và để Stripe cho mượn họ màu chính (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft). Đó là yêu cầu kinh điển “bố cục của chúng ta, năng lượng của họ”.

Hãy kiểm tra các con số trước khi chốt. Màu chính của Stripe trên nền của Notion có độ tương phản 6.1:1. Chữ on-primary của Notion trên màu chính mới đạt 6.1:1. Chữ nội dung cần tối thiểu 4.5:1 theo WCAG AA; chữ lớn và icon cần 3:1.

Một cái bẫy: màu chính của chính Notion, #0075DE, xuất hiện 65 lần trong tệp, chủ yếu bên trong công thức component. Chỉ thay token ở đầu tệp là chưa đủ; mọi chỗ lặp lại đều phải đổi.

Hình minh họa cho cách gộp thủ công mô tả ở trên, do trang này ghép từ hai tệp trong thư viện mẫu: token của Notion với họ màu chính của Stripe, đã rút gọn. Đây không phải tính năng của Design Extractor và không phải kết quả từ agent.
---
name: Notion and Stripe prototype
colors:
  primary: "#533AFD"
  primary-focus: "#5452FB"
  primary-bright: "#635BFF"
  primary-pressed: "#4032C8"
  primary-deep: "#2E2B8C"
  primary-soft: "#D6D9FC"
  on-primary: "#FFFFFF"
  ink: "#000000"
typography:
  hero-display:
    fontFamily: Notion Inter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -4.6px
  body:
    fontFamily: Notion Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 4px
  sm: 8px
  md: 12px
  full: 9999px
---

Gộp thủ công

  1. Sao chép tệp nền thành DESIGN.md và đổi name của nó.
  2. Trong colors, thay họ màu chính của tệp nền bằng các giá trị của tệp điểm nhấn.
  3. Tìm từng mã hex cũ trong toàn bộ tệp và thay thế. Công thức component lặp lại màu trong CSS của chúng, nên chỉ sửa danh sách token là chưa đủ.
  4. Viết lại phần văn bản Overview và Colors để mô tả bản kết hợp, không phải thương hiệu nào trong hai.
  5. Kiểm tra tệp bằng trình kiểm tra và sửa mọi cảnh báo về độ tương phản.

Gộp cùng agent

Lưu cả hai tệp trong repo của bản prototype, ví dụ trong design/, và đưa cho agent một prompt nêu rõ tệp nền, các nhóm cần lấy và các bước kiểm tra cần chạy. Prompt này được viết cho hướng dẫn này với tên tệp và tên token thật.

Read design/notion.DESIGN.md and design/stripe.DESIGN.md. Write DESIGN.md for our prototype:
- Start from the Notion file: keep its typography, spacing, rounded tokens and component recipes.
- Take Stripe's primary color family (primary, primary-focus, primary-bright, primary-pressed, primary-deep, primary-soft) and use it wherever the Notion file uses its own primary colors, including inside the component recipes.
- Rename the file and rewrite the Overview and Colors prose so they describe the blend, not either brand.
- Keep the section order of Google's DESIGN.md spec, and make sure text on the new primary meets 4.5:1 contrast.
List every value you changed.

Rà soát kết quả như mọi thay đổi khác: đọc diff, rồi dán tệp vào trình kiểm tra. Agent làm phần gõ phím; các quyết định trong prompt vẫn là của bạn.

FAQ

Kết hợp thiết kế của hai trang web thành một: câu hỏi thường gặp

Trả lời ngắn cho những điều mọi người hay hỏi trước khi thử.

Không, không có tính năng gộp. Mỗi lượt trích xuất trả về DESIGN.md của một trang. Bạn gộp hai tệp thủ công, hoặc nhờ agent lập trình AI làm việc đó bằng một prompt như trong hướng dẫn này, rồi rà soát kết quả.

Hai, đôi khi ba. Một tệp làm nền và tạo cấu trúc: thang kiểu chữ, khoảng cách, bo góc và component. Các tệp còn lại cho mượn một phần được chỉ định, như một họ màu hoặc một font tiêu đề. Trộn giá trị từ nhiều tệp hơn sẽ khiến kết quả trông chắp vá.

Tệp có bố cục và mật độ khớp với bản prototype. Nếu khách hàng muốn một sản phẩm điềm tĩnh kiểu tài liệu với màu của một trang khác, trang điềm tĩnh là nền và trang kia cho mượn màu, chứ không phải ngược lại.

Dán tệp đã gộp vào Trình kiểm tra DESIGN.md miễn phí. Công cụ kiểm tra cấu trúc và đánh dấu những màu chữ có độ tương phản quá thấp. Sau đó hãy dựng thử một màn hình thật với nó trước khi đưa cho khách hàng xem.

Lấy hai tệp cho yêu cầu của bạn

Dán URL của từng trang tham khảo và nhận DESIGN.md của nó, sẵn sàng để so sánh và gộp.

Lấy DESIGN.md từ bất kỳ trang web nào

Hướng dẫn liên quan

Xem tất cả hướng dẫn DESIGN.md