{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}

Thiết kế Md

Tác giả/xác thực/xuất các tệp thông số mã thông báo DESIGN.md của Google.

Siêu dữ liệu kỹ năng

Nguồn	Đi kèm (được cài đặt theo mặc định)
Đường dẫn

skills/creative/design-md ` | | Phiên bản |

1.0.0 ` | | Tác giả | Đại lý Hermes | | Giấy phép | MIT | | Nền tảng | Linux, macOS, Windows | | Thẻ |

design

, `design-system

, `tokens

, `ui

, `accessibility

, `wcag

, `tailwind

, `dtcg

, Google | | Kỹ năng liên quan | XPROTECTX13XPROTECTX, XPROTECTX14XPROTECTX, XPROTECTX15XPROTECTX, XPROTECTX16XPROTECTX |

Tham khảo: đầy đủ SKILL.md

thông tin

Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.

DESIGN.md Kỹ năng

DESIGN.md là thông số kỹ thuật mở của Google (Apache-2.0, `Google-labs-code/design.md

) dành cho mô tả nhận dạng trực quan cho các tác nhân mã hóa. Một tập tin kết hợp:

• Vấn đề trước của YAML — mã thông báo thiết kế có thể đọc được bằng máy (giá trị quy chuẩn)
• Nội dung đánh dấu — cơ sở lý luận mà con người có thể đọc được, được sắp xếp thành các phần chuẩn

Mã thông báo cung cấp giá trị chính xác. Văn xuôi cho các tác nhân biết tại sao những giá trị đó tồn tại và làm thế nào để áp dụng chúng. Cấu trúc xơ vải CLI ( `npx @Google/design.md

) + độ tương phản WCAG, khác biệt để hồi quy và xuất sang Tailwind hoặc W3C DTCG JSON.

Khi nào nên sử dụng kỹ năng này

• Người dùng yêu cầu tệp DESIGN.md, mã thông báo thiết kế hoặc thông số hệ thống thiết kế
• Người dùng muốn giao diện người dùng/thương hiệu nhất quán trên nhiều dự án hoặc công cụ
• Người dùng dán DESIGN.md hiện có và yêu cầu tìm lỗi mã nguồn, tìm khác biệt, xuất hoặc mở rộng nó
• Người dùng yêu cầu chuyển hướng dẫn kiểu sang định dạng mà tác nhân có thể sử dụng
• Người dùng muốn xác thực khả năng truy cập độ tương phản / WCAG trên bảng màu của họ

Đối với các ví dụ về bố cục hoặc cảm hứng trực quan thuần túy, hãy sử dụng `popular-web-designs

thay vào đó. Để xử lý và nếm thử khi thiết kế một tạo phẩm HTML một lần từ đầu (nguyên mẫu, tài liệu, trang đích, lab thành phần), sử dụng `Claude-design

. Kỹ năng này dành cho tệp thông số kỹ thuật chính thức.

Giải phẫu tập tin

`md

version: alpha name: Heritage description: Architectural minimalism meets journalistic gravitas. colors: primary: "#1A1C1E" secondary: "#6C7278" tertiary: "#B8422E" neutral: "#F7F5F2" typography: h1: fontFamily: Public Sans fontSize: 3rem fontWeight: 700 lineHeight: 1.1 letterSpacing: "-0.02em" body-md: fontFamily: Public Sans fontSize: 1rem rounded: sm: 4px md: 8px lg: 16px spacing: sm: 8px md: 16px lg: 24px components: button-primary: backgroundColor: "{colors.tertiary}" textColor: "#FFFFFF" rounded: "{rounded.sm}" padding: 12px button-primary-hover: backgroundColor: "{colors.primary}"

Overview

Architectural Minimalism meets Journalistic Gravitas...

Colors

• Primary (#1A1C1E): Deep ink for headlines and core text.
• Tertiary (#B8422E): "Boston Clay" — the sole driver for interaction.

Typography

Public Sans for everything except small all-caps labels...

Components``button-primary

` is the only high-emphasis action on a page...

`

Các loại mã thông báo

Loại	Định dạng	Ví dụ
Màu sắc

• hex (sRGB) |

"#1A1C1E" | | Kích thước | số + đơn vị (px

, `em

, `rem

) | `48px

,

-0.02em ` | | Tham chiếu mã thông báo |

{path.to.token} ` |

{colors.primary} | | Kiểu chữ | đối tượng với fontFamily

, `fontSize

, `fontWeight

, `lineHeight

, `letterSpacing

, `fontFeature

, fontVariation | xem ở trên |

Danh sách trắng thuộc tính thành phần: `backgroundColor

, `textColor

, `typography

, `rounded

, `padding

, `size

, `height

, `width

. Các biến thể (di chuột, hoạt động, được nhấn) là các mục thành phần riêng biệt với các tên khóa liên quan ( `button-primary-hover

), không lồng nhau.

Thứ tự phần Canonical

Các phần là tùy chọn, nhưng các phần hiện tại PHẢI xuất hiện theo thứ tự này. trùng lặp tiêu đề từ chối tập tin.

1. Tổng quan (bí danh: Thương hiệu & Phong cách)
2. Màu sắc
3. Kiểu chữ
4. Bố cục (bí danh: Bố cục & Khoảng cách)
5. Độ cao & Độ sâu (bí danh: Độ cao)
6. Hình dạng
7. Linh kiện
8. Nên và không nên

Các phần không xác định được giữ nguyên, không bị lỗi. Tên mã thông báo không xác định được chấp nhận nếu loại giá trị là hợp lệ. Thuộc tính thành phần không xác định tạo ra cảnh báo.

Quy trình làm việc: tạo một DESIGN.md mới

1. Hỏi người dùng (hoặc suy ra) tông màu thương hiệu, màu nhấn và kiểu chữ hướng. Nếu họ cung cấp một trang web, hình ảnh hoặc cảm xúc, hãy dịch nó sang hình dạng mã thông báo ở trên.
2. **Viết `DESIGN.md

** trong thư mục gốc dự án của họ bằng `write_file

. Luôn luôn bao gồm name: và `colors:

; các phần khác tùy chọn nhưng được khuyến khích. 3. Sử dụng tham chiếu mã thông báo (

{colors.primary}

) trong phần `components:

thay vì gõ lại các giá trị hex. Giữ bảng màu một nguồn duy nhất. 4. Lông nó (xem bên dưới). Sửa mọi tham chiếu bị hỏng hoặc lỗi WCAG trước khi quay lại. 5. Nếu người dùng đã có dự án, hãy viết thêm Tailwind hoặc DTCG xuất bên cạnh tệp ( `tailwind.theme.JSON

, `tokens.JSON

).

Quy trình làm việc: lint/diff/exportCLI là

@Google/design.md (Nút). Sử dụng npx

• không cần cài đặt toàn cầu.

# Validate structure + token references + WCAG contrast
npx -y @Google/design.md lint DESIGN.md

# Compare two versions, fail on regression (exit 1 = regression)
npx -y @Google/design.md diff DESIGN.md DESIGN-v2.md

# Export to Tailwind theme JSON
npx -y @Google/design.md export --format tailwind DESIGN.md > tailwind.theme.JSON

# Export to W3C DTCG (Design Tokens Format Module) JSON
npx -y @Google/design.md export --format dtcg DESIGN.md > tokens.JSON

# Print the spec itself — useful when injecting into an agent prompt
npx -y @Google/design.md spec --rules-only --format JSON

`
``Tất cả các lệnh đều chấp nhận 

-
` cho stdin. 
`lint
` trả về lỗi thoát 1. Sử dụng
Gắn cờ 

--format JSON
` và phân tích kết quả đầu ra nếu bạn cần báo cáo kết quả
về mặt cấu trúc.

### Tham chiếu quy tắc tìm lỗi mã nguồn (7 quy tắc nắm bắt được điều gì)
- 
`broken-ref
` (lỗi) - 

\{colors.missing}
` trỏ đến mã thông báo không tồn tại
- 
`duplicate-section
` (lỗi) - 

## Heading
` tương tự xuất hiện hai lần
- 
`invalid-color

, 
`invalid-dimension

, 
`invalid-typography
` (lỗi)
- 
`wcag-contrast
` (cảnh báo/thông tin) — thành phần 
`textColor
` so với 
`backgroundColor

  tỷ lệ so với WCAG AA (4,5:1) và AAA (7:1)
- 
`unknown-component-property
` (cảnh báo) — nằm ngoài danh sách trắng ở trên

Khi người dùng quan tâm đến khả năng truy cập, hãy gọi điều này một cách rõ ràng trong
tóm tắt - Các phát hiện của WCAG là lý do quan trọng nhất để sử dụng CLI.

## cạm bẫy
- **Không lồng các biến thể thành phần.** 
`button-primary.hover
` sai;``button-primary-hover
` làm chìa khóa anh em là đúng.
- **Màu hex phải là chuỗi trích dẫn.** YAML nếu không sẽ bị nghẹt thở trên 

#
` hoặc
  cắt bớt các giá trị như 

#1A1C1E
` một cách kỳ lạ.
- **Kích thước phủ định cũng cần dấu ngoặc kép.** 
`letterSpacing: -0.02em
` phân tích cú pháp dưới dạng
  luồng YAML - viết 
`letterSpacing: "-0.02em"

.
- **Thứ tự các phần được thực thi.** Nếu người dùng đưa cho bạn văn xuôi theo thứ tự ngẫu nhiên,
  sắp xếp lại nó để khớp với danh sách chuẩn trước khi lưu.
- **
`version: alpha
` là phiên bản thông số kỹ thuật hiện tại** (kể từ tháng 4 năm 2026). Thông số kỹ thuật
  được đánh dấu alpha — hãy chú ý đến những thay đổi đột phá.
- **Tham chiếu mã thông báo được giải quyết bằng đường dẫn chấm.** 

\{colors.primary}
` hoạt động;
\{primary}
` thì không.

## Nguồn thông tin xác thực
- Kho lưu trữ: https://GitHub.com/Google-labs-code/design.md (Apache-2.0)
- CLI: 

@Google/design.md
` trên npm
- Giấy phép của các tệp DESIGN.md được tạo: bất kể dự án của người dùng sử dụng gì;
  bản thân thông số kỹ thuật là Apache-2.0.