prompts.chatprompts.chatprompts.chat
BotPromptKỹ năngQuy trìnhDanh mụcThẻCao thủ PromptPhong cách
SáchCho trẻ emNhà phát triển
Đăng nhập
CC0 2026 prompts.chat
DeepWikiHướng dẫn...Tài liệuAPIQuyền riêng tưĐiều khoảnHỗ trợGiới thiệuGitHub

Kiến trúc Token (Token Architecture)

Lấy kết quả kiểm toán JSON thô từ Giai đoạn 1 và biến đổi nó thành một hệ thống token được đặt tên, có cấu trúc với phân cấp rõ ràng (nguyên thủy → ngữ nghĩa → thành phần). Đây là bước mà thực trạng lộn xộn của mã nguồn được sắp xếp quy củ thành một ngôn ngữ thiết kế chuẩn mực. Claude cũng sẽ gắn cờ những gì cần đổi tên, gộp chung hoặc loại bỏ.

N
@gokbeyinac
about 4 hours agolúc 15:32 30 tháng 10, 2026
Design•DesignUI/UX
1

Nội dung

Bạn là một kiến trúc sư hệ thống thiết kế (design systems architect). Tôi đang cung cấp cho bạn một tệp JSON kiểm toán thiết kế thô được trích xuất từ một cơ sở mã nguồn hiện có. Công việc của bạn là biến sự hỗn loạn này thành một kiến trúc token có cấu trúc chặt chẽ.

## Đầu vào
[Dán kết quả đầu ra JSON của Giai đoạn 1 vào đây, hoặc tham chiếu tới tệp]

## Phân cấp Token (Token Hierarchy)

Hãy thiết kế một hệ thống token 3 tầng:

### Tầng 1 — Token Nguyên thủy (Primitive Tokens - các giá trị thô)
Các giá trị được đặt tên và bất biến. Không mang ý nghĩa ngữ cảnh sử dụng.
- Màu sắc: `color-gray-100`, `color-blue-500`
- Khoảng cách: `space-1` đến `space-N`
- Kích thước phông chữ: `font-size-xs` đến `font-size-4xl`
- Độ bo góc: `radius-sm`, `radius-md`, `radius-lg`

### Tầng 2 — Token Ngữ nghĩa (Semantic Tokens - ý nghĩa theo ngữ cảnh)
Ánh xạ các token nguyên thủy vào mục đích sử dụng. Các giá trị này sẽ thay đổi khi chuyển đổi giữa các giao diện chủ đề (themes).
- `color-text-primary` → `color-gray-900`
- `color-bg-surface` → `color-white`
- `color-border-default` → `color-gray-200`
- `spacing-section` → `space-16`
- `font-heading` → `font-size-2xl` + `font-weight-bold` + `line-height-tight`

### Tầng 3 — Token Thành phần (Component Tokens - giới hạn phạm vi trong từng thành phần)
- `button-padding-x` → `spacing-4`
- `button-bg-primary` → `color-brand-500`
- `card-radius` → `radius-lg`
- `input-border-color` → `color-border-default`

## Quy tắc Hợp nhất (Consolidation Rules)
1. Gộp các giá trị chênh lệch nhau trong phạm vi 2px (ví dụ: 14px và 15px → chọn một giá trị, ghi chú rõ đã chọn giá trị nào)
2. Thiết lập một thang đo khoảng cách nhất quán (khuyến nghị lấy bội số cơ sở 4px, gắn cờ các giá trị lệch chuẩn)
3. Thu gọn bảng màu xuống mức ≤60 token tổng cộng (gắn cờ những màu cần ngừng sử dụng)
4. Chuẩn hóa thang đo kích thước phông chữ theo một cấp số tiến hợp lý
5. Tạo các mẫu cài đặt sẵn (presets) cho hoạt ảnh có đặt tên rõ ràng từ các giá trị dùng lẻ tẻ một lần

## Định dạng Đầu ra

Cung cấp:
1. **Bản đồ token hoàn chỉnh** ở định dạng JSON — đầy đủ cả ba tầng kèm theo các tham chiếu
2. **Bảng chuyển đổi (Migration table)** — giá trị hiện tại → tên token mới → những tệp nào đang sử dụng nó
3. **Danh sách ngừng sử dụng (Deprecation list)** — các giá trị cần loại bỏ kèm theo gợi ý thay thế
4. **Nhật ký quyết định (Decision log)** — mọi phán đoán bạn đã đưa ra (tại sao bạn lại gộp X vào Y, v.v.)

Đối với mỗi quyết định, hãy giải thích rõ sự đánh đổi. Tôi có thể không đồng tình với một số lựa chọn hợp nhất
của bạn, vì vậy sự minh bạch quan trọng hơn việc tỏ ra tự tin tuyệt đối.

Bình luận (0)

Kỹ năng liên quan

Thiết kế Trang Kiểm thử Tính năng cho Enterprise WeChat/DingTalk

Kỹ năng

Tạo bản thiết kế trang kiểm thử tính năng cho Enterprise WeChat/DingTalk tập trung vào quản lý danh bạ, quản lý lịch/lịch trình và gửi/nhận tin nhắn. Thiết kế phải thân thiện với người dùng, bóng bẩy và mang đậm tính công nghệ.

L@Leo
0

Công cụ Kiểm toán Độ tương phản Màu sắc cho Khả năng Tiếp cận

Kỹ năng

Kiểm toán các cặp màu tiền cảnh/hậu cảnh theo độ tương phản WCAG 2.x (mức AA và AAA cho văn bản thường và văn bản lớn), báo cáo tỷ lệ và kết quả đạt/không đạt, đồng thời lưu ý các rủi ro đối với người mù màu. Sử dụng khi kiểm tra bảng màu giao diện người dùng (UI palette), design token, hoặc hỏi "màu xám trên nền trắng này có dễ đọc không?". Bao gồm công cụ kiểm tra độ tương phản bằng thư viện chuẩn Python có hỗ trợ --self-test.

F@f
0

Kỹ năng Tái tạo Thiết kế Trang web

Kỹ năng

Kỹ năng này giúp các tác tử AI tái tạo lại thiết kế trang web dựa trên những hình ảnh cảm hứng do người dùng tải lên, đảm bảo sự hòa quyện giữa phong cách nguyên bản và dấu ấn cá nhân.

H@hrishirajnagawade
0