Để Claude Code và Cursor dựng UI khớp với một trang web

Vì sao DESIGN.md tốt hơn ảnh chụp màn hình#

Các bước#

1. 1

   Chọn một trang có giao diện giống thứ bạn đang làm

   Màn hình sản phẩm có mật độ tương tự sẽ hiệu quả hơn một landing page với hero lớn. Nếu bạn đang làm dashboard, hãy chọn một sản phẩm có dashboard. Xem thư viện mẫu DESIGN.md trước: có thể tệp đã có sẵn ở đó.

2. 2

   Lấy DESIGN.md của trang đó

   Sao chép từ trang 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à mỗi lượt mất ít nhất một phút.

3. 3

   Lưu thành DESIGN.md ở thư mục gốc của repository

   Đặt nó cạnh README.md và AGENTS.md rồi commit, để mọi nhánh và agent của mọi đồng đội đều đọc cùng một tệp.

4. 4

   Trỏ agent tới tệp

   Thêm một đoạn trỏ ngắn vào CLAUDE.md cho Claude Code, hoặc một project rule cho Cursor. Các đoạn mẫu ở bên dưới.

5. 5

   Yêu cầu UI bằng chính thuật ngữ của tệp

   Gọi tên token và component trong prompt (primary, body-md, một công thức nút) và yêu cầu agent liệt kê mọi giá trị nó không tìm thấy thay vì tự bịa ra.

6. 6

   Đối chiếu kết quả với tệp

   Kiểm tra màu, font, bo góc và các trạng thái so với DESIGN.md trước khi chấp nhận thay đổi.

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

---
name: Linear
colors:
  primary: "#5E6AD2"
  canvas: "#08090A"
  surface: "#121414"
  surface-raised: "#1C1C1F"
  ink: "#F7F8F8"
  ink-secondary: "#D0D6E0"
  muted: "#8A8F98"
  subtle: "#62666D"
typography:
  hero-display:
    fontFamily: Inter Variable
    fontSize: 72px
    fontWeight: 510
    lineHeight: 1
    letterSpacing: -1.584px
  body-lg:
    fontFamily: Inter Variable
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: normal
rounded:
  xs: 2px
  sm: 4px
  sm-2: 4.4625px
  md: 5px
---

Trỏ agent tới tệp#

## Design
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

---
description: Follow DESIGN.md for every UI change
alwaysApply: true
---
Follow DESIGN.md in the repository root for every UI change.
Use its color, typography, rounded and component tokens instead of inventing values.
Before you build a button, card or input, read its recipe in the Components section.

Prompt dùng token#

Build a pricing page with three plan cards. Follow DESIGN.md:
- use primary (#5E6AD2) only where the file says it belongs
- set headings in hero-display and body copy in body-lg
- reuse the button-ghost recipe for the plan buttons, with its hover and focus states
- start the plan cards from the card recipe
List any value you could not find in DESIGN.md instead of inventing one.

@DESIGN.md Restyle the settings form in src/app/settings to match this file.
Take colors, type and radii from the tokens and inputs and buttons from the component recipes.
Keep the existing layout and logic, and list any value you could not find in the file.

Rà soát những gì agent đã dựng#

• Màu. Tìm các mã hex trong diff. Mỗi mã phải có trong DESIGN.md. Một mã mới thường có nghĩa là agent đã đoán.
• Font. Nhiều thương hiệu dùng font thương mại mà bạn không được phép phân phối. Phần Typography của tệp thường nêu một font mã nguồn mở thay thế; hãy chắc chắn agent đã tải đúng font đó chứ không phải một font dự phòng ngẫu nhiên.
• Bo góc và khoảng cách. Nút và thẻ nên dùng token rounded của tệp, không phải một giá trị mặc định như 8px ở mọi nơi.
• Trạng thái. Kiểu hover và focus là một phần của mỗi công thức component. Hãy nhấn Tab qua trang và kiểm tra vòng focus.
• Công thức flagged. Nếu tệp đánh dấu một công thức là flagged, hình dạng của nó chỉ là xấp xỉ. Hãy so component đó với trang thật.

Nếu bạn sửa DESIGN.md bằng tay, hãy kiểm tra bằng Trình kiểm tra DESIGN.md miễn phí trước khi agent đọc lại.

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

Mỗi trang thư viện mẫu dưới đây đều có toàn bộ DESIGN.md để sao chép vào repo, kèm bảng màu và mẫu kiểu chữ.

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

  Linear

  Hệ thống thiết kế của Linear được xây dựng ưu tiên giao diện tối, dành cho sản phẩm có mật độ thông tin cao phục vụ các đội ngũ kỹ thuật. Bảng màu nền lấy màu đen gần như tuyệt đối làm gốc, gồm #08090a và #0f1011, kết hợp các lớp xám tối nhiều tầng để phân biệt thanh bên, thẻ và bảng điều khiển. Kiểu chữ chỉ dùng Inter Variable, với khoảng cách chữ âm được canh chỉnh chính xác ở các cỡ chữ tiêu đề lớn, còn Berkeley Mono dành cho mã nội dòng. Ngôn ngữ bo góc được giữ ở mức nhỏ có chủ đích, phổ biến nhất là 2–6px, và hình viên thuốc chỉ dành cho huy hiệu và chip trạng thái. Độ nổi được thể hiện bằng viền inset 1px tinh tế và bóng đổ độ mờ thấp thay vì các lớp xếp chồng mạnh mẽ. Màu CTA chính là màu chàm đặc trưng của Linear, #5e6ad2, được dùng cho nút Sign Up và các liên kết quan trọng.

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

• 
  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