Hệ thống thiết kế AI

Các hệ thống thiết kế được trích xuất từ website sản phẩm AI, mô hình và nghiên cứu: trợ lý, nhà cung cấp mô hình và công cụ AI. Một số kết hợp kiểu chữ điềm tĩnh, mang chất biên tập với bảng màu trung tính ấm; số khác mang phong cách tối, kỹ thuật của các sản phẩm dành cho lập trình viên.

4 mẫu DESIGN.md trong danh mục này, từ Anthropic, Harvey, Paperclip và xAI. Được trích xuất từ các trang công khai của từng website, không phải hướng dẫn thương hiệu chính thức. Mới làm quen với định dạng này? Đọc DESIGN.md là gì.

Ảnh xem trước website Anthropic
AI & Học máy · AI Products & Assistants

Anthropic

Hệ thống thiết kế của Anthropic là một bản sắc tối giản, lấy kiểu chữ làm trung tâm, được xây dựng quanh hai bộ chữ tùy chỉnh là Anthropic Serif và Anthropic Sans, đặt trên nền ngà ấm #faf9f5. Bảng màu được giữ ở mức tối thiểu có chủ đích: màu đen gần như tuyệt đối #141413 trên nền trắng ngà ấm, cùng các tông đá mờ cho chữ phụ và đường viền. Kiểu chữ serif cỡ lớn làm điểm tựa cho giọng văn mang tính biên tập, trong khi một khối nền tối (màu đen gần như tuyệt đối với chữ màu ngà) tạo độ tương phản mạnh. Tổng thể phong cách truyền tải sự nghiêm túc trí tuệ và sứ mệnh ưu tiên an toàn, thông qua khoảng trắng rộng rãi, độ tương phản kiểu chữ cao và hoàn toàn không có chi tiết trang trí.

Ảnh xem trước website Harvey
AI & Học máy · AI Products & Assistants

Harvey

Hệ thống thiết kế của Harvey được xây dựng quanh một bộ nhận diện hai kiểu chữ riêng: HarveySerifFont cho sự uy quyền mang tính biên tập và HarveySansFont cho sự rõ ràng trong chức năng. Thanh điều hướng màu đen ấm gần như tuyệt đối (#0f0e0d) đối lập với nền nội dung màu ngà trắng (#fafaf9). Bảng màu được chủ đích đơn sắc, sử dụng thang xám ấm có cấp độ (gray-50 đến gray-950) và không có màu nhấn, nhằm truyền đạt sự tin cậy và tiết chế, phù hợp với công việc pháp lý có nhiều rủi ro. Độ nổi của các thành phần được thể hiện bằng độ tương phản bề mặt thay vì bóng đổ. Tiêu đề chính trên trang chủ dùng kiểu serif cỡ lớn 72px, tạo ngay cảm giác uy quyền về kiểu chữ, trong khi nội dung văn bản và các thành phần giao diện dùng kiểu sans tùy chỉnh. Khoảng cách tuân theo lưới cơ sở 8px với các token thang đo được đặt tên (xs, sm, md, xl, 2xl).

Ảnh xem trước website Paperclip
AI & Học máy · AI Products & Assistants

Paperclip

Paperclip là nền tảng quản lý AI agent với phong cách thiết kế nền tối táo bạo, nổi bật với màu nền gần đen (#0a0a0a) và chữ tiền cảnh trắng (#ffffff). Phần hero được định hình bởi hình minh họa gradient đa sắc gồm các khối viên nang xếp chồng theo màu hồng magenta, tím, xanh ngọc, cam và vàng, tạo nên bản sắc thị giác đầy màu sắc và năng động trên nền tối. Về kiểu chữ, Inter Tight (bản co hẹp, đậm, tiêu đề có khoảng cách chữ âm) được kết hợp với Inter cho nội dung và giao diện, cùng JetBrains Mono cho mã và trạng thái. Nút kêu gọi hành động chính là nút viên nang trắng trên nền tối. Hệ thống màu xanh lá ngữ nghĩa (#22c55e) báo hiệu trạng thái của agent và tác vụ xuyên suốt giao diện sản phẩm. Thanh điều hướng tối giản, phẳng, với đường viền dưới mờ.

Ảnh xem trước website xAI
AI & Học máy · AI Products & Assistants

xAI

Trang marketing của xAI sử dụng bảng màu nền kem ấm, được neo bởi --color-ivory (#f9f8f6) và --color-white (#ffffff), với màu chữ và màu nền chủ đạo là #0a0a0a gần đen. Hệ thống typography được chia thành ba phần: universalSansDisplay cho các tiêu đề lớn (60–72px, letter-spacing âm và chặt), universalSans cho nội dung nội dung chính và giao diện, còn GeistMono dành cho mã nguồn và ngữ cảnh terminal. Ngôn ngữ bo góc chủ yếu là các hình viên thuốc 9999px cho nút CTA và thẻ tag, còn thẻ và ô nhập liệu dùng 12px và 6px. Độ nổi (elevation) được giữ ở mức tối thiểu: thẻ dùng bóng đổ nhiều lớp mềm, trong khi phần lớn bề mặt phẳng. Tổng thể mang tông "kỹ thuật cao cấp": màu sắc tiết chế, khoảng trắng rộng rãi, và phong cách mã monospace nổi bật nhằm thể hiện sự uy tín với nhà phát triển.

Tự mình thử

Không thấy trang web bạn cần?

Dán bất kỳ URL nào để lấy DESIGN.md từ mọi trang web. Màu sắc, kiểu chữ, khoảng cách và token, sẵn sàng cho quy trình làm việc với AI của bạn.