Mở mã nguồn bộ Prompt kỹ thuật 'Claude Design' giúp tối ưu hóa thiết kế giao diện

System prompt được kỹ thuật đảo ngược (reverse-engineered) của Claude Design từ Anthropic.

Một system prompt và thư viện kỹ năng giúp biến LLM thành một cộng sự thiết kế có quan điểm riêng, chú trọng khả năng truy cập (accessibility) và kháng lại các nội dung AI-slop (nội dung rác do AI tạo ra).

Mã nguồn mở, giấy phép MIT. Chỉ cần đưa prompt này vào bất kỳ LLM nào hỗ trợ system prompt (Claude, GPT, Gemini, các mô hình chạy cục bộ) và kết hợp với các kỹ năng theo quy trình khi cần.

Đây là gì

Hầu hết các prompt "trợ lý thiết kế" đều tạo ra kết quả theo khuôn mẫu SaaS chung chung — gradient gắt, trang trí bằng emoji, các thẻ bo góc với đường viền bên trái, kiểu chữ Inter ở khắp mọi nơi. Prompt này từ chối rõ ràng các khuôn mẫu đó và thay thế chúng bằng một triết lý thiết kế hoàn chỉnh bao gồm:

Cùng với 14 kỹ năng theo quy trình mà tác nhân (agent) có thể gọi để thực hiện công việc sản xuất, trích xuất và đánh giá.

Những gì bao gồm

Cách sử dụng

Sử dụng trực tiếp system prompt

Dán nội dung của system-prompt.md làm system prompt cho bất kỳ LLM nào hỗ trợ tính năng này. Tác nhân sẽ tuân theo triết lý thiết kế và tham chiếu các kỹ năng theo tên khi tác vụ phù hợp.

Sử dụng các kỹ năng như một quy trình

Mỗi kỹ năng trong thư mục skills/ là một quy trình theo từng giai đoạn độc lập. Tên kỹ năng chính là yếu tố kích hoạt — khi yêu cầu của người dùng khớp với mô tả kỹ năng, tác nhân sẽ tải kỹ năng đó và thực hiện theo.

Các kỹ năng được chia thành ba nhóm:

Sản xuất (Production) — xây dựng sản phẩm: discovery-questions (câu hỏi khám phá) · frontend-aesthetic-direction (định hướng thẩm mỹ frontend) · wireframe (khung xương) · make-a-deck (tạo slide) · make-a-prototype (tạo nguyên mẫu) · make-tweakable (tạo khả năng tùy chỉnh) · generate-variations (tạo các biến thể)

Hệ thống (System) — trích xuất cấu trúc: design-system-extract (trích xuất hệ thống thiết kế) · component-extract (trích xuất thành phần)

Đánh giá (Review) — kiểm tra và sửa lỗi: accessibility-audit (kiểm tra khả năng truy cập) · ai-slop-check (kiểm tra nội dung rác AI) · hierarchy-rhythm-review (đánh giá phân cấp và nhịp điệu) · interaction-states-pass (kiểm tra trạng thái tương tác) · polish-pass (hoàn thiện)

Các kỹ năng có thể được liên kết với nhau. Một quy trình làm việc mới điển hình:

Một quy trình nhận diện thương hiệu:

Điều chỉnh cho nền tảng của bạn

Prompt này giả định một môi trường thiết kế xuất ra HTML (tương tự như công cụ thiết kế của Claude.ai). Nếu môi trường mục tiêu của bạn khác — một plugin Figma, một trợ lý chỉ dùng mã nguồn, hay một huấn luyện viên thiết kế chỉ qua trò chuyện — bạn sẽ cần điều chỉnh các chương quy trình làm việc và các tham chiếu công cụ. Các nguyên tắc (chương 5–16) có thể áp dụng cho bất kỳ phương tiện nào.

Hiệu chỉnh mô hình

Biến thể claude/ được hiệu chỉnh cho các mô hình tiên phong hiện tại của Anthropic (Fable 5 và dòng Opus 4.7/4.8), vốn tuân thủ hướng dẫn theo nghĩa đen hơn và cần ít sự thúc ép hơn so với các thế hệ trước:

Trên các mô hình cũ hơn (Claude Opus/Sonnet 4.6 trở về trước, hoặc các mô hình không phải của Anthropic), cách diễn đạt nhẹ nhàng hơn có thể không kích hoạt đủ hiệu quả — hãy khôi phục ngôn ngữ mệnh lệnh mạnh mẽ hơn nếu bạn thấy mô hình bỏ qua các vòng câu hỏi hoặc đánh giá. Biến thể codex/ được duy trì riêng biệt và không bị ảnh hưởng bởi các lưu ý này.

Tóm tắt các nguyên tắc thiết kế

20 chương trong system-prompt.md bao gồm:

Đóng góp

Rất hoan nghênh các Issues và PR. Những đóng góp đặc biệt hữu ích:

Vui lòng giữ nguyên tông giọng vận hành và tránh làm prompt trở nên cồng kềnh — mỗi chương đều phải có lý do tồn tại, đúng theo tiêu chuẩn mà prompt này yêu cầu tác nhân phải tuân thủ.

Giấy phép

MIT — xem tệp LICENSE.

Bạn có thể sử dụng, sửa đổi và phân phối prompt cũng như thư viện kỹ năng này cho bất kỳ mục đích nào, bao gồm cả mục đích thương mại. Không bắt buộc ghi nguồn, nhưng chúng tôi rất trân trọng nếu bạn làm vậy.