Ui
Kế hoạch lâm sàng trên giấy mờ
shadcn/ui là một workshop hướng đến việc tạo ra một hệ thống thiết kế đơn sắc: một nền trắng tinh khôi, các bề mặt màu xám ấm áp nhẹ nhàng và các thẻ có bán kính lớn được đặt trên các đường viền tinh tế nhất. Giao diện gần như hoàn toàn không màu – chữ đen, bề mặt trắng, tông màu xám phụ – với một màu đỏ nổi bật duy nhất dành riêng cho các trạng thái lỗi và không có gì khác. Kiểu chữ dựa trên tính trung lập hình học của Geist với chiều cao chữ nhỏ gọn trên màn hình, tạo cảm giác tĩnh lặng, giống như mã lập trình, gợi nhớ đến cơ sở hạ tầng của nhà phát triển hơn là một sản phẩm dành cho người tiêu dùng.
Hình ảnh tối giản—hệ thống gần như hoàn toàn bao gồm giao diện người dùng. Không có ảnh chính, hình minh họa hoặc đồ họa trang trí. Các bản demo sản phẩm được trình bày dưới dạng mô hình thành phần (thẻ, trường nhập liệu, nút) trong một lưới, vừa đóng vai trò tài liệu vừa là nội dung trực quan. Các biểu tượng là những đường hình học mỏng (có thể được mượn từ Lucide) dày 1,5–2px với màu #0a0a0a hoặc #737373, được sử dụng một cách tiết kiệm như những gợi ý chức năng. Ngôn ngữ trực quan chính là các thành phần giao diện người dùng—trang web hoạt động như một hướng dẫn phong cách sống động, trong đó mọi yếu tố hiển thị đều là yếu tố thiết kế hiển thị.
Bảng màu
Trung lập
- Canvas
#f5f5f5— Hình nền trang, hiệu ứng bề mặt mờ, các nút bổ sung. - Paper
#ffffff— Bề mặt thẻ, hình nền nổi bật, màu nền nút chính - Surface Alt
#fafafa— Hình nền thanh bên, tùy chọn thẻ không gây chú ý, trạng thái chờ của trường nhập liệu. - Ink
#0a0a0a— Văn bản chính, tiêu đề, nhãn nút, đường viền biểu tượng. - Ink Soft
#171717— Hình nền nút có hiệu ứng tô màu, thêm văn bản trên nền sáng. - Mid Gray
#737373— Văn bản chính, văn bản giữ chỗ, nhãn phụ và màu nền biểu tượng khi ở trạng thái nghỉ đều được làm mờ.
Kiểu chữ
Từ 12 đến 48px · 8 bước
- Geist — thay thế: Inter · phác thảo 400, 500, 600 · Tất cả văn bản giao diện—văn bản chính có độ dày dòng 14px/400, tiêu đề có độ dày dòng 24–48px/600 và nút có độ dày dòng 13–14px/500. Các hình dạng chữ hình học và độ dày dòng đồng nhất của Geist tạo cảm giác trung tính cho các công cụ dành cho nhà phát triển; độ dày dòng 600 với khoảng cách chữ 48px và độ rộng chữ -0.05em đảm bảo các tiêu đề rõ ràng, tự tin, trông được cân nhắc kỹ lưỡng chứ không phải là được chỉnh sửa một cách máy móc.
Khoảng cách và hình thức
| Mục đích | Nghĩa |
|---|---|
| Tỉ trọng | dày đặc |
| Bước cơ bản | 8px |
| Bán kính nút | 18px |
| Bán kính thẻ | 24px |
| Bóng tối | không - viền thay vì bóng |
| Giữa các phần | 48-80px |
| Chiều rộng trang | 1280px |
AI sẽ xây dựng trang web của bạn theo phong cách Ui và điền đầy đủ thông tin vào đó.
- Đăng tải sản phẩm và bài viết qua các liên kết sau: Instagram, TikTok, Facebook.
- Chuyển nội dung từ trang web cũ của bạn—chỉ cần chỉ định địa chỉ.
- Thiết kế hiện đại trên nền tảng tốt nhất: React ( Next.js) với khả năng render phía máy chủ và tối ưu hóa SEO ngay từ đầu.
- Tối ưu hóa SEO hoàn toàn tự động cho kết quả tìm kiếm và đề xuất dựa trên mạng thần kinh.
Phong cách tương tự
- Ventriloc — Một đài quan sát biên tập dữ liệu trên giấy ấm - một đốm than cam duy nhất làm nổi bật độ chính xác đơn sắc.
- Geniestudio — Một cuốn sổ tay dùng trong ánh sáng dịu nhẹ ban ngày—loại có lề rộng và nét bút dày.
- xAI — Phòng thí nghiệm kem ấm với viên thuốc đen
- Cal — Tính thực dụng đơn sắc, một cách tiếp cận nhân văn. Một hệ thống ưu tiên sự rõ ràng và chức năng thông qua bảng màu đen trắng nghiêm ngặt, nhưng được làm dịu đi bằng kiểu chữ thân thiện và các hình dạng bo tròn.
- Scale — Một phòng lab ảnh chất lượng cao đạt chuẩn bảo tàng kết hợp với một dự án kỹ thuật.
- Contractbook — những hợp đồng giấy màu kem dưới bầu trời xanh thẳm
- AutoSend — Một studio bằng đá ấm cúng với một ánh đèn tím duy nhất—nơi những tiêu đề in hoa và những lời kêu gọi hành động màu chàm tươi sáng cùng tồn tại trong một không gian yên tĩnh, gần như trắng xóa.
- Air — Tác phẩm điêu khắc "Bầu trời đêm qua tấm kính"
- SpatialChat — xung tím trên giấy da trắng
- Squarespace — Bộ sưu tập ảnh đơn sắc điện ảnh
- Giga — Đường chân trời lúc nửa đêm trên nền đá obsidian phủ sương.
- Supabase — Một trình soạn thảo mã vào lúc nửa đêm với một chấm xanh phát quang - một xung màu duy nhất trên biển bụi than.