Không có designer? Mượn một hệ thống thiết kế đã được kiểm chứng cho ứng dụng của bạn

Cách chọn trang tham khảo#

Trang bạn mượn quyết định phần lớn cảm giác của ứng dụng, nên hãy dành mười phút cho bước này. Một trang tham khảo tốt có những đặc điểm sau:

• Cùng loại sản phẩm. Một dashboard nên mượn từ một dashboard khác, không phải từ một cửa hàng thời trang.
• Mật độ tương tự. Nếu ứng dụng của bạn toàn biểu mẫu và bảng, hãy chọn trang có biểu mẫu và bảng, không phải trang chỉ có một hero lớn.
• Một màu hành động rõ ràng. Khi chỉ một màu đánh dấu chỗ cần nhấn, đổi thương hiệu chỉ là thay một họ màu đó.
• Chữ dễ đọc. Mở trang trên điện thoại và đọc một đoạn. Nếu đọc thoải mái, thang kiểu chữ đó đáng để lấy.
• Sáng hoặc tối, đúng như bạn muốn. Biến một hệ thống ưu tiên giao diện tối thành giao diện sáng là thiết kế lại, không phải chỉnh sửa nhỏ.
• Giao diện không phải chính là thương hiệu. Nếu chỉ nhìn màu là bạn nhận ra trang đó, bạn sẽ phải đổi quá nhiều thứ.

Thư viện mẫu DESIGN.md có thể lọc theo danh mục, giúp bạn nhanh chóng so sánh vài ứng viên.

Các bước#

1. 1

   Chọn ra hai hoặc ba trang

   Dùng các đặc điểm ở trên. Ảnh chụp những màn hình bạn thích sẽ giúp bạn quyết định sau này.

2. 2

   Lấy DESIGN.md của trang bạn thích nhất

   Sao chép từ trang của nó trong thư viện mẫu, hoặc dán URL vào trang chủ Design Extractor và chạy một lượt trích xuất Pro. Pro lấy mẫu các trang chính của trang web và trả về một tệp có màu sắc, kiểu chữ, khoảng cách, bo góc và công thức component. Mới làm quen với định dạng này? Hãy đọc DESIGN.md là gì.

3. 3

   Biến nó thành của bạn

   Đổi họ màu thương hiệu, đổi font nếu là font thương mại, đổi tên và giọng văn. Prompt bên dưới làm tất cả trong một lần.

4. 4

   Đặt vào repo và trỏ agent tới tệp

   Lưu thành DESIGN.md ở thư mục gốc của repository. Hướng dẫn cho Claude Code và Cursor có đoạn trỏ cần thêm.

5. 5

   Kiểm tra

   Dán tệp đã sửa 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.

Ví dụ thực tế: Notion#

Giả sử bạn thích cảm giác của Notion. Dưới đây là hệ thống thiết kế của nó theo DESIGN.md trong thư viện mẫu, cùng những gì bạn nên giữ và nên đổi.

Nên giữ gì và nên đổi gì

### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

Biến nó thành của bạn chỉ với một prompt#

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

Vì sao không nên sao chép nguyên một thương hiệu#

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

Những điểm khởi đầu tốt từ thư viện mẫu. Mỗi trang có toàn bộ DESIGN.md, bảng màu và mẫu kiểu chữ.

• 
  Phần mềm & SaaS · Productivity & Notes

  Notion

  Trang chủ tiếp thị của Notion kết hợp phần hero màu xanh navy đậm (#02093a) với nội dung chính màu sáng (#f6f5f4), sử dụng một kiểu chữ tùy chỉnh (NotionInter) cho mọi vai trò văn bản. Thiết kế dựa trên lưới 12 cột với khoảng cách rãnh 28px, hệ thống bo góc kép gồm 8px cho thẻ và 9999px cho các nút dạng viên thuốc, cùng hệ thống đổ bóng nhiều lớp tăng dần cho các thành phần nổi. Màu xanh thương hiệu (#2537b1) dẫn dắt các nút kêu gọi hành động và điểm nhấn, trong khi thang màu xám ngữ nghĩa từ gray-200 đến gray-900 tạo nên cấu trúc phân cấp cho toàn bộ văn bản và bề mặt.

• 
  Du lịch, Vận tải & Logistics

  Airbnb

  Hệ thống thiết kế của Airbnb được xây dựng quanh một phông chữ biến thiên độc quyền duy nhất (Airbnb Cereal VF), với bảng màu trung tính gần như đơn sắc, lấy màu than đậm (#222222) và các sắc xám nhạt làm nền tảng. Màu hồng san hô đặc trưng của thương hiệu, "Rausch" (#ff385c), chỉ được dành riêng cho các nút kêu gọi hành động chính và logo. Bố cục là lưới thẻ ảnh đáp ứng, với tỷ lệ ảnh so với chữ rộng rãi, các thẻ bo góc mềm 20px và hệ thống bóng đổ môi trường nhiều lớp tạo chiều sâu tinh tế mà không gây tương phản gắt. Thanh tìm kiếm dạng viên thuốc nổi bật, quy tụ hành động cốt lõi của người dùng.

• 
  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.

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