Kỹ năng nếm thử

Khung giao diện người dùng chống trượt cho tác nhân AI

Nhờ có Kimi (Moonshot AI), Người bạn nguồn mở của chúng tôi, vì đã hỗ trợ kỹ năng nếm thử! Với thông số 2,8T, tầm nhìn gốc và cửa sổ ngữ cảnh 1 triệu mã thông báo, Kimi K3 mang lại hiệu suất vượt trội trong quá trình mã hóa dài hạn, công việc tri thức và lý luận.

Nhận khóa Kimi API. Người sử dụng kỹ năng nếm có được 10% tiền thưởng API tín dụng trong lần mua hàng đầu tiên của họ.

Nhà tài trợ

	giao diện.dev · Một tạp chí kỹ thuật thiết kế của Jakub Krehel
	React bit · Các thành phần hoạt hình React dành cho giao diện sáng tạo
	Emil Kowalski · hoạt hình.dev
	IMG.LY · Biên tập viên sáng tạo SDK
	Đã gửi.dm · API nhắn tin cho SMS, WhatsApp và RCS

_{Trở thành nhà tài trợ}

Di động Kỹ năng đại lý nâng cấp các giao diện do AI xây dựng: bố cục, kiểu chữ, chuyển động và khoảng cách mạnh mẽ hơn thay vì giao diện người dùng trông giống như bản mẫu. Kho lưu trữ này cũng bao gồm kỹ năng tạo hình ảnh cho các bảng tham khảo (web, điện thoại di động, bộ công cụ thương hiệu). Ghép nối chúng với Trò chuyệnHình ảnh GPT hoặc các trình tạo tương tự, sau đó chuyển các khung cho Codex, Cursor hoặc Claude Code để triển khai.

     

Tuyên bố miễn trừ trách nhiệm

Taste Skill không có dự án mã thông báo, tiền xu hoặc tiền điện tử chính thức. Bất kỳ mã thông báo nào sử dụng tên, hình ảnh hoặc dự án của tôi đều không được liên kết và không được tôi xác nhận.

_{Tuyên bố miễn trừ trách nhiệm · cài đặt · Kỹ năng · Cài đặt · Ví dụ · Nhà tài trợ · Nghiên cứu · Câu hỏi thường gặp · Giấy phép}

Phản hồi & Đóng góp

Chúng tôi rất mong nhận được phản hồi của bạn. Đề xuất và báo cáo lỗi:

• Mở Yêu cầu hoặc Vấn đề kéo trên GitHub
• DM @lexnlin hoặc @blueemi99
• Gửi email cho chúng tôi tại xin chà[email protected]

Đang cài đặt

các npx skills add CLI quét skills/ thư mục trong repo này, vì vậy tất cả các kỹ năng bên dưới (tạo mã và tạo hình ảnh) đều cài đặt theo cùng một cách.

npx skills add https://github.com/Leonxlnx/taste-skill

Cài đặt một kỹ năng duy nhất bằng nó tên cài đặt (cái name: trường bên trong phần đầu của KỸ NĂNG, không phải tên thư mục):

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Bạn cũng có thể sao chép bất kỳ SKILL.md vào dự án của bạn hoặc dán nó vào các cuộc hội thoại ChatGPT/Codex.

Cập nhật từ phiên bản trước

Mặc định taste-skill (tên cài đặt design-taste-frontend) bây giờ là v2 (thử nghiệm), một bản viết lại đáng kể của v1 gốc. Nếu bạn đã cài đặt v1, chỉ cần chạy lại lệnh cài đặt và bạn sẽ được nâng cấp:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Tên cài đặt không thay đổi nên không cần cập nhật tập lệnh. SKILL.md mới hơn thay thế cái cũ hơn.

Nếu bạn phụ thuộc vào hành vi chính xác của v1 và muốn ghim nó một cách rõ ràng:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

Xem CHANGELOG.md để biết sự khác biệt đầy đủ từ v1 đến v2 và lý do.

Kỹ năng

Mỗi kỹ năng làm một công việc; bạn không cần tất cả chúng cùng một lúc. Kỹ năng thực hiện mã đầu ra. Kỹ năng tạo hình ảnh chỉ xuất ra hình ảnh tham khảo.

các Install name cột là giá trị chính xác bạn chuyển đến --skill.

Kỹ năng (thư mục)	Tên cài đặt	Mô tả
kỹ năng nếm thử	design-taste-frontend	🆕 v2 (thử nghiệm) - viết lại đáng kể kỹ năng mặc định. Đọc bản tóm tắt, suy ra ngôn ngữ thiết kế, điều chỉnh ba mặt số (VARIANCE / MOTION / DENSITY). Suy luận ngắn gọn, bản đồ hệ thống thiết kế, lệnh cấm em-dash cứng, khung mã GSAP chuẩn, giao thức kiểm tra thiết kế lại, kiểm tra nghiêm ngặt trước chuyến bay. Tích cực lặp lại hướng tới phiên bản ổn định v2.0.0.
hương vị-kỹ năng-v1	design-taste-frontend-v1	Phiên bản v1 ban đầu của kỹ năng vị giác, được bảo tồn cho các dự án tùy thuộc vào hành vi chính xác của nó. Chỉ sử dụng nếu mặc định v2 phá vỡ điều gì đó cụ thể trong quy trình làm việc của bạn.
gpt-skill	gpt-taste	Biến thể chặt chẽ hơn cho GPT/Codex: phương sai bố cục cao hơn, hướng GSAP mạnh hơn, chống trượt mạnh mẽ.
kỹ năng hình ảnh thành mã	image-to-code	Quy trình ưu tiên hình ảnh: tạo các tham chiếu trang web, phân tích chúng, sau đó triển khai giao diện người dùng cho phù hợp.
kỹ năng thiết kế lại	redesign-existing-projects	Các dự án hiện có: kiểm tra giao diện người dùng trước, sau đó sửa bố cục, khoảng cách, phân cấp, kiểu dáng.
kỹ năng mềm	high-end-visual-design	Giao diện người dùng bóng bẩy, êm dịu, đắt tiền với độ tương phản nhẹ nhàng hơn, khoảng trắng, phông chữ cao cấp, chuyển động lò xo.
kỹ năng đầu ra	full-output-enforcement	Khi mô hình gửi tác phẩm chưa hoàn thành một nửa: đầu ra đầy đủ, không có nhận xét giữ chỗ.
kỹ năng tối giản	minimalist-ui	Giao diện người dùng sản phẩm biên tập (Ý niệm/Rung cảm tuyến tính), bảng màu hạn chế, cấu trúc sắc nét.
kỹ năng tàn bạo	industrial-brutalist-ui	Ngôn ngữ máy móc cứng rắn: kiểu Thụy Sĩ, độ tương phản sắc nét, bố cục mang tính thử nghiệm.
kỹ năng khâu	stitch-design-taste	Các quy tắc tương thích với Google Stitch, bao gồm cả tùy chọn DESIGN.md định dạng xuất khẩu.

Kỹ năng tạo hình ảnh

Chúng chỉ tạo ra hình ảnh thiết kế (không có mã). Sử dụng với Hình ảnh ChatGPT, chế độ hình ảnh Codex hoặc bất kỳ tác nhân nào tạo hình ảnh.

Kỹ năng (thư mục)	Tên cài đặt	Mô tả
imagegen-frontend-web	imagegen-frontend-web	Cấu trúc trang web: hero, landing, nhiều phần với kiểu chữ mạnh mẽ, khoảng cách, hướng nghệ thuật chống trượt.
imagegen-frontend-mobile	imagegen-frontend-mobile	Màn hình và luồng trên thiết bị di động: iOS/Android/đa nền tảng, mô hình mô phỏng, loại có thể đọc được, bộ mạch lạc.
bộ nhãn hiệu	brandkit	Bảng bộ thương hiệu: hướng dẫn logo, bảng màu, loại, ứng dụng nhận dạng trên các danh mục.

Tôi nên sử dụng cái nào?

• Bắt đầu với kỹ năng nếm thử để có sự mặc định chung an toàn nhất. (Bây giờ đang thử nghiệm v2 - xem điều gì đã thay đổi trong ĐỔI ĐỔI.)
• Nếu bạn phụ thuộc vào hành vi chính xác của kỹ năng nếm thử ban đầu, hãy cài đặt hương vị-kỹ năng-v1 thay vào đó.
• sử dụng gpt-hương vị khi bạn muốn các quy tắc theo định hướng GPT/Codex chặt chẽ hơn và việc thực thi chuyển động/bố cục.
• sử dụng kỹ năng hình ảnh thành mã cho hình ảnh → phân tích → quy trình làm việc của trang web mã.
• sử dụng kỹ năng thiết kế lại để cải thiện cơ sở mã hiện có thay vì tạo kiểu cho trường xanh.
• Thêm kỹ năng mềm, kỹ năng tối giảnhoặc kỹ năng tàn bạo khi hướng trực quan đã được chọn.
• Thêm kỹ năng đầu ra nếu tác nhân tiếp tục cắt bớt đầu ra.
• sử dụng imagegen-frontend-web, imagegen-frontend-mobilehoặc bộ nhãn hiệu khi sản phẩm được giao hình ảnh (comps, Flow, bảng nhận dạng), sau đó chuyển kết quả cho tác nhân mã hóa của bạn.

Mẹo về hình ảnh đầu tiên

cho kỹ năng hình ảnh thành mã, nêu rõ quy trình trong dấu nhắc, ví dụ: follow the skill: generate images, then analyze, then code.

Trò chuyện Hình ảnh GPT và Codex

Đính kèm hoặc dán imagegen-frontend-web, imagegen-frontend-mobilehoặc brandkit và yêu cầu các khung hình bạn cần, sau đó cung cấp kết xuất cho Codex, Cursor hoặc Claude Code. sử dụng kỹ năng hình ảnh thành mã khi bạn muốn một quy trình làm việc vừa tạo tham chiếu vừa triển khai trang web bằng mã.

Cài đặt (chỉ kỹ năng nếm thử)

Các số ở đầu tập tin là các mặt số từ 1 đến 10:

• DESIGN_VARIANCE: Thử nghiệm bố cục (thấp hơn: căn giữa/sạch sẽ · cao hơn: bất đối xứng/hiện đại).
• MOTION_INTENSITY: Độ sâu hoạt ảnh (thấp hơn: di chuột · cao hơn: cuộn/từ tính).
• VISUAL_DENSITY: Thông tin trên mỗi khung nhìn (thấp hơn: rộng rãi · cao hơn: bảng điều khiển dày đặc).

Ví dụ

Được tạo ra bằng kỹ năng nếm thử:

Hỗ trợ dự án

Nếu Taste Skill giúp bạn, hãy cân nhắc tài trợ:

Nhà tài trợ trên GitHub

Nhà tài trợ cộng đồng

Nghiên cứu

Viết nền đã định hình những kỹ năng này trong cuộc sống research/.

Câu hỏi thường gặp

Điều này khác với các kỹ năng thiết kế AI khác như thế nào?
Nhiều biến thể chuyên biệt, nút xoay có thể điều chỉnh các kỹ năng chính, quy tắc chống lặp lại được thông qua bởi nghiên cứu chuyên dụng. Tất cả đều là bất khả tri về khung trên các tác nhân mã hóa chính.

Nó có hoạt động với React, Vue, Svelte không?
Đúng. Mục đích thiết kế nhắm mục tiêu quy tắc, không phải một khung duy nhất API.

SKILL.md là gì?
Một tác nhân tệp lệnh di động có thể tải tự động; cài đặt qua npx skills add hoặc bằng cách sao chép vào kho lưu trữ hoặc cuộc trò chuyện.

Cài đặt kỹ năng tạo hình ảnh với npx skills add?
Vâng. Họ sống dưới skills/ cùng với các kỹ năng viết mã để cùng một CLI phát hiện ra chúng.

Giấy phép

Giấy phép MIT · Bản quyền (c) 2026 Leonxlnx